davide
728e931421
The language switch overlapped the centered logo on narrow viewports (~390px), and article card covers used an overly aggressive 4:5 crop that sliced through text baked into cover images.
95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { ArticleSummary } from '#shared/types/blog'
|
|
import type { Locale } from '#shared/utils/locale'
|
|
import { localePath } from '#shared/utils/locale'
|
|
|
|
const props = withDefaults(defineProps<{ article: ArticleSummary; locale?: Locale }>(), {
|
|
locale: 'it',
|
|
})
|
|
|
|
const mediaUrl = useMediaUrl()
|
|
const cover = computed(() => mediaUrl(props.article.cover))
|
|
const href = computed(() => localePath(props.locale, `/blog/${props.article.slug}`))
|
|
</script>
|
|
|
|
<template>
|
|
<article class="card">
|
|
<!-- No placeholder box when there is no cover: an empty grey rectangle
|
|
reads as a broken image rather than as a deliberate choice. -->
|
|
<NuxtLink
|
|
v-if="cover"
|
|
class="cover-link"
|
|
:to="href"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
>
|
|
<img
|
|
class="cover"
|
|
:src="cover"
|
|
:alt="article.cover?.alt ?? ''"
|
|
loading="lazy"
|
|
>
|
|
</NuxtLink>
|
|
|
|
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
|
|
|
<h2>
|
|
<NuxtLink :to="href">{{ article.title }}</NuxtLink>
|
|
</h2>
|
|
|
|
<p class="kicker date">
|
|
<time :datetime="isoDate(article.publishedAt)">
|
|
{{ formatDate(article.publishedAt, locale) }}
|
|
</time>
|
|
</p>
|
|
</article>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.cover-link {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cover {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 2;
|
|
object-fit: cover;
|
|
background: var(--color-surface);
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.cover-link:hover .cover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Without a cover the kicker leads the card, so it needs no offset. */
|
|
.cover-link + .kicker,
|
|
.cover-link + h2 {
|
|
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>
|