davide
55b70f0805
Centred wordmark over a rule of category links, a lead article above a grid of cards, centred article headers over a narrow reading column, and a footer split into columns. Neutral warm-grey palette with a serif display face for headings and small uppercase labels for metadata.
86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
|
|
|
const props = defineProps<{ article: ArticleSummary }>()
|
|
|
|
const mediaUrl = useMediaUrl()
|
|
const cover = computed(() => mediaUrl(props.article.cover))
|
|
</script>
|
|
|
|
<template>
|
|
<article class="card">
|
|
<NuxtLink class="cover-link" :to="`/blog/${article.slug}`" tabindex="-1" aria-hidden="true">
|
|
<img
|
|
v-if="cover"
|
|
class="cover"
|
|
:src="cover"
|
|
:alt="article.cover?.alternativeText ?? ''"
|
|
:width="article.cover?.width ?? undefined"
|
|
:height="article.cover?.height ?? undefined"
|
|
loading="lazy"
|
|
>
|
|
<span v-else class="cover placeholder" />
|
|
</NuxtLink>
|
|
|
|
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
|
|
|
<h2>
|
|
<NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
|
|
</h2>
|
|
|
|
<p class="kicker date">
|
|
<time :datetime="isoDate(article.publishedAt)">{{ formatDate(article.publishedAt) }}</time>
|
|
</p>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cover-link {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cover {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 5;
|
|
object-fit: cover;
|
|
background: var(--color-surface);
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.cover-link:hover .cover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.placeholder {
|
|
display: block;
|
|
}
|
|
|
|
.kicker {
|
|
margin-top: 1.1rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.5rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
h2 a {
|
|
text-decoration: none;
|
|
background-image: linear-gradient(var(--color-ink), var(--color-ink));
|
|
background-size: 0 1px;
|
|
background-position: 0 100%;
|
|
background-repeat: no-repeat;
|
|
transition: background-size 0.3s ease;
|
|
}
|
|
|
|
h2 a:hover {
|
|
background-size: 100% 1px;
|
|
}
|
|
|
|
.date {
|
|
margin-top: 0.6rem;
|
|
font-weight: 400;
|
|
}
|
|
</style>
|