Questo codice CSS definisce una famiglia di caratteri personalizzata chiamata "Guardian Headline Full" con diversi pesi e stili. Include pesi light, regular, medium e semibold, ciascuno nelle versioni normale e corsivo. I caratteri sono caricati dai server del Guardian nei formati WOFF2, WOFF e TrueType per garantire la compatibilità tra diversi 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, 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) {
}
Per le colonne di contenuti interattivi, viene aggiunto un bordo sinistro con posizionamento e z-index specifici. Su schermi più grandi, la posizione sinistra del bordo si adatta leggermente. All'interno di queste colonne, gli elementi atomici non hanno margini superiore o inferiore ma includono padding. Quando i paragrafi precedono elementi atomici, il padding viene rimosso e vengono invece aggiunti margini. Gli elementi inline sono limitati a una larghezza massima.
Per le figure inline su schermi medi e superiori, viene impostata una larghezza massima. Nelle sezioni multimediali che contengono figure a loop, le didascalie sono sovrapposte sopra e i pulsanti del loop sono stilizzati con dimensioni e allineamento specifici. I pulsanti delle didascalie sono posizionati in alto.
Nella sezione body, le isole video self-hosted occupano l'intera larghezza fino a un massimo, con margini centrati. Anche le figure a loop e i video all'interno di queste isole occupano l'intera larghezza. Per gli elementi video immersivi, i vincoli di larghezza vengono rimossi e i margini vengono adattati. Su schermi più grandi, i video immersivi si espandono in larghezza e si spostano verso sinistra, con le didascalie rientrate di conseguenza.
Le variabili di colore definiscono vari elementi dell'interfaccia utente come dateline, bordi, didascalie e colori delle funzionalità, con i colori dei pilastri che influenzano i sottotitoli, i pullquote e i blockquote. In modalità scura, questi colori si adattano al tema scuro.
Gli elementi atomici all'interno delle colonne di contenuto non hanno padding. Regole specifiche adattano i primi paragrafi dopo determinati elementi o righe orizzontali in diverse aree di contenuto come articoli, contenuti interattivi, commenti e funzionalità, garantendo una spaziatura e un layout corretti.
Il primo paragrafo dopo un gate di accesso o una riga orizzontale (tranne l'ultima) ha un padding superiore di 14 pixel.
Per la prima lettera del primo paragrafo che segue elementi specifici come un atomo, un gate di accesso o una riga orizzontale (non l'ultima) in varie aree di contenuto (corpo dell'articolo, contenuto interattivo, commenti, funzionalità o elementi con un `data-gu-name` di "body"), applica uno stile speciale di capolettera. Questo stile utilizza caratteri di titolazione specifici, imposta la dimensione del carattere a 111px con un'altezza di linea di 92px, lo fa fluttuare a sinistra, lo rende maiuscolo, aggiunge un margine destro di 8px, lo allinea in alto al testo e lo colora con una variabile personalizzata per i capolettera.
I paragrafi immediatamente successivi a una riga orizzontale in queste aree di contenuto non devono avere padding superiore.
I pullquote all'interno di queste aree di contenuto sono limitati a una larghezza massima di 620 pixel.
Le didascalie per gli elementi showcase nel contenuto principale, negli articoli di funzionalità, negli articoli standard e nelle sezioni di commenti sono posizionate staticamente, occupando l'intera larghezza fino a un massimo di 620 pixel.
Gli elementi immersivi si estendono per l'intera larghezza del viewport, tenendo conto della barra di scorrimento. Su schermi più grandi (fino a 71.24em), la loro larghezza massima è di 978px, con il padding delle didascalie adattato a diversi breakpoint. Su schermi medi (tra 46.25em e 61.24em), la larghezza massima è di 738px. Su schermi più piccoli (sotto i 46.24em), gli elementi immersivi si allineano al bordo sinistro con margini e padding delle didascalie adattati.
Per schermi più larghi (oltre 61.25em), il wrapper dell'arredamento utilizza un layout CSS Grid con colonne e righe definite per posizionare elementi come il titolo, il titolo principale, i metadati, lo standfirst e le aree del ritratto.
Gli stili CSS definiscono un wrapper di layout per i componenti dell'articolo. I titoli principali hanno un bordo superiore e si adattano in dimensione da 32px a 50px su schermi più grandi, con una larghezza massima che cambia anch'essa. Le informazioni meta includono una linea decorativa superiore su schermi larghi. La sezione standfirst presenta link sottolineati con un colore personalizzato che cambia al passaggio del mouse, e il suo primo paragrafo ha un bordo superiore su schermi più piccoli che viene rimosso su quelli più grandi. Una linea separatrice verticale appare nello standfirst su schermi larghi.
Le griglie di layout sono definite per schermi di 71.25em e più larghi, e di nuovo per 81.25em e più larghi, specificando modelli di colonne e righe per posizionare elementi come le aree del titolo, del titolo principale, dei meta, dello standfirst e del ritratto. Le figure hanno margini e larghezze massime specifiche. In generale, gli stili controllano la presentazione responsiva degli intestazioni degli articoli e del contenuto introduttivo.
Per schermi più larghi di 740px, nascondi gli elementi con la classe `.keyline-4` o l'attributo `[data-gu-name="lines"]`. All'interno di `.furniture-wrapper`, stilizza i tratti SVG all'interno di questi elementi con una variabile di colore personalizzata.
Su schermi medi e più grandi, rimuovi il margine destro dagli elementi con l'ID `#meta` o l'attributo `[data-gu-name="meta"]`.
All'interno della sezione meta, imposta il colore del bordo per i link sociali, gli elementi dei commenti e i loro span figli su una variabile personalizzata. Inoltre, nascondi eventuali elementi `gu-island` all'interno di un contenitore specifico.
Per la sezione standfirst, adatta il suo posizionamento e padding, aggiungendo un offset sinistro. Su schermi medi, aggiungi un piccolo padding superiore. Stilizza il paragrafo all'interno con un peso del carattere regolare, una dimensione di 20px e un padding inferiore.
L'area multimediale principale è posizionata in modo relativo, collocata nell'area della griglia 'portrait' e dotata di margini specifici. Assicurati che i suoi div interni occupino l'intera larghezza. Su schermi più grandi, rimuovi il margine inferiore. Su schermi più piccoli, adatta la larghezza e il margine sinistro, con un ulteriore adattamento per schermi medio-piccoli.
Stilizza le didascalie delle figure in modo che appaiano in basso con uno sfondo e un colore del testo personalizzati, sovrascrivendo larghezza e margini predefiniti. Nascondi il primo span all'interno e mostra il secondo, limitandone la larghezza. Su schermi medi, adatta il padding della didascalia. Uno stato nascosto rende la didascalia trasparente.
Un pulsante per la didascalia è posizionato in basso a destra, stilizzato con uno sfondo circolare e un'icona scalata, con la sua posizione adattata su schermi medi.
Per le colonne di articoli interattivi su schermi molto grandi, adatta la posizione e l'altezza di un pseudo-elemento. Inoltre, limita la larghezza dei titoli di livello 2.
Su iOS o Android, definisci un insieme di variabili di colore per il tema scuro. In modalità scura, adatta la variabile di colore primario.
Per i dispositivi iOS, punta al primo paragrafo dopo elementi specifici in diversi contenitori di articoli e stilizza la sua prima lettera.
La prima lettera del primo paragrafo che segue un gate di accesso, o il primo paragrafo dopo un elemento atomo in vari contenitori di articoli su iOS e Android, dovrebbe essere colorata utilizzando la variabile del pilastro secondario (predefinita al nero).
Sia su iOS che su Android, l'altezza dell'intestazione dell'articolo nei contenitori di articoli di funzionalità, standard e commenti dovrebbe essere impostata a zero.
Il furniture wrapper all'interno di questi contenitori di articoli su entrambe le piattaforme dovrebbe avere un padding superiore di 4 pixel e un padding orizzontale di 10 pixel.
Le etichette all'interno del furniture wrapper dovrebbero essere in grassetto, utilizzare la pila di caratteri specificata, prendere il loro colore dalla nuova variabile del pilastro ed essere in maiuscolo.
I titoli principali (h1) all'interno del furniture wrapper dovrebbero essere di 32 pixel, in grassetto, avere un padding inferiore di 12 pixel ed essere colorati #121212.
Le figure di immagini all'interno del furniture wrapper dovrebbero essere posizionate in modo relativo, avere un margine superiore di 14 pixel, un margine sinistro di -10 pixel, una larghezza calcolata come la larghezza del viewport meno la larghezza della barra di scorrimento e un'altezza automatica.
Per gli articoli di funzionalità su iOS, l'elemento figura interno, l'immagine e il link all'interno di queste figure di immagini dovrebbero seguire anch'essi queste regole di stile.
Per i dispositivi iOS e Android, si applicano le seguenti regole CSS:
Per le immagini all'interno dei contenitori di articoli:
- Imposta lo sfondo su trasparente.
- Rendi la larghezza uguale all'intera larghezza del viewport meno la larghezza della barra di scorrimento.
- Assicurati che l'altezza si adatti automaticamente.
Per la sezione standfirst dell'articolo:
- Aggiungi 4px di padding in alto e 24px in basso.
- Applica un margine destro negativo di 10px.
Per i paragrafi all'interno dello standfirst:
- Utilizza le famiglie di caratteri Guardian headline e serif.
Per i link all'interno dello standfirst:
- Imposta il colore su una variabile specifica.
- Rimuovi qualsiasi immagine di sfondo.
- Applica una sottolineatura con un offset di 6px e un col
