Il font Guardian Headline Full comprende diversi stili, ciascuno con pesi e corsivi differenti. La versione light (peso 300) è disponibile sia in stile regolare che corsivo, così come la versione regolare (peso 400). Anche gli stili medium (peso 500) e semibold (peso 600) offrono opzioni regolari e corsive. Ogni file di font è disponibile nei formati WOFF2, WOFF e TrueType dai server del Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}La colonna principale dei contenuti interattivi ha uno stile specifico per gli elementi. Ad esempio, gli atomi non hanno margini superiore o inferiore ma hanno un padding di 12px. Quando un paragrafo segue un atomo, il padding dell'atomo viene rimosso e i margini sono impostati a 12px. Gli elementi inline sono limitati a una larghezza di 620px.
Per le figure con un ruolo di loop, la didascalia è posizionata con un z-index di 6. Un pulsante di loop è stilizzato per essere largo 32px, allineato in basso a destra con margini specifici. Il pulsante della didascalia ha un alto z-index di 100.
Gli elementi video self-hosted sono impostati al 100% di larghezza, con un limite massimo di 620px, e visualizzati come blocco con margini di 12px. Il video e il suo contenitore occupano anche l'intera larghezza fino a 620px e sono centrati. Se il video è immersivo, rimuove il limite di larghezza e i margini, estendendosi completamente. Su schermi più grandi, i video immersivi si espandono a 1140px di larghezza con un margine sinistro negativo, e a dimensioni ancora maggiori diventano larghi 1300px con un margine negativo più ampio.
Le variabili di colore definiscono vari colori del tema, come il grigio della data, il bordo dell'intestazione, il testo della didascalia e il rosso delle feature. In modalità scura, alcuni colori si adattano a una palette di tema scuro.
All'interno del corpo dell'articolo, il primo paragrafo dopo un atomo o una linea orizzontale ha un padding superiore extra. Inoltre, la prima lettera del primo paragrafo dopo un atomo è stilizzata, sebbene lo stile specifico non sia qui dettagliato completamente.Il codice CSS definisce gli stili per le lettere capolettera, i pullquote e vari elementi di layout in diverse sezioni di un sito web. Le capolettere sono stilizzate con un font, una dimensione e un colore specifici, e sono flottate a sinistra. Ai pullquote viene data una larghezza massima. Per gli elementi showcase, le didascalie sono impostate su posizione statica con larghezza completa e una larghezza massima di 620px.
Gli elementi immersivi sono impostati per occupare l'intera larghezza del viewport, meno la barra di scorrimento. Su schermi più piccoli di 71.24em, la loro larghezza massima è regolata a 978px e il padding delle didascalie varia con le dimensioni dello schermo. Su schermi medi (da 46.25em a 61.24em), la larghezza massima è di 738px. Su schermi piccoli (sotto i 46.24em), agli elementi immersivi vengono dati margini sinistri negativi per estendersi fino al bordo del viewport, con il padding delle didascalie regolato di conseguenza.
Per schermi più grandi (oltre 61.25em), viene utilizzato un layout a griglia per il wrapper del furniture, creando una struttura a due colonne con righe definite per le sezioni titolo, headline, standfirst, meta e ritratto. Viene aggiunto un bordo superiore al primo figlio degli elementi headline e il posizionamento della sezione meta è impostato su assoluto.Il wrapper del furniture imposta il contenuto dello standfirst per avere una posizione relativa con un padding superiore di 2 pixel e nessun margine destro. All'interno dello standfirst, l'area del contenuto principale ha un margine inferiore di 4 pixel. Gli elementi di lista all'interno dello standfirst utilizzano una dimensione del font di 20 pixel. I link all'interno dello standfirst, compresi quelli negli elementi di lista, non hanno bordo, nessuna immagine di sfondo e sono sottolineati con un offset di 6 pixel, utilizzando un colore personalizzato per la sottolineatura. Al passaggio del mouse, il colore della sottolineatura cambia in un nuovo colore pillar.
Il primo paragrafo nello standfirst ha un bordo superiore e nessun padding inferiore. Per schermi più grandi (61.25em e oltre), se lo schermo è anche largo almeno 71.25em, il bordo superiore viene rimosso. Per schermi larghi almeno 61.25em, le figure non hanno margine sinistra e una larghezza massima di 630 pixel quando sono inline.
Su schermi larghi 71.25em e oltre, il wrapper del furniture utilizza un layout a griglia con colonne e righe specifiche. Una linea decorativa appare prima della sezione meta, larga 540 pixel. I paragrafi nello standfirst non hanno bordo superiore e viene aggiunta una linea verticale prima del contenuto dello standfirst. Per schermi ancora più grandi (81.25em e oltre), la griglia si adatta con più colonne e righe, la linea decorativa prima della meta si estende a 620 pixel e la linea verticale prima dello standfirst si sposta leggermente.
Le etichette nell'intestazione dell'articolo o nella sezione del titolo hanno un padding superiore di 2 pixel. L'headline utilizza un peso del font in grassetto, una larghezza massima di 620 pixel e una dimensione del font di 32 pixel. Su schermi più grandi (71.25em e oltre), l'headline si adatta a una larghezza massima di 540 pixel e una dimensione del font di 50 pixel.
Per schermi medi (46.25em e oltre), le keylines o gli elementi linea non hanno margine destro. Su schermi più grandi (61.25em e oltre), queste linee sono nascoste. Le linee utilizzano un colore personalizzato per il tratto.Questo codice CSS definisce gli stili per il layout di una pagina web, in particolare per un wrapper a tema furniture. Imposta varie proprietà per elementi come le informazioni meta, il testo dello standfirst, i media principali e le didascalie. Gli stili includono regolazioni per margini, padding, colori e posizionamento, con regole specifiche per diverse dimensioni dello schermo utilizzando media query. Il design utilizza variabili CSS personalizzate per i colori, come `--darkBackground` e `--headerBorderColor`, e garantisce che gli elementi siano nascosti o visualizzati in base alla larghezza del viewport. Il wrapper ha uno sfondo scuro e include un comportamento reattivo per dispositivi che vanno dal mobile al desktop.Il codice CSS stilizza gli elementi all'interno di una classe furniture-wrapper. Le headline (h1) sono in grassetto e di un grigio chiaro (#dcdcdc). Le figure nelle headline non hanno margine superiore e un piccolo margine inferiore.
Per schermi più larghi di 71.25em, appare una linea colorata prima della sezione meta. Il testo e i riepiloghi nella sezione meta sono di un grigio chiaro. I link e i pulsanti dei social media hanno un bordo colorato e utilizzano un colore specifico per il testo e le icone, che cambia in uno sfondo scuro al passaggio del mouse.
I link nella sezione meta utilizzano un colore specifico e lo mantengono al passaggio del mouse con sottolineature corrispondenti. Nella sezione standfirst, i link sono sottolineati con un colore grigio chiaro che cambia al passaggio del mouse e il testo del paragrafo è grigio chiaro. Su schermi più larghi, il primo paragrafo può avere o perdere un bordo superiore. Gli elementi di lista nello standfirst sono anch'essi grigio chiaro.
Per schermi più larghi di 71.25em, appare una linea prima dello standfirst. Su schermi più larghi di 46.25em, il wrapper ottiene uno sfondo scuro e un bordo destro.Il wrapper del furniture utilizza pseudo-elementi per creare bordi laterali. L'elemento `:before` è posizionato a sinistra con uno sfondo scuro e un bordo sinistro, mentre la sua larghezza e posizione sinistra sono calcolate in base alla larghezza del viewport, alla larghezza della barra di scorrimento e a una larghezza base fissa di 738px. L'elemento `:after` specchia questo sul lato destro con un bordo destro.
Per schermi più grandi (larghezza minima 61.25em), i calcoli si adattano a una larghezza base di 978px. Questo modello continua per breakpoint ancora più grandi: 71.25em (base 1138px) e 81.25em (base 1298px).
All'interno del wrapper, i tratti SVG e i bordi di alcuni elementi social/meta sono impostati per utilizzare una variabile CSS personalizzata per il colore, `--headerBorderColor`.
Nel corpo dell'articolo, le intestazioni di livello due (`h2`) hanno un peso del font di 200, ma se contengono un elemento `strong`, il peso aumenta a 700.
Infine, sono definite diverse regole `@font-face` per caricare la famiglia di font "Guardian Headline Full" in vari pesi e stili (Light, Light Italic, Regular, Regular Italic) dai server di asset del Guardian.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GH
