Questo codice CSS definisce la famiglia di caratteri "Guardian Headline Full" con vari pesi e stili, fornendo più formati di file (WOFF2, WOFF, TTF) per ogni variante per garantire la compatibilità tra diversi browser.
Questo codice CSS definisce diverse famiglie di caratteri per il sito del Guardian. Specifica il font "Guardian Headline Full" in vari pesi e stili, inclusi grassetto, nero, light e regular, ciascuno con versioni normali e corsive dove applicabile. Inoltre, definisce il font "Guardian Titlepiece" in peso grassetto. Per ogni font, fornisce più formati di file (WOFF2, WOFF e TrueType) ospitati sul server di asset del Guardian per garantire un'ampia compatibilità del browser. Le proprietà font-weight e font-style sono impostate di conseguenza per ogni definizione.
Questo codice CSS definisce diversi stili di carattere per la famiglia di font "Guardian Headline Full". Include diversi pesi e stili (normale e corsivo) specificando i file sorgente in vari formati (WOFF2, WOFF e TrueType) dal server di asset del Guardian. Ogni voce imposta il peso del font (da 400 a 900) e lo stile (corsivo o normale) per l'uso nella tipografia web.
Questo testo sembra essere codice CSS che definisce stili di carattere e griglie di layout per un sito web, probabilmente quello del Guardian. Specifica file di font per diversi pesi e stili e imposta layout di griglia reattivi che cambiano a varie dimensioni dello schermo. Il codice regola il posizionamento degli elementi, il padding e le strutture delle colonne per una visualizzazione ottimale su dispositivi dal mobile al desktop.
Per figure di griglia interattive con didascalie immersive in aree di contenuto specifiche, il padding della didascalia è impostato a 4 pixel in alto e 0 altrove.
In varie sezioni di contenuto, gli elementi con attributi dati per linee e meta sono posizionati nella griglia dalla riga 2 alla 5 e dalla colonna 1 alla 2. Gli elementi lines hanno un'altezza che si adatta al loro contenuto e un margine superiore di 5 pixel, mentre gli elementi meta hanno un margine superiore di 18 pixel.
Su schermi più grandi con una larghezza minima di 81,25 em, il layout a griglia per queste aree di contenuto utilizza larghezze di colonna specifiche: 219px, 1px, 620px, 80px e 300px.
Per dispositivi iOS e Android, gli intestazioni degli articoli hanno una tipografia personalizzata:
- I paragrafi di standfirst utilizzano la famiglia di font Guardian Headline con un peso medio.
- I kicker di sezione sono visualizzati come blocchi con la prima lettera maiuscola.
- Le keyline hanno un padding superiore di 12 pixel.
- Le byline degli autori utilizzano il font Guardian Headline in grassetto.
- Le figure di immagine hanno un'altezza automatica.
- I paragrafi che seguono elementi atomici non hanno margine superiore.
I font face per Guardian Headline Full includono varianti light e light corsivo, provenienti da URL specifici in formati woff2, woff e truetype con i rispettivi pesi e stili.
Questo testo definisce una famiglia di font personalizzata chiamata "Guardian Headline Full" con vari stili e pesi. Include versioni regular, medium, semibold e bold, ciascuna in stili normali e corsivi. I file dei font sono forniti in formati WOFF2, WOFF e TrueType dal sito web del Guardian.
Questo codice CSS definisce stili di carattere e regolazioni di layout per un sito web. Specifica font personalizzati dagli asset del Guardian, inclusi diversi pesi e stili, e imposta regole di design reattivo per varie dimensioni dello schermo. Le regole di layout controllano margini, larghezze e posizionamento di elementi come articoli, immagini e componenti interattivi, garantendo che vengano visualizzati correttamente su dispositivi dal mobile al desktop. Include anche variabili di colore per una tematizzazione coerente e gestisce la formattazione speciale per elementi come didascalie e contenuti in evidenza.
Il primo paragrafo in varie sezioni di contenuto, come corpi di articoli, contenuti interattivi, commenti e feature, ottiene un padding superiore di 14 pixel. Inoltre, la prima lettera di questi paragrafi è stilizzata con un font, una dimensione e un colore specifici, ed è impostata in maiuscolo con un effetto capolettera.
Per i paragrafi che seguono una riga orizzontale, il padding superiore viene rimosso. I pullquote all'interno di queste sezioni sono limitati a una larghezza massima di 620 pixel.
Negli elementi showcase, le didascalie sono posizionate staticamente e anch'esse limitate a una larghezza di 620 pixel. Gli elementi immersivi si estendono per l'intera larghezza del viewport, meno la barra di scorrimento, e su schermi più piccoli di 71,24 em, sono limitati a 978 pixel di larghezza con un padding della didascalia appropriato.
Questo sembra essere codice CSS per il web design reattivo, che imposta layout e stili diversi per varie dimensioni dello schermo. Definisce come elementi come didascalie, immagini e blocchi di testo adattano il loro aspetto, padding, margini e strutture di griglia su dispositivi che vanno dal mobile al desktop. Il codice garantisce che il contenuto rimanga leggibile e visivamente accattivante su diversi viewport modificando proprietà come bordi, decorazione del testo e modelli di griglia in base a media query.
Il layout a griglia utilizza cinque colonne 1fr per le sezioni titolo, headline e standfirst, seguite da otto colonne 1fr per la sezione portrait. Le righe sono definite con frazioni specifiche per ogni area.
Per gli elementi meta e standfirst, è impostata una larghezza di 620px, con lo standfirst che ha un leggero aggiustamento a sinistra. Le etichette nel titolo e nell'intestazione dell'articolo hanno un piccolo padding superiore.
Le headline sono in grassetto con una larghezza massima di 620px e una dimensione del font di 32px, che aumenta a 50px e una larghezza più stretta su schermi più grandi. Alcune linee sono nascoste su schermi da medi a grandi e il loro colore è impostato da una variabile CSS.
Gli elementi meta non hanno margine destro su schermi medi e i bordi social e comment utilizzano la stessa variabile. Alcuni island all'interno di meta sono nascosti.
Le sezioni standfirst hanno margini sinistri negativi e posizionamento relativo, con regolazioni del padding su schermi medi. I paragrafi all'interno sono di peso normale, 20px di dimensione e hanno padding inferiore.
Il media principale è posizionato nell'area della griglia portrait, a tutta larghezza senza margini laterali e il margine inferiore cambia su schermi più grandi. Su schermi piccoli, si estende per l'intera larghezza del viewport meno la barra di scorrimento, con regolazioni del margine sinistro.
Le didascalie sono posizionate assolutamente in basso con un colore di sfondo e un colore del testo da variabili, nascondendo il primo span e mostrando il secondo con una larghezza massima. Diventano nascoste con opacità e un pulsante della didascalia è posizionato in basso a destra con uno sfondo circolare, ridimensionando leggermente la sua icona.
Su schermi extra-large, la colonna principale ha uno pseudo-elemento che regola la sua posizione superiore e l'altezza.
Le intestazioni interattive della colonna principale hanno una larghezza massima di 620 pixel. Per i dispositivi iOS e Android, lo schema di colori include uno sfondo scuro, un colore feature standard e una variante per la modalità scura. In modalità scura, il colore pillar si adatta alla versione per la modalità scura se disponibile.
Su iOS e Android, la prima lettera del primo paragrafo in vari tipi di articolo utilizza un colore pillar secondario. Le intestazioni degli articoli sono nascoste con altezza zero, mentre i furniture wrapper hanno un padding minimo. Le etichette all'interno di questi wrapper sono in grassetto, utilizzano font specifici, adottano il colore pillar e sono maiuscole. Le headline sono grandi, in grassetto, di colore scuro e hanno padding inferiore.
Per i dispositivi iOS e Android, i seguenti stili si applicano ai contenitori di articoli (feature, standard e comment):
- Gli elementi immagine all'interno del furniture wrapper sono posizionati in modo relativo, con un margine superiore di 14px, margine sinistro di -10px e larghezza impostata sulla larghezza completa del viewport meno la larghezza della barra di scorrimento. La loro altezza si adatta automaticamente.
- Gli elementi figure interni, immagini e link all'interno di questi contenitori di immagine hanno uno sfondo trasparente, corrispondente alla larghezza completa del viewport meno la larghezza della barra di scorrimento e un'altezza regolata automaticamente.
- Le sezioni standfirst hanno un padding superiore di 4px, padding inferiore di 24px e un margine destro di -10px.
- I paragrafi all'interno del contenitore interno dello standfirst utilizzano la famiglia di font: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif.
- I link e i link degli elementi di lista all'interno del contenitore interno dello standfirst mantengono queste regole di stile.
Per gli articoli di commento, i link nello standfirst sono stilizzati con un colore specifico, una sottolineatura e nessuna immagine di sfondo. Sui dispositivi iOS e Android, passando il mouse su questi link negli articoli feature, standard o di commento, il colore della sottolineatura cambia per corrispondere al tema dell'articolo. La sezione meta in questi articoli non ha margine e elementi come la byline e i link dell'autore utilizzano il colore del tema. Inoltre, la sezione meta misc non ha padding.
Per i dispositivi iOS e Android, le seguenti regole CSS si applicano ai contenitori di articoli feature, standard e comment:
- Gli elementi SVG all'interno della sezione meta misc del furniture wrapper avranno un colore del tratto impostato sul nuovo colore pillar.
- Il pulsante della didascalia negli elementi showcase viene visualizzato come un contenitore flex, centrato con 5px di padding, 28px di larghezza e altezza e posizionato a 14px da destra.
- Il corpo dell'articolo ha 12px di padding sui lati sinistro e destro.
- Le figure di immagine non in miniatura e non immersive nel corpo dell'articolo non hanno margine, una larghezza calcolata come la larghezza del viewport meno 24px e la larghezza della barra di scorrimento e un'altezza automatica. Le loro didascalie non hanno padding.
- Le figure di immagine immersive si estendono per l'intera larghezza del viewport meno la larghezza della barra di scorrimento.
- I blockquote citati nella sezione prosa del corpo dell'articolo hanno uno pseudo-elemento before stilizzato di conseguenza.
Per i dispositivi iOS e Android, la stilizzazione del testo citato e dei link all'interno dei corpi degli articoli viene regolata. Il testo citato è contrassegnato con un colore che corrisponde al nuovo tema pillar. I link sono visualizzati nel colore pillar primario, sottolineati con un offset e un colore specifici, che cambiano nel nuovo colore pillar al passaggio del mouse.
In modalità scura, lo sfondo delle intestazioni degli articoli diventa grigio scuro. Etichette e headline adottano colori dal tema per un migliore contrasto e leggibilità. Il testo dello standfirst e le byline degli autori sono anche stilizzati per garantire che siano visibili e coerenti con il design generale.
Questo codice CSS definisce stili per diversi contenitori di articoli su dispositivi Android e iOS. Imposta il colore delle byline degli autori e del testo citato su un nuovo colore pillar, applica lo stesso colore ai tratti SVG e utilizza un colore specifico per le didascalie delle immagini. Inoltre, garantisce che vari elementi del corpo abbiano uno sfondo scuro. Il codice include anche la stilizzazione della prima lettera che segue determinati elementi negli articoli feature.
Questo sembra essere un selettore CSS che mira alla prima lettera dei paragrafi in vari contenitori di articoli su dispositivi iOS e Android, specificamente quando seguono determinati elementi come sign-in gates o componenti atom.
Per dispositivi Android e iOS, la prima lettera dei paragrafi che seguono elementi specifici nei contenitori di articoli sarà stilizzata con una variabile di colore personalizzata, predefinita al bianco.
Per gli articoli di commento su iOS e Android, l'elemento standfirst ha un padding superiore di 24 pixel e nessun margine superiore. Le intestazioni di livello 2 nella prosa sono impostate a 24 pixel di dimensione.
I pulsanti delle didascalie negli articoli feature, standard e comment hanno padding diversi su iOS (6px in alto, 5px ai lati, 0 in basso) e Android (4px in alto e ai lati, 0 in basso).
In modalità scura, vari colori di testo e link vengono regolati su tonalità più chiare e colori specifici della palette per la modalità scura per una migliore leggibilità e coerenza visiva.
Quando il furniture wrapper include un logo dell'organizzazione Guardian, l'elemento di branding viene sempre visualizzato.
Le etichette di contenuto e le headline nei contenitori di articoli sono impostate su un peso del font medio (500) per enfasi.
Lo sfondo della pagina utilizza un colore personalizzato (#fff4f2) per i saggi del weekend, che si applica anche alle sezioni degli articoli e agli sfondi dei sub-meta.
Le linee sono nascoste nel layout.
Il furniture wrapper è posizionato in modo relativo e utilizza un layout a griglia su schermi più grandi (oltre 81,25 em di larghezza) con modelli di riga specifici per le sezioni titolo, headline, standfirst e meta.
Le intestazioni degli articoli o le sezioni titolo hanno un'altezza fissa di 70 pixel e contengono etichette di contenuto che ereditano questa altezza. Una GIF decorativa di un libro (70x70 pixel) appare nell'angolo in basso a destra, ridimensionandosi fino a 110x110 pixel su schermi più larghi.
Una linea orizzontale si estende per la larghezza del viewport (meno la larghezza della barra di scorrimento) in fondo alle etichette di contenuto, partendo dal bordo sinistro con piccoli offset su mobile e regolandosi su schermi medi e più grandi per un allineamento corretto.
Per schermi più larghi di 71,25 em, il furniture wrapper dell'intestazione dell'articolo e l'elemento del titolo hanno un'altezza di 80px, che aumenta a 125px per schermi oltre 81,25 em. Su questi schermi più grandi, l'headline, il suo attributo dati e la classe si spostano anche verso l'alto di 2px.
All'interno del furniture wrapper, l'headline e le sue varianti non hanno padding inferiore e il loro wrapper dell'headline del media principale portrait è impostato a piena altezza con posizionamento relativo, overflow nascosto e 24px di padding inferiore. Le headline e i link all'interno di questo wrapper non hanno una larghezza massima e presentano una sottolineatura più spessa al passaggio del mouse con un offset di 6px.
Elementi di testo come h1, link e span di byline nel wrapper dell'headline utilizzano un'altezza di linea del 115%, un peso del font medio e una dimensione del font di 36px, che aumenta a 50px su schermi più larghi di 71,25 em.
La sezione standfirst e i suoi equivalenti sono posizionati in modo relativo con 4px di padding superiore, rimosso su schermi oltre 61,25 em e ridotto a 2px su quelli oltre 71,25 em.
Nella sezione meta, gli elementi di branding sono visualizzati come blocchi e la stilizzazione del media principale viene applicata all'interno del furniture wrapper.
Il furniture-wrapper posiziona gli elementi media in modo relativo. Su schermi più grandi (oltre 61,25 em), posiziona il media principale e gli elementi con l'attributo data-gu-name "media" nell'area della griglia portrait.
All'interno di questi contenitori media, i div sono posizionati in modo relativo e qualsiasi span che segue un div viene visualizzato come un blocco. Le figure all'interno occupano l'intera altezza con un margine sinistro di 10px. Immagini e didascalie all'interno delle figure regolano la loro larghezza in base al viewport meno la larghe
