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 i font Guardian Headline e Guardian Titlepiece, specificandone le origini in diversi formati (WOFF2, WOFF e TrueType) insieme ai loro pesi e stili. Include anche regole di design reattivo 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. Gli stili garantiscono che elementi come paragrafi, elenchi e componenti immersivi si adattino correttamente su tutti i dispositivi.
Per la colonna principale interattiva, viene aggiunto un bordo sinistro prima del contenuto, posizionato 11 pixel a sinistra. Gli elementi all'interno di questa colonna non hanno margine superiore o inferiore ma includono 12 pixel di spaziatura interna sia in alto che in basso. Quando un paragrafo è seguito da un elemento, la spaziatura interna viene rimossa e vengono applicati margini di 12 pixel. Gli elementi in linea sono limitati a una larghezza massima di 620 pixel e, per schermi più larghi di 61.25em, anche le figure in linea con un ruolo specifico rispettano questo limite di larghezza.
Sono definite variabili di colore per vari elementi, come la data, il bordo dell'intestazione, il testo della didascalia e altro, con un colore di caratteristica impostato su rosso e un nuovo colore pilastro predefinito sul pilastro principale o sul colore di caratteristica.
Gli elementi con la classe 'element-atom' non hanno spaziatura interna. Si applicano condizioni specifiche al primo paragrafo che segue determinati elementi o righe orizzontali in diverse aree di contenuto, aggiungendo 14 pixel di spaziatura interna superiore. Inoltre, la prima lettera di questi paragrafi è stilizzata con un carattere grande, in grassetto, maiuscolo e di un colore specifico, fluttuante a sinistra con un margine.
Le righe orizzontali seguite da paragrafi in queste aree non hanno spaziatura interna superiore.
I virgolettati all'interno di specifiche aree di contenuto sono limitati a una larghezza massima di 620 pixel.
Per gli elementi showcase negli articoli principali, feature, articoli standard e commenti, le didascalie sono posizionate staticamente con larghezza completa fino a 620 pixel.
Gli elementi immersivi si estendono per l'intera larghezza del viewport meno la larghezza della barra di scorrimento. Su schermi fino a 71.24em di larghezza, questi elementi sono limitati a 978px con una spaziatura interna della didascalia di 10px. Tra 30em e 71.24em, la spaziatura interna della didascalia aumenta a 20px. Per schermi medi (46.25em a 61.24em), la larghezza massima è di 738px. Su schermi più piccoli (fino a 46.24em), gli elementi immersivi si allineano al bordo sinistro con margini e spaziatura interna adeguati.
Il wrapper furniture utilizza un layout a griglia su schermi più grandi (61.25em e oltre), organizzando titolo, titolo principale, informazioni meta, standfirst e sezioni ritratto. I titoli principali presentano un bordo superiore, le sezioni meta hanno una spaziatura interna superiore e il testo dello standfirst include stili specifici per link e bordi. Le figure all'interno del wrapper non hanno margine sinistro e una larghezza massima di 630px quando in linea. Su schermi molto grandi (71.25em e oltre), le colonne della griglia vengono riconfigurate per un layout diverso.
Il layout utilizza una griglia con colonne e righe specifiche per diverse dimensioni dello schermo. Per schermi più piccoli, la griglia ha tre colonne e righe con altezze fisse e automatiche. Appare una linea sottile sopra la sezione meta e la sezione standfirst ha una linea verticale sul lato sinistro senza bordo superiore sui paragrafi.
Su schermi più grandi, la griglia si espande a più colonne e altezze di riga frazionarie. La linea meta si allarga e la linea verticale dello standfirst si sposta leggermente a sinistra. I titoli principali hanno una larghezza massima e una dimensione del carattere che aumentano su schermi più grandi, con i più grandi che mostrano un carattere di 50px.
Alcuni elementi come le linee e le funzioni di commento sociale sono nascosti o adeguati su schermi medi e grandi. La sezione standfirst ha margini e spaziatura interna negativi, con stili di carattere specifici e spaziatura sotto i paragrafi.
Le immagini dei media principali sono posizionate in modo relativo, occupando tutta la larghezza e adattando i margini in base alle dimensioni dello schermo, con didascalie posizionate assolutamente in basso con sfondo personalizzato e colori del testo.
Il codice CSS definisce gli stili per un componente wrapper furniture, incluso il suo layout, colori e comportamento reattivo 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 adatta margini, spaziatura interna e posizionamento su schermi più grandi e include regole per nascondere o mostrare elementi come didascalie e pulsanti dei social media. Titoli principali e informazioni meta sono stilizzati con caratteri e colori specifici e gli elementi interattivi hanno effetti hover per il coinvolgimento dell'utente. Le media query garantiscono che il design si adatti dalle visualizzazioni mobili a quelle desktop.
Questo codice CSS definisce gli stili per gli elementi all'interno di un contenitore con la classe "furniture-wrapper". Imposta i colori del testo su grigio chiaro (#dcdcdc) per gli elementi meta e i paragrafi standfirst e utilizza proprietà personalizzate per i colori dei link che si adattano alla modalità scura o ai temi pilastro. I link nella sezione standfirst sono sottolineati con offset e colori specifici, rimuovendo bordi e immagini di sfondo.
Per schermi più grandi (min-width: 61.25em), il primo paragrafo nello standfirst ottiene un bordo superiore, che viene rimosso su schermi ancora più grandi (71.25em). Il codice crea anche barre laterali decorative utilizzando pseudo-elementi (:before e :after) che adattano la loro larghezza e posizione in base alle dimensioni del viewport, con sfondi scuri e bordi.
Inoltre, stilizza gli elementi SVG con tratti che corrispondono al colore del bordo dell'intestazione e garantisce che gli elementi social e commento nella sezione meta ereditino i colori appropriati senza ulteriori effetti di sfondo.
La sezione commenti ha un colore del bordo che corrisponde al colore del bordo dell'intestazione.
Negli articoli, le intestazioni di secondo livello (h2) all'interno del corpo principale utilizzano un peso del carattere leggero di 200. Tuttavia, se un h2 contiene un elemento strong, passa a un peso grassetto di 700.
La famiglia di caratteri Guardian Headline Full include vari stili e pesi, ciascuno con fonti di file specifiche nei formati WOFF2, WOFF e TrueType:
- Light (peso 300, stile normale)
- Light Italic (peso 300, stile corsivo)
- Regular (peso 400, stile normale)
- Regular Italic (peso 400, stile corsivo)
- Medium (peso 500, stile normale)
- Medium Italic (peso 500, stile corsivo)
- Semibold (peso 600, stile normale)
- Semibold Italic (peso 600, stile corsivo)
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). Specifica gli URL di origine per ogni carattere nei formati WOFF2, WOFF e TrueType. Inoltre, definisce il carattere "Guardian Titlepiece" con un peso grassetto (700) e stile normale.
Il codice imposta anche proprietà personalizzate CSS (variabili) per gli sfondi della modalità scura e i colori di caratteristica, adattandoli in base allo schema di colore preferito dall'utente o quando il sito viene visualizzato su dispositivi iOS o Android. Include stili specifici per la prima lettera dei paragrafi nei contenitori degli articoli su piattaforme iOS e Android, in particolare quando seguono determinati elementi come atom o sign-in gate.
Per i dispositivi Android, la prima lettera del primo paragrafo negli articoli standard e di commento è stilizzata con un colore pilastro secondario. Sia su iOS che su Android, le intestazioni degli articoli sono nascoste e il wrapper furniture ha una spaziatura interna specifica. Le etichette all'interno del wrapper furniture utilizzano un carattere in grassetto, maiuscolo, in stile titolo principale con un nuovo colore pilastro. I titoli principali sono impostati su 32px, grassetto, con spaziatura interna inferiore e un colore scuro. Le immagini nel wrapper furniture sono posizionate in modo relativo, con margini e larghezza adeguati, e i loro elementi interni, immagini e link sono stilizzati di conseguenza.
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 adattare automaticamente la loro altezza.
Sia su iOS che su Android, le sezioni di riepilogo degli articoli hanno una spaziatura interna 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 caratteri 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, rimuovendo qualsiasi immagine di sfondo o bordo. Quando si passa il mouse sopra, il colore della sottolineatura cambia 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, la sezione meta nei contenitori di articoli standard e di commento non ha margine.
Sui dispositivi iOS, le informazioni sull'autore e sulla byline negli articoli feature, standard e di commento utilizzano il nuovo colore pilastro. Questo vale anche per i dispositivi Android per gli articoli feature.
Sia per iOS che per Android, la sezione meta varia negli articoli feature, standard e di commento non ha spaziatura interna e eventuali icone SVG utilizzano il nuovo colore pilastro.
Il pulsante della didascalia negli elementi showcase per articoli feature, standard e di commento su iOS e Android viene visualizzato come un contenitore flex, centrato con 5px di spaziatura interna, 28px di larghezza e altezza e posizionato a 14px da destra.
Il corpo dell'articolo negli articoli feature, standard e di commento su iOS e Android ha 12px di spaziatura interna sui lati sinistro e destro.
Per i dispositivi iOS e Android, nei contenitori di articoli feature, standard e di commento, le immagini che non sono miniature o immersive non avranno margine, una larghezza del viewport completo meno 24 pixel e la larghezza della barra di scorrimento e un'altezza automatica. Le loro didascalie non avranno spaziatura interna.
Le immagini immersive in questi contenitori si estenderanno per l'intera larghezza del viewport meno la larghezza della barra di scorrimento.
I blockquote citati nel corpo dell'articolo mostreranno un marcatore colorato utilizzando il nuovo colore pilastro.
I link all'interno del corpo dell'articolo saranno stilizzati con il colore pilastro 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 pilastro.
In modalità scura, lo sfondo del wrapper furniture sarà impostato su un grigio scuro (#1a1a1a).
Per i dispositivi iOS e Android, si applicano i seguenti stili ai contenitori di articoli feature, standard e di commento:
- Le etichette dei contenuti utilizzano il nuovo colore pilastro.
- I titoli principali non hanno sfondo e utilizzano il colore del bordo dell'intestazione.
- I paragrafi e i link dello standfirst utilizzano il colore del bordo dell'intestazione.
- I nomi degli autori e i link nella sezione meta utilizzano il nuovo colore pilastro.
- Le icone nella sezione meta hanno un tratto nel nuovo colore pilastro.
- Le didascalie per le immagini showcase utilizzano il colore della data.
- I blockquote citati nel corpo dell'articolo...
Per i dispositivi iOS e Android, il colore del testo dei blocchi citati nei corpi degli articoli è impostato su un nuovo colore pilastro.
Inoltre, il colore di sfondo per varie sezioni del corpo dell'articolo su iOS e Android viene cambiato in uno sfondo scuro, utilizzando un flag importante per garantire che sovrascriva altri stili.
Inoltre, per la prima lettera che segue elementi specifici nei corpi degli articoli su iOS, viene applicato uno stile speciale, sebbene lo stile esatto non sia specificato qui.
Questo sembra essere un selettore CSS che punta alla prima lettera dei paragrafi che seguono elementi specifici in vari contenitori di articoli su piattaforme iOS e Android. Il selettore si applica a diverse sezioni come corpi di articoli, corpi di feature, sezioni di commenti e aree di contenuto interattivo, cercando specificamente paragrafi che vengono dopo elementi con classe "element-atom" o sign-in gate.
Questo codice CSS definisce gli stili per elementi specifici su dispositivi Android e iOS. Imposta il colore della prima lettera nei paragrafi che seguono determinati elementi su bianco o un colore variabile personalizzato. Regola anche la spaziatura interna e i margini per gli elementi standfirst negli articoli di commento, imposta le dimensioni del carattere per le intestazioni h2 e modifica la spaziatura interna 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 wrapper furniture, sebbene il codice sia incompleto per quest'ultimo.
Per i dispositivi iOS e Android, il wrapper furniture del contenitore dell'articolo non ha margine. All'interno di questo wrapper, le etichette dei contenuti negli articoli feature, standard e di commento utilizzano un colore definito dalla variabile del nuovo colore pilastro, che predefinisce al colore di caratteristica della modalità scura.
I titoli principali in questi articoli sono impostati su un colore grigio chiaro (#dcdcdc) e sono contrassegnati come importanti.
I link nell'intestazione dell'articolo o quelli con l'attributo data per il titolo adottano anche il nuovo colore pilastro, con lo stesso fallback per la modalità scura.
Prima della sezione meta o degli elementi con l'attributo data meta, viene applicato un gradiente lineare ripetuto come sfondo, creando un effetto linea tratteggiata utilizzando il colore del bordo dell'intestazione.
Il testo della byline all'interno della sezione meta viene visualizzato in grigio chiaro (#dcdcdc).
Per i dispositivi iOS e Android, si applicano i seguenti stili ai link all'interno della sezione meta dei contenitori di articoli feature, standard e di commento:
- I link sono colorati utilizzando il nuovo colore pilastro o un colore di caratteristica della modalità scura.
- Le icone SVG nella sezione meta varia hanno il loro 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 anche il
