temp: adatta il sito sia per telefoni (schwermi verticaluiu piccoli) che per tablet che per desktop

This commit is contained in:
2026-08-25 16:29:25 +02:00
parent abeabb3a44
commit d52e62fe7d
6 changed files with 141 additions and 39 deletions
+6 -7
View File
@@ -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;
}
+11 -2
View File
@@ -35,19 +35,28 @@ function onChange(event: Event) {
select {
appearance: none;
padding: 0.35rem 1.6rem 0.35rem 0.7rem;
padding: 0.4rem 1.7rem 0.4rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 0;
background: transparent;
color: var(--color-body);
font: inherit;
font-size: 0.75rem;
/* Safari on iOS zooms the page when a control smaller than 16px is tapped,
so the picker stays at 1rem on phones and shrinks only from tablet up. */
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
@media (min-width: 48rem) {
select {
padding: 0.35rem 1.6rem 0.35rem 0.7rem;
font-size: 0.75rem;
}
}
select:hover {
border-color: var(--color-ink);
color: var(--color-ink);