lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Switch to Astro

Browse source 
Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
This commit is contained in:
Louis Hollingworth 2022-10-01 19:35:07 +01:00
parent 6741f91f5c
commit 9241dc0783
Signed by: lucxjo
GPG key ID: B140F8923EF88DA9
46 changed files with 3009 additions and 5145 deletions
Download patch file Download diff file Expand all files Collapse all files

73
components/LinkCard.vue
View file

@ -1,73 +0,0 @@
<template>
<a v-if="isExternal" target="_blank" rel="nofollow noreferrer" class="card" :href="to">
<p>{{ title }} →</p>
</a>
<NuxtLink v-else v-bind="$props" class="card">
<p>{{ title }} →</p>
</NuxtLink>
</template>
<script>
import { RouterLink } from 'vue-router';
export default {
props: {
title: {
type: String,
required: true,
},
to: {
type: String,
required: true,
},
...RouterLink.props,
},
computed: {
isExternal() {
return (
typeof this.to === 'string' && this.to.startsWith('http')
);
},
},
};
</script>
<style lang="scss" scoped>
@use '../assets/styles/colours';
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 2px solid #000;
border-radius: 20px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.card:link,
.card:visited {
color: #000;
}
.card:hover,
.card:focus,
.card:active {
color: colours.$accent-colour-light !important;
border-color: colours.$accent-colour-light;
}
@media (max-width: 600px) {
.card {
margin: 0.5rem;
padding: 1.25rem;
width: 9rem;
}
}
</style>

56
components/NavBar.vue
View file

@ -1,56 +0,0 @@
<template>
<nav>
<div v-for="link in links" :key="link">
<div class="nav-button">
<NuxtLink :to="link.to">
<img :src="link.img.name" :alt="link.img.alt" />
<p>{{ link.name }}</p>
</NuxtLink>
</div>
</div>
</nav>
</template>
<style lang="scss" scoped>
@use '../assets/styles/colours';
nav {
margin: 0 auto;
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: center;
align-items: center;
}
nav :hover {
filter: colours.$filter-accent-colour-light;
}
nav a {
text-decoration: none;
color: black;
}
p {
padding: 0;
margin: 0;
}
.nav-button {
margin: 0 1rem;
padding: 0.5rem;
}
</style>
<script>
const NavBar = resolveComponent('NavBar');
export default {
props: {
links: {
type: Array,
required: true,
},
},
};
</script>