Questo codice CSS definisce una famiglia di caratteri personalizzata denominata "Guardian Headline Full" con diversi pesi e stili. Specifica i file dei caratteri in diversi formati (WOFF2, WOFF e TrueType) e i rispettivi URL per il caricamento da parte del browser. I pesi dei caratteri vanno dal light (300) al semibold (600), ciascuno con stili normale e corsivo.
Questo codice CSS definisce diverse famiglie e stili di caratteri per il sito web del Guardian. Specifica le origini per diversi file di caratteri nei formati WOFF2, WOFF e TrueType, insieme ai loro pesi e stili. Ad esempio, il carattere Guardian Headline Full include varianti in grassetto, grassetto corsivo, nero e nero corsivo, mentre il Guardian Titlepiece utilizza uno stile grassetto.
Il codice include anche media query che controllano l'opacità del contenuto principale, facendolo dissolvere in entrata quando lo scripting è abilitato e quando non è preferita la riduzione del movimento. Inoltre, imposta varie proprietà personalizzate CSS (variabili) per i colori e gli stili utilizzati in tutto il sito, come le dissolvenze di sovrapposizione, le didascalie e i colori del testo.
Per gli elementi degli articoli, definisce gli stili per i titoli, specificando famiglia, peso, dimensione e altezza della linea del carattere, con adeguamenti per schermi più grandi. Alcuni elementi, come specifici span nel titolo, sono nascosti alla visualizzazione.
Per i titoli degli articoli, il link o il nome della serie appare in linea con un colore specifico, utilizzando il carattere Guardian Headline a 20px di dimensione e peso grassetto, con sottolineatura personalizzata e altezza della linea al 115%. Il passaggio del mouse sul link del titolo lo sottolinea.
I nomi degli intervistati sono stilizzati con un carattere light, corsivo, 28px con la stessa altezza della linea.
Il riassunto dell'articolo e i suoi link utilizzano un colore medio, carattere 17px a peso 500, che aumenta a 20px su schermi più ampi. I link nel riassunto ottengono un bordo inferiore al passaggio del mouse.
Le didascalie e i link alle trascrizioni video sono in un carattere sans-serif più piccolo a 12px con altezza della linea al 130%.
I link della firma utilizzano il carattere Guardian Headline a 17px e grassetto, mentre i pulsanti della firma hanno un carattere sans-serif di peso medio. La data di pubblicazione utilizza un colore da didascalia.
Le citazioni scorrili presentano un carattere per titoli color chiaro, 32px (che aumenta a 42px su schermi grandi) con una stilizzazione speciale dei numeri, e le loro didascalie sono in un sans-serif 14px. Su schermi medi, questi adottano i colori del testo dei media.
La prima lettera del contenuto principale è una grande capolettera colorata che utilizza il carattere dei titoli.
Le sezioni media hanno uno sfondo a tutta altezza della viewport, che si estende leggermente oltre il contenitore con margini negativi, e utilizzano un layout a griglia. Su mobile, il titolo è posizionato nell'area dell'arredamento, mentre su desktop si sposta in una griglia a due colonne con il contenitore media che occupa la maggior parte dello spazio.
Per schermi più ampi, la sezione media ha una larghezza fissa e aggiunge barre laterali colorate con bordi per riempire la viewport, creando un aspetto incorniciato.
L'elemento media ha un bordo solido ed è posizionato a destra, con la sua larghezza calcolata in base alla viewport e alla larghezza del body. Per schermi più grandi, la larghezza del body si adatta a specifici breakpoint: 978px per 61.25em, 1138px per 71.25em e 1298px per 81.25em.
Il layout a griglia del contenuto dell'articolo cambia con le dimensioni dello schermo. Su schermi più piccoli, impila verticalmente media, meta, standfirst e body. Su schermi medi (61.25em e oltre), utilizza un layout a due colonne con media che si estende su entrambe le colonne e altri elementi disposti di conseguenza. Per schermi più grandi (71.25em e 81.25em), aggiunge più colonne e perfeziona le aree della griglia per una migliore organizzazione.
Lo standfirst ha un margine superiore e le linee sono nascoste. Le didascalie per intestazioni e video includono icone con stilizzazione e spaziatura specifiche. Il pulsante "Ascolta articolo" ha margini verticali.
L'intestazione è posizionata in modo relativo con un alto z-index. Su iOS, alcuni pseudo-elementi nelle intestazioni media sono nascosti. Quando lo scripting è disabilitato, il layout si adatta a una struttura impilata più semplice su diverse dimensioni dello schermo.
Una classe screen-reader-only nasconde il contenuto visivamente ma lo mantiene accessibile alle tecnologie assistive.
Per i contenuti interattivi nella colonna principale, le figure di supporto sono impostate al 75% di larghezza e non cancellano gli elementi precedenti.
Su schermi medi (46.25em e più ampi), queste figure rimangono al 75% di larghezza, posizionate staticamente senza float e hanno un'altezza della linea standard senza margine superiore.
Per schermi più grandi (71.25em e oltre), le figure non hanno margine sinistro e le loro didascalie sono posizionate staticamente senza una larghezza fissa.
Su schermi extra-large (81.25em e oltre), le figure mantengono la loro larghezza del 75% senza margine sinistro e le didascalie non hanno restrizioni di larghezza massima.
Su schermi da medi a grandi (46.25em a 61.24em), gli elementi immersivi nella colonna principale hanno un margine destro negativo di 20px.
Per le intestazioni statiche e video, i contenitori dei titoli e le sezioni degli intervistati hanno un padding laterale di 10px su schermi piccoli, che aumenta a 20px su schermi da 30em e più ampi.
Il contenitore media in queste intestazioni occupa l'intera larghezza e altezza della sua area di griglia. Su schermi da 61.25em e più grandi, mantiene un rapporto d'aspetto 4:5.
I wrapper delle immagini all'interno del contenitore media si attaccano alla parte superiore e riempiono lo spazio disponibile con overflow nascosto. Su schermi più grandi (61.25em+), passano al posizionamento relativo.
Tutte le immagini e le figure all'interno di questi wrapper coprono completamente i loro contenitori senza distorcere il rapporto d'aspetto.
Elementi aggiuntivi come span e link che seguono le immagini sono nascosti.
Un secondo livello di immagine (img-2) è posizionato in modo assoluto nell'angolo in alto a sinistra.
I wrapper dell'arredamento mobile si attaccano al fondo e hanno un layout a colonna flessibile con un colore di sfondo. Su schermi più grandi (61.25em+), diventano parte del flusso di contenuto normale.
All'interno di questi wrapper, i titoli appaiono secondi e le informazioni sugli intervistati terze nell'ordine.
Su schermi più piccoli (fino a 61.24em), una sovrapposizione sfumata crea un effetto di dissolvenza sopra l'arredamento mobile.
I contenitori dei titoli nelle intestazioni statiche e video sono posizionati in fondo con padding, colore di sfondo e z-index di 2. Utilizzano un layout a griglia per i titoli.
Sia i titoli primari che secondari occupano la stessa area di griglia all'interno del contenitore.
Per schermi più ampi di 61.25em, regola il contenitore del titolo nelle intestazioni statiche e video rimuovendo il margine superiore, impostando una larghezza massima di 540px e aggiungendo un bordo superiore.
Su schermi più piccoli fino a 61.24em, allinea il primo titolo all'inizio. Il secondo titolo dovrebbe avere una larghezza massima di 620px, con la sua prima lettera maiuscola. Su schermi di almeno 30em di larghezza, spostalo di 20px a sinistra, e su quelli di 61.25em o più ampi, posizionalo a 4px dalla parte superiore.
Quando è preferita la riduzione del movimento, visualizza il contenitore del titolo come blocco e rimuovi i margini superiori per i titoli su schermi fino a 46.24em di larghezza. Inoltre, aggiungi 10px di padding alla parte superiore del secondo titolo.
La sezione dell'intervistato dovrebbe essere posizionata nell'area di griglia 'intervistato' con 20px di padding inferiore. I controlli video sono fissati in fondo.
Su schermi fino a 46.24em di larghezza, imposta l'altezza dell'intestazione al 100%. Per i dispositivi iOS, regola le righe della griglia e il padding dell'intervistato per tenere conto della barra degli strumenti inferiore. Su Android, modifica le righe della griglia e il padding per la barra superiore.
In orientamento orizzontale su schermi fino a 700px di larghezza, rendi l'altezza dell'intestazione adatta al suo contenuto e regola di conseguenza il contenitore media e il wrapper.
Per le app, nascondi le etichette nei wrapper delle immagini.
I contenitori video dovrebbero riempire il loro spazio con video che coprono l'area e si dissolvono in entrata quando attivi. I controlli sono posizionati in basso a destra con pulsanti circolari.
Per gli elementi media su schermi più ampi, imposta il rapporto d'aspetto del contenitore video a 4/5.
Le citazioni scorrili occupano l'intera altezza della viewport con un contenitore media sticky che contiene elementi posizionati in modo assoluto.
L'immagine nella sezione scrolly-quote è impostata per coprire completamente il suo contenitore, mantenendo il rapporto d'aspetto. Il contenitore della citazione è posizionato per rimanere fisso in cima alla viewport e si estende per tutta la larghezza, con i suoi elementi che presentano uno sfondo semitrasparente e un layout flessibile per citazioni e didascalie. Su schermi più grandi, lo sfondo diventa trasparente e il layout passa a una griglia a due colonne.
Il componente scrolly-quote regola la sua larghezza e i margini in modo responsivo, espandendosi su schermi medi e centrandosi con sfondi laterali su display più grandi. La sua altezza è calcolata in base alle unità viewport e alla lunghezza del contenuto, con le preferenze di movimento ridotto che la accorciano. Per i dispositivi iOS, vengono utilizzate unità viewport specifiche per garantire una dimensione adeguata.
Elementi interattivi come figure e blockquote nella colonna principale hanno animazioni di entrata fluide, dissolvendosi e scorrendo in vista. In modalità scura, le variabili di colore sono regolate per un migliore contrasto e leggibilità, alterando le tonalità per media, firme e citazioni per adattarsi al tema.
---
Visualizza l'immagine a schermo intero
Anthony Hopkins nel 2017. Fotografia: Sebastien Micke/Paris Match/Contour/Getty Images
"Com'è il tempo da quelle parti?" Anthony Hopkins chiede non appena inizia la nostra videochiamata. Anche se vive in California da decenni, rimangono tracce delle sue radici gallesi—nella sua voce distinta e melodiosa, ora forse un po' più rauca, e nel suo interesse per il meteo. È una serata buia a Londra, ma una mattina luminosa e soleggiata a Los Angeles. Hopkins rispecchia l'umore, apparendo allegro e indossando una camicia turchese e verde.
"Sono venuto qui 50 anni fa", dice. "Qualcuno mi ha chiesto: 'Stai svendendo?' Ho risposto: 'No, mi piace solo il clima e prendere la tintarella.' Ma mi piace Los Angeles. Ho avuto una vita fantastica qui."
Tuttavia, ultimamente le cose non sono state del tutto fantastiche. A gennaio, gli incendi hanno distrutto la casa di Hopkins a Pacific Palisades. "È stata un po' una calamità", commenta con un lieto understatement. "Siamo grati che nessuno sia rimasto ferito e che abbiamo portato in salvo i nostri gatti e la nostra piccola famiglia." Lui e sua moglie, Stella, erano in Arabia Saudita all'epoca, dove lui stava presentando un concerto della sua musica eseguita dalla Royal Philharmonic Orchestra. Ora si trovano in una casa affittata nella vicina Brentwood.
"Abbiamo perso tutto", dice, "ma pensi: 'Oh beh, almeno siamo vivi.' Mi dispiace per le migliaia di persone che sono state veramente colpite—persone ben oltre l'età pensionabile che hanno lavorato sodo tutta la vita e ora non hanno nulla."
Hopkins compirà 88 anni questo dicembre, ma chiaramente non si considera in età pensionabile. Come due volte vincitore dell'Oscar, cavaliere, icona della cultura pop e uno degli attori viventi più rispettati, ha molti successi su cui riposare—eppure il suo programma rimane fitto. Ha recentemente finito un film con Guy Ritchie, che ammira per la sua precisione, e tornerà presto in Gran Bretagna per lavorare con Richard Eyre su The Housekeeper, un film su Daphne du Maurier, seguito da un altro progetto in Galles.
Sta anche tenendo il passo con i tempi. In un recente video su Instagram, ha provato uno degli avvolgimenti viso Skims di Kim Kardashian, molto derisi, e ha imitato Hannibal Lecter. "Ciao, Kim. Mi sento già 10 anni più giovane", ha detto alla telecamera, imitando il sinistro sorso di Lecter. "Divertente, vero?" dice ridendo, aggiungendo che Kardashian lo ha trovato esilarante.
Ma ultimamente, Hopkins ha anche riflettuto sulla sua vita. Il suo nuovo memoir…
---
Nota: Il codice CSS all'inizio non è stato riscritto, poiché si tratta di informazioni tecniche di stile e non fa parte della narrazione dell'articolo."Tutti possediamo quella forza interiore, e modelliamo le nostre vite seguendo quella che suppongo tu chiameresti ispirazione", riflette Hopkins. A quel punto, era sempre più basato negli Stati Uniti e si concentrava sul cinema. "Volevo solo un po' di sole ed evitare di passare la vita in piedi in calzamaglie spiegazzate tenendo una lancia", scherza.
Fu il suo idolo, Peter O'Toole, a invitarlo per la prima volta su un set cinematografico nel 1968. Hopkins ricorda che O'Toole bussò alla porta del suo camerino al National Theatre un giorno e disse: "Voglio che tu faccia un provino per me." Hopkins aggiunge: "Aveva bevuto un po', e siamo andati al pub dopo."
Hopkins riconosce a Laurence Olivier di avergli dato una grande svolta nella carriera. "Sembrava apprezzare la mia forza fisica, e avevo quell'intensità gallese—collerico, sai."
Riflettendo sul suo percorso, Hopkins dice: "Mi chiedo spesso: 'Come sono arrivato qui?' Non ho idea di come la mia vita si sia trasformata dall'essere un ragazzino sperduto a Port Talbot a questo. Va oltre la mia comprensione, e lo dico sinceramente."
Il provino era per Il leone d'inverno, con O'Toole e Katharine Hepburn. Interpretando Riccardo Cuor di Leone, Hopkins si sentì a suo agio sullo schermo. "Penso che quella rabbia o qualunque cosa fosse dentro di me mi abbia dato una forte presenza. E ero intelligente; sapevo accettare consigli. Hepburn mi disse: 'Non hai davvero bisogno di recitare. Hai una bella testa, buone spalle. Dì solo le battute.'"
Entro gli anni '80, aveva stabilito una carriera costante come attore caratterista, che fu completamente trasformata da Il silenzio degli innocenti nel 1991. Il regista Jonathan Demme aveva visto Hopkins in The Elephant Man di David Lynch, dove interpretava un gentile dottore vittoriano, e pensò che sarebbe stato ideale per Hannibal Lecter—lo psichiatra diventato serial killer cannibale. Quando il suo agente menzionò il titolo, Hopkins chiese
