temp: adatta il sito sia per telefoni (schwermi verticaluiu piccoli) che per tablet che per desktop
This commit is contained in:
@@ -10,14 +10,16 @@ const cover = computed(() => mediaUrl(props.article.cover))
|
||||
|
||||
<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. -->
|
||||
<NuxtLinkLocale
|
||||
v-if="cover"
|
||||
class="cover-link"
|
||||
:to="`/blog/${article.slug}`"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<img
|
||||
v-if="cover"
|
||||
class="cover"
|
||||
:src="cover"
|
||||
:alt="article.cover?.alternativeText ?? ''"
|
||||
@@ -25,7 +27,6 @@ const cover = computed(() => mediaUrl(props.article.cover))
|
||||
:height="article.cover?.height ?? undefined"
|
||||
loading="lazy"
|
||||
>
|
||||
<span v-else class="cover placeholder" />
|
||||
</NuxtLinkLocale>
|
||||
|
||||
<p v-if="article.category" class="kicker">{{ article.category.name }}</p>
|
||||
@@ -60,11 +61,9 @@ const cover = computed(() => mediaUrl(props.article.cover))
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
/* Without a cover the kicker leads the card, so it needs no offset. */
|
||||
.cover-link + .kicker,
|
||||
.cover-link + h2 {
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user