Questo codice CSS definisce una famiglia di caratteri personalizzata chiamata "Guardian Headline Full" con multipli pesi e stili. Include pesi light, regular, medium e semibold, ciascuno sia in stile normale che corsivo. I file dei caratteri sono forniti nei formati WOFF2, WOFF e TrueType, ospitati sul server di asset del Guardian.
La famiglia di caratteri Guardian Headline Full include diversi stili, ciascuno disponibile in multipli formati (WOFF2, WOFF e TTF). Gli stili sono:
- Bold (peso 700, stile normale)
- Bold Italic (peso 700, stile corsivo)
- Black (peso 900, stile normale)
- Black Italic (peso 900, stile corsivo)
- Light (peso 300, stile normale)
- Light Italic (peso 300, stile corsivo)
- Regular (peso 400, stile normale)
- Regular Italic (peso 400, stile corsivo)
Inoltre, il carattere Guardian Titlepiece è disponibile in Bold (peso 700, stile normale).
La famiglia di caratteri "Guardian Headline Full" include multipli file di caratteri in vari pesi e stili. Ciascun carattere è disponibile nei formati WOFF2, WOFF e TrueType, ospitati agli URL specificati. I pesi vanno da 400 (regular) a 900 (black), con stili sia normali che corsivi forniti per ciascun peso.
@font-face {
font-family: Guardian Headline;
src: 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;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Lo stile della didascalia continua qui /
}
}
Per le didascalie delle figure immersive e il contenuto della griglia interattiva, il padding è impostato a 4 pixel in alto e 0 altrove. Gli elementi con i nomi "lines" e "meta" all'interno delle griglie interattive sono posizionati in un'area specifica della griglia. Gli elementi "lines" hanno un'altezza impostata per adattarsi al loro contenuto e un margine superiore di 5 pixel, mentre gli elementi "meta" hanno un margine superiore di 18 pixel.
Su schermi più larghi di 81.25 em, le griglie interattive utilizzano un layout a cinque colonne con larghezze fisse e flessibili.
Sui dispositivi iOS e Android, le intestazioni degli articoli utilizzano caratteri e pesi specifici per il testo di standfirst, le etichette di sezione e le firme. Le etichette di sezione sono in maiuscolo e le linee guida hanno un padding modificato. Le immagini delle figure hanno sfondi trasparenti e le immagini sono leggermente spostate a destra. I titoli hanno sfondi trasparenti, padding modificato e utilizzano una dimensione del carattere di 24 pixel con un'interlinea del 115%. Per Android, i titoli principali e secondari sono impostati per visualizzarsi come blocchi. Sia su iOS che Android, i sottotitoli sono stilizzati con peso del carattere light, allineamento a sinistra e a capo bilanciato.
I kicker degli articoli non hanno padding e il loro testo è nascosto.
Gli elementi della firma e della data di pubblicazione utilizzano un carattere di 17px con peso normale e interlinea del 130%. Il testo della firma e i link degli autori sono colorati #707070.
I paragrafi di standfirst sono impostati a 20px, stile normale, peso light e interlinea del 115%. I link all'interno dei paragrafi di standfirst sono in grassetto, colorati #707070, con un bordo inferiore e nessuna immagine di sfondo.
Il testo del titolo è colorato #dcdcdc.
Le immagini e i loro contenitori sono impostati a una larghezza di 100vw meno 20px, con altezza automatica e una larghezza massima di 620px. Gli elementi interni delle figure hanno l'altezza impostata come non definita. Le immagini showcase hanno una larghezza massima di 280px.
Alcune sezioni e aside seguenti la navigazione sono nascosti. Gli elementi atom non hanno margine o padding.
Gli elementi showcase e i loro contenuti hanno una larghezza massima di 210px, che aumenta a 260px per viewport più larghi di 61.25em. Anche gli span delle didascalie all'interno degli elementi inline e showcase sono stilizzati di conseguenza.
Per le didascalie all'interno del corpo, il testo dello span è impostato a 14px, colore grigio chiaro (#707070) e visualizzato in linea. Il primo span nelle didascalie per gli elementi inline e showcase è impostato come inline-block.
Su schermi più larghi di 71.25em, le didascalie per gli elementi inline e showcase sono posizionate in modo relativo e la loro larghezza viene resettata.
Per gli articoli con contenuto interattivo, il layout utilizza aree di griglia denominate "header", "headline", "standfirst", "lines", "meta" e "body". Su schermi più grandi (71.25em e oltre), il layout della griglia cambia in tre colonne con aree per "header", "meta", "border", "standfirst" e "body". Il margine della colonna principale viene rimosso, il bordo sinistro è nascosto e la larghezza del paragrafo è impostata a 620px.
Gli elementi del titolo hanno impostazioni specifiche del carattere: Guardian Headline o caratteri simili, dimensione 24px, peso light (300) e colore grigio chiaro (#dcdcdc). Il padding è 0–10px su schermi piccoli, 0–20px su schermi medi (30em e oltre) e rimosso su schermi grandi (71.25em e oltre).
Le linee guida e le linee sono nascoste. Su schermi grandi, l'intestazione dell'articolo è posizionata in modo assoluto a 20px da sinistra.
I link dell'intestazione dell'articolo utilizzano una dimensione del carattere di 17px e stile normale. Il padding superiore dell'intestazione è di 2px e le etichette hanno un bordo superiore e padding (0–10px su schermi piccoli, 0–20px su schermi medi). Su schermi più grandi (46.25em e oltre), il bordo superiore viene rimosso e il padding è impostato a 0 sugli schermi più grandi (71.25em e oltre).
Questo codice CSS stilizza gli elementi all'interno di un articolo interattivo.
Per i titoli degli articoli e i link, imposta l'interlinea al 115% e il colore del testo a #ff5943. Quando si passa il mouse sui link del titolo, il colore della sottolineatura cambia in #dcdcdc.
Lo standfirst (riassunto dell'articolo) utilizza caratteri specifici, un colore grigio (#606060), una dimensione del carattere di 24px, stile normale, peso 400 e interlinea del 115%. Ha un padding che si adatta in base alla larghezza dello schermo: 2px 10px per schermi più piccoli, 2px 20px per schermi di 30em e più larghi, e nessun padding per schermi di 71.25em e oltre. I link nello standfirst sono #707070 e ottengono un bordo inferiore di 2px al passaggio del mouse.
I pulsanti dei social media nella sezione meta non hanno effetto di transizione. Al passaggio del mouse, il loro sfondo diventa #121212, il bordo diventa #121212, il testo diventa #dcdcdc e eventuali icone SVG cambiano anche in riempimento #dcdcdc con sfondo #121212.
I pulsanti di condivisione sono nascosti. È definito un piccolo elemento spaziale inline di 4px. Per il corpo dell'articolo, un contenitore di griglia denominato utilizza un layout a due colonne con una larghezza massima di 620px.
Per schermi più larghi di 46.25em, il contenitore della griglia dei nomi utilizza due colonne, ciascuna larga 310px. Gli elementi dispari nella griglia hanno un padding destro di 5px (10px su schermi più larghi), mentre gli elementi pari hanno un padding sinistro di 5px (10px su schermi più larghi).
I titoli (h2) all'interno della griglia hanno una dimensione del carattere di 17px, un bordo superiore, un padding superiore di 2px e una larghezza massima di 620px. Gli elementi di lista che seguono questi titoli non hanno padding o margine, con il primo elemento che utilizza un colore di testo diverso. I marcatori degli elementi di lista sono nascosti e il testo del paragrafo utilizza una famiglia di caratteri specifica, dimensione 14px e interlinea del 130%.
Le figure immersive hanno uno sfondo scuro e le immagini al loro interno iniziano completamente trasparenti. Quando viene applicata la classe "fade-in", le immagini diventano completamente opache con una transizione fluida di 1 secondo.
L'intestazione commemorativa si estende per l'intera larghezza del viewport (meno la larghezza della barra di scorrimento), ha uno sfondo scuro, testo bianco e margini sinistri negativi che si adattano in base alle dimensioni dello schermo. Su schermi medi e più grandi, include padding centrato e un bordo. La sezione dei nomi ha un'altezza minima di 200px e nessun bordo superiore o inferiore, mentre la sezione furniture è sticky in basso con ulteriori regolazioni di padding e allineamento a sinistra su schermi più grandi. La sezione interna furniture include padding sinistro e un bordo su schermi più larghi.
/
* Serie di caratteri serif
*/
/
* Serie di caratteri per titoli
*/
/
* Serie di caratteri sans serif per testo
*/
/
* Serie di caratteri sans serif per titoli
*/
/
* Impostazioni predefinite della scala dei caratteri
* Vedi font-scale.html e font-scale.png per esempi visivi
*/
/
* Ottieni tutti i livelli di una scala di caratteri
*
* @param {String} $name - Nome della scala di caratteri (es. headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Ottieni informazioni per un livello specifico di una scala di caratteri
*
* @param {String} $name - Nome della scala di caratteri (es. headline)
* @param {Number} $level - Livello nella scala
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Ottieni una dimensione del carattere per un livello nella scala dei caratteri
*
* @param {String} $name - Nome della scala di caratteri (es. headline)
* @param {Number} $level - Livello nella scala
* @param {Map} $font-scale - Configurazione
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Ottieni un'interlinea per un livello nella scala dei caratteri
*
* @param {String} $name - Nome della scala di caratteri (es. headline)
* @param {Number} $level - Livello nella scala
* @param {Map} $font-scale - Configurazione
*
* @example
* font-size: get-line-height(header, 3);
*
* @return {Number}
