/* Theme Name: Astra Atlante Theme URI: https://atlantegoloso.it/ Description: Child theme di Astra per L'Atlante Goloso. Sostituisce le pagine HTML autonome pubblicate come blocchi wp:html con un custom post type «piatto» e i suoi template. I design token sono quelli delle pagine esistenti: verde bosco, crema, lime, vinaccia. Author: Pietro Talè Template: astra Version: 0.2.3 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: astra-atlante */ /* Gli override generali stanno qui. I token in tokens.css, la base in base.css, i componenti in components.css: si caricano in quest'ordine da functions.php. */ /* ---------- override su Astra ---------- Astra colora il tramite la classe del suo layout, che sul singolo piatto e' «ast-separate-container»: quel colore e' --ast-global-color-5, cioe' #F0F5FA, l'azzurrino. Come selettore una classe pesa piu' di «html body», quindi vinceva lei. Qui si pareggia il conto con «body[class]», che vale quanto una classe: a parita' di peso vince chi carica dopo, e il foglio del tema figlio e' l'ultimo. Niente !important, e soprattutto niente dipendenza dal nome della classe, che cambia se cambia il layout di Astra. */ html body[class]{background:var(--fondo);color:var(--sage)} /* ---------- il menu sul telefono ---------- Fino a ieri le voci restavano in fila anche a 375px: il marchio andava a capo e ogni voce si spezzava in due righe. Lo stesso succede sul sito di oggi, non e' una cosa nata con il tema nuovo. Qui sotto i 760px le voci si chiudono dietro un pulsante e si aprono in colonna, con bersagli grandi abbastanza da centrarli con il pollice. */ .apri-menu{display:none} @media(max-width:760px){ .nav{position:relative;gap:.6rem;padding:.7rem clamp(1rem,4vw,1.4rem)} /* Il marchio sta su una riga sola: andare a capo lo faceva sembrare due cose. */ .wordmark{font-size:1.06rem;white-space:nowrap} .apri-menu{display:flex;align-items:center;gap:.55rem;margin-left:auto; min-height:44px;padding:.5rem .9rem;border:1px solid var(--velo); border-radius:999px;background:transparent;color:var(--crema); font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem; cursor:pointer} .apri-menu .barre{display:grid;gap:4px;width:18px} .apri-menu .barre i{display:block;height:2px;border-radius:2px;background:var(--verde); transition:translate .2s,rotate .2s,opacity .15s} .apri-menu[aria-expanded="true"] .barre i:nth-child(1){translate:0 6px;rotate:45deg} .apri-menu[aria-expanded="true"] .barre i:nth-child(2){opacity:0} .apri-menu[aria-expanded="true"] .barre i:nth-child(3){translate:0 -6px;rotate:-45deg} /* Chiuso non occupa spazio e non si raggiunge nemmeno col tasto di tabulazione. */ .nav-links{display:none;position:absolute;left:0;right:0;top:100%;z-index:60; flex-direction:column;gap:0; background:var(--fondo-3);border-top:1px solid var(--velo); box-shadow:0 24px 40px -24px rgba(0,0,0,.7)} .nav-links.aperto{display:flex} .nav-links a{display:block;padding:.95rem clamp(1rem,4vw,1.4rem);min-height:48px; border-bottom:1px solid var(--velo);font-size:1.05rem} .nav-links a:last-child{border-bottom:0} } /* Chi ha chiesto meno animazioni non vede le barre ruotare. */ @media(prefers-reduced-motion:reduce){ .apri-menu .barre i{transition:none} } /* ---------- bersagli grandi abbastanza per il pollice ---------- Misurato a 375px: le chip delle liti venivano alte 34px e i collegamenti del pie' di pagina 19. Sotto i 44px si sbaglia mira, e le chip sono la cosa piu' toccata della pagina. Si allarga l'area utile senza toccare l'aspetto: il riempimento cresce, il testo resta dov'e'. */ @media(max-width:760px){ .chip{display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding-block:.6rem} /* Le briciole e il ritorno al viaggio: righe sole, facili da mancare. */ .breadcrumb a, .torna a{display:inline-flex;align-items:center;min-height:44px} /* Il pie' di pagina e' tutto collegamenti, uno sotto l'altro. */ .ft-col a, .ft-bottom a{display:inline-flex;align-items:center;min-height:40px} /* Le domande frequenti si aprono toccando il titolo: che sia comodo. */ .faq summary{min-height:48px;display:flex;align-items:center} } /* ---------- senza JavaScript il testo si deve vedere lo stesso ---------- «.reveal» parte a opacita' zero e aspetta che lo scorrimento la riveli. Se il JavaScript non arriva, e sul sito vero e' successo (qualcosa lassu' toglie i file di script del tema), resta invisibile tutto il racconto: la pagina sembra mezza vuota. Qui si ribalta la regola. Il nascondere vale solo se una riga di script, stampata dentro la pagina, ha marcato la radice: se quella riga non parte, non si nasconde niente e si vede tutto. */ .reveal{opacity:1;translate:none} html.js-attivo .reveal{opacity:0;translate:0 26px} html.js-attivo .reveal.in{opacity:1;translate:0 0} @media(prefers-reduced-motion:reduce){ html.js-attivo .reveal{opacity:1;translate:none;transition:none} } /* ---------- il respiro fra le sezioni ---------- Ogni sezione aveva clamp(4rem,8vw,6.5rem) sopra e sotto, cioe' 102px al monitor: fra la fine di un blocco e il titolo del successivo passavano 205px, e si notava. Era cosi' anche prima del trasloco, misurato; si stringe per scelta, non per riparare. «main section» pesa piu' di «section» e batte i fogli generati senza doverli toccare. */ main section{padding-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem)} /* ---------- le righe del pie' di pagina ---------- Ogni collegamento aveva .6rem sopra e sotto piu' l'interlinea del testo corrente: 47px a riga, sei righe nei contatti facevano una colonna alta quanto tutto il resto. Era cosi' anche prima, ma si stringe per scelta: interlinea da titolo, riempimento dimezzato. Sotto i 760px vale ancora la regola dei 40px di altezza, che sta piu' sopra ed e' piu' specifica. */ footer .ft-col a{padding:.28rem 0;line-height:1.3} footer .ft-col h3{margin-bottom:.55rem} footer .ft-bottom p{line-height:1.5} footer .ft-bottom p+p{margin-top:.55rem} /* Meno aria fra le colonne e la riga finale: 48px di margine piu' 29 di riempimento erano ereditati dal disegno di prima; qui si dimezzano. */ footer .ft-bottom{margin-top:clamp(1.2rem,2.5vw,1.6rem);padding-top:1rem} /* «Crediti e note», in coda alla sezione Errata di Chi scrive: e' un blocco aggiunto dopo, e l'azzeramento lo incollava al pulsante e ai suoi paragrafi. */ #note h3{font-size:1.25rem;margin-bottom:.6rem} #note p{font-size:1rem;color:var(--sage)} #note p+p{margin-top:.7rem} /* Arrivando da un'ancora il punto non deve finire attaccato al bordo alto. */ [id]{scroll-margin-top:1.5rem} /* Le foto tengono le proporzioni. Ad Astra tolto il foglio si e' scoperto che il suo «img{height:auto}» lo stavamo usando senza saperlo: i nostri tag portano width e height scritti dentro (servono a non far ballare la pagina mentre carica), e senza «height:auto» la larghezza si adattava e l'altezza no. Le pagine crescevano di mille pixel e le foto erano stirate. Il nostro base.css diceva solo «max-width:100%», perche' le pagine di partenza non avevano quegli attributi. */ img{height:auto}