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 nelle versioni normale e corsivo. I font sono 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://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));
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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
La colonna dei contenuti interattivi ha un bordo sinistro e spaziature specifiche per gli elementi. I paragrafi che seguono certi elementi ricevono una spaziatura superiore extra, e la prima lettera di questi paragrafi è stilizzata come una grande capolettera colorata. Gli elementi inline e le figure sono limitati a una larghezza massima. Sono definite varie variabili di colore per una tematizzazione coerente.
I virgolettati all'interno di contenitori specifici dovrebbero avere una larghezza massima di 620 pixel.
Le didascalie per gli elementi showcase negli articoli principali, feature, articoli standard e commenti dovrebbero essere posizionate staticamente, estendersi per tutta la larghezza e avere anch'esse una larghezza massima di 620 pixel.
Gli elementi immersivi dovrebbero estendersi per tutta la larghezza del viewport, meno la barra di scorrimento. Su schermi più grandi (oltre 71.24em), la loro larghezza massima è di 978px, con la spaziatura delle didascalie adattata 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), questi elementi non dovrebbero avere margine sinistro e dovrebbero allinearsi al bordo sinistro, con margini e spaziatura delle didascalie adattati per schermi molto piccoli.
Per il wrapper "furniture" su schermi grandi (oltre 61.25em), viene utilizzato un layout a griglia con colonne e righe definite. I titoli ricevono un bordo superiore, le informazioni meta sono posizionate in modo relativo e il testo di apertura ha una stilizzazione specifica per i link e la spaziatura. Le figure all'interno di questo wrapper hanno margini adattati e una larghezza massima di 630px per gli elementi inline. Su schermi extra-large (oltre 71.25em), il template della griglia è adattato per includere più colonne.
Il CSS definisce un layout a griglia per un'intestazione di pagina con aree per titolo, titolo principale, testo di apertura, informazioni meta e un ritratto. Imposta dimensioni e posizioni specifiche per questi elementi a diverse dimensioni dello schermo. La stilizzazione include bordi, font e colori, con adattamenti per le icone dei social media, le didascalie e il comportamento responsivo nelle visualizzazioni mobile e desktop.
Il codice CSS definisce gli stili per un layout di pagina web, concentrandosi su un componente chiamato "furniture-wrapper". Questo componente ha uno sfondo scuro e adatta i suoi margini e la spaziatura in base alla dimensione dello schermo. Per schermi più grandi, aggiunge barre laterali decorative.
All'interno di questo wrapper, elementi come intestazioni degli articoli, titoli principali e informazioni meta (come i pulsanti di condivisione sui social) sono stilizzati. I titoli principali utilizzano un colore grigio chiaro e un font in grassetto. I pulsanti social hanno bordi colorati che corrispondono a un colore del tema e cambiano in un colore solido al passaggio del mouse.
Il codice gestisce anche la visibilità delle didascalie e di un pulsante di attivazione/disattivazione delle didascalie per gli elementi multimediali. In generale, gli stili garantiscono che il layout sia responsivo e visivamente coerente su diversi dispositivi.
Questo codice CSS definisce gli stili per un componente di pagina web, probabilmente una barra laterale o un wrapper di contenuti. Imposta i colori del testo, l'aspetto dei link e gli adattamenti del layout per diverse dimensioni dello schermo. I link sono stilizzati con colori specifici e sottolineature, e il layout include elementi di sfondo che si adattano in base alla larghezza del viewport. Il codice gestisce anche bordi e spaziatura per vari elementi all'interno del componente.
Il codice CSS definisce gli stili per gli elementi degli articoli e carica font personalizzati. Imposta il colore del bordo per i commenti in modo che corrisponda al colore del bordo dell'intestazione. Per i titoli degli articoli, utilizza un peso del font leggero per impostazione predefinita, ma passa al grassetto quando il titolo contiene un tag strong.
Inoltre, importa la famiglia di font "Guardian Headline Full" in vari pesi e stili (light, regular, medium, semibold, ciascuno con versioni normale e corsivo) dai server del Guardian, specificando più formati di file per la compatibilità del browser.
Il font "Guardian Headline Full" è definito con diversi stili: semibold corsivo (peso 600), bold (peso 700), bold corsivo (peso 700), black (peso 900) e black corsivo (peso 900). Ogni stile include file di font nei formati WOFF2, WOFF e TrueType, ospitati sui server del Guardian.
Inoltre, il font "Guardian Titlepiece" è definito nel suo stile bold (peso 700), anch'esso con file WOFF2, WOFF e TrueType.
Per i dispositivi iOS e Android, è impostato un colore di sfondo scuro e colori di funzionalità specifici. In modalità scura, il colore della funzionalità si adatta di conseguenza.
Su iOS e Android, vengono applicate regole CSS specifiche per stilizzare la prima lettera del primo paragrafo in certi contenitori di articoli, seguendo elementi specifici come `.element-atom` o cancelli di accesso.
Per i dispositivi Android, la prima lettera del primo paragrafo negli articoli standard e di commento è stilizzata con un colore secondario del pilastro. Sia su iOS che su Android, le intestazioni degli articoli sono nascoste e il wrapper "furniture" ha una spaziatura specifica. Le etichette all'interno del wrapper "furniture" utilizzano un font in grassetto, maiuscolo, con un nuovo colore del pilastro. I titoli principali sono impostati a 32px, in grassetto, con spaziatura inferiore e un colore scuro. Le figure di immagini sono posizionate in modo relativo, con margini a tutta larghezza e altezza automatica.
Per i dispositivi Android, le immagini all'interno dei contenitori degli articoli dovrebbero avere uno sfondo trasparente, estendersi per tutta la larghezza del viewport (tenendo conto delle barre di scorrimento) e adattare automaticamente la loro altezza.
Sia su iOS che su Android, il testo introduttivo negli articoli dovrebbe avere una spaziatura specifica: 4 pixel di spaziatura in alto e 24 pixel in basso, con un margine destro negativo di 10 pixel.
I paragrafi all'interno di questo testo introduttivo dovrebbero utilizzare la famiglia di font dei titoli del Guardian.
I link all'interno di questo testo dovrebbero essere stilizzati con un colore specifico, una sottolineatura posizionata 6 pixel sotto il testo e un colore di sottolineatura grigio chiaro, senza immagine di sfondo o bordo. Al passaggio del mouse, la sottolineatura dovrebbe cambiare per corrispondere al colore del testo del link.
Inoltre, la sezione dei metadati negli articoli su iOS e Android dovrebbe ricevere una stilizzazione specifica.
Questo codice CSS imposta gli stili per i contenitori degli articoli su dispositivi iOS e Android. Adatta margini, colori, spaziatura e visualizzazione dei pulsanti per vari tipi di articoli e i loro componenti.
Su dispositivi iOS e Android, per i contenitori di articoli feature, standard e di commento, le immagini che non sono miniature o immersive sono stilizzate per non avere margine, una larghezza calcolata dal viewport meno 24 pixel e la larghezza della barra di scorrimento, e un'altezza automatica. Le loro didascalie non hanno spaziatura.
Le immagini immersive in questi contenitori sono impostate su una larghezza che è la larghezza del viewport meno la larghezza della barra di scorrimento.
All'interno del corpo dell'articolo in prosa, i blocchi di citazione quotati mostrano un marcatore colorato utilizzando una variabile CSS personalizzata. I link sono stilizzati con un colore specifico, una sottolineatura spostata di 6 pixel e un colore di decorazione da una variabile. Al passaggio del mouse, il colore della sottolineatura cambia in un'altra variabile.
In modalità scura, il colore di sfondo del wrapper "furniture" in questi contenitori è impostato su un grigio scuro (#1a1a1a).
Per i dispositivi iOS e Android, le etichette dei contenuti negli articoli feature, standard e di commento utilizzano il nuovo colore del pilastro. I titoli principali in questi articoli non hanno sfondo e utilizzano il colore del bordo dell'intestazione. Il testo di apertura e i link, insieme alle firme degli autori, adottano anch'essi il nuovo colore del pilastro. Le icone nella sezione meta sono stilizzate con lo stesso colore. Le didascalie per le immagini showcase utilizzano il colore della data, e il testo quotato all'interno del corpo dell'articolo segue la stessa stilizzazione.
Per i dispositivi iOS e Android, il colore del testo dei blocchi quotati all'interno dei corpi degli articoli è impostato su un colore specifico del pilastro. Inoltre, il colore di sfondo per vari contenitori del corpo dell'articolo è forzato a uno sfondo scuro. Su iOS, la prima lettera che segue certi elementi in questi contenitori è stilizzata con un effetto capolettera.
Questo sembra essere un selettore CSS che mira alla prima lettera dei paragrafi in specifici contenitori di articoli su dispositivi iOS e Android. Il selettore si applica a vari tipi di articoli (standard, feature, commento) e tiene conto di diverse strutture di pagina ed elementi di cancelli di accesso.
Questo codice CSS imposta gli stili per elementi specifici su dispositivi Android e iOS. Definisce colori, spaziatura, margini e altre proprietà visive per vari contenitori di articoli, pulsanti ed elementi di testo. Il codice include anche una media query per la modalità scura che adatta i colori quando l'utente preferisce uno schema di colori scuro. Alcuni elementi, come le intestazioni degli articoli, sono nascosti impostando la loro opacità a zero.
Il codice CSS imposta gli stili per i contenitori degli articoli su dispositivi iOS e Android. Rimuove i margini dai wrapper "furniture"
