/** * Etichetta laterale * * Prefisso kb-etichetta-. Non condivide niente con le altre animazioni. * * E' decorativa: nessun testo leggibile, nessun collegamento, nessuna * funzione. Se sparisse non si perderebbe niente tranne l'effetto. * * Nessun !important: se qualcosa non si applica, la causa e' la specificita' * o l'ordine di caricamento, e va corretta li'. * * ------------------------------------------------------------------------ * PERCHE' position: fixed E NON position: sticky * ------------------------------------------------------------------------ * * Non e' una preferenza: su questo sito sticky NON FUNZIONA, su nessun * elemento. Il CSS del Customizer contiene * * body { overflow: hidden; } * html { overflow: auto; } * * e questo cambia chi scorre. La regola di propagazione dell'overflow dice * che e' l'elemento radice a dettare l'overflow della finestra: qui html * vale auto, quindi e' la finestra a scorrere e html stesso si comporta come * visible. Il body, il cui overflow NON viene propagato proprio perche' * quello di html non e' visible, resta con overflow: hidden e diventa un * contenitore di scorrimento che non scorre mai. * * Un elemento sticky si aggancia al piu' vicino antenato che scorre. Per * qualunque cosa dentro il body quell'antenato e' il body, che e' fermo: * l'elemento resta incollato dove sta e non si stacca mai. Da qui la regola. * * Questo assetto non va cambiato. E' un parametro invisibile a chi legge * questo foglio da solo, ed e' il motivo per cui e' scritto qui. * * ------------------------------------------------------------------------ * PERCHE' IL body CON overflow: hidden NON CI TAGLIA * ------------------------------------------------------------------------ * * Due elementi, due ragioni diverse, tutte e due strutturali. * * L'etichetta e' fixed: il suo blocco contenitore e' la finestra, non il * body, e il ritaglio di un antenato vale solo per i discendenti il cui * blocco contenitore sta dentro l'antenato stesso. Lo stesso motivo per cui * il preloader video, che e' fixed con inset: 0 ed e' figlio diretto del * body, copre l'intera finestra e non i soli 1800px a cui il Customizer * limita il body. E' la prova sul campo che questo assetto regge, gia' in * produzione da prima di questo componente. * * La sentinella e' absolute e il body non e' posizionato: il suo blocco * contenitore e' il blocco contenitore iniziale, cioe' di nuovo un antenato * del body. Stessa regola, stessa immunita'. */ /* ---------------------------------------------------------------------- */ /* La sentinella */ /* ---------------------------------------------------------------------- */ /* * E' un blocco alto quanto la soglia, ANCORATO IN CIMA AL DOCUMENTO, e non * un segnalino di un pixel messo a 500px. La differenza e' tutta qui: * * - un segnalino a quota 500 sarebbe gia' dentro una finestra alta 900px * quando lo scorrimento e' a zero, quindi l'osservatore lo troverebbe * intersecante al primo giro e l'etichetta comparirebbe subito; * - un blocco da 0 a 500 esce dalla finestra - bordo inferiore sopra il * bordo superiore della finestra - esattamente quando si sono scorsi * 500px, qualunque sia l'altezza della finestra, e ci RIENTRA quando si * torna indietro. * * Quel "e ci rientra" e' il motivo per cui la sentinella funziona ancora * adesso che l'etichetta commuta nei due versi: il bordo inferiore che * attraversa il bordo superiore della finestra e' un evento simmetrico, e * IntersectionObserver lo riporta in tutte e due le direzioni. * * Quindi la soglia e' geometria, e vive SOLO qui dentro. Il JavaScript non * la legge e non la conosce: cambiarla e' una modifica a questo foglio e a * nient'altro. * * Non e' un listener su scroll: nessun throttling da scrivere, nessun * lavoro a ogni fotogramma - e questo conta piu' di prima, perche' adesso * la zona interessante viene attraversata molte volte per visita e non una. */ .kb-etichetta-sentinella { --kb-etichetta-soglia: 500px; position: absolute; top: 0; left: 0; width: 1px; height: var(--kb-etichetta-soglia); /* * Invisibile e intoccabile, ma con opacity e NON con display: none. * * IntersectionObserver guarda la geometria: opacity non la tocca, quindi * la sentinella resta perfettamente osservabile. display: none invece * toglie del tutto il riquadro, e l'elemento risulterebbe non * intersecante fin dal primo istante, con un riquadro tutto a zero: il * JavaScript lo leggerebbe come "gia' scorsa oltre la soglia" e * l'etichetta comparirebbe subito, su ogni pagina. * * visibility: hidden funzionerebbe - il riquadro resta - ma non * aggiungerebbe niente a opacity, e sarebbe una riga in piu' da capire. */ pointer-events: none; opacity: 0; } /* ---------------------------------------------------------------------- */ /* L'etichetta */ /* ---------------------------------------------------------------------- */ .kb-etichetta { /* --- Misure ----------------------------------------------------- * * C'E' UNA SOLA MISURA DA SCEGLIERE, ED E' LA LARGHEZZA. * * L'altezza non e' piu' un numero: e' calcolata. Prima le due misure * erano indipendenti, e quella costruzione era il difetto. Se si * scelgono larghezza e altezza separatamente, il riquadro interno che * ne risulta ha quasi sempre proporzioni diverse da quelle del logo * ruotato: il logo si ferma sulla dimensione piu' stretta delle due e * nell'altra resta nero. Non c'e' arrotondamento che salvi il caso * generale - si sistemava un verso e si lasciava vuoto l'altro. * * Il requisito e' 10px di margine sui QUATTRO lati, uguali. Detto * cosi', il riquadro interno HA per forza le proporzioni del logo * ruotato, e allora l'altezza non e' piu' libera: * * interna_larghezza = larghezza - 2*padding * interna_altezza = interna_larghezza * proporzione * altezza = interna_altezza + 2*padding * * Non c'e' piu' niente da decidere e niente da confrontare: sono spariti * la min(), i due rami e la questione di quale dei due vincesse. * * L'INTERVENTO PREVISTO E' CAMBIARE --kb-etichetta-larghezza, e basta. * Tutto il resto segue. Il padding resta 10px su tutti e tre i rami di * dimensione: e' il margine visivo intorno al logo, e non c'e' ragione * perche' cambi con lo schermo. * * posizione-y e' dove cade il BORDO SUPERIORE della barra rispetto * all'altezza della finestra. Non il centro: quel valore va dritto in * top, e top posiziona il bordo. * * Per centrarla servirebbe translateY(-50%), e NON SI PUO': transform e' * gia' occupato dall'animazione di entrata - translateX(100%) a riposo, * translateX(0) dentro - e le due dichiarazioni non si sommano, la * seconda sostituisce la prima. Scriverle insieme vorrebbe dire ripetere * la componente Y in tutti e due gli stati e nella transizione, cioe' * tre posti da tenere allineati per spostare la barra di mezza altezza. * * Conseguenza pratica, perche' e' il genere di cosa che si dimentica: * con 66% e una barra alta 121,46 su una finestra da 900px la barra va * da 594 a 715, non da 533 a 655. Sessantun pixel piu' in basso di dove * la metterebbe un centraggio. La posizione e' quella approvata a * schermo: qui si registra solo che cosa vuol dire il numero. Il banco * di prova calcola i due bordi e fallisce se comparisse un translateY. */ --kb-etichetta-larghezza: 48px; --kb-etichetta-padding: 10px; --kb-etichetta-posizione-y: 66%; /* --- Aspetto ----------------------------------------------------- */ --kb-etichetta-sfondo: #1E1E1E; /* --- Entrata e uscita --------------------------------------------- * Due tempi e due curve, distinti, sullo schema gia' usato * nell'anteprima del calendario (--kb-cal-anteprima-entrata / * -uscita): entra con calma da destra, se ne va piu' svelta. * * L'uscita e' il movimento inverso dell'entrata, quindi la curva e' la * speculare: easeOutQuint in entrata, easeInQuint in uscita. Cosi' il * movimento accelera allontanandosi invece di frenare, che in uscita * sarebbe il verso sbagliato. * * Stanno qui e non nel JavaScript apposta: si ritoccano senza toccare * il comportamento. */ --kb-etichetta-entrata: 350ms; --kb-etichetta-uscita: 250ms; --kb-etichetta-curva-entrata: cubic-bezier(0.22, 1, 0.36, 1); --kb-etichetta-curva-uscita: cubic-bezier(0.64, 0, 0.78, 0); /* --- Il riquadro interno, e l'altezza che ne discende -------------- * * PROPORZIONE = larghezza / altezza del viewBox di torino_bianco.svg, * che e' "0 0 479.58 132.35", cioe' 3,6236. Ruotato di un quarto di * giro il logo diventa alto e stretto, e quel numero passa da * "quante volte e' piu' largo che alto" a "quante volte e' piu' alto * che largo". * * E' l'unico posto in cui quel rapporto e' scritto. Se si sostituisce * il file con uno di forma diversa si cambia questo numero e basta: le * tre larghezze restano quelle che sono, e le tre altezze si rifanno da * sole. * * Due sole derivate, nessun confronto: * * interna-larghezza il riquadro dentro il padding, in orizzontale * interna-altezza lo stesso riquadro in verticale, che e' la prima * moltiplicata per la proporzione * * e l'altezza della barra e' la seconda piu' i due padding. NIENTE * min(): non c'e' piu' un vincolo che possa venire da un verso o * dall'altro, perche' i due versi sono legati per costruzione. */ --kb-etichetta-logo-proporzione: 3.6236; --kb-etichetta-interna-larghezza: calc(var(--kb-etichetta-larghezza) - 2 * var(--kb-etichetta-padding)); --kb-etichetta-interna-altezza: calc(var(--kb-etichetta-interna-larghezza) * var(--kb-etichetta-logo-proporzione)); /* * L'ALTEZZA DELLA BARRA, CALCOLATA. Questa riga e' l'unica dichiarazione * di --kb-etichetta-altezza in tutto il foglio, e deve restare l'unica: * riscriverla come numero fisso in uno dei tre rami piu' sotto * rimetterebbe esattamente il difetto da cui siamo partiti. Il banco di * prova conta le dichiarazioni e fallisce se ne trova piu' d'una. */ --kb-etichetta-altezza: calc(var(--kb-etichetta-interna-altezza) + 2 * var(--kb-etichetta-padding)); /* --- Impilamento -------------------------------------------------- * 90, scelto guardando cosa c'e' gia' su questo sito e non a caso: * * 999999 preloader video (kb-animazioni) * 99999 banner cookie (Complianz) * 9998 linguetta "gestisci il consenso" (Complianz) * 100 menu a tutta pagina (Elementor, template 683) * 99 header bianco e nero (Elementor, template 206 e 1537) * 31..34 sovrapposizioni di una pagina (Elementor, template 724) * 2 segnaposto della mappa (kb-animazioni) * * Sopra a tutto il contenuto, che non passa il 34, e sotto a ogni cosa * che debba poter coprire la pagina: header, menu a tutta pagina, * banner dei cookie, preloader. Un elemento decorativo non deve mai * finire sopra a un avviso che l'utente e' tenuto a leggere ne' sopra * alla navigazione. * * Il margine fra 34 e 90 e' voluto: lascia spazio a una sovrapposizione * di pagina futura senza doversi ricordare di tornare qui. */ --kb-etichetta-z: 90; position: fixed; right: 0; top: var(--kb-etichetta-posizione-y); z-index: var(--kb-etichetta-z); width: var(--kb-etichetta-larghezza); height: var(--kb-etichetta-altezza); padding: var(--kb-etichetta-padding); box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--kb-etichetta-sfondo); /* * Ritaglio di sicurezza. Il logo, DOPO la rotazione, ci sta per * costruzione, e adesso lo fa in tutti e due i versi invece che in uno * solo. Resta per il caso in cui la proporzione dichiarata qui sopra * non sia piu' quella del file: allora il logo, che si dimensiona da * solo a partire dal proprio viewBox, sborderebbe in larghezza. Meglio * vederlo tagliato che sopra al contenuto della pagina. */ overflow: hidden; /* * Non e' cliccabile e non deve intercettare niente: ne' i clic sulla * pagina sotto, ne' quelli sulla tela dell'editor di Elementor, dove * questo elemento compare come su qualunque altra pagina. */ pointer-events: none; /* * Stato di RIPOSO: fuori a destra e trasparente. E' anche lo stato in * cui si TORNA sopra la soglia, non piu' solo quello di partenza. * * translateX(100%) e non right: -100%: la trasformazione non ricalcola * il layout e viene composta dalla GPU, quindi ne' l'entrata ne' * l'uscita costano un reflow - e adesso che il viaggio si fa molte * volte per visita, invece di una sola, la differenza conta. * * Nascosta di default, e ci resta se il JavaScript non gira. E' il * contrario della scelta fatta per il preloader, che parte VISIBILE e * ha un salvagente in CSS per andarsene da solo: li' un guasto lascia * il sito inservibile, qui lascia solo il sito senza un fregio. Un * elemento decorativo fallisce in silenzio, uno che copre la pagina no. */ transform: translateX(100%); opacity: 0; } /* * Lo stato di ARRIVO. La classe la mette e la toglie SOLO il JavaScript. * * Adesso si toglie davvero: sopra la soglia l'etichetta se ne va e la * fascia in cima alla pagina resta sgombra in tutti e due i versi di * scorrimento. */ .kb-etichetta--dentro { transform: translateX(0); opacity: 1; } /* * IL MOVIMENTO, e solo lui, e' condizionato. * * La condizione e' no-preference, come da specifica: chi non ha espresso * nessuna preferenza vede l'animazione. Chi ha chiesto meno movimento * ricade sul foglio di base, dove non c'e' nessuna transition: l'etichetta * COMPARE E SPARISCE LO STESSO, di colpo, alle stesse quote. * * Non sparisce per sempre, e non e' un dettaglio: prefers-reduced-motion * chiede meno movimento, non meno contenuto. Togliere l'elemento sarebbe * rispondere a una domanda diversa da quella posta. * * Scritto in positivo - si AGGIUNGE la transizione dove e' gradita - * invece che in negativo - si TOGLIE dove non lo e' - perche' cosi' il * ramo senza animazione e' quello di base, cioe' quello che vale anche se * il browser non conosce affatto la media feature. * * ------------------------------------------------------------------------ * DUE TEMPI CON UNA TRANSITION SOLA PER VERSO, E PERCHE' BASTA * ------------------------------------------------------------------------ * * La transition che il browser usa e' quella dichiarata nello stato di * ARRIVO, non in quello di partenza. Quindi: * * si AGGIUNGE --dentro -> vale la transition di .kb-etichetta--dentro * (entrata, 350ms) * si TOGLIE --dentro -> vale la transition di .kb-etichetta * (uscita, 250ms) * * E' il motivo per cui le due regole stanno tutte e due qui dentro invece * che una sola con due valori: due tempi diversi si ottengono cosi' e non * altrimenti. * * L'INVERSIONE A META' MOVIMENTO e' gestita dal browser, non da noi. Se il * valore di arrivo cambia mentre una transizione e' in corso, la specifica * impone di ripartire dal valore INTERPOLATO IN QUEL MOMENTO verso il nuovo * arrivo, accorciando in proporzione (reversing-shortening-factor). Non * esiste quindi uno stato intermedio in cui l'etichetta possa restare * piantata: la classe determina da sola l'arrivo, e gli arrivi possibili * sono due, tutti e due completi. * * Non serve Web Animations. Nell'anteprima del calendario serviva, ma per * un problema diverso: li' si anima un'ALTEZZA misurata in pixel, serve * onfinish per smontare, serve fill: forwards per non vedere un lampo, e * l'inversione va gestita a mano leggendo lo stato corrente * (statoCorrente()) e cancellando l'animazione in corso (fermaAnimazione()). * Cioe' con Web Animations l'inversione pulita bisogna SCRIVERLA; con una * transition c'e' gia'. Qui gli estremi sono due stati dichiarativi fissi, * non c'e' niente da misurare e niente da smontare alla fine: il caso piu' * semplice, e il piu' semplice va risolto con lo strumento piu' semplice. * * Le due proprieta' animate hanno di proposito la STESSA durata e la stessa * curva dentro ogni verso: con tempi diversi transform e opacity si * scollerebbero, e a meta' inversione si vedrebbe una barra opaca ancora * mezza fuori, oppure il contrario. */ @media (prefers-reduced-motion: no-preference) { /* Uscita: e' lo stato verso cui si TORNA. */ .kb-etichetta { transition: transform var(--kb-etichetta-uscita) var(--kb-etichetta-curva-uscita), opacity var(--kb-etichetta-uscita) var(--kb-etichetta-curva-uscita); } /* Entrata: e' lo stato verso cui si VA. Dopo, per l'ordine di sorgente. */ .kb-etichetta--dentro { transition: transform var(--kb-etichetta-entrata) var(--kb-etichetta-curva-entrata), opacity var(--kb-etichetta-entrata) var(--kb-etichetta-curva-entrata); } } /* ---------------------------------------------------------------------- */ /* Il logo */ /* ---------------------------------------------------------------------- */ /* * LE MISURE SONO INVERTITE, E NON E' UN ERRORE. * * transform: rotate() gira quello che si vede, NON il riquadro di layout: * dopo la rotazione l'elemento occupa ancora, per il flusso, una casella * larga width e alta height. Quindi la casella va dichiarata come e' il * file - orizzontale, larga e bassa - e sara' la rotazione a presentarla * verticale, stretta e alta. * * width = interna-altezza -> a schermo diventa l'ALTEZZA del logo * height = auto -> a schermo diventa la LARGHEZZA del logo * * UNA SOLA DIMENSIONE DICHIARATA, e l'altra la ricava il browser. * * Il file ha un viewBox e non ha attributi width e height, quindi ha un * rapporto intrinseco ma nessuna dimensione propria: con una width * definita, height: auto vale esattamente width / 3,6236. E' il motivo per * cui il logo riempie il riquadro interno per costruzione, senza che * nessuno debba confrontare due candidati e sceglierne uno. * * C'e' anche un vantaggio nel lasciarla al browser invece di scriverla con * un calc(): quella misura viene dal FILE, non dalla proporzione dichiarata * qui sopra. Se un domani le due divergessero - file sostituito, numero non * aggiornato - il logo resterebbe comunque proporzionato, e a sbagliare * sarebbe solo l'altezza della barra. Sbagliata l'una o sbagliate tutte e * due, meglio l'una. * * Con i valori di base: casella 101,46x28, a schermo 28x101,46, dentro una * barra 48x121,46 con 10px per lato. * * La casella e' quindi piu' LARGA del contenitore (101,46 contro 28 di * spazio interno): e' previsto. Serve flex: 0 0 auto, altrimenti il flex la * stringerebbe a 28 e il logo uscirebbe schiacciato; e serve * justify-content: center sul contenitore, che con un elemento piu' largo * dello spazio disponibile distribuisce la traboccatura sui due lati, cioe' * tiene il centro dov'e'. Il centro e' l'unica cosa che conta, perche' * rotate() gira intorno al centro. * * align-items: center sul contenitore serve anche a un secondo scopo, meno * ovvio: senza, il valore predefinito stretch allungherebbe la casella in * altezza e height: auto non si risolverebbe piu' dal rapporto intrinseco. */ .kb-etichetta__logo { display: block; flex: 0 0 auto; width: var(--kb-etichetta-interna-altezza); height: auto; /* * QUESTE DUE RIGHE NON SONO PULIZIA DA FARE: SENZA, IL LOGO SI RIMPICCIOLISCE * A UN QUARTO. Sembrano non fare niente perche' none e' gia' il valore * iniziale di max-width e max-height, e chi legge solo questo file non ha * modo di sapere che il valore iniziale non e' quello che arriva qui. * * Il reset del tema attivo contiene * * img { border-style: none; height: auto; max-width: 100%; } * * ed e' in hello-elementor/assets/css/reset.css, accodato su ogni pagina * del front-end. E' una regola sensata e va benissimo per tutte le altre * immagini del sito: nessuna deve poter sfondare il proprio contenitore. * * Questo logo invece lo sfonda DI PROPOSITO. La sua casella di layout e' * orizzontale - 101,46 x 28 - dentro un riquadro interno verticale largo * 28: e' la rotazione, piu' sotto, a rimetterla dentro. Finche' la * rotazione non e' avvenuta, per il motore di layout quella e' * un'immagine larga il quadruplo del posto che ha. * * max-width non compete con width: la limita sempre, qualunque sia la * specificita' e qualunque sia l'ordine dei fogli. Quel 100% si risolve * sulla content box del contenitore flex, cioe' 28px, e la catena e': * * width dichiarata 101,46 * max-width 28 -> width usata = 28 * height: auto 28 / 3,6236 = 7,73 * * cioe' 28 x 7,73 invece di 101,46 x 28. Ruotato: 7,73 x 28 dentro un * riquadro 28 x 101,46. Il 27,6% in tutti e due gli assi, che a occhio e' * "circa un quarto". * * La cosa peggiore di questo guasto e' che non si vede leggendo niente: * i calc() qui sopra sono giusti, il banco li verificava ed era verde, e * la causa stava in un file di un altro plugin. Da qui il commento lungo. * * max-height oggi non serve a niente - nessuna regola attiva lo imposta - * ma e' lo stesso agguato sull'altro asse, e costa una riga. */ max-width: none; max-height: none; /* * MENO 90 gradi, cioe' in senso ANTIORARIO: il logo, che nel file si * legge da sinistra a destra, a schermo si legge DAL BASSO VERSO * L'ALTO. Con +90deg si leggerebbe dall'alto verso il basso, che e' il * verso da cui si e' partiti e che e' stato scartato guardandolo a * schermo. */ transform: rotate(-90deg); } /* ---------------------------------------------------------------------- */ /* Le tre soglie */ /* ---------------------------------------------------------------------- */ /* * 1024.98 e 767.98 sono i breakpoint gia' in uso su questo sito, gli stessi * della timeline: il desktop comincia a 1025 (elementor_viewport_lg) e il * tablet a 768 (elementor_viewport_md). I decimali evitano il buco in cui * cadrebbe una finestra larga 1024.5, che esiste con lo zoom e sugli * schermi a densita' frazionaria. * * SI CAMBIA UNA RIGA SOLA PER RAMO, la larghezza. Altezza e riquadro * interno si rifanno da soli, perche' sono calc() e non numeri copiati; il * padding resta 10px ovunque. * * Le altezze che ne escono, per chi le cerca senza voler fare il conto: * * larghezza 48 -> altezza 121,46 * larghezza 42 -> altezza 99,72 * larghezza 38 -> altezza 85,22 * * Sono numeri con la virgola, ed e' giusto cosi': imporne uno tondo * vorrebbe dire scegliere di nuovo l'altezza a mano, cioe' rimettere il * vuoto. Il browser dispone di sotto-pixel e non ha nessun problema. */ /* Tablet: 768px - 1024.98px. */ @media (max-width: 1024.98px) { .kb-etichetta { --kb-etichetta-larghezza: 42px; } } /* Telefono: fino a 767.98px. Qui la barra vale meno del 10% della larghezza * di uno schermo da 390px. */ @media (max-width: 767.98px) { .kb-etichetta { --kb-etichetta-larghezza: 38px; } } /* ---------------------------------------------------------------------- */ /* WCAG 1.4.10: caso noto, NON coperto */ /* ---------------------------------------------------------------------- */ /* * A forte ingrandimento la barra copre una fetta stabile dello schermo. Al * 400% su 1280x800 la finestra vale circa 320x200 px CSS: la barra, che e' * fissa e non si rimpicciolisce con lo zoom, ne occupa il 12% in larghezza e * il 42% in altezza, sopra il testo. Lo stesso, in misura minore, su un * telefono stretto in verticale, dove i 38px valgono il 12% di 320. * * QUI C'ERA UNA MEDIA QUERY CHE LO CHIUDEVA. E' stata tolta il 15 settembre * 2026 perche' non scattava: provata a schermo, l'etichetta restava visibile. * * @media (max-width: 500px) and (max-height: 300px) { display: none } * * Il ragionamento era che un telefono ha sempre un verso grande - verticale * e' stretto ma alto, orizzontale e' basso ma largo - mentre una finestra * ingrandita e' piccola in tutti e due, quindi bastava chiedere che lo * fossero entrambe. Sui numeri tornava; sui viewport veri no, perche' quelli * che si misurano a schermo non sono quelli che si calcolano dividendo la * risoluzione per il fattore di zoom. * * E ALLARGARLA NON E' LA STRADA. Le soglie abbastanza larghe da prendere i * viewport reali da ingrandimento prendono anche telefoni veri: un Galaxy * Fold chiuso in orizzontale e' 653x280, cioe' esattamente la forma di una * finestra ingrandita. Fra nascondere il fregio a chi ingrandisce e * nasconderlo a chi ha un telefono, si e' scelto di non nasconderlo affatto e * di scriverlo qui. * * Il caso resta aperto ed e' registrato fra i limiti noti nel README. Chi ci * torna: non ripartire dalle media query, sono gia' state provate. La strada * che resta e' misurare il viewport dal JavaScript, che e' l'unico posto da * cui si vedono i numeri veri - ma vuol dire rimettere nel codice una misura * che oggi non conosce, e quel prezzo va deciso, non pagato di nascosto. */