Questo codice CSS definisce una famiglia di caratteri personalizzata chiamata "Guardian Headline Full" con più pesi e stili di font. Include pesi light, regular, medium e semibold, ciascuno sia in versione normale che corsiva. Per ogni stile, il codice specifica tre diversi formati di file di font (woff2, woff e ttf) ospitati sui server del Guardian, garantendo un'ampia compatibilità con i browser.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-cPer le colonne di contenuti interattivi, viene aggiunto un bordo sinistro con posizionamento e z-index specifici. Su schermi più grandi, la posizione del bordo si adatta leggermente. All'interno di queste colonne, gli elementi atom non hanno margini superiore o inferiore ma includono padding. Quando un paragrafo segue un elemento atom, il padding viene rimosso e vengono invece aggiunti margini. Gli elementi inline sono limitati a una larghezza massima.
Per le figure con un ruolo inline, anch'esse hanno una larghezza massima su schermi di medie dimensioni e superiori.
Le proprietà personalizzate definiscono vari colori per elementi come dateline, intestazioni, didascalie e feature. Il colore del pilastro principale predefinito è il colore della feature se non impostato.
Gli elementi atom all'interno di colonne interattive o in generale non hanno padding. Il primo paragrafo dopo elementi specifici o righe orizzontali in vari corpi di contenuto riceve un padding superiore extra.
Inoltre, la prima lettera di questi paragrafi è stilizzata come una lettera capitale con un font, dimensione, peso e colore specifici, utilizzando proprietà personalizzate per la colorazione.Per i paragrafi che seguono righe orizzontali in aree di contenuto specifiche, rimuovi il padding superiore.
Limita la larghezza dei pullquote a 620px nei corpi di articoli, interattivi, commenti e feature.
Per le didascalie degli elementi showcase nei contenuti principali e nei contenitori degli articoli, imposta la posizione su statica, la larghezza al 100% e la larghezza massima a 620px.
Gli elementi immersivi dovrebbero estendersi per l'intera larghezza del viewport meno la barra di scorrimento. Su schermi fino a 71.24em, limita la loro larghezza a 978px. Per le didascalie su questi schermi, aggiungi 10px di padding orizzontale, aumentando a 20px su schermi tra 30em e 71.24em.
Su schermi di fascia media (46.25em a 61.24em), limita gli elementi immersivi a 738px. Su schermi più piccoli (fino a 46.24em), rimuovi il margine sinistro, allinea al bordo sinistro e aggiungi un margine sinistro negativo di 10px (20px su schermi di 30em e più larghi). Le didascalie su questi schermi più piccoli ricevono 20px di padding orizzontale.
Per il wrapper del furniture su schermi grandi (61.25em e superiori), utilizza una griglia CSS con colonne e righe definite. Stilizza il primo figlio delle intestazioni con un bordo superiore. Posiziona la sezione meta in modo relativo con padding superiore e nessun margine destro. Nelle sezioni standfirst, regola i margini inferiori, imposta la dimensione del font degli elementi della lista a 20px e stilizza i link con sottolineature (utilizzando un colore personalizzato per la sottolineatura che cambia al passaggio del mouse). Il primo paragrafo nello standfirst ottiene un bordo superiore e nessun padding inferiore, sebbene questo bordo venga rimosso su schermi molto grandi (71.25em e superiori).
Inoltre, per le figure all'interno del wrapper, rimuovi il margine sinistro e imposta una larghezza massima di 630px per gli elementi inline. Sugli schermi più grandi (71.25em e superiori), le colonne del template della griglia sono definite a partire da titolo, intestazione e meta.Il layout utilizza una griglia con colonne e righe definite per diverse dimensioni dello schermo. Su schermi più grandi, la griglia ha tre colonne per le sezioni titolo, intestazione e meta, cinque colonne per lo standfirst e otto colonne per il ritratto, con righe dimensionate proporzionalmente. Su schermi medi, la griglia si adatta rispettivamente a due, cinque e sette colonne, con altezze di riga specifiche.
Lo stile include un bordo superiore per la sezione meta e un bordo sinistro per lo standfirst, entrambi utilizzando una variabile di colore personalizzata. Le intestazioni hanno una larghezza massima e una dimensione del font che cambia con la dimensione dello schermo, diventando più grandi su schermi più ampi. Alcuni elementi, come la condivisione sociale e le sezioni dei commenti, hanno bordi che corrispondono al colore dell'intestazione, mentre altri sono nascosti su determinati dispositivi.
Il testo dello standfirst ha proprietà di padding e font specifiche e l'area media principale è posizionata all'interno della griglia, con la sua larghezza che si adatta su schermi più piccoli per tenere conto delle barre di scorrimento e dei margini. Le didascalie sono posizionate in modo assoluto.La didascalia della figura nel wrapper del furniture è posizionata in modo assoluto in basso senza margine inferiore, con padding, un colore di sfondo e un colore del testo. La sua larghezza è impostata al 100% con un'altezza minima di 46 pixel. All'interno della didascalia, il primo span è nascosto, mentre il secondo è visualizzato e limitato al 90% della larghezza massima. Il testo della didascalia e le icone SVG utilizzano una variabile di colore specifica.
Su schermi più larghi di 30em, il padding orizzontale della didascalia aumenta. Un pulsante di didascalia dedicato è posizionato in modo assoluto in basso a destra, con uno sfondo circolare e un'icona SVG scalata, adattando la sua posizione destra su schermi più grandi.
Per le colonne principali interattive su schermi molto larghi, un pseudo-elemento regola la sua parte superiore e altezza. Le intestazioni all'interno di queste colonne hanno una larghezza massima.
Su iOS e Android, sono definite variabili di colore per la modalità scura, incluso un colore di feature che cambia in modalità scura. Specifici contenitori di articoli su queste piattaforme stilizzano la prima lettera del primo paragrafo dopo determinati elementi con un colore secondario, impostano l'altezza dell'intestazione dell'articolo a zero, regolano il padding per il wrapper del furniture e nascondono le etichette di contenuto al suo interno.Per i dispositivi iOS e Android, i seguenti stili si applicano ai contenitori di articoli feature, standard e commenti:
- **Etichette**: Utilizzano un font in maiuscolo e grassetto nel carattere Guardian headline o serif, colorato con la nuova variabile di colore del pilastro.
- **Intestazioni**: Impostate a 32px, grassetto, con 12px di padding inferiore e un colore grigio scuro (#121212).
- **Immagini**: Posizionate in modo relativo, con un margine superiore di 14px e un margine sinistro negativo di 10px. La larghezza si estende per l'intero viewport (tenendo conto delle barre di scorrimento) e l'altezza si adatta automaticamente. Gli elementi interni, le immagini e i link all'interno della figura hanno uno sfondo trasparente, corrispondendo alla larghezza completa del viewport con altezza automatica.
- **Standfirst (riassunto dell'articolo)**: Include 4px di padding superiore, 24px di padding inferiore e un margine destro negativo di 10px. I paragrafi all'interno dello standfirst ereditano questi stili del contenitore.Il codice CSS imposta stili specifici per gli standfirst degli articoli e i metadati sui dispositivi iOS e Android. Definisce le famiglie di font per il testo dello standfirst e personalizza l'aspetto dei link, incluso colore, stile della sottolineatura ed effetti al passaggio del mouse. Il codice regola anche i margini per le sezioni dei metadati e garantisce uno stile coerente per le firme e i link degli autori su diversi tipi di articoli.Il nome dell'autore nella sezione meta del wrapper del furniture, insieme ai link correlati e agli span sui dispositivi Android per gli articoli standard e di commento, dovrebbe utilizzare il nuovo colore del pilastro. Su iOS e Android, la sezione meta varia negli articoli feature, standard e di commento non dovrebbe avere padding e eventuali icone SVG all'interno dovrebbero essere stilizzate con il nuovo colore del pilastro come tratto.
Per gli elementi showcase negli articoli feature, standard e di commento su entrambi iOS e Android, il pulsante della didascalia dovrebbe essere visualizzato come un contenitore flex. Dovrebbe essere centrato con 5px di padding, allineato sia orizzontalmente che verticalmente, dimensionato a 28x28 pixel e posizionato a 14px da destra.
Il corpo dell'articolo negli articoli feature, standard e di commento su iOS e Android dovrebbe avere 12px di padding a sinistra e a destra. All'interno del corpo dell'articolo, le figure di immagini che non sono miniature o immersive non dovrebbero avere margine. La loro larghezza dovrebbe essere la larghezza completa del viewport meno 24px e qualsiasi larghezza della barra di scorrimento, con un'altezza automatica. Anche le didascalie per queste immagini dovrebbero seguire queste regole.Per i dispositivi iOS e Android, le immagini immersive negli articoli feature, standard e di commento dovrebbero estendersi per l'intera larghezza del viewport, tenendo conto della barra di scorrimento.
I blockquote all'interno del corpo dell'articolo dovrebbero utilizzare il colore del pilastro del sito per il loro elemento decorativo.
I link nel testo dell'articolo dovrebbero essere stilizzati con il colore del pilastro primario, una sottolineatura e nessuna immagine di sfondo. Il colore della sottolineatura dovrebbe cambiare al passaggio del mouse.
In modalità scura, l'area dell'intestazione dell'articolo dovrebbe avere uno sfondo scuro. Le etichette e l'intestazione dovrebbero utilizzare colori specifici per il contrasto e il testo introduttivo dovrebbe essere leggibile contro il tema scuro.Il testo appare essere un frammento di codice CSS, non un passaggio in prosa da riscrivere. Contiene selettori e regole di stile che mirano a elementi specifici su pagine web per diverse piattaforme (iOS e Android) e
