/* ================================================================================================= * JURA Club — rifiniture del tema WordPress * ================================================================================================= * IT: PERCHÉ QUESTO FILE ESISTE, invece di aggiungere le regole a `sito.css`. * * I cinque fogli in `assets/css/` (`tokens`, `base`, `componenti`, `sito`, `utilita`) sono * COPIE di `frontend/app/public/css/`: la loro sorgente vive nel sito Node e possono essere * risincronizzate. Una regola scritta là dentro sopravviverebbe fino alla prima * risincronizzazione, poi sparirebbe — e sparirebbe in silenzio, che è il modo peggiore. * * Qui dentro va quindi il lavoro NUOVO, fatto per il tema WordPress dopo il porting. Se una * rifinitura si dimostra valida anche per il portale, si porta a mano in `sito.css` del sito * Node: è una decisione, non un automatismo. * * SOMMARIO * 1. Il cursore che scorre sotto le voci del menù * 2. Collegamenti dichiaratamente inerti * 3. Il pannello del menù su schermo stretto * 4. Gli approfondimenti * ============================================================================================= */ /* ------------------------------------------------------------------------------------------------- * 1. IL CURSORE DEL MENÙ * * COSA FA. Un filetto d'oro largo quanto la voce, che al sorvolo SCIVOLA da una voce all'altra * invece di spegnersi e riaccendersi altrove. A riposo sta sotto la pagina che si sta leggendo; * quando il puntatore esce dal menù, ci torna. * * PERCHÉ SCIVOLA E NON LAMPEGGIA. Un filetto che compare e scompare è un evento: attira l'occhio * ogni volta, e su cinque voci in fila diventa un tremolio. Un filetto che si sposta è invece un * oggetto solo che si muove, e l'occhio lo segue senza esserne strappato. È anche l'unica forma * che comunica una cosa vera: la posizione corrente è UNA, e si sta spostando. * * PERCHÉ NON DÀ FASTIDIO. Dura 180ms — la durata che nel progetto vale per i cambi di stato * visibili — con la curva unica del sistema, che parte decisa e si posa. Nessun rimbalzo, nessuna * accelerazione marcata: sarebbero espressivi, cioè fuori registro su un sito che parla di * registri e garanzie. E sotto `prefers-reduced-motion` la durata è già zero, perché `tokens.css` * azzera `--durata` alla radice: il cursore si limita a comparire dove serve. * * COSA SUCCEDE SENZA JAVASCRIPT. Nulla di male: il cursore non compare mai, e resta il filetto * fisso della pagina corrente che `sito.css` disegna con `border-bottom`. La regola che lo * nasconde è condizionata a `.js`, classe che aggiunge lo SCRIPT — mai il foglio di stile. È la * stessa regola del resto del progetto: uno stato che nasconde qualcosa non può essere applicato * da chi non sa se lo script arriverà. * ---------------------------------------------------------------------------------------------- */ .barra-sito__nav { position: relative; } /* IL FILETTO SEGUE LA VOCE, NON IL FONDO DEL MENÙ (T-220). * * Era `bottom: 0`, cioè ancorato al fondo del contenitore. Con le voci su una riga sola le due * cose coincidono, e per settimane sono sembrate la stessa cosa; sotto i 560px circa le voci * vanno a capo, e il cursore restava sotto la SECONDA riga mentre la voce corrente stava sulla * PRIMA — allineato in colonna e sbagliato di riga, cioè l'errore che sembra una scelta. * * Ora la riga arriva dallo script insieme alla colonna: `--cursore-y` è il bordo inferiore della * voce, misurato rispetto a questo stesso contenitore. Lo spostamento resta tutto dentro * `transform`, quindi la transizione già dichiarata copre anche il cambio di riga e il filetto * scivola in diagonale invece di saltare. Animare `top` avrebbe ottenuto lo stesso effetto * costringendo il browser a rifare il layout a ogni fotogramma. */ .barra-sito__cursore { position: absolute; top: 0; left: 0; height: 2px; width: var(--cursore-larghezza, 0px); background: var(--jura-oro); border-radius: var(--raggio-pill); opacity: 0; transform: translate(var(--cursore-x, 0px), var(--cursore-y, 0px)); pointer-events: none; transition: transform var(--durata) var(--curva), width var(--durata) var(--curva), opacity var(--durata-svelta) var(--curva); } /* Lo stato «acceso» lo mette lo script quando ha una voce su cui posarsi. */ .barra-sito__nav.ha-cursore .barra-sito__cursore { opacity: 1; } /* Con JavaScript attivo il filetto fisso della pagina corrente si spegne: lo disegna il cursore, * che nel frattempo è già nella sua posizione. Due filetti insieme sarebbero un errore evidente. */ .js .barra-sito__voci a[aria-current="page"] { border-bottom-color: transparent; } /* Al sorvolo la voce si schiarisce — è la regola di `sito.css` — e qui si aggiunge il solo * dettaglio che mancava: anche la voce CORRENTE deve reagire al sorvolo, altrimenti sembra * disattivata proprio la voce su cui l'utente si trova. */ .barra-sito__voci a[aria-current="page"]:hover, .barra-sito__voci a[aria-current="page"]:focus-visible { color: var(--jura-oro-chiaro); } /* ------------------------------------------------------------------------------------------------- * 2. COLLEGAMENTI INERTI * * I bottoni verso il portale non portano da nessuna parte finché il portale e le sue API non sono * pronti. `jura_collegamenti_inerti()` toglie loro l'attributo `href` e ci mette `aria-disabled`. * * L'ASPETTO RESTA IDENTICO, ed è voluto: in una dimostrazione servono a far vedere che ci sono e * dove stanno. Cambia il puntatore, che è l'unico segnale che arriva PRIMA del clic e non dopo. * ---------------------------------------------------------------------------------------------- */ [aria-disabled="true"] { cursor: default; } /* ------------------------------------------------------------------------------------------------- * 3. IL PANNELLO DEL MENÙ SU SCHERMO STRETTO (T-220) * * COSA CAMBIA, E CHE COSA ROVESCIA. `sito.css` §1 porta scritta la decisione opposta: sotto i * 900px le voci vanno a capo «invece di nascondersi dietro un bottone», perché su cinque voci il * bottone costava un tocco in più e non guadagnava spazio utile. Su un telefono vero quel calcolo * non regge: marchio, cinque voci su due righe e due porte a tutta larghezza occupavano un terzo * dello schermo prima del titolo della pagina. Il committente ha chiesto il pannello, ed è una * decisione sua: qui si applica, in DECISIONI.md (D-097) si scrive che rovescia la precedente. * * PERCHÉ STA QUI E NON NEL FOGLIO SORGENTE. `sito.css` è la copia del disegno condiviso col sito * Node, dove il pannello non c'è: `barra.js` vive nel solo tema (come il cursore, T-217). Una * regola scritta dentro una copia sparirebbe alla prima risincronizzazione, in silenzio (D-092). * Conseguenza dichiarata: sotto i 720px i due siti si comportano diversamente. Nessun controllo * se ne accorge — `confronta-dom.py` guarda dentro `
`, e la barra sta fuori — quindi è * scritto qui. * * LA SOGLIA STA IN UN POSTO SOLO. Il numero compare nella media query e nient'altro. Lo script * non lo legge: legge `--barra-compatta`, che vale 1 dentro la media query e 0 fuori. Così il * giorno in cui la soglia cambia, cambia qui e basta. * ---------------------------------------------------------------------------------------------- */ :root { --barra-compatta: 0; } /* Fuori dalla forma compatta il bottone non esiste proprio: non è nascosto, non c'è. Un bottone * nascosto resta nell'ordine di tabulazione se qualcuno sbaglia una regola. */ .barra-sito__apri { display: none; } @media (max-width: 720px) { :root { --barra-compatta: 1; } /* Il bottone. 44px di lato: è la misura minima di un bersaglio che si tocca col pollice, e * sotto quella soglia l'errore non è dell'utente. */ .barra-sito__apri { display: flex; align-items: center; justify-content: center; /* SOPRA IL PANNELLO, e non è un dettaglio: il pannello parte da `top: 0` e copre la barra. * Con il bottone sotto, la croce che chiude sparisce nel momento esatto in cui serve, e * restano solo il velo e il tasto Esc — cioè due modi che chi non li conosce non prova. */ position: relative; z-index: 2; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: var(--raggio); background: transparent; color: inherit; cursor: pointer; } /* Le tre stanghette sono bordi, non un carattere: «≡» verrebbe letto come «identico a», e un * disegno fatto di bordi si può animare. La centrale è l'elemento, le altre due i suoi * pseudo-elementi: un elemento solo invece di tre nel markup. */ .barra-sito__stanghette, .barra-sito__stanghette::before, .barra-sito__stanghette::after { content: ""; display: block; width: 22px; height: 2px; border-radius: var(--raggio-pill); background: currentColor; transition: transform var(--durata) var(--curva), opacity var(--durata-svelta) var(--curva); } .barra-sito__stanghette { position: relative; } .barra-sito__stanghette::before { position: absolute; top: -7px; } .barra-sito__stanghette::after { position: absolute; top: 7px; } /* Aperto, le tre stanghette diventano una croce: la centrale sparisce e le altre due ruotano * fin sopra il suo posto. È lo stesso oggetto che si muove, non un'icona sostituita da * un'altra — la stessa ragione per cui il cursore del menù scivola invece di lampeggiare. */ .barra-sito--aperta .barra-sito__stanghette { background: transparent; } .barra-sito--aperta .barra-sito__stanghette::before { transform: translateY(7px) rotate(45deg); } .barra-sito--aperta .barra-sito__stanghette::after { transform: translateY(-7px) rotate(-45deg); } /* Il pannello. `position: fixed` è calcolato sulla finestra e non sulla barra: la barra è * `sticky` e non `transform`, quindi non crea un blocco contenitore. Sta dentro l'intestazione * per restare nel suo contesto di impilamento, sopra il velo. */ .barra-sito__menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(80%, 22rem); z-index: 1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-6); padding: calc(var(--altezza-topbar) + var(--sp-5)) var(--sp-5) var(--sp-6); background: var(--jura-blu-notte); border-left: 1px solid color-mix(in srgb, var(--jura-avorio) 16%, transparent); overflow-y: auto; transform: translateX(100%); transition: transform var(--durata) var(--curva); } .barra-sito--aperta .barra-sito__menu { transform: none; } /* Chiuso, il pannello non è raggiungibile: fuori dallo schermo non basta, perché il tabulatore * ci entrerebbe lo stesso e il fuoco sparirebbe di lato. `visibility` lo toglie davvero, e * ritarda quanto la transizione così l'uscita si vede. */ .barra-sito__menu { visibility: hidden; transition: transform var(--durata) var(--curva), visibility 0s var(--durata); } .barra-sito--aperta .barra-sito__menu { visibility: visible; transition: transform var(--durata) var(--curva), visibility 0s; } /* Le voci in colonna, con bersagli larghi quanto il pannello. */ .barra-sito__voci { flex-direction: column; align-items: stretch; gap: 0; } .barra-sito__voci li { border-bottom: 1px solid color-mix(in srgb, var(--jura-avorio) 12%, transparent); } .barra-sito__voci a { display: block; padding: var(--sp-3) 0; font-size: var(--testo-md); } .barra-sito__azioni { flex-direction: column; align-items: stretch; width: 100%; } .barra-sito__azioni .bottone { text-align: center; } /* IL CURSORE NON HA SENSO IN COLONNA: è un filetto largo quanto la voce, pensato per una fila * orizzontale. Qui si spegne e torna il filetto fisso della pagina corrente, quello che * `sito.css` disegna e che la regola `.js` toglie quando il cursore c'è. */ .barra-sito__cursore { display: none; } .js .barra-sito__voci a[aria-current="page"] { border-bottom-color: var(--jura-oro); } /* Il velo. Sotto il pannello e sopra tutto il resto: la barra sta a `z-index: 40`, quindi 39. */ .barra-sito__velo { position: fixed; inset: 0; z-index: 39; /* `--jura-blu-notte-scuro` e non un nero generico: il velo è del colore del sito, come il * pannello che copre. Qui la prima versione citava `--jura-inchiostro`, che non esiste: * `color-mix` con una variabile assente non è un errore, è una dichiarazione invalida — il * velo restava trasparente e la pagina sembrava semplicemente non oscurarsi. È la ragione * per cui `verifica-wp.sh` ha un controllo sulle variabili orfane. */ background: color-mix(in srgb, var(--jura-blu-notte-scuro) 62%, transparent); opacity: 0; transition: opacity var(--durata) var(--curva); } .menu-aperto .barra-sito__velo { opacity: 1; } /* La pagina sotto non scorre mentre il pannello è aperto: senza, il dito scorre il testo dietro * e il pannello sembra staccato da ciò che copre. */ .menu-aperto, .menu-aperto body { overflow: hidden; } } /* ------------------------------------------------------------------------------------------------- * 4. GLI APPROFONDIMENTI * * COSA C'È QUI E COSA NO. Quasi nulla: l'elenco degli articoli usa `.griglia .griglia--3` e * `.scheda`, il corpo dell'articolo usa `.testo-legale`, l'apertura usa `.eroe`. Sono i contenitori * che il sito ha già, e riusarli non è pigrizia — è la sola garanzia che una sezione nata dopo non * si legga come un pezzo aggiunto da qualcun altro. * * Restano tre cose che il disegno originale non prevedeva, perché non c'erano articoli: un eroe * senza figura, una scheda con l'immagine in cima, e la riga di data e categoria. * ---------------------------------------------------------------------------------------------- */ /* L'EROE SENZA FIGURA. `.eroe__interno` è una griglia a due colonne — testo e disegno. Con un * figlio solo il testo resterebbe nella prima colonna e mezza pagina sarebbe vuota: non un errore, * ma un'aria da pagina incompleta. Qui la colonna è una, e la larghezza del testo la limita * `--larghezza-editoriale`, che è la stessa misura di lettura del resto del sito. */ /* LA SELEZIONE È `.eroe--sito .eroe__interno--pieno` E NON SOLO `.eroe__interno--pieno`, e la * differenza si è vista subito: `sito.css` dichiara la griglia a due colonne su * `.eroe--sito .eroe__interno`, che vale 0-2-0. Una classe sola vale 0-1-0 e perde, comunque sia * scritta dopo. La griglia restava a due colonne, e con tre figli — data, titolo, sommario — il * titolo dell'articolo finiva nella colonna di destra, sotto il vuoto lasciato dalla figura che * qui non c'è. Sembrava una scelta di impaginazione. */ .eroe--sito .eroe__interno--pieno { grid-template-columns: minmax(0, 1fr); } .eroe--sito .eroe__interno--pieno > * { max-width: var(--larghezza-editoriale); } /* Un'apertura più bassa: senza figura da accogliere, l'altezza dell'eroe delle pagine editoriali * diventerebbe uno spazio vuoto prima del primo articolo. */ .eroe--stretto .eroe__interno { padding-block: var(--sp-7); } /* IL TITOLO NON SI SPEZZA A 14 CARATTERI. `sito.css` limita `.eroe--sito .eroe__claim` a `14ch`, * ed è giusto là: i claim delle pagine editoriali sono frasi di tre o quattro parole che devono * andare a capo dove decide il disegno. Qui il titolo è UNA parola — «Approfondimenti», sedici * caratteri — e quella misura la spezzava in «Approfondiment / i». Un titolo troncato a metà parola * è il primo elemento della pagina, e non c'è nulla di più visibile. * * La misura di lettura resta, ma è quella dei testi: la larghezza editoriale, non quattordici * caratteri contati su una frase che qui non esiste. */ .eroe--sito.eroe--stretto .eroe__claim { max-width: min(100%, var(--larghezza-editoriale)); } /* LA SCHEDA DI UN ARTICOLO. L'immagine sta in cima e tocca i bordi: dentro `.scheda`, che ha il * proprio incasso, un'immagine con margini sembrerebbe appiccicata sopra il testo invece di far * parte della scheda. I margini negativi la riportano al bordo, e il raggio segue quello della * scheda perché due raggi diversi sullo stesso angolo si vedono. */ .scheda--articolo { display: flex; flex-direction: column; } .scheda--articolo .scheda__figura { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); } .scheda--articolo .scheda__figura img { display: block; width: 100%; height: auto; border-radius: var(--raggio) var(--raggio) 0 0; } /* Il titolo della scheda non è un collegamento colorato: tutta la scheda porta all'articolo, e un * titolo in oro dentro una scheda già cliccabile aggiunge un segnale di troppo. Il colore arriva * al sorvolo, dove serve. */ .scheda--articolo .scheda__titolo a { color: inherit; text-decoration: none; } .scheda--articolo .scheda__titolo a:hover, .scheda--articolo .scheda__titolo a:focus-visible { color: var(--jura-oro); } /* L'ultimo elemento si allunga: con schede di lunghezza diversa, i sommari restano allineati in * alto e le schede in griglia finiscono tutte alla stessa altezza. */ .scheda--articolo > :last-child { margin-top: auto; margin-bottom: 0; } /* DATA E CATEGORIA, sulla stessa riga e separate da un punto mediano disegnato, non scritto: un * separatore battuto a mano finirebbe nel testo che un lettore di schermo annuncia. */ .articolo__meta { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; } .articolo__meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: var(--sp-3); vertical-align: middle; border-radius: var(--raggio-pill); background: currentColor; opacity: 0.5; } .articolo__meta a { color: inherit; } /* L'immagine in cima all'articolo: stessa larghezza della colonna di lettura, non a tutta pagina. * Un'immagine più larga del testo che accompagna sposta l'occhio fuori dalla riga di lettura * proprio nel punto in cui la lettura comincia. */ .articolo__figura img { display: block; width: 100%; height: auto; border-radius: var(--raggio); } /* La navigazione fra le pagine dell'elenco: i due bottoni ai due estremi, e se ce n'è uno solo * resta al suo posto invece di scivolare al centro. */ .elenco-articoli .wp-block-query-pagination { justify-content: space-between; } /* UN TITOLO PER CHI ASCOLTA, NON PER CHI GUARDA. Serve all'elenco degli approfondimenti, che ha * bisogno di un nome accessibile e non di un titolo in più sopra le schede. La tecnica è quella * consueta — un ritaglio di un pixel — e NON `display: none` né `visibility: hidden`, che * toglierebbero l'elemento anche a chi ascolta, cioè proprio a chi deve sentirlo. */ .solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* IL SEGNAPOSTO DENTRO LA SCHEDA. `.slot-foto` nasce per stare dentro una colonna di testo, con il * proprio raggio su tutti e quattro gli angoli; qui sta in cima a una scheda e ne tocca i bordi, * quindi gli angoli di sotto sono quadrati come quelli dell'immagine vera che un giorno lo * sostituirà. Se i due avessero raggi diversi, il giorno della sostituzione la scheda cambierebbe * forma — ed è esattamente ciò che uno slot serve a evitare. */ .scheda--articolo .slot-foto { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); border-width: 0 0 1px; border-radius: var(--raggio) var(--raggio) 0 0; background: var(--colore-superficie-alt); }