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 con variazioni normali e corsive. I font vengono caricati dai server del Guardian in tre diversi formati di file: WOFF2, WOFF e TrueType.
@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 (scripting: enabled) {
main {
opacity: 0;
}
main.is-loaded {
opacity: 1;
}
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
main.is-loaded {
transition: opacity .3s ease-in-out;
}
}
:root {
--overlay-fade: rgba(0, 0, 0, .6);
--caption: #707070;
--light-type: #fff;
--dark-bg: #1a1a1a;
}
:root[data-app-os=android] {
--androidTop: 58px;
}
:root[data-app-os=ios] {
--iosBottomToolbar: 50px;
--iosTopToolbar: 20px;
--iosLvh: calc(100vh - var(--iosTopToolbar));
}
@media (min-height: 670px) {
:root[data-app-os=ios] {
--iosBottomToolbar: 84px;
--iosTopToolbar: 44px;
}
}
@media (min-height: 800px) {
:root[data-app-os=ios] {
--iosTopToolbar: 94px;
}
}
:root:root {
--byline: var(--media-200);
--byline-anchor: var(--media-200);
--share-button: var(--media-200);
--article-link-text: var(--media-200);
--article-link-hover: var(--media-200);
--article-link-text-hover: var(--media-200);
--article-link-border-hover: var(--media-200);
--block-quote-fill: var(--media-200);
--block-quote-text: var(--media-200);
--pullquote-icon: var(--media-200);
--pullquote-text: var(--media-200);
--textblock-bullet-background: var(--media-200);
--sub-meta-text: var(--media-200);
--sub-meta-text-hover: var(--media-text);
--design-tag-text: var(--media-text);
--design-tag-background: var(--media-tag);
--follow-icon-fill: var(--media-200);
--follow-icon-background: var(--media-200);
--series-title-text: var(--media-200);
}
:root:root [data-component=series] {
--carousel-active-dot: var(--media-200);
}
:root:root gu-island[name=ListenToArticle] {
--follow-icon-background: var(--media-text);
}
article [data-gu-name=body] h2 {
font-weight: 600;
--subheading-text: var(--media-200);
}
article .first-headline,
article .second-headline,
article .inter {
/ Il testo originale termina bruscamente qui. /
}
Il codice CSS definisce gli stili per un layout di articolo, concentrandosi sulla tipografia e sul design responsivo. I titoli utilizzano un font specifico e si adattano in dimensione da 36px a 50px su schermi più grandi. Etichette e link sono stilizzati con colori distinti ed effetti al passaggio del mouse. Il testo di apertura (standfirst) e le firme hanno dimensioni e colori definiti che si adattano anche a diverse larghezze dello schermo.
Per le sezioni multimediali, il layout cambia significativamente tra i breakpoint. Su mobile, occupa l'intera larghezza con un colore di sfondo e un'area a tutta altezza del viewport. Su schermi più grandi, passa a una griglia a due colonne con posizionamenti specifici per titoli, informazioni sull'intervistato e contenitori multimediali. Bordi di sfondo e larghezze vengono regolati per creare un aspetto centrato e incorniciato su dispositivi medi e grandi.
Stili aggiuntivi gestiscono didascalie, citazioni con tipografia speciale ed elementi decorativi come capolettera. Il design utilizza proprietà personalizzate CSS per i colori, consentendo coerenza tematica.
@media (min-width: 81.25em) {
[data-gu-name=media] {
--body-width: 1298px;
}
}
[data-gu-name=media] [data-gu-name=title] {
margin: 0 10px 4px;
width: fit-content;
background-color: var(--design-tag-background, var(--media-tag));
padding: 4px 6px;
}
@media (min-width: 30em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 8px 20px;
}
}
[data-gu-name=media] [data-gu-name=title] > div > div {
padding: 0;
background-color: transparent;
}
[data-gu-name=media] [data-gu-name=title] > div > div a:only-of-type {
margin: 0;
}
@media (max-width: 61.24em) {
[data-gu-name=media] [data-gu-name=title] {
grid-area: mobile-furniture-wrapper;
}
}
article .content--interactive-grid {
grid-template-areas:
"media"
"meta"
"standfirst"
"body";
}
@media (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"media media"
"meta ."
"standfirst ."
"meta ."
"body ."
". .";
}
}
@media (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"media media media media"
"meta border standfirst ."
"meta border body ."
". border . .";
}
}
@media (min-width: 81.25em) {
article .content--interactive-grid {
grid-template-columns: 219px 1px 620px 80px 300px;
grid-template-areas:
"media media media media media"
"meta border standfirst . ."
"meta border body . ."
". border body . ."
". border . . .";
}
}
article .content--interactive-grid [data-gu-name=standfirst] {
margin-top: 8px;
}
article .content--interactive-grid [data-gu-name=lines] {
display: none;
}
article .content--interactive-grid .header-caption,
article .content--interactive-grid .video-caption {
margin-bottom: 10px;
}
article .content--interactive-grid .header-caption svg,
article .content--interactive-grid .video-caption svg {
fill: var(--caption);
width: 14px;
float: left;
margin-right: 4px;
}
article .content--interactive-grid .header-caption i,
article .content--interactive-grid .video-caption i {
font-style: italic;
}
article .content--interactive-grid .header-caption {
padding: 4px 0;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) span:has(svg) {
display: none;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) {
display: block;
padding-top: 4px;
}
gu-island[name=ListenToArticle] button {
margin-top: 4px;
margin-bottom: 4px;
}
.pin-spacer {
pointer-events: none;
}
.pin-spacer * {
pointer-events: auto;
}
header {
position: relative;
z-index: 20;
}
[data-rendering-target=apps] article div:has([data-gu-name=dateline]),
[data-rendering-target=apps] article [data-gu-name=dateline] {
margin-bottom: 0;
}
@media (orientation: landscape) and (max-width: 700px) {
[data-gu-name=media] {
grid-template-columns: 5fr 5fr;
grid-template-rows: .1fr .1fr .2fr 1fr .2fr;
gap: 4px;
grid-template-areas:
"title media-container"
"interviewee media-container"
". media-container"
"headline-container media-container"
". media-container";
}
[data-gu-name=media] [data-gu-name=title] {
grid-area: title;
margin: 8px 20px;
}
}
:root[data-app-os=ios] .Static-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Static-header [data-gu-name=media]:after,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:after {
display: none;
}
@media (scripting: none) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 30em) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 61.25em) {
[data-gu-name=media] {
height: unset;
display: block;
}
[data-gu-name=media] > div {
max-width: unset;
}
}
@media (scripting: none) {
article .content--interactive-grid {
grid-template-areas:
"headline"
"title"
"media"
"meta"
"standfirst"
"body";
}
}
@media (scripting: none) and (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline ."
"title ."
"media media"
"meta ."
"standfirst ."
"body .";
}
}
@media (scripting: none) and (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline headline headline headline"
"media media media media";
}
}
Questo codice CSS definisce gli stili per un layout di articolo responsivo. Quando lo scripting è disabilitato e la larghezza dello schermo è almeno 81.25em, la griglia del contenuto dell'articolo è strutturata con aree specifiche per il titolo, i media, l'etichetta, il bordo, il testo di apertura, le meta informazioni e il corpo.
Gli elementi con la classe "screen-reader-only" sono posizionati fuori schermo per essere accessibili solo ai lettori di schermo. Le figure di supporto all'interno della colonna interattiva principale hanno una larghezza del 75% e il loro stile si adatta a diverse dimensioni dello schermo, con le didascalie che diventano statiche e le larghezze non impostate su schermi più grandi.
Per gli elementi immersivi su schermi medi, viene applicato un margine destro negativo. Le didascalie dell'intestazione hanno una spaziatura superiore e margini regolati quando seguite da una trascrizione video. I contenitori dei titoli e le sezioni degli intervistati nelle intestazioni statiche e video hanno una spaziatura orizzontale che aumenta su schermi più grandi.
I contenitori multimediali in queste intestazioni occupano un'area di griglia completa, con wrapper di immagini sticky su mobile che diventano relativi su schermi più grandi. Le immagini all'interno sono impostate per coprire i loro contenitori e alcuni elementi adiacenti sono nascosti. Viene aggiunto un secondo strato di immagini posizionato in modo assoluto.
Un wrapper per elementi mobili è sticky in basso su schermi piccoli, con un layout a colonna flessibile e colore di sfondo, diventando parte del normale flusso di contenuti su schermi più grandi. Include una sovrapposizione a gradiente per effetto visivo su dispositivi più piccoli.
Per schermi fino a 46.24em, le intestazioni statiche e video occupano l'intera altezza. Su dispositivi iOS a questa dimensione, il layout utilizza una variabile per l'altezza del viewport e aggiunge una spaziatura extra in basso per la sezione dell'intervistato per adattarsi alla barra degli strumenti iOS.
Per dispositivi Android fino a 61.24em, l'altezza dell'intestazione è calcolata sottraendo l'altezza della barra degli strumenti superiore dall'altezza totale del viewport, e il wrapper per elementi mobili include una spaziatura per la barra superiore Android.
In orientamento orizzontale su schermi larghi fino a 700px, l'altezza dell'intestazione si adatta al suo contenuto e anche il contenitore multimediale si adatta al suo contenuto.
All'interno delle app, le etichette dei wrapper delle immagini sono nascoste.
Il contenitore video occupa l'intera larghezza e altezza, con i video impostati per coprire l'area. I video iniziano invisibili e si dissolvono in 0.3 secondi quando attivi. Le didascalie video hanno uno sfondo scuro
