/** * LE RADICI — i gettoni del sito, dichiarati UNA VOLTA SOLA. * * ================================================================== * PERCHE' QUESTO FILE ESISTE. * * Fino a ieri questo stesso blocco di variabili stava scritto per * intero dentro a SETTE fogli di stile diversi: caroselli, distintivi, * doppiaggio, italianismi, leggi, speaking, account. Ogni volta * copiato e incollato. Seimilaquattrocento byte di roba identica. * * Non era solo peso. Era il modo in cui si e' rotto il sito. * * In due copie — quella del test e quella del percorso — dentro al * blocco era finito questo: * * --fpe-accent: var( --fpe-accent, #38bdf8 ); * * Una variabile che cita SE STESSA. E' un giro chiuso, e il browser la * butta via: accento, pannello, bordo e angoli restavano senza valore, * e quelle due pagine venivano fuori come testo secco su fondo vuoto. * Un difetto che non si vede leggendo — la riga sembra giusta — e che * si moltiplica a ogni copia. * * ================================================================== * LA CURA: UN POSTO SOLO. * * I gettoni stanno qui, su `:root`, e da li' scendono in tutta la * pagina per conto loro. Gli altri fogli non li dichiarano piu': li * USANO e basta. Tre cose migliorano insieme: * * PESO — seimila byte in meno, e un file che il browser tiene * in cache una volta per tutto il sito; * COERENZA — lui cambia il colore d'accento in un punto e cambia * ovunque, comprese le parti che non stava guardando; * SICUREZZA — il giro chiuso non si puo' piu' rifare per copia, * perche' non c'e' piu' niente da copiare. * * ================================================================== * DA DOVE ARRIVANO I COLORI. * * Da FP Home Manager: e' lui che disegna la homepage ed e' li' che lui * sceglie l'accento (`--fp-accent`). Qui si eredita quello, con un * valore di scorta se per qualche motivo non ci fosse. Cosi' il sito * ha una regia sola invece di due che si contraddicono. */ :root { /* --- i colori d'accento, decisi in homepage -------------------- */ --fpe-accent: var( --fp-accent, #38bdf8 ); --fpe-accent-2: var( --fp-accent-2, #c084fc ); --fpe-on-accent: #000; /* --- i fondi --------------------------------------------------- */ --fpe-panel: rgba( 15, 23, 42, .42 ); --fpe-panel-2: rgba( 255, 255, 255, .04 ); --fpe-solid: rgba( 10, 15, 30, .97 ); --fpe-card: #0f172a; --fpe-vetro: rgba( 255, 255, 255, .055 ); /* --- i bordi --------------------------------------------------- */ --fpe-line: rgba( 255, 255, 255, .06 ); --fpe-line-2: rgba( 255, 255, 255, .12 ); --fpe-bordo: rgba( 255, 255, 255, .13 ); /* --- il testo, dal più acceso al più smorzato ------------------- */ --fpe-title: #ffffff; --fpe-text: #e2e8f0; --fpe-dim: #cbd5e1; --fpe-muted: #94a3b8; --fpe-faint: #64748b; /* --- giusto e sbagliato ---------------------------------------- */ --fpe-ok: #4ade80; --fpe-ok-soft: rgba( 74, 222, 128, .14 ); --fpe-bad: #fb7185; --fpe-bad-soft: rgba( 251, 113, 133, .13 ); /* --- le misure -------------------------------------------------- */ --fpe-blur: 6px; --fpe-glow: 1; --fpe-card-h: 260px; --fpe-gap: 18px; --fpe-pad: 26px; --fpe-space: 44px; --fpe-basis: calc( ( 100% - ( 3 * var( --fpe-gap ) ) ) / 4 ); --fpe-larghezza: 1400px; /* --- LE MISURE DELLA PAGINA, e il «rimpaginamento» --------------- * * IL DIFETTO CHE QUESTE TRE RIGHE RIPARANO. * Su un monitor grande gli articoli erano una colonnina di 860 pixel * con mezzo schermo vuoto ai lati, e il testo restava di 15 pixel * come su un telefono. Il monitor grande non serviva a niente. * * La cura non è «allargare tutto»: una riga di testo lunga mezzo * metro non si legge, si perde il capo quando si va a capo. La cura * è che larghezza e grandezza del testo crescano INSIEME, così il * numero di parole per riga resta quello giusto e quello che cambia * è quanto sono grandi. * * `clamp( minimo, formula, massimo )` fa esattamente questo: * · il minimo e il massimo sono in `rem`, cioè seguono lo zoom del * browser e la misura del carattere scelta da chi guarda; * · in mezzo c'è una parte in `vw`, cioè in percentuale di * schermo. * Dato che lo zoom cambia quanti pixel sta lo schermo, ZOOMANDO LA * PAGINA SI RIMPAGINA DA SOLA. È il «sistema in base allo zoom» * senza un programma che gira: sono tre righe di foglio di stile, e * non costano un byte di scaricamento in più. * * Le misure, in pratica: * telefono 390px → colonna piena, testo 16,5px * portatile 1280 → colonna 864px, testo 18,5px * monitor 1920 → colonna 966px, testo 19px * monitor 2560 → colonna 1056px, testo 19px */ --fpe-lettura: min( 100%, clamp( 54rem, 34rem + 22vw, 66rem ) ); --fpe-largo: min( 100%, clamp( 54rem, 30rem + 46vw, 84rem ) ); --fpe-testo: clamp( 1.03rem, .98rem + .22vw, 1.19rem ); --fpe-h1: clamp( 1.55rem, 1.2rem + 1.5vw, 2.5rem ); --fpe-h2: clamp( 1.22rem, 1.06rem + .7vw, 1.72rem ); --fpe-h3: clamp( 1.06rem, 1rem + .36vw, 1.3rem ); /* --- UN COLORE PER MATERIA, SEMPRE LO STESSO --------------------- * * Nel cielo i colori venivano scelti «il primo braccio azzurro, il * secondo viola», cioè per POSIZIONE. Bastava che una materia * restasse senza articoli e tutti i colori scalavano: la Grammatica * di ieri era viola e oggi è verde. Un colore che cambia non è un * codice, è rumore. * * Adesso il colore sta attaccato alla materia, qui, in un punto * solo, e vale nel cielo, nei caroselli, nella bacheca e dentro la * lezione. Dopo tre minuti sul sito uno sa che azzurro = parole. */ --fpe-m-vocabolario: #38bdf8; /* azzurro — le parole */ --fpe-m-grammatica: #c084fc; /* viola — le regole */ --fpe-m-speaking: #34d399; /* verde — la voce */ --fpe-m-reading: #fbbf24; /* ambra — le storie */ --fpe-m-altro: #818cf8; /* per una materia nuova */ /* --- gli angoli -------------------------------------------------- */ --fpe-r: 12px; --fpe-r-lg: 18px; --fpe-r-pill: 22px; /* --- le ombre ---------------------------------------------------- */ --fpe-shadow: 0 16px 36px rgba( 0, 0, 0, .6 ); --fpe-shadow-lg: 0 18px 44px rgba( 0, 0, 0, .75 ); /* --- i caratteri -------------------------------------------------- * `inherit` non è pigrizia: è la regola. Un carattere dichiarato qui * dentro renderebbe queste parti diverse dal resto del sito, e * basterebbe che lui cambiasse il carattere del tema perché il * plugin restasse indietro con un carattere suo. */ --fpe-sans: inherit; /* ANCHE IL MONOSPAZIATO EREDITA, e questa è una decisione, non una svista. Il gettone si chiamava «mono» e valeva un carattere a larghezza fissa, usato sulle etichettine (A1, 3 min). La sezione della lettura lo aveva già spento per conto suo, con una motivazione che vale per tutto il sito: «un secondo carattere è comunque un secondo carattere». Chi legge non deve incontrarne due. Le etichettine restano etichettine lo stesso: a farle leggere così sono il grassetto e la spaziatura fra le lettere, non la larghezza fissa. Il nome del gettone resta, così nessun foglio si rompe: cambia solo cosa vale. */ --fpe-mono: inherit; /* --- il movimento ------------------------------------------------- * Una curva sola per tutto il sito. È la differenza — piccola e * decisiva — fra «carino» e «costoso»: le transizioni lineari * sembrano meccaniche, questa parte piano e arriva piano. */ --fpe-molla: cubic-bezier( .22, 1, .36, 1 ); } /* ===================================================================== * LA MISURA DEL TESTO, APPLICATA UNA VOLTA SOLA * --------------------------------------------------------------------- * I gettoni qui sopra non fanno niente da soli: qualcuno li deve usare. * Questa è l'unica regola di questo file, e c'è un motivo per cui sta * qui invece che sparsa in dieci fogli. * * Le sezioni del plugin — vocabolario, speaking, grammatica, lettura, * museo, doppiaggio, test, percorso — sono nate in momenti diversi e * ognuna aveva la sua misura di testo scritta a mano. Su un monitor * grande restavano tutte piccole uguali, e cambiarle voleva dire * ricordarsi di dieci file. * * Da qui salgono e scendono insieme, e chi apre il sito da un monitor * da 27 pollici legge un testo da 27 pollici. * * `font-size` sul contenitore e non su ogni pezzo: dentro, le misure * scritte in `em` (che vuol dire «rispetto al testo intorno») seguono * da sole, e le proporzioni di ogni sezione restano quelle che erano. * ===================================================================== */ .fpe-top, .fpe-parla, .fpe-leggi, .fpe-voc-app, .fpe-score, .fpe-museo, .fpe-dub, .fpe-drill, .fpe-test, .fpe-percorso, .fpe-lez { font-size: var( --fpe-testo ); } /* ===================================================================== * IL TASTO CHE SPARISCE — la riparazione più importante di questa * versione, e la più difficile da vedere. * --------------------------------------------------------------------- * COSA SUCCEDEVA. Sul sito vero, il tasto «Comincia» del riquadro che * propone il test di livello era un ovale azzurro VUOTO. La parola * c'era, era al suo posto, era della misura giusta — ma era azzurra * sopra all'azzurro. Invisibile. Il primo tasto che un visitatore nuovo * incontra, e non si leggeva. * * PERCHE'. Il tema e FP Home Manager, per far risaltare i collegamenti * su un fondo scuro, li colorano tutti di azzurro con una regola * scritta così: * * body a:not(.fp-cat-menu a):not(.fp-quality button) { color: … } * * In CSS, quando due regole dicono cose diverse sullo stesso pezzo, * vince quella scritta in modo più «preciso» — e quella riga, con i due * `:not()`, è più precisa di un semplice `.fpe-pop-si`. Quindi vinceva * lei, anche se la nostra veniva dopo. * * LA RIPARAZIONE. Qui sotto il nome della classe è ripetuto tre volte. * Non è un errore di battitura: è il modo pulito di dire «questa regola * conta più di quella», senza usare `!important` — che è la scorciatoia * che poi non si riesce più a scavalcare quando serve davvero. * * E il colore sta in un gettone solo: se un giorno il fondo dei tasti * cambia, si cambia una riga. * ===================================================================== */ :root { --fpe-sul-chiaro: #06131f; } a.fpe-pop-si.fpe-pop-si.fpe-pop-si, a.fpe-casa-vai.fpe-casa-vai.fpe-casa-vai, a.fpe-casa-comincia.fpe-casa-comincia.fpe-casa-comincia, a.fpe-casa-ritorno-vai.fpe-casa-ritorno-vai.fpe-casa-ritorno-vai, a.fpe-cielo-vai.fpe-cielo-vai.fpe-cielo-vai, a.fpe-lez-vai.fpe-lez-vai.fpe-lez-vai, a.fpe-test-vai.fpe-test-vai.fpe-test-vai, a.fpe-via-apri.fpe-via-apri.fpe-via-apri, a.fpe-via-qui.fpe-via-qui.fpe-via-qui { color: var( --fpe-sul-chiaro ); } /* E il contrario: i tasti «scavati», che sono scritti in azzurro su un fondo scuro, devono restare azzurri anche dove il tema deciderebbe altrimenti (per esempio nelle pagine con la barra laterale bianca). */ a.fpe-casa-cielo-vai.fpe-casa-cielo-vai.fpe-casa-cielo-vai:hover { color: var( --fpe-sul-chiaro ); } /* ===================================================================== * IL LAMPO SUL NOME DEL SITO * --------------------------------------------------------------------- * Passi sopra a «FP English.TOP» in cima alla pagina e ci scorre sopra * una luce, da sinistra a destra. Sette decimi di secondo, e basta. * * PERCHE' COSI' E NON CON L'ONDA DI LETTERE. L'onda (quella dei titoli * dei caroselli) ha bisogno di un programma che tagli la scritta in * lettere, e il nome del sito sta in cima a TUTTE le pagine — anche ai * 221 articoli, che oggi non scaricano nemmeno un byte di programma. * Caricare un file su tutto il sito per un effetto al passaggio del * mouse sarebbe il contrario di «il sito deve restare snello». * * Questo invece è solo foglio di stile, sta in un file che c'è già, e * pesa quattro decimi di kilobyte una volta sola. * * E' SCRITTO IN MODO DA NON POTER ROMPERE NIENTE: non tocca il colore * del testo. La luce è un velo sopra, in «overlay». Se un browser non * lo capisce, non succede niente — il nome resta il nome. * ===================================================================== */ .site-title a, .site-title-footer a { position: relative; display: inline-block; overflow: hidden; } .site-title a::after, .site-title-footer a::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay; background: linear-gradient( 105deg, transparent 38%, rgba( 255, 255, 255, .85 ) 50%, transparent 62% ); transform: translateX( -120% ); } .site-title a:hover::after, .site-title a:focus-visible::after, .site-title-footer a:hover::after { opacity: 1; animation: fpe-lampo .7s cubic-bezier( .3, .8, .3, 1 ) 1; } @keyframes fpe-lampo { from { transform: translateX( -120% ); } to { transform: translateX( 120% ); } } @media ( prefers-reduced-motion: reduce ) { .site-title a::after, .site-title-footer a::after { display: none; } } /* ===================================================================== * L'ONDA DI LETTERE sui titoli di sezione (EST-07 della libreria) * --------------------------------------------------------------------- * Passi sopra «LE PAROLE CHE TI SERVONO» e le lettere si sollevano una * dopo l'altra, tingendosi di azzurro. Sei decimi di secondo, e smette. * * Non c'è un programma che gira: ogni lettera porta scritto il suo * numero d'ordine e parte 38 millisecondi dopo la precedente. Il * browser muove solo `transform` e `color`, che sono le due cose che * sa fare senza rifare i conti della pagina. * * IL TAGLIO E' PER PAROLE. Ogni parola è un pezzo unico che va a capo * intero: dentro ci sono le lettere, che non vanno a capo mai. Un * titolo lungo si spezza come si spezza una frase. * ===================================================================== */ .fpe-onda { display: flex; flex-wrap: wrap; column-gap: .3em; cursor: default; } .fpe-onda-p { display: inline-flex; white-space: nowrap; } .fpe-onda-p > span { display: inline-block; will-change: transform; } .fpe-onda:hover .fpe-onda-p > span { animation: fpe-onda-su .6s cubic-bezier( .25, .9, .3, 1 ) both; animation-delay: calc( var( --i ) * 38ms ); } @keyframes fpe-onda-su { 0% { transform: translateY( 0 ); color: inherit; } 40% { transform: translateY( -.18em ); color: var( --fpe-accent ); } 100% { transform: translateY( 0 ); color: inherit; } } @media ( prefers-reduced-motion: reduce ) { .fpe-onda:hover .fpe-onda-p > span { animation: none; } }