Questo codice CSS definisce la famiglia di caratteri "Guardian Headline Full" con diversi stili e spessori. Include varianti light (300), regular (400), medium (500) e semibold (600), ciascuna disponibile sia in stile normale che corsivo. Per ogni stile, fornisce file di font nei formati WOFF2, WOFF e TrueType dal server di risorse del Guardian.
Questo codice CSS definisce diverse famiglie di caratteri per i font Guardian Headline e Guardian Titlepiece, specificandone le origini in diversi formati (WOFF2, WOFF e TrueType) insieme ai rispettivi pesi e stili. Include anche regole di design responsivo per la colonna dei contenuti principali nei layout interattivi, adattando margini, larghezze e posizionamento in base alle dimensioni dello schermo. Ad esempio, su schermi più ampi, aggiunge un margine sinistro e un bordo, mentre su schermi più piccoli, regola le larghezze e le posizioni degli elementi per adattarsi al display. Il codice garantisce che elementi come paragrafi ed elenchi mantengano una larghezza massima per la leggibilità e gestisce gli elementi immersivi espandendoli a tutta larghezza sui dispositivi mobili e adattandone il layout su schermi più grandi.
Per le colonne di contenuti interattivi, viene aggiunto un bordo sinistro di colore grigio chiaro posizionato leggermente a sinistra. Gli elementi all'interno di queste colonne non hanno margini superiori o inferiori ma includono un padding di 12px. Quando un paragrafo segue un elemento, il padding viene rimosso e i margini sono impostati a 12px. Gli elementi inline sono limitati a una larghezza massima di 620px e, per schermi più ampi, anche le figure con un ruolo specifico rispettano questo limite di larghezza.
Sono definite variabili di colore per vari elementi di testo e sfondo, inclusi dateline, bordi di intestazione, didascalie e colori di feature, con un colore di feature predefinito impostato su rosso.
Gli elementi stilizzati come atomi non hanno padding. Regole specifiche si applicano al primo paragrafo che segue determinati elementi o righe orizzontali in diverse aree di contenuto, aggiungendo un padding superiore di 14px. Inoltre, la prima lettera di questi paragrafi è stilizzata con un font grande, in grassetto, maiuscolo in stile titolo, colorata secondo il colore di feature definito e flottata a sinistra con un margine.
Le righe orizzontali seguite da paragrafi in varie sezioni di contenuto non hanno padding superiore.
I pullquote all'interno di aree di contenuto specifiche hanno una larghezza massima di 620 pixel.
Per gli elementi showcase in vari contenitori di articoli, le didascalie sono posizionate staticamente con larghezza completa e una larghezza massima di 620 pixel.
Gli elementi immersivi si estendono per l'intera larghezza del viewport meno la barra di scorrimento. Su schermi fino a 71.24em di larghezza, questi elementi sono limitati a 978 pixel, con un padding per le didascalie di 10 pixel. Tra 30em e 71.24em, il padding delle didascalie aumenta a 20 pixel. Per schermi tra 46.25em e 61.24em, la larghezza massima è di 738 pixel. Sotto i 46.24em, gli elementi immersivi si allineano a sinistra con margini regolati e un padding per le didascalie di 20 pixel tra 30em e 46.24em.
Il furniture wrapper utilizza un layout a griglia su schermi da 61.25em in su, con colonne e righe definite per organizzare i contenuti. I titoli presentano un bordo superiore, le sezioni meta hanno un padding superiore e gli elementi standfirst includono link stilizzati con sottolineature che cambiano colore al passaggio del mouse. Inizialmente, il primo paragrafo nello standfirst ha un bordo superiore e nessun padding inferiore, che viene rimosso su schermi da 71.25em in su.
Le figure all'interno del furniture wrapper hanno margini sinistri e una larghezza massima di 630 pixel per gli elementi inline. Su schermi più grandi (71.25em e oltre), le colonne della griglia vengono riconfigurate per un posizionamento diverso dei contenuti.
Il layout utilizza una griglia con colonne e righe specifiche per diverse dimensioni dello schermo. Per schermi più piccoli, la griglia definisce aree per il titolo, il titolo principale, lo standfirst, le informazioni meta e il ritratto, con righe impostate su altezze fisse e automatiche. Una linea sottile appare sopra la sezione meta e lo standfirst ha una linea verticale sul lato sinistro.
Su schermi più grandi, la griglia si adatta per utilizzare unità frazionali per le righe ed espande le span delle colonne. La dimensione del font del titolo principale aumenta e la sua larghezza massima cambia, mentre alcuni elementi come le linee sono nascosti. Il testo dello standfirst è stilizzato con un peso e una dimensione specifici del font, e l'area media principale è posizionata all'interno della griglia, con regolazioni per larghezza e margini su dispositivi più piccoli. Le didascalie sono posizionate assolutamente in basso con un colore di sfondo e padding.
Il codice CSS definisce gli stili per un componente furniture wrapper, inclusi layout, colori e comportamento responsivo su diverse dimensioni dello schermo. Imposta colori di sfondo, colori del testo e stili dei bordi utilizzando proprietà personalizzate CSS per temi come la modalità scura. Il wrapper regola margini, padding e posizionamento su schermi più grandi e include elementi nascosti e pulsanti interattivi con effetti hover per la condivisione sociale. Titoli e informazioni meta sono stilizzati con font e colori specifici, garantendo coerenza nel design.
Questo codice CSS definisce gli stili per gli elementi all'interno di una classe "furniture-wrapper", concentrandosi sulle sezioni di informazioni meta e standfirst. Imposta il colore del testo su grigio chiaro (#dcdcdc) e il colore dei link su una tonalità basata su variabile, con effetti hover che cambiano il colore della decorazione del testo. I link nello standfirst sono sottolineati con un offset specifico e un colore, e gli stati hover regolano di conseguenza il colore della sottolineatura.
Per schermi più grandi (min-width: 61.25em), il primo paragrafo nello standfirst acquisisce un bordo superiore, che viene rimosso su schermi ancora più grandi (min-width: 71.25em). Anche gli elementi di lista nello standfirst adottano il colore del testo grigio chiaro.
Il codice include elementi di design responsivo utilizzando media query per diverse larghezze dello schermo (46.25em, 61.25em, 71.25em e 81.25em). Queste regolano la larghezza e il posizionamento degli pseudo-elementi (:before e :after) per creare aree di sfondo con bordi, calcolando le dimensioni in base alla larghezza del viewport e agli aggiustamenti della barra di scorrimento.
Inoltre, stilizza gli elementi SVG all'interno dei keyline e degli elementi social media o commenti nella sezione meta, impostandone il tratto e il colore del testo per corrispondere al tema utilizzando variabili CSS.
La sezione commenti ha un colore del bordo che corrisponde al colore del bordo dell'intestazione. Negli articoli, i titoli di secondo livello hanno un peso del font leggero di 200, ma se contengono un elemento strong, utilizzano un peso grassetto di 700.
Inoltre, la famiglia di caratteri Guardian Headline Full è definita con vari stili e pesi, inclusi light, regular, medium e semibold, ciascuno in versioni normale e corsivo. Questi font sono forniti da URL specifici nei formati WOFF2, WOFF e TrueType.
Questo codice CSS definisce diversi font face per la famiglia di caratteri "Guardian Headline Full", ciascuno con pesi e stili diversi (normale e corsivo), che vanno dal semibold (600) al black (900). Include anche un font face per "Guardian Titlepiece" in grassetto. I font sono forniti da URL specifici nei formati WOFF2, WOFF e TrueType.
Inoltre, il codice imposta proprietà personalizzate CSS (variabili) per gli sfondi della modalità scura e i colori di feature, adattandoli in base alla preferenza dello schema colore dell'utente o quando il sito viene visualizzato su dispositivi iOS o Android. Include anche la stilizzazione della prima lettera dei paragrafi nei contenitori degli articoli su queste piattaforme mobili, con selettori specifici per gestire i gate di accesso.
Per i dispositivi Android, la prima lettera del primo paragrafo negli articoli standard e di commento è stilizzata con un colore pillar secondario. Sia su iOS che Android, le intestazioni degli articoli sono nascoste e i furniture wrapper hanno un padding specifico. Le etichette all'interno di questi wrapper utilizzano un font grassetto, in maiuscolo, in stile titolo con un nuovo colore pillar. I titoli principali sono impostati a 32px, in grassetto, con padding inferiore e un colore scuro. Le immagini nei furniture wrapper sono posizionate in modo relativo, si estendono per la larghezza del viewport meno la barra di scorrimento e regolano automaticamente la loro altezza.
Per i dispositivi Android, le immagini all'interno dei contenitori degli articoli sono impostate per avere uno sfondo trasparente, estendersi per l'intera larghezza del viewport meno la barra di scorrimento e regolare automaticamente la loro altezza.
Sia su iOS che Android, le sezioni di riepilogo degli articoli hanno un padding superiore e inferiore rispettivamente di 4px e 24px, con un offset del margine destro di -10px.
Il testo in questi riepiloghi utilizza la famiglia di caratteri Guardian Headline o font serif simili.
I link all'interno dei riepiloghi sono stilizzati con un colore specifico, sottolineati con un offset di 6px e utilizzano un colore designato per la sottolineatura che cambia al passaggio del mouse per corrispondere al colore del link.
Inoltre, le sezioni di metadati negli articoli su entrambi i sistemi operativi hanno una stilizzazione coerente.
Per i dispositivi Android, il margine per gli elementi meta nei contenitori di articoli standard e di commento è impostato a zero.
Sui dispositivi iOS, le informazioni sull'autore e sulla byline nei contenitori di articoli feature, standard e di commento appariranno nel colore pillar designato. Allo stesso modo, sui dispositivi Android, gli stessi elementi nei contenitori di articoli feature, standard e di commento utilizzeranno anche il colore pillar.
Per entrambi iOS e Android, le informazioni meta varie nei contenitori di articoli feature, standard e di commento non hanno padding, e eventuali icone SVG al loro interno sono stilizzate con il colore pillar come tratto.
Il pulsante della didascalia negli elementi showcase per articoli feature, standard e di commento su entrambi iOS e Android viene visualizzato come un contenitore flex. È centrato, misura 28 per 28 pixel e posizionato a 14 pixel da destra con 5 pixel di padding.
Il corpo dell'articolo nei contenitori feature, standard e di commento per iOS e Android ha 12 pixel di padding orizzontale e nessun padding verticale.
Per i dispositivi iOS e Android, nei contenitori di articoli feature, standard e di commento, le immagini non in miniatura e non immersive all'interno del corpo dell'articolo non avranno margine, una larghezza calcolata come l'intera larghezza del viewport meno 24 pixel e la larghezza della barra di scorrimento, e un'altezza automatica. Le loro didascalie non avranno padding.
Le immagini immersive in questi contenitori si estenderanno per l'intera larghezza del viewport meno la larghezza della barra di scorrimento.
Nel testo del corpo dell'articolo, i blockquote citati mostreranno un marcatore colorato utilizzando il nuovo colore pillar. I link saranno stilizzati con il colore pillar primario, sottolineati con un offset e utilizzeranno il colore del bordo dell'intestazione per la sottolineatura. Al passaggio del mouse, il colore della sottolineatura cambia nel nuovo colore pillar.
In modalità scura, lo sfondo del furniture wrapper sarà impostato su un grigio scuro (#1a1a1a).
Per i dispositivi iOS e Android, applicare i seguenti stili ai contenitori di articoli feature, standard e di commento:
- Impostare le etichette dei contenuti per utilizzare il nuovo colore pillar.
- Rimuovere il colore di sfondo dai titoli e impostare il loro colore del testo sul colore del bordo dell'intestazione, assicurandosi che questo abbia priorità.
- Fare in modo che i paragrafi e i link dello standfirst adottino il colore del bordo dell'intestazione.
- Utilizzare il nuovo colore pillar per gli autori delle byline e i loro link.
- Applicare il nuovo colore pillar al tratto delle icone meta varie.
- Impostare il colore delle didascalie delle immagini showcase sul colore della dateline.
- Stilizzare di conseguenza i blockquote citati nel testo del corpo dell'articolo.
Per i dispositivi iOS e Android, il colore del testo dei blocchi citati nei corpi degli articoli è impostato su un colore pillar specifico.
Inoltre, il colore di sfondo per varie sezioni del corpo dell'articolo su entrambi i sistemi operativi è forzato a uno sfondo scuro.
Su iOS, la prima lettera che segue determinati elementi nei corpi degli articoli è stilizzata con un effetto capolettera.
Questo sembra essere un selettore CSS che mira alla prima lettera dei paragrafi che seguono elementi specifici in vari contenitori di articoli sulle piattaforme iOS e Android. Il selettore si applica a diversi tipi di articoli (standard, feature, commento) e tiene conto dei gate di accesso che potrebbero apparire tra gli elementi.
Questo codice CSS definisce gli stili per elementi specifici su dispositivi Android e iOS. Imposta il colore della prima lettera in determinati paragrafi su bianco o un colore variabile personalizzato. Regola anche il padding e i margini per gli elementi standfirst negli articoli di commento, imposta le dimensioni del font per i titoli h2 e modifica il padding per i pulsanti delle didascalie.
Per la modalità scura, cambia i colori del testo e delle icone in tonalità più chiare e definisce un colore di sfondo scuro. Inoltre, nasconde le intestazioni degli articoli rendendole completamente trasparenti e applica stili ai furniture wrapper, sebbene l'ultima regola appaia incompleta.
Per i dispositivi iOS e Android, il furniture wrapper del contenitore dell'articolo non ha margine. Le etichette negli articoli feature, standard e di commento utilizzano il nuovo colore pillar o un colore di feature per la modalità scura. I titoli in questi articoli sono impostati su un colore grigio chiaro. Anche i link nelle intestazioni degli articoli o nelle sezioni del titolo adottano il nuovo colore pillar o il colore di feature per la modalità scura.
Prima della sezione meta in questi articoli, viene applicato un gradiente lineare ripetuto come sfondo, utilizzando il colore del bordo dell'intestazione per creare un effetto a strisce. Il testo della byline all'interno dell'area meta è visualizzato in grigio chiaro.
Per i dispositivi iOS e Android, i seguenti stili si applicano ai link all'interno della sezione meta dei contenitori di articoli feature, standard e di commento:
- I link sono colorati utilizzando il nuovo colore pillar o un colore di feature per la modalità scura.
- Le icone SVG nella sezione meta varia hanno il tratto impostato sullo stesso colore.
- Le etichette di avviso vengono visualizzate in un colore grigio chiaro (#dcdcdc) con priorità importante.
- Gli span con attributi data-icon adottano anch'essi il nuovo colore pillar o il colore di feature per la modalità scura.
Per i dispositivi iOS e Android, il colore delle icone all'interno della sezione meta dei contenitori di articoli feature, standard e di commento è impostato su un nuovo colore pillar o un colore di feature per la modalità scura.
Su schermi più grandi (71.25em e oltre), la sezione meta in questi contenitori mostra un bordo superiore utilizzando le stesse opzioni di colore. Inoltre, gli elementi meta vari hanno il margine reimpostato e applicato un margine sinistro di 20 pixel.
I paragrafi e gli elenchi non ordinati all
