e non dentro un :
restava un bersaglio di 69×17.
Con inline-flex l'altezza minima vale davvero, il collegamento resta
dentro la sua frase e le due righe smettono di sovrapporsi — che è quello
che sarebbe successo portando il riempimento a un rem: 48px di scatola su
righe distanti 24. */
.pie p a,
.pie__firma a { display: inline-flex; align-items: center; min-height: 44px; }
/* la firma ha un filetto sotto: da inline-flex il riempimento inferiore lo
staccherebbe dalle lettere, quindi passa a sottolineatura vera */
.pie__firma a {
border-bottom: 0; padding-bottom: 0;
text-decoration: underline; text-decoration-color: var(--linea-scura-forte);
text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* Su contatti.html l'indirizzo email si fermava a 42,6px: mancavano 1,4
pixel al minimo. Il numero di telefono, nella stessa colonna, ci arrivava
solo perché è su un gradino tipografico più grande. */
.scheda p a {
padding-block: .65rem; border-bottom: 0;
text-decoration: underline; text-decoration-color: var(--linea-forte);
/* lo spessore va fissato: lasciato al carattere, sotto il numero di
telefono in corpo 24 diventerebbe un filo doppio rispetto a prima */
text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* Nella fascia informazioni il numero non è testo in linea ma una casella
dentro una riga flessibile: lì il riempimento allarga davvero la striscia,
e il margine negativo ne restituisce metà. */
.fascia-info a {
padding-block: .7rem; margin-block: -.35rem; border-bottom: 0;
text-decoration: underline; text-decoration-color: rgba(250,246,239,.4);
text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* «Rimuovi la mappa» è una parola sola dentro una nota da 13px */
.mappa__togli { padding-block: .7rem; margin-block: -.35rem; }
/* «oppure aprila direttamente su Google Maps» è l'unica strada per chi i
cookie di Google non li vuole: non può essere il bersaglio più piccolo
del riquadro */
.mappa__box a.alt { padding-block: .55rem; }
}
/* Tetti d'altezza legati alla finestra, non al modo di toccarla: restano
agganciati alla sola larghezza. */
@media (max-width: 940px) {
/* IL PANNELLO ALLERGENI NON SCORRE PIÙ PER CONTO SUO.
Aveva un tetto di 45svh e uno scorrimento proprio, dentro una barra che
aveva a sua volta un tetto e uno scorrimento proprio: due contenitori
scorrevoli uno dentro l'altro, tutti e due con overscroll-behavior:
contain. Per passare da «Arachidi» a «Molluschi», poi al bottone
«Azzera», poi alle categorie servivano tre gesti su tre superfici
diverse, e su iOS il secondo veniva spesso preso dal contenitore
esterno. Adesso a scorrere è soltanto la barra: una superficie sola.
Il pannello resta con l'overflow:hidden della sua regola normale, che
serve all'animazione da 0fr a 1fr e non taglia niente da aperto. */
.all-griglia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
/* IL TETTO DELLA BARRA. Il calc da solo teneva conto della testata e della
barra fissa in fondo, ma lasciava esattamente 1rem di pagina: e 1rem è
quello che lasciava. Con il pannello aperto su un telefono da 667 la
barra si prendeva 502 pixel dei 667 e della lista dei piatti restava una
striscia di sedici. Il min() aggiunge il vincolo che mancava: qualunque
cosa contenga, la barra non passa mai il 45% dell'altezza della finestra.
Misurato a 360×667 col pannello aperto: 81 di testata + 301 di barra + 68
di barra fissa lasciano 218 pixel di lista, cioè una scheda piatto intera
e passa (ne misura 184), dove prima ne restavano sedici. A pannello
chiuso la barra sta sotto il tetto da sola e ne restano 315.
Quello che non entra nel tetto si raggiunge scorrendo dentro la barra,
che ha un solo scorrimento e sa dove finisce. */
.menu-barra__in {
max-height: min(45vh, calc(100vh - var(--h-testata) - var(--h-barra-mob) - 1rem));
max-height: min(45svh, calc(100svh - var(--h-testata) - var(--h-barra-mob) - 1rem));
overflow-y: auto;
/* arrivati in fondo alla barra, il dito non deve mettersi a scorrere la
pagina sotto (e su iOS non deve innescare il "tira per aggiornare") */
overscroll-behavior: contain;
}
/* LA RIGA DEI FILTRI SU UNA RIGA SOLA.
Erano quattro pastiglie, un separatore e il bottone degli allergeni:
circa settecento pixel di contenuto che sotto i 700 di finestra andavano
a capo tre volte, 156 pixel di sola fila di filtri, ed erano loro i due
terzi dell'ingombro della barra. Scorrono di lato come già fa la fila
delle categorie qui sotto: stesso gesto, stesso disegno, e la barra
scende da 317 pixel a 205 su uno schermo da 360 (misurato).
Sopra i 940 la fila ci sta larga e questo blocco non entra in gioco:
nessuno scorrimento compare dove non serve. */
.filtri {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-inline: calc(var(--mx) * -1); padding-inline: var(--mx);
scroll-padding-inline: var(--mx);
/* come la giostra e le categorie: senza, uno swipe oltre l'ultima
pastiglia innesca il gesto "indietro" del telefono */
overscroll-behavior-x: contain;
/* Un contenitore che scorre ritaglia anche in verticale, e il contorno di
fuoco esce di cinque pixel dalla pastiglia (due di spessore più tre di
stacco): senza questa coppia, chi naviga col tabulatore vedrebbe il
contorno tagliato sopra e sotto. Il riempimento gli fa posto, il
margine negativo lo restituisce alla pagina: la barra resta alta
esattamente quanto prima. */
padding-block: 5px; margin-block: -5px;
}
.filtri::-webkit-scrollbar { display: none; }
/* in una fila che non va a capo il valore di serie è "restringiti":
le scritte si spezzerebbero dentro le pastiglie */
.filtri > * { flex: none; }
.btn-allergeni { white-space: nowrap; }
/* Il conteggio dei risultati è l'unica risposta che l'utente riceve dopo
aver filtrato: in fondo a una fila che scorre sarebbe fuori schermo
proprio nel momento in cui serve. Messo per primo, si legge senza
toccare niente. Resta un elemento non raggiungibile col tabulatore,
quindi spostarlo non scombina nessun ordine di navigazione. */
.filtri > [role="status"] { order: -1; }
}
/* TELEFONO GIRATO IN ORIZZONTALE, SULLA PAGINA DEL MENÙ.
Qui nemmeno il tetto basta: su uno schermo alto 375 la testata ne prende
81 e la barra fissa in fondo 68, e qualunque barra dei filtri appiccicata
in mezzo lascia le briciole. Una barra che si porta via metà dello schermo
ha senso finché lo schermo è alto; quando non lo è, la cosa giusta è che
smetta di stare appiccicata e si comporti come il resto della pagina: si
legge, si usa e poi scorre via, e la lista dei piatti si riprende i 227
pixel che restano fra testata e barra fissa (misurati a 667×375, contro i
sedici di prima — e i sedici restavano tali anche col pannello chiuso).
Ricerca, filtri e categorie continuano a funzionare identici — cambia solo
che per tornarci si scorre in su.
Va scritto dopo il blocco qui sopra, perché ne annulla i tetti. */
@media (max-width: 940px) and (max-height: 620px) {
.menu-barra { position: static; }
/* l'ombra racconta uno stacco che, con la barra nel flusso, non c'è più */
.menu-barra.staccata { box-shadow: none; }
.menu-barra__in { max-height: none; overflow: visible; }
}
/* Telefono girato in orizzontale, cioè uno schermo alto 375–430px con dentro
anche la barra fissa dei due bottoni. La regola che dà all'hero l'altezza
dello schermo meno la barra sta più in basso nel foglio di quella che, in
orizzontale, gliela toglieva del tutto: vinceva per posizione, e il titolo
ricominciava a cadere sotto il bordo. Qui si rimette l'ordine giusto —
scritta in fondo, l'ultima parola è sua. */
@media (max-height: 520px) and (orientation: landscape) {
.hero, .hero--corto { min-height: 0; }
/* la foto aperta a schermo intero non deve prendersi tutta l'altezza:
sotto ci sono la didascalia e, sui telefoni stretti, i due comandi */
.lightbox img { max-height: 60vh; max-height: 60svh; }
}
/* Sugli iPhone la striscia dell'indicatore di sistema sta sopra il fondo dello
schermo: sopra i 940px non c'è la barra fissa a fare da cuscino e l'ultima
riga del piè di pagina ci finirebbe sotto. */
@supports (padding: max(0px)) {
.pie { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}