`, 141 con ``, 251 con immagini, 88 con ``,
49 con didascalia, 77 con elenchi puntati, 14 con gallerie a blocchi,
6 con citazioni.
PERCHE' NON UNA GRIGLIA. La colonna di lettura con le immagini che escono
dai bordi si scrive volentieri con `grid-template-columns` e delle linee
con nome. Qui no: **166 articoli su 260 non contengono un solo ``** —
sono testi dell'editor classico, dove i paragrafi sono righe vuote e la
divisione in `
` la faceva WordPress al momento di mostrarli. In una
griglia ogni pezzo di testo nudo diventa un elemento anonimo, e gli
elementi anonimi si posizionano da soli: finirebbero nella prima colonna
libera, cioe' nel margine stretto a sinistra del testo. Un blocco e dei
margini negativi non hanno questo problema e degradano bene.
(Che quei 174 articoli vadano avvolti in `
` resta un compito
dell'importazione: qui si evita solo che il difetto si moltiplichi.)
========================================================================== */
/* Misura e interlinea arrivano da `.gr-blog-articolo`: qui c'e' solo la
colonna. */
.gr-blog-articolo__contenuto {
max-width: var(--gr-blog-lettura);
margin-inline: auto;
}
.gr-blog-articolo__contenuto > * {
margin-block: 0 1.15em;
}
.gr-blog-articolo__contenuto > *:last-child {
margin-block-end: 0;
}
.gr-blog-articolo__contenuto h2,
.gr-blog-articolo__contenuto h3,
.gr-blog-articolo__contenuto h4 {
margin-block-start: 1.8em;
font-family: var(--display, var(--gr-font-display, inherit));
font-weight: var(--peso-titoli, 600);
text-wrap: balance;
}
.gr-blog-articolo__contenuto h2 {
font-size: 1.65em;
line-height: 1.1;
}
.gr-blog-articolo__contenuto h3 {
font-size: 1.3em;
line-height: 1.15;
}
.gr-blog-articolo__contenuto h4 {
font-size: 1.1em;
line-height: 1.15;
}
.gr-blog-articolo__contenuto a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--accento, currentColor);
text-decoration-thickness: 1px;
/* La sottolineatura tocca le discendenti e le rende illeggibili: lo stacco
e' quello che distingue un collegamento leggibile da uno indovinato. */
text-underline-offset: 0.18em;
}
.gr-blog-articolo__contenuto a:hover,
.gr-blog-articolo__contenuto a:focus-visible {
color: var(--accento, currentColor);
}
.gr-blog-articolo__contenuto ul,
.gr-blog-articolo__contenuto ol {
padding-inline-start: 1.5rem;
}
.gr-blog-articolo__contenuto li + li {
margin-block-start: 0.4em;
}
.gr-blog-articolo__contenuto blockquote {
margin-inline: 0;
padding-inline-start: 1.25rem;
border-inline-start: 2px solid var(--accento, currentColor);
font-family: var(--display, var(--gr-font-display, inherit));
font-size: 1.2em;
line-height: 1.35;
}
.gr-blog-articolo__contenuto blockquote p:last-child {
margin-block-end: 0;
}
/* --------------------------------------------------------------------------
Le immagini.
`max-width: 100%` e `height: auto` non sono una precauzione generica: 185
articoli su 260 hanno `width=` e `height=` scritti nel tag, con le misure
dell'originale a 1024px. Senza queste due righe quelle immagini escono
dalla finestra su qualunque telefono.
-------------------------------------------------------------------------- */
.gr-blog-articolo__contenuto img {
max-width: 100%;
height: auto;
}
/* Il margine laterale che i browser danno da soli alle figure e' di 40px per
lato. Va azzerato PRIMA della regola della sporgenza qui sotto e non dopo,
e non e' una questione di ordine di lettura: le due regole hanno la stessa
specificita' — una classe e un elemento — quindi fra le due vince l'ultima
scritta. Con l'ordine invertito la sporgenza si calcola, si applica e viene
azzerata dalla riga seguente: le figure restano larghe quanto il testo e
nel foglio non si vede niente di storto. Trovato misurando sulla pagina,
non rileggendo. */
.gr-blog-articolo__contenuto figure {
margin-inline: 0;
}
/* A uscire dalla colonna di lettura sono le FIGURE, non le immagini.
Una `` e' un contenitore: allargarla con dei margini negativi non
tocca l'immagine dentro, che si adatta e basta. Un `![]()
` e' un elemento
sostituito, e allargarlo significa dichiarargli una larghezza — che su una
fotografia da 1024px non si vede, ma su un'immagine piccola la ingrandisce
sfocandola. Le due cose sembrano la stessa e non lo sono.
Le figure annidate — quelle dentro una galleria — restano dove sono: il
selettore e' un figlio diretto proprio per questo. */
.gr-blog-articolo__contenuto > figure {
margin-inline: calc(-1 * var(--gr-blog-sporgenza, 0rem));
}
/* I margini automatici non sono una ripetizione dell'allineamento. I tre
articoli del 2026 hanno l'immagine ridimensionata dall'editor a blocchi, che
scrive la larghezza in uno stile in linea: `style="width:704px;height:auto"`.
Uno stile in linea batte qualunque selettore di questo foglio, quindi su
quelle tre il `width: 100%` qui sopra non arriva — restano larghe 704px
dentro una figura che sporge fino a 6rem per lato, cioe' incollate al bordo
sinistro, fuori dalla colonna del testo, col vuoto tutto a destra. Sono i tre
articoli piu' recenti: i primi che si guardano.
I margini automatici non provano a vincere sullo stile in linea — la
larghezza resta quella che l'autore ha scelto, e l'immagine si centra. Dove
l'immagine e' larga quanto la figura non fanno niente. */
.gr-blog-articolo__contenuto > figure > img,
.gr-blog-articolo__contenuto > figure > a > img {
display: block;
width: 100%;
height: auto;
margin-inline: auto;
}
.gr-blog-articolo__contenuto figcaption {
margin-block-start: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
text-align: center;
color: var(--testo-tenue, color-mix(in srgb, currentColor 65%, transparent));
}
/* Le classi di allineamento dell'editor classico. `aligncenter` compare in
126 articoli e `alignnone` in 81: senza queste righe le immagini restano
in linea col testo, sulla riga di base, con lo spazio sotto che sembra un
errore.
Il selettore dice `img` e non solo la classe, e non e' pignoleria: le
stesse classi WordPress le mette anche sulle figure, e li' due classi
batterebbero il selettore della sporgenza qui sopra — la figura tornerebbe
larga quanto il testo. Alla figura centrata serve un'altra cosa, ed e' la
regola qui sotto. */
.gr-blog-articolo__contenuto img.aligncenter,
.gr-blog-articolo__contenuto img.alignnone {
display: block;
margin-inline: auto;
}
/* Sulla figura la stessa classe vuole `text-align` e non i margini automatici.
I margini la riporterebbero larga quanto il testo — e' esattamente cio' che
la regola qui sopra evita dicendo `img` — e comunque non servirebbero: a
stare storta non e' la figura, che e' gia' un blocco a tutta larghezza, e'
l'immagine dentro.
In 33 articoli `aligncenter` sta sulla figura, e in 19 di quelli l'editor ha
ridimensionato l'immagine, che quindi e' piu' stretta del contenitore. Senza
questa riga la figura e' centrata e la fotografia dentro sta a sinistra: e'
l'unico caso in cui si vede che `aligncenter` non ha fatto niente. */
.gr-blog-articolo__contenuto figure.aligncenter {
text-align: center;
}
.gr-blog-articolo__contenuto .alignleft {
float: inline-start;
max-width: 50%;
margin: 0.35rem 1.25rem 1rem 0;
}
.gr-blog-articolo__contenuto .alignright {
float: inline-end;
max-width: 50%;
margin: 0.35rem 0 1rem 1.25rem;
}
/* --------------------------------------------------------------------------
Le gallerie, in due marcature diverse (14 articoli: 10 vecchie, 4 nuove).
WordPress ha cambiato il blocco galleria a meta' strada, e nella base dati
d'origine ci sono tutte e due le versioni. La vecchia e' un `` di voci
`.blocks-gallery-item`; la nuova e' una `` che ne contiene altre —
`.wp-block-gallery.has-nested-images` — e sono le quattro gallerie del 2026,
da due a cinque fotografie l'una.
In entrambi i casi il difetto senza regola e' lo stesso e ha due facce: nel
`` compare un pallino accanto a ogni fotografia, nelle figure annidate le
immagini si impilano a tutta larghezza e la galleria diventa cinque schermate
di scorrimento. E' il difetto che si nota per ultimo, perche' la pagina non
sembra rotta — sembra solo brutta.
Un solo blocco di regole per le due marcature e non due paralleli: una
galleria e' una griglia di immagini ritagliate, e il giorno che si cambia il
ritaglio va cambiato una volta. Quello che le due NON condividono e' un
capitolo a parte, due regole piu' sotto.
-------------------------------------------------------------------------- */
/* 10rem e non 12: a 12 una galleria su un telefono da 375px scende a una
colonna sola, cioe' una fila di quadrati a tutta larghezza che allunga
l'articolo di tre schermate. A 10 ne restano due affiancate, che e' quello
che una galleria e'. */
.gr-blog-articolo__contenuto .blocks-gallery-grid,
.gr-blog-articolo__contenuto .wp-block-gallery.has-nested-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: 0.5rem;
}
/* I margini si azzerano SOLO sul vecchio ``, e la distinzione non e'
pignoleria. Quell'elenco sta dentro una ``
che ha gia' il proprio respiro, e va tolto il rientro dei pallini che il
browser gli da' da solo. La galleria nuova invece la figura E' lei, figlia
diretta del contenuto: un `margin: 0` scritto qui le spegnerebbe la sporgenza
calcolata poche righe sopra, e le quattro gallerie del 2026 verrebbero larghe
quanto il testo mentre le dieci vecchie restano larghe quanto la pagina. Due
marcature della stessa cosa non possono venire di due larghezze. */
.gr-blog-articolo__contenuto .blocks-gallery-grid {
margin: 0;
padding: 0;
list-style: none;
}
.gr-blog-articolo__contenuto .blocks-gallery-item figure,
.gr-blog-articolo__contenuto .wp-block-gallery.has-nested-images > figure {
height: 100%;
margin: 0;
}
.gr-blog-articolo__contenuto .blocks-gallery-item img,
.gr-blog-articolo__contenuto .wp-block-gallery.has-nested-images > figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Il bottone del blocco WordPress: tre articoli soli, ma senza una regola e'
un collegamento sottolineato in mezzo a un paragrafo, cioe' un invito
all'azione che non si vede. */
.gr-blog-articolo__contenuto .wp-block-button__link {
display: inline-block;
padding: 0.7rem 1.4rem;
border-radius: 2px;
/* Stesso ripiego fisso della paginazione, e per la stessa ragione: e' una
superficie che porta parole. */
background: var(--accento-fondo, var(--accento, #333));
color: var(--accento-testo, #fff);
text-decoration: none;
}
/* Tabelle e contenuti incorporati non ce n'e' nessuno nei 260 articoli
importati — ma l'editor del pannello ne produce, e una tabella o un video
con la larghezza scritta dentro esce dallo schermo di un telefono. Il
contenitore scorre da solo invece di allargare la pagina: scorrere una
tabella si capisce, una pagina che si sposta di lato sembra rotta. */
.gr-blog-articolo__contenuto table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
.gr-blog-articolo__contenuto th,
.gr-blog-articolo__contenuto td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
text-align: start;
}
.gr-blog-articolo__contenuto iframe,
.gr-blog-articolo__contenuto video {
max-width: 100%;
}
/* Il testo preformattato non va a capo per definizione: una riga lunga allarga
il blocco quanto le serve, e con lui la pagina. E' lo stesso rimedio della
tabella qui sopra e per la stessa ragione, ma la causa e' piu' subdola —
basta un indirizzo incollato senza spazi. Nei 260 articoli ce n'e' uno solo,
per giunta vuoto: un `` lasciato indietro dal traduttore di Google. */
.gr-blog-articolo__contenuto pre {
max-width: 100%;
overflow-x: auto;
}
/* ==========================================================================
7. IL PIEDE DELL'ARTICOLO — I TAG
========================================================================== */
.gr-blog-articolo__piede {
max-width: var(--gr-blog-lettura);
margin: var(--gr-blog-stacco, 2rem) auto 0;
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-tag {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
/* La pillola e' l'eccezione dichiarata alla regola dei due pixel di raccordo:
una targhetta squadrata si confonde con un bottone. */
.gr-blog-tag__collegamento {
display: inline-block;
padding: 0.35rem 0.85rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 9999px;
font-size: 0.8rem;
color: inherit;
text-decoration: none;
transition: border-color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease),
color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-tag__collegamento:hover,
.gr-blog-tag__collegamento:focus-visible {
border-color: var(--accento, currentColor);
color: var(--accento, currentColor);
}
/* ==========================================================================
8. LA PAGINAZIONE
========================================================================== */
.gr-blog-paginazione {
margin-block-start: var(--gr-blog-stacco, 2rem);
}
.gr-blog-paginazione__elenco {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
/* 2,75rem di lato: e' il bersaglio minimo che si tocca con un dito senza
sbagliare. Una paginazione fatta di numeri alti come una riga di testo si
usa col mouse e si indovina col pollice. */
.gr-blog-paginazione__collegamento {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding-inline: 0.75rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 2px;
font-size: 0.9rem;
color: inherit;
text-decoration: none;
transition: border-color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-paginazione__collegamento:hover,
.gr-blog-paginazione__collegamento:focus-visible {
border-color: var(--accento, currentColor);
}
/* La pagina corrente puo' essere segnata sulla voce o sul collegamento, e un
template accessibile la segna comunque con `aria-current`. Accettarle tutte
e tre costa un selettore e evita che l'indicazione manchi proprio dove
serve, cioe' quando non si sa piu' a che pagina si e'.
QUI IL RIPIEGO NON PUO' ESSERE `currentColor`, ed e' l'unico punto del
foglio dove la differenza si vede. Su un tema senza i token, `background:
currentColor` prende il colore del testo dell'elemento — che questa stessa
regola ha appena messo a bianco, perche' e' il ripiego di
`--accento-testo`. Risultato: numero bianco su fondo bianco, cioe' la
pagina corrente e' l'unica che non si legge. Un grigio scuro fisso come
ultima spiaggia regge il bianco sopra e non dipende da niente. */
.gr-blog-paginazione__voce--attiva > .gr-blog-paginazione__collegamento,
.gr-blog-paginazione__collegamento--attiva,
.gr-blog-paginazione__collegamento[aria-current] {
background: var(--accento-fondo, var(--accento, #333));
border-color: var(--accento-fondo, var(--accento, #333));
color: var(--accento-testo, #fff);
}
.gr-blog-paginazione__voce--disabilitata > .gr-blog-paginazione__collegamento,
.gr-blog-paginazione__collegamento--disabilitata {
opacity: 0.4;
pointer-events: none;
}
/* ==========================================================================
9. I PRODOTTI COLLEGATI
--------------------------------------------------------------------------
Qui dentro non si veste la miniatura del prodotto: quella e' del tema,
ed e' la stessa che si vede in catalogo. Un modulo che ridisegna la scheda
prodotto fa sembrare i prodotti dell'articolo una cosa diversa da quelli
del negozio, e il collegamento fra blog e catalogo — che e' il motivo per
cui questo modulo esiste — perde proprio li'.
========================================================================== */
/* `font-size` esplicito, e non e' una ripetizione: queste due fasce possono
stare dentro `.gr-blog-articolo`, che porta la misura da lettura. Senza,
una fila di prodotti in fondo a un articolo esce piu' grande della stessa
fila in catalogo, e la differenza non ha nessuna ragione di esserci. */
.gr-blog-prodotti,
.gr-blog-simili {
font-size: 1rem;
line-height: 1.55;
}
.gr-blog-prodotti {
margin-block-start: calc(var(--gr-blog-stacco, 2rem) * 1.5);
padding-block-start: var(--gr-blog-stacco, 2rem);
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-prodotti__titolo,
.gr-blog-simili__titolo {
margin: 0 0 1.5rem;
font-family: var(--display, var(--gr-font-display, inherit));
font-size: 1.5rem;
font-weight: var(--peso-titoli, 600);
line-height: 1.1;
}
.gr-blog-prodotti__elenco {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.gr-blog-prodotti__voce {
min-width: 0;
}
/* ==========================================================================
10. GLI ARTICOLI SIMILI
========================================================================== */
.gr-blog-simili {
margin-block-start: calc(var(--gr-blog-stacco, 2rem) * 1.5);
padding-block-start: var(--gr-blog-stacco, 2rem);
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
/* ==========================================================================
11. LA COLONNA LATERALE
========================================================================== */
.gr-blog__lato > * + * {
margin-block-start: var(--gr-blog-stacco, 2rem);
}
.gr-blog-categorie__titolo {
margin: 0 0 0.75rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--testo-tenue, color-mix(in srgb, currentColor 65%, transparent));
}
.gr-blog-categorie__elenco {
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-categorie__collegamento {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
min-height: 2.75rem;
padding-block: 0.6rem;
border-block-end: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
color: inherit;
text-decoration: none;
transition: color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-categorie__collegamento:hover,
.gr-blog-categorie__collegamento:focus-visible {
color: var(--accento, currentColor);
}
.gr-blog-categorie__voce--attiva > .gr-blog-categorie__collegamento,
.gr-blog-categorie__collegamento[aria-current] {
color: var(--accento, currentColor);
font-weight: 600;
}
.gr-blog-categorie__quanti {
flex: 0 0 auto;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
color: var(--testo-tenue, color-mix(in srgb, currentColor 60%, transparent));
}
/* ==========================================================================
12. QUANDO NON C'E' NIENTE DA MOSTRARE
========================================================================== */
.gr-blog__vuoto {
margin: 0;
padding: var(--gr-blog-stacco, 2rem);
border: 1px dashed var(--filetto, color-mix(in srgb, currentColor 20%, transparent));
border-radius: 2px;
text-align: center;
color: var(--testo-tenue, color-mix(in srgb, currentColor 70%, transparent));
}
/* ==========================================================================
13. IL TELEFONO
--------------------------------------------------------------------------
Leggere un articolo su uno schermo piccolo e' il caso principale di questo
modulo, non l'eccezione. Quasi tutto qui sopra e' gia' a colonna unica per
conto suo — griglie con `auto-fill`, misure con `clamp`, sporgenza che va a
zero da sola — e quello che resta sono le poche cose che a quella larghezza
vanno decise, non calcolate.
========================================================================== */
@media (max-width: 47.99rem) {
/* Il titolo centrato regge finche' sono due righe. A tre o quattro, che su
un telefono sono la norma, un blocco centrato si legge peggio di uno
allineato: ogni riga comincia in un punto diverso e l'occhio deve
cercarlo. */
.gr-blog-articolo__intestazione,
.gr-blog-articolo__meta {
text-align: start;
justify-content: flex-start;
}
/* La copertina alta 70vh su un telefono si prende quasi tutto lo schermo:
si apre l'articolo e non si vede una parola. */
.gr-blog-articolo__copertina img {
max-height: 45vh;
}
/* Le categorie diventano una fila che scorre invece di un elenco alto
sette righe fra la fine dell'articolo e il piede. */
.gr-blog-categorie__elenco {
display: flex;
gap: 0.5rem;
overflow-x: auto;
border-block-start: 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gr-blog-categorie__elenco::-webkit-scrollbar {
display: none;
}
.gr-blog-categorie__collegamento {
min-height: 2.5rem;
padding-inline: 0.85rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 9999px;
white-space: nowrap;
}
/* L'immagine affiancata al testo torna in colonna. A meta' di uno schermo da
375px restano centosettanta pixel per le parole, cioe' tre o quattro per
riga e una sillabazione ogni due: il testo si legge peggio di quanto
l'immagine accanto valga. Sono due articoli, ma sono due articoli
illeggibili proprio dove il blog si legge di piu'.
`display: block` perche' tolto il galleggiamento un `![]()
` torna in linea,
e un'immagine in linea i margini automatici non la centrano: dei due
articoli uno ha la classe sull'immagine e uno sulla figura. */
.gr-blog-articolo__contenuto .alignleft,
.gr-blog-articolo__contenuto .alignright {
display: block;
float: none;
max-width: 100%;
margin-inline: auto;
}
.gr-blog-scheda__testo {
padding: 1rem;
}
}
/* ==========================================================================
14. MOVIMENTO RIDOTTO
--------------------------------------------------------------------------
Chi ha chiesto meno movimento al sistema lo ha chiesto perche' il movimento
gli da' fastidio, non per gusto: un'immagine che si ingrandisce sotto il
dito, per alcune persone, e' nausea.
La regola del tema vuole `prefers-reduced-motion` FUORI da ogni livello,
perche' li' doveva spegnere transizioni dichiarate in livelli successivi al
proprio e le perdeva tutte. Qui non serve e non si puo': tutte le
transizioni di questo foglio sono dichiarate qui dentro, e dentro un
livello vince l'ultima scritta — questa. Uscire dal livello per un caso che
non lo richiede vorrebbe dire rendere non sovrascrivibile l'unica regola
che nessuno vuole sovrascrivere.
Se un giorno il tema aggiungesse una transizione alle classi del blog da
`utilities`, quella sopravviverebbe: a spegnerla tocca a chi l'ha scritta.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.gr-blog-scheda__immagine,
.gr-blog-tag__collegamento,
.gr-blog-paginazione__collegamento,
.gr-blog-categorie__collegamento {
transition: none;
}
.gr-blog-scheda:hover .gr-blog-scheda__immagine,
.gr-blog-scheda:focus-within .gr-blog-scheda__immagine {
transform: none;
}
}
}
`** — sono testi dell'editor classico, dove i paragrafi sono righe vuote e la divisione in `
` la faceva WordPress al momento di mostrarli. In una griglia ogni pezzo di testo nudo diventa un elemento anonimo, e gli elementi anonimi si posizionano da soli: finirebbero nella prima colonna libera, cioe' nel margine stretto a sinistra del testo. Un blocco e dei margini negativi non hanno questo problema e degradano bene. (Che quei 174 articoli vadano avvolti in `
` resta un compito
dell'importazione: qui si evita solo che il difetto si moltiplichi.)
========================================================================== */
/* Misura e interlinea arrivano da `.gr-blog-articolo`: qui c'e' solo la
colonna. */
.gr-blog-articolo__contenuto {
max-width: var(--gr-blog-lettura);
margin-inline: auto;
}
.gr-blog-articolo__contenuto > * {
margin-block: 0 1.15em;
}
.gr-blog-articolo__contenuto > *:last-child {
margin-block-end: 0;
}
.gr-blog-articolo__contenuto h2,
.gr-blog-articolo__contenuto h3,
.gr-blog-articolo__contenuto h4 {
margin-block-start: 1.8em;
font-family: var(--display, var(--gr-font-display, inherit));
font-weight: var(--peso-titoli, 600);
text-wrap: balance;
}
.gr-blog-articolo__contenuto h2 {
font-size: 1.65em;
line-height: 1.1;
}
.gr-blog-articolo__contenuto h3 {
font-size: 1.3em;
line-height: 1.15;
}
.gr-blog-articolo__contenuto h4 {
font-size: 1.1em;
line-height: 1.15;
}
.gr-blog-articolo__contenuto a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--accento, currentColor);
text-decoration-thickness: 1px;
/* La sottolineatura tocca le discendenti e le rende illeggibili: lo stacco
e' quello che distingue un collegamento leggibile da uno indovinato. */
text-underline-offset: 0.18em;
}
.gr-blog-articolo__contenuto a:hover,
.gr-blog-articolo__contenuto a:focus-visible {
color: var(--accento, currentColor);
}
.gr-blog-articolo__contenuto ul,
.gr-blog-articolo__contenuto ol {
padding-inline-start: 1.5rem;
}
.gr-blog-articolo__contenuto li + li {
margin-block-start: 0.4em;
}
.gr-blog-articolo__contenuto blockquote {
margin-inline: 0;
padding-inline-start: 1.25rem;
border-inline-start: 2px solid var(--accento, currentColor);
font-family: var(--display, var(--gr-font-display, inherit));
font-size: 1.2em;
line-height: 1.35;
}
.gr-blog-articolo__contenuto blockquote p:last-child {
margin-block-end: 0;
}
/* --------------------------------------------------------------------------
Le immagini.
`max-width: 100%` e `height: auto` non sono una precauzione generica: 185
articoli su 260 hanno `width=` e `height=` scritti nel tag, con le misure
dell'originale a 1024px. Senza queste due righe quelle immagini escono
dalla finestra su qualunque telefono.
-------------------------------------------------------------------------- */
.gr-blog-articolo__contenuto img {
max-width: 100%;
height: auto;
}
/* Il margine laterale che i browser danno da soli alle figure e' di 40px per
lato. Va azzerato PRIMA della regola della sporgenza qui sotto e non dopo,
e non e' una questione di ordine di lettura: le due regole hanno la stessa
specificita' — una classe e un elemento — quindi fra le due vince l'ultima
scritta. Con l'ordine invertito la sporgenza si calcola, si applica e viene
azzerata dalla riga seguente: le figure restano larghe quanto il testo e
nel foglio non si vede niente di storto. Trovato misurando sulla pagina,
non rileggendo. */
.gr-blog-articolo__contenuto figure {
margin-inline: 0;
}
/* A uscire dalla colonna di lettura sono le FIGURE, non le immagini.
Una `` e' un elemento
sostituito, e allargarlo significa dichiarargli una larghezza — che su una
fotografia da 1024px non si vede, ma su un'immagine piccola la ingrandisce
sfocandola. Le due cose sembrano la stessa e non lo sono.
Le figure annidate — quelle dentro una galleria — restano dove sono: il
selettore e' un figlio diretto proprio per questo. */
.gr-blog-articolo__contenuto > figure {
margin-inline: calc(-1 * var(--gr-blog-sporgenza, 0rem));
}
/* I margini automatici non sono una ripetizione dell'allineamento. I tre
articoli del 2026 hanno l'immagine ridimensionata dall'editor a blocchi, che
scrive la larghezza in uno stile in linea: `style="width:704px;height:auto"`.
Uno stile in linea batte qualunque selettore di questo foglio, quindi su
quelle tre il `width: 100%` qui sopra non arriva — restano larghe 704px
dentro una figura che sporge fino a 6rem per lato, cioe' incollate al bordo
sinistro, fuori dalla colonna del testo, col vuoto tutto a destra. Sono i tre
articoli piu' recenti: i primi che si guardano.
I margini automatici non provano a vincere sullo stile in linea — la
larghezza resta quella che l'autore ha scelto, e l'immagine si centra. Dove
l'immagine e' larga quanto la figura non fanno niente. */
.gr-blog-articolo__contenuto > figure > img,
.gr-blog-articolo__contenuto > figure > a > img {
display: block;
width: 100%;
height: auto;
margin-inline: auto;
}
.gr-blog-articolo__contenuto figcaption {
margin-block-start: 0.6rem;
font-size: 0.85rem;
line-height: 1.45;
text-align: center;
color: var(--testo-tenue, color-mix(in srgb, currentColor 65%, transparent));
}
/* Le classi di allineamento dell'editor classico. `aligncenter` compare in
126 articoli e `alignnone` in 81: senza queste righe le immagini restano
in linea col testo, sulla riga di base, con lo spazio sotto che sembra un
errore.
Il selettore dice `img` e non solo la classe, e non e' pignoleria: le
stesse classi WordPress le mette anche sulle figure, e li' due classi
batterebbero il selettore della sporgenza qui sopra — la figura tornerebbe
larga quanto il testo. Alla figura centrata serve un'altra cosa, ed e' la
regola qui sotto. */
.gr-blog-articolo__contenuto img.aligncenter,
.gr-blog-articolo__contenuto img.alignnone {
display: block;
margin-inline: auto;
}
/* Sulla figura la stessa classe vuole `text-align` e non i margini automatici.
I margini la riporterebbero larga quanto il testo — e' esattamente cio' che
la regola qui sopra evita dicendo `img` — e comunque non servirebbero: a
stare storta non e' la figura, che e' gia' un blocco a tutta larghezza, e'
l'immagine dentro.
In 33 articoli `aligncenter` sta sulla figura, e in 19 di quelli l'editor ha
ridimensionato l'immagine, che quindi e' piu' stretta del contenitore. Senza
questa riga la figura e' centrata e la fotografia dentro sta a sinistra: e'
l'unico caso in cui si vede che `aligncenter` non ha fatto niente. */
.gr-blog-articolo__contenuto figure.aligncenter {
text-align: center;
}
.gr-blog-articolo__contenuto .alignleft {
float: inline-start;
max-width: 50%;
margin: 0.35rem 1.25rem 1rem 0;
}
.gr-blog-articolo__contenuto .alignright {
float: inline-end;
max-width: 50%;
margin: 0.35rem 0 1rem 1.25rem;
}
/* --------------------------------------------------------------------------
Le gallerie, in due marcature diverse (14 articoli: 10 vecchie, 4 nuove).
WordPress ha cambiato il blocco galleria a meta' strada, e nella base dati
d'origine ci sono tutte e due le versioni. La vecchia e' un `
` di voci
`.blocks-gallery-item`; la nuova e' una `
` compare un pallino accanto a ogni fotografia, nelle figure annidate le
immagini si impilano a tutta larghezza e la galleria diventa cinque schermate
di scorrimento. E' il difetto che si nota per ultimo, perche' la pagina non
sembra rotta — sembra solo brutta.
Un solo blocco di regole per le due marcature e non due paralleli: una
galleria e' una griglia di immagini ritagliate, e il giorno che si cambia il
ritaglio va cambiato una volta. Quello che le due NON condividono e' un
capitolo a parte, due regole piu' sotto.
-------------------------------------------------------------------------- */
/* 10rem e non 12: a 12 una galleria su un telefono da 375px scende a una
colonna sola, cioe' una fila di quadrati a tutta larghezza che allunga
l'articolo di tre schermate. A 10 ne restano due affiancate, che e' quello
che una galleria e'. */
.gr-blog-articolo__contenuto .blocks-gallery-grid,
.gr-blog-articolo__contenuto .wp-block-gallery.has-nested-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
gap: 0.5rem;
}
/* I margini si azzerano SOLO sul vecchio `
`, e la distinzione non e'
pignoleria. Quell'elenco sta dentro una `
` lasciato indietro dal traduttore di Google. */
.gr-blog-articolo__contenuto pre {
max-width: 100%;
overflow-x: auto;
}
/* ==========================================================================
7. IL PIEDE DELL'ARTICOLO — I TAG
========================================================================== */
.gr-blog-articolo__piede {
max-width: var(--gr-blog-lettura);
margin: var(--gr-blog-stacco, 2rem) auto 0;
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-tag {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
/* La pillola e' l'eccezione dichiarata alla regola dei due pixel di raccordo:
una targhetta squadrata si confonde con un bottone. */
.gr-blog-tag__collegamento {
display: inline-block;
padding: 0.35rem 0.85rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 9999px;
font-size: 0.8rem;
color: inherit;
text-decoration: none;
transition: border-color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease),
color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-tag__collegamento:hover,
.gr-blog-tag__collegamento:focus-visible {
border-color: var(--accento, currentColor);
color: var(--accento, currentColor);
}
/* ==========================================================================
8. LA PAGINAZIONE
========================================================================== */
.gr-blog-paginazione {
margin-block-start: var(--gr-blog-stacco, 2rem);
}
.gr-blog-paginazione__elenco {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
/* 2,75rem di lato: e' il bersaglio minimo che si tocca con un dito senza
sbagliare. Una paginazione fatta di numeri alti come una riga di testo si
usa col mouse e si indovina col pollice. */
.gr-blog-paginazione__collegamento {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
padding-inline: 0.75rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 2px;
font-size: 0.9rem;
color: inherit;
text-decoration: none;
transition: border-color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-paginazione__collegamento:hover,
.gr-blog-paginazione__collegamento:focus-visible {
border-color: var(--accento, currentColor);
}
/* La pagina corrente puo' essere segnata sulla voce o sul collegamento, e un
template accessibile la segna comunque con `aria-current`. Accettarle tutte
e tre costa un selettore e evita che l'indicazione manchi proprio dove
serve, cioe' quando non si sa piu' a che pagina si e'.
QUI IL RIPIEGO NON PUO' ESSERE `currentColor`, ed e' l'unico punto del
foglio dove la differenza si vede. Su un tema senza i token, `background:
currentColor` prende il colore del testo dell'elemento — che questa stessa
regola ha appena messo a bianco, perche' e' il ripiego di
`--accento-testo`. Risultato: numero bianco su fondo bianco, cioe' la
pagina corrente e' l'unica che non si legge. Un grigio scuro fisso come
ultima spiaggia regge il bianco sopra e non dipende da niente. */
.gr-blog-paginazione__voce--attiva > .gr-blog-paginazione__collegamento,
.gr-blog-paginazione__collegamento--attiva,
.gr-blog-paginazione__collegamento[aria-current] {
background: var(--accento-fondo, var(--accento, #333));
border-color: var(--accento-fondo, var(--accento, #333));
color: var(--accento-testo, #fff);
}
.gr-blog-paginazione__voce--disabilitata > .gr-blog-paginazione__collegamento,
.gr-blog-paginazione__collegamento--disabilitata {
opacity: 0.4;
pointer-events: none;
}
/* ==========================================================================
9. I PRODOTTI COLLEGATI
--------------------------------------------------------------------------
Qui dentro non si veste la miniatura del prodotto: quella e' del tema,
ed e' la stessa che si vede in catalogo. Un modulo che ridisegna la scheda
prodotto fa sembrare i prodotti dell'articolo una cosa diversa da quelli
del negozio, e il collegamento fra blog e catalogo — che e' il motivo per
cui questo modulo esiste — perde proprio li'.
========================================================================== */
/* `font-size` esplicito, e non e' una ripetizione: queste due fasce possono
stare dentro `.gr-blog-articolo`, che porta la misura da lettura. Senza,
una fila di prodotti in fondo a un articolo esce piu' grande della stessa
fila in catalogo, e la differenza non ha nessuna ragione di esserci. */
.gr-blog-prodotti,
.gr-blog-simili {
font-size: 1rem;
line-height: 1.55;
}
.gr-blog-prodotti {
margin-block-start: calc(var(--gr-blog-stacco, 2rem) * 1.5);
padding-block-start: var(--gr-blog-stacco, 2rem);
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-prodotti__titolo,
.gr-blog-simili__titolo {
margin: 0 0 1.5rem;
font-family: var(--display, var(--gr-font-display, inherit));
font-size: 1.5rem;
font-weight: var(--peso-titoli, 600);
line-height: 1.1;
}
.gr-blog-prodotti__elenco {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.gr-blog-prodotti__voce {
min-width: 0;
}
/* ==========================================================================
10. GLI ARTICOLI SIMILI
========================================================================== */
.gr-blog-simili {
margin-block-start: calc(var(--gr-blog-stacco, 2rem) * 1.5);
padding-block-start: var(--gr-blog-stacco, 2rem);
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
/* ==========================================================================
11. LA COLONNA LATERALE
========================================================================== */
.gr-blog__lato > * + * {
margin-block-start: var(--gr-blog-stacco, 2rem);
}
.gr-blog-categorie__titolo {
margin: 0 0 0.75rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--testo-tenue, color-mix(in srgb, currentColor 65%, transparent));
}
.gr-blog-categorie__elenco {
margin: 0;
padding: 0;
list-style: none;
border-block-start: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
}
.gr-blog-categorie__collegamento {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
min-height: 2.75rem;
padding-block: 0.6rem;
border-block-end: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
color: inherit;
text-decoration: none;
transition: color var(--gr-blog-durata, 180ms) var(--gr-blog-curva, ease);
}
.gr-blog-categorie__collegamento:hover,
.gr-blog-categorie__collegamento:focus-visible {
color: var(--accento, currentColor);
}
.gr-blog-categorie__voce--attiva > .gr-blog-categorie__collegamento,
.gr-blog-categorie__collegamento[aria-current] {
color: var(--accento, currentColor);
font-weight: 600;
}
.gr-blog-categorie__quanti {
flex: 0 0 auto;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
color: var(--testo-tenue, color-mix(in srgb, currentColor 60%, transparent));
}
/* ==========================================================================
12. QUANDO NON C'E' NIENTE DA MOSTRARE
========================================================================== */
.gr-blog__vuoto {
margin: 0;
padding: var(--gr-blog-stacco, 2rem);
border: 1px dashed var(--filetto, color-mix(in srgb, currentColor 20%, transparent));
border-radius: 2px;
text-align: center;
color: var(--testo-tenue, color-mix(in srgb, currentColor 70%, transparent));
}
/* ==========================================================================
13. IL TELEFONO
--------------------------------------------------------------------------
Leggere un articolo su uno schermo piccolo e' il caso principale di questo
modulo, non l'eccezione. Quasi tutto qui sopra e' gia' a colonna unica per
conto suo — griglie con `auto-fill`, misure con `clamp`, sporgenza che va a
zero da sola — e quello che resta sono le poche cose che a quella larghezza
vanno decise, non calcolate.
========================================================================== */
@media (max-width: 47.99rem) {
/* Il titolo centrato regge finche' sono due righe. A tre o quattro, che su
un telefono sono la norma, un blocco centrato si legge peggio di uno
allineato: ogni riga comincia in un punto diverso e l'occhio deve
cercarlo. */
.gr-blog-articolo__intestazione,
.gr-blog-articolo__meta {
text-align: start;
justify-content: flex-start;
}
/* La copertina alta 70vh su un telefono si prende quasi tutto lo schermo:
si apre l'articolo e non si vede una parola. */
.gr-blog-articolo__copertina img {
max-height: 45vh;
}
/* Le categorie diventano una fila che scorre invece di un elenco alto
sette righe fra la fine dell'articolo e il piede. */
.gr-blog-categorie__elenco {
display: flex;
gap: 0.5rem;
overflow-x: auto;
border-block-start: 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gr-blog-categorie__elenco::-webkit-scrollbar {
display: none;
}
.gr-blog-categorie__collegamento {
min-height: 2.5rem;
padding-inline: 0.85rem;
border: 1px solid var(--filetto, color-mix(in srgb, currentColor 14%, transparent));
border-radius: 9999px;
white-space: nowrap;
}
/* L'immagine affiancata al testo torna in colonna. A meta' di uno schermo da
375px restano centosettanta pixel per le parole, cioe' tre o quattro per
riga e una sillabazione ogni due: il testo si legge peggio di quanto
l'immagine accanto valga. Sono due articoli, ma sono due articoli
illeggibili proprio dove il blog si legge di piu'.
`display: block` perche' tolto il galleggiamento un `` torna in linea,
e un'immagine in linea i margini automatici non la centrano: dei due
articoli uno ha la classe sull'immagine e uno sulla figura. */
.gr-blog-articolo__contenuto .alignleft,
.gr-blog-articolo__contenuto .alignright {
display: block;
float: none;
max-width: 100%;
margin-inline: auto;
}
.gr-blog-scheda__testo {
padding: 1rem;
}
}
/* ==========================================================================
14. MOVIMENTO RIDOTTO
--------------------------------------------------------------------------
Chi ha chiesto meno movimento al sistema lo ha chiesto perche' il movimento
gli da' fastidio, non per gusto: un'immagine che si ingrandisce sotto il
dito, per alcune persone, e' nausea.
La regola del tema vuole `prefers-reduced-motion` FUORI da ogni livello,
perche' li' doveva spegnere transizioni dichiarate in livelli successivi al
proprio e le perdeva tutte. Qui non serve e non si puo': tutte le
transizioni di questo foglio sono dichiarate qui dentro, e dentro un
livello vince l'ultima scritta — questa. Uscire dal livello per un caso che
non lo richiede vorrebbe dire rendere non sovrascrivibile l'unica regola
che nessuno vuole sovrascrivere.
Se un giorno il tema aggiungesse una transizione alle classi del blog da
`utilities`, quella sopravviverebbe: a spegnerla tocca a chi l'ha scritta.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.gr-blog-scheda__immagine,
.gr-blog-tag__collegamento,
.gr-blog-paginazione__collegamento,
.gr-blog-categorie__collegamento {
transition: none;
}
.gr-blog-scheda:hover .gr-blog-scheda__immagine,
.gr-blog-scheda:focus-within .gr-blog-scheda__immagine {
transform: none;
}
}
}