/* Archivi dei luoghi di VisitCaprarola. SCOPO Dare una forma alle quindici pagine che elencano luoghi: l'archivio del tipo di contenuto (/visitare/) e i quattordici archivi per tassonomia (/luoghi// e /punti-sosta//). Tutte e quindici passano per
e mostrano la stessa scheda della homepage. PERCHE ESISTE UN FOGLIO A PARTE, e non due righe dentro vc-home.css. vc-home.css e diviso in due meta: - le regole della SCHEDA (.vc-luogo-scheda, .vc-luogo-immagine e le loro immagini, il sollevamento, lo zoom, l'ombra) sono scritte SENZA prefisso di pagina: valgono ovunque quel markup compaia; - le regole della DIDASCALIA sono scritte "#homepage #visitare h2.page-title" perche dovevano battere "#homepage #visitare h2" (2,0,1) di style.css. La prima meta funziona qui gratis, appena vc-home.css viene accodato anche su queste pagine. La seconda no: fuori dalla homepage quei selettori non hanno bersaglio. Questo foglio riscrive SOLO quella seconda meta, con l'ancoraggio giusto per il contesto degli archivi. Nessuna riga di vc-home.css e copiata. ORDINE DI CARICAMENTO library/joints.php accoda vc-home.css e poi questo foglio, e solo dove serve: is_post_type_archive( 'luoghi_da_visitare' ) oppure is_tax( array( 'categorie_luoghi', 'punti-sosta' ) ). Dipendenza dichiarata da vc-tokens, style.css, vc-mobile.css, vc-nav.css e vc-home.css. vc-a11y.css resta l'ultimo della coda, come prescrive il commento in joints.php. Le variabili locali --vc-home-* le dichiara vc-home.css nel proprio :root; qui non se ne dichiarano di nuove, ma ogni var() porta con se il valore di ripiego, cosi il foglio regge anche se un domani quella dipendenza cambia. I BREAKPOINT sono quelli di Foundation 5 gia in uso: small fino a 40em, medium da 40.063em, large da 64.063em. Le media query non accettano var(), quindi i valori sono scritti per esteso. In questo file non c'e nessun !important. -------------------------------------------------------------------------- LA REGOLA STORICA CHE QUESTO FOGLIO DEVE BATTERE, misurata su library/css/style.css righe 101-106: #main-visit h2 (1,0,1) background-color #374A66 color #FFF padding 0.5em font-size 1em ATTENZIONE, ed e il motivo per cui la nota va scritta qui e non altrove: nel file quella regola e RIENTRATA di un tabulatore, come se stesse dentro un blocco. NON ci sta. Il blocco @media piu vicino si chiude alla riga 78, ventitre righe sopra, e la regola successiva ("#homepage #dormire h2", riga 108) e di nuovo a margine zero. Il rientro e un residuo di editing: la regola vale a QUALSIASI larghezza di viewport, e su ogni h2 dentro #main-visit senza eccezioni. E per questo che il titolo di pagina degli archivi e un

e non un

: un

li sarebbe diventato una banda blu larga quanto la colonna. Vedi anche la sezione 4, che difende il caso che il markup non controlla. IL DIFETTO PIU GRAVE, ed e la ragione per cui la sezione 3 nasce insieme alla correzione del PHP e non dopo. style.css dipinge la didascalia con background-color #374A66 e color #FFF, ma il titolo delle schede non e testo nudo: e h2.page-title e contiene un . Il colore di un link non si eredita, e nessuna regola del tema colora quel link: vince "a, a:visited { color:#003882 }" di style.css riga 200. Blu #003882 su blu #374A66 da 1.24:1, contro i 4.5 che il criterio 1.4.3 richiede. E esattamente per questo che in F6 il titolo di /visitare/ era rimasto SENZA link: meglio un titolo non tappabile che un titolo illeggibile. La correzione giusta e sempre stata "prima la regola di colore, poi il link", ed e cio che la sezione 3.1 fa. Bianco su #374A66 da 9.00:1. -------------------------------------------------------------------------- */ /* =============================================================== 1. Titolo dell'archivio — h1.vc-sezione-titolo Cosa devo battere: "h1 { font-size: var(--vc-h1-fluido) }" (0,0,1) di vc-mobile.css. Il mio "#main-visit .vc-sezione-titolo" e (1,1,0) e vince a prescindere dall'ordine. PERCHE L'ANCORAGGIO E UN ID E NON LA SOLA CLASSE. La classe .vc-sezione-titolo la usa anche loop-homepage.php, dove ha gia il suo trattamento in vc-home.css. Se scrivessi ".vc-sezione-titolo" nudo, e un domani questo foglio finisse accodato anche altrove, mi troverei due dichiarazioni concorrenti sullo stesso elemento. Legandolo a #main-visit il raggio d'azione e esattamente quello delle pagine che questo foglio possiede. PERCHE LA RAMPA E QUELLA DELL'H1 E NON QUELLA DEI TITOLI DI SEZIONE DELLA HOMEPAGE. In homepage .vc-sezione-titolo sta su un

: e un divisorio dentro una pagina che il suo titolo ce l'ha altrove, e 24->34px sono giusti. Qui invece e il titolo PRINCIPALE della pagina, l'unico

, e la misura giusta e quella che vc-mobile.css ha gia calcolato per gli h1: 34->44px. Riuso il token invece di riscrivere una clamp, cosi se la scala del sito cambia questo titolo la segue. =============================================================== */ #main-visit .vc-sezione-titolo { font-size: var(--vc-h1-fluido, clamp(2.125rem, 1.502rem + 3.115vw, 2.75rem)); line-height: var(--vc-interlinea-stretta, 1.25); font-weight: var(--vc-peso-grassetto, 700); color: var(--vc-home-testo-forte, #11273d); /* 15.20:1 su bianco */ /* Spazio sopra RIDOTTO rispetto alla homepage, ed e una divergenza voluta. vc-home.css da 60px di stacco sopra i titoli di sezione e li spiega: "sopra il primo titolo c'e un paragrafo di testo, non il bordo della pagina". Qui e il contrario — sopra c'e la testata del sito e nient'altro — e 60px lascerebbero un vuoto che sembra un errore di caricamento. 30px sopra e 22.5px sotto: due gradini della scala dei token, e il titolo resta piu vicino a cio che introduce che a cio che lo precede. */ margin: var(--vc-spazio-4, 1.875rem) 0 var(--vc-spazio-3, 1.40625rem); } /* Il segno di sezione: la stessa barretta ambra corta SOPRA il titolo che la homepage usa. Non e decorazione ripetuta per vezzo: e cio che fa riconoscere /luoghi/chiese/ e la homepage come parti dello stesso sito. Puramente decorativa, non porta informazione che non sia gia nel titolo accanto, quindi il suo 2.35:1 su bianco non ricade sotto il criterio 1.4.11. */ #main-visit .vc-sezione-titolo::before { content: ""; display: block; width: 3rem; height: 4px; margin-bottom: 0.75rem; background-color: var(--vc-home-segno, #f39207); border-radius: var(--vc-raggio-1, 3px); } /* =============================================================== 2. Descrizione del termine — .vc-archivio-descrizione E il testo che il redattore scrive nel campo "Descrizione" del termine. Oggi nessuno dei quattordici termini ce l'ha, quindi queste regole non hanno bersaglio: ci sono perche il markup lo stampa quando c'e, e un contenitore senza forma verrebbe fuori a 16px su tutta la larghezza dello schermo il giorno in cui qualcuno lo compila. =============================================================== */ #main-visit .vc-archivio-descrizione { margin: 0 0 var(--vc-spazio-4, 1.875rem); } #main-visit .vc-archivio-descrizione p { /* 70ch e la stessa scelta, con la stessa motivazione, di vc-mobile.css sezione 3.2 e di vc-home.css sezione 2: il limite sta sull'elemento di testo, non su .row o sulle classi di griglia, quindi la griglia non viene sfiorata. */ max-width: 70ch; line-height: var(--vc-interlinea-ampia, 1.7); margin-bottom: var(--vc-spazio-2, 0.9375rem); } /* =============================================================== 3. La didascalia delle schede — #main-visit h2.page-title Da battere: "#main-visit h2" (1,0,1). Salgo di una sola classe, "#main-visit h2.page-title" (1,1,1), che e il minimo necessario: piu specificita del necessario rende soltanto piu difficile la prossima modifica. Sono gli stessi valori che vc-home.css usa per le schede della homepage, con lo stesso ragionamento dietro ciascuno; qui cambia solo l'ancoraggio. =============================================================== */ #main-visit h2.page-title { margin: 0; background-color: var(--vc-home-tessera-fondo, #374a66); /* Il padding di style.css e 0.5em uniforme e il testo tocca i lati. 0.7rem sopra e sotto, 0.85rem ai lati, come in homepage. */ padding: 0.7rem 0.85rem; border-radius: 0 0 var(--vc-home-raggio, 6px) var(--vc-home-raggio, 6px); /* 17px fissi e non fluidi. Qui la fluidita farebbe danno: il corpo determina l'altezza della banda (vedi il min-height del link, sotto) e un corpo che cambia con il viewport farebbe cambiare l'altezza delle schede a meta di una rampa, con le righe della griglia a float che si riallineano di continuo durante il ridimensionamento. */ font-size: 1.0625rem; line-height: 1.3; font-weight: var(--vc-peso-medio, 600); box-shadow: var(--vc-home-ombra-0, 0 0 0 0 rgba(17, 39, 61, 0)); transition: background-color var(--vc-home-durata, 200ms) var(--vc-home-curva, ease), box-shadow var(--vc-home-durata, 200ms) var(--vc-home-curva, ease); } /* --------------------------------------------------------------- 3.1 IL COLORE DEL LINK E la meta indispensabile della correzione descritta in testa al file, e non va mai caricata senza l'altra: questa regola e cio che rende lecito avvolgere il titolo in un dentro partials/loop-archive-vi.php e partials/loop-archive-tassonomia.php. Senza, si otterrebbe #003882 su #374A66, cioe 1.24:1. Serve una regola dedicata perche il color di style.css sta sull'h2 e i link non ereditano il colore: lo prendono da "a, a:visited" (0,0,1). Questo selettore e (1,1,2) e vince largamente. --------------------------------------------------------------- */ #main-visit h2.page-title > a { color: #ffffff; /* 9.00:1 su #374A66 */ /* ALTEZZA COSTANTE. E cio che sostituisce lo style="height:4em" che stava scritto dentro il markup di loop-archive-vi.php: due righe esatte, troncate se il titolo e piu lungo. min-height 2.6em sono due righe a interlinea 1.3, cioe 44.2px con il corpo qui sopra: un titolo di una riga sola occupa comunque lo spazio di due e la banda ha sempre la stessa altezza. 44.2px sono anche, e non per caso, sopra i 44px che vc-mobile.css sezione 1.8 impone a questo stesso link come bersaglio tattile: fra i due fogli non c'e contraddizione. display -webkit-box sostituisce il display block di vc-mobile.css. E necessario, perche line-clamp funziona solo dentro una -webkit-box, e non toglie niente: resta un blocco a tutti gli effetti, quindi il bersaglio tattile non si restringe. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.6em; } /* Il contorno di messa a fuoco del singolo link viene tolto PERCHE E SOSTITUITO, non perche da fastidio: quando questo link ha il fuoco, l'article che lo contiene soddisfa ".vc-luogo-scheda:focus-within" di vc-home.css e disegna il contorno da 3px attorno all'intera scheda. I due stati coincidono sempre, non esiste un istante in cui il fuoco sia invisibile. Lasciarli entrambi darebbe due contorni concentrici. (1,1,2) contro "a:focus" (0,1,1) di vc-a11y.css, che pure arriva dopo nella coda: vince la specificita, come vc-a11y.css stesso documenta nella propria sezione 2.1 per il caso gemello della homepage. */ #main-visit h2.page-title > a:focus { outline: none; } /* --------------------------------------------------------------- 3.2 Stato al passaggio La banda si scurisce (il bianco ci sta sopra a 15.20:1) e prende l'ombra. Il sollevamento della scheda, lo zoom dell'immagine e l'ombra sotto l'immagine arrivano gia da vc-home.css, che li scrive senza prefisso di pagina: qui non vanno riscritti. --------------------------------------------------------------- */ #main-visit .vc-luogo-scheda:hover h2.page-title, #main-visit .vc-luogo-scheda:focus-within h2.page-title { background-color: var(--vc-home-tessera-fondo-2, #11273d); box-shadow: var(--vc-home-ombra, 0 8px 20px 0 rgba(17, 39, 61, 0.22)); } /* =============================================================== 4. La difesa contro la banda blu inattesa "#main-visit h2" colpisce OGNI h2 dentro il contenitore, e c'e un punto in cui il markup non decide: la descrizione del termine e testo del redattore, e un redattore che scrivesse un sottotitolo si ritroverebbe una banda blu piena larga quanto la colonna, senza capire da dove arriva. (1,1,1) contro (1,0,1): vinta. Riporto quegli h2 a titoli normali. Stessa cosa per h3 e h4, che oggi la regola storica non tocca ma che devono restare coerenti se un domani qualcuno la allargasse. Non uso :not() sul selettore della sezione 3 per ottenere lo stesso effetto: :not() avrebbe alzato di un gradino inutile la specificita di tutta quella cascata, e la difesa sarebbe stata invisibile a chi legge il file. =============================================================== */ #main-visit .vc-archivio-descrizione h2, #main-visit .vc-archivio-descrizione h3, #main-visit .vc-archivio-descrizione h4 { background-color: transparent; color: var(--vc-home-testo-forte, #11273d); padding: 0; } /* =============================================================== 5. L'elenco vuoto — .vc-archivio-vuoto partials/content-missing.php NON viene usato dagli archivi dei luoghi, e la ragione e strutturale: quel partial contiene un proprio

, e dopo il titolo del termine sarebbe il secondo

della pagina. Il markup stampa un paragrafo, e questa e la sua forma. SUL COLORE, perche la prima scelta era sbagliata e vale la pena lasciarne traccia. Verrebbe naturale usare --vc-colore-testo-tenue (#868787), che e il grigio "attenuato" del tema: su bianco da 3.60:1, come vc-a11y.css misura alla propria riga 50, cioe sotto il 4.5 del criterio 1.4.3. E un messaggio che il visitatore deve leggere, non una decorazione. Uso quindi il grigio ardesia, che e la sostituzione che vc-a11y.css ha gia adottato ovunque per lo stesso motivo (--vc-a11y-testo-tenue, sezione 3.2): 5.32:1, tono sommesso e leggibile. =============================================================== */ #main-visit .vc-archivio-vuoto { margin: var(--vc-spazio-4, 1.875rem) 0; color: var(--vc-colore-ardesia, #5e6b76); /* 5.32:1 su bianco */ } /* =============================================================== 6. Movimento ridotto Obbligatorio, e va per ultimo: le media query non aggiungono specificita, quindi queste regole vincono sulle precedenti solo perche arrivano dopo. Si azzerano le DURATE, non i comportamenti: il cambio di colore e l'ombra continuano ad accadere, semplicemente accadono subito. Le transizioni della scheda e dell'immagine le azzera gia vc-home.css nella propria sezione 7, con selettori senza prefisso di pagina che valgono anche qui; resta da coprire la sola didascalia, che e l'unica cosa che questo foglio anima. =============================================================== */ @media (prefers-reduced-motion: reduce) { #main-visit h2.page-title { transition-duration: 0.01ms; transition-delay: 0s; animation-duration: 0.01ms; animation-delay: 0s; animation-iteration-count: 1; } }