Denne CSS-kode definerer en brugerdefineret skrifttypefamilie kaldet "Guardian Headline Full" med flere skrifttykkelser og stilarter. Den inkluderer let, normal, medium og semibold tykkelser, hver i både normal og kursiv stil. Skriftfilerne leveres i WOFF2, WOFF og TrueFormat-formater, hostet på Guardians asset-server.
Skrifttypefamilien Guardian Headline Full inkluderer flere stilarter, hver tilgængelig i flere formater (WOFF2, WOFF og TTF). Stilarterne er:
- Fed (tykkelse 700, normal stil)
- Fed kursiv (tykkelse 700, kursiv stil)
- Sort (tykkelse 900, normal stil)
- Sort kursiv (tykkelse 900, kursiv stil)
- Let (tykkelse 300, normal stil)
- Let kursiv (tykkelse 300, kursiv stil)
- Normal (tykkelse 400, normal stil)
- Normal kursiv (tykkelse 400, kursiv stil)
Derudover er Guardian Titlepiece-skriften tilgængelig i Fed (tykkelse 700, normal stil).
Skrifttypefamilien "Guardian Headline Full" inkluderer flere skriftfiler i forskellige tykkelser og stilarter. Hver skrift er tilgængelig i WOFF2, WOFF og TrueType-formater, hostet på de angivne URL'er. Tykkelserne spænder fra 400 (normal) til 900 (sort), med både normale og kursiverede stilarter for hver tykkelse.
@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 {
/ Caption styling continues here /
}
}
For immersive figurtekster og interaktivt gitterindhold er padding sat til 4 pixels i toppen og 0 andre steder. Elementer med navnene "lines" og "meta" i interaktive gitre er placeret i et specifikt gitterområde. "Lines"-elementerne har en højde sat til at passe til deres indhold og en topmargen på 5 pixels, mens "meta"-elementerne har en topmargen på 18 pixels.
På skærme bredere end 81,25 em bruger interaktive gitre en femkolonne-layout med faste og fleksible bredder.
På iOS- og Android-enheder bruger artikeloverskrifter specifikke skrifttyper og tykkelser til standfirst-tekst, sektionsetiketter og bylines. Sektionsetiketter skrives med store bogstaver, og keylines har justeret padding. Figurbilleder har gennemsigtige baggrunde, og billeder flyttes lidt til højre. Overskrifter har gennemsigtige baggrunde, justeret padding og bruger en 24-pixels skriftstørrelse med 115% linjehøjde. Til Android er hoved- og underoverskrifter sat til at vises som blokke. På både iOS og Android er underoverskrifter formateret med let skrifttykkelse, venstrestilling og afbalanceret tekstombrydning.
Artikelkickers har ingen padding, og deres kopi er skjult.
Byline- og publiceringsdatoelementer bruger en 17px skriftstørrelse med normal vægt og 130% linjehøjde. Byline-tekst og forfatterlinks er farvet #707070.
Standfirst-afsnit er sat til 20px, normal stil, let vægt og 115% linjehøjde. Links i standfirst-afsnit er fedt, farvet #707070, med en bundgrænse og ingen baggrundsbillede.
Overskriftstekst er farvet #dcdcdc.
Billeder og deres beholdere er sat til en bredde på 100vw minus 20px, med automatisk højde og en maksimal bredde på 620px. Indre figurelementer har deres højde sat til unset. Fremvisningsbilleder har en maksimal bredde på 280px.
Visse sektioner og sidefelter efter navigationen er skjult. Atomelementer har ingen margen eller padding.
Fremvisningselementer og deres indhold har en maksimal bredde på 210px, stigende til 260px for visningsporte bredere end 61,25em. Billedtekstspænd i inline- og fremvisningselementer er også formateret i overensstemmelse hermed.
For billedtekster i brødteksten er spændteksten sat til 14px, en lysegrå farve (#707070) og vist inline. Det første spænd i billedtekster for inline- og fremvisningselementer er sat til inline-block.
På skærme bredere end 71,25em er billedtekster for inline- og fremvisningselementer placeret relativt og har deres bredde nulstillet.
For interaktive indholdsartikler bruger layoutet gitterområder navngivet "header", "headline", "standfirst", "lines", "meta" og "body". På større skærme (71,25em og derover) ændrer gitterlayoutet sig til tre kolonner med områder for "header", "meta", "border", "standfirst" og "body". Hovedkolonnens margen fjernes, den venstre grænse skjules, og afsnitsbredden sættes til 620px.
Overskriftselementer har specifikke skriftindstillinger: Guardian Headline eller lignende skrifttyper, 24px størrelse, let vægt (300) og en lysegrå farve (#dcdcdc). Padding er 0–10px på små skærme, 0–20px på mellemstore skærme (30em og derover) og fjernet på store skærme (71,25em og derover).
Keylines og linjer er skjult. På store skærme placeres artikelheaderen absolut 20px fra venstre.
Artikelheaderlinks bruger en 17px skriftstørrelse og normal stil. Headerens toppadding er 2px, og etiketter har en topgrænse og padding (0–10px på små skærme, 0–20px på mellemstore skærme). På større skærme (46,25em og derover) fjernes topgrænsen, og padding sættes til 0 på de største skærme (71,25em og derover).
Denne CSS-kode styler elementer i en interaktiv artikel.
For artikeltitler og links sættes linjehøjden til 115% og tekstfarven til #ff5943. Når der holdes over titellinks, ændres understregningsfarven til #dcdcdc.
Standfirst (artikelresumé) bruger specifikke skrifttyper, en grå farve (#606060), en 24px skriftstørrelse, normal stil, 400 vægt og 115% linjehøjde. Den har padding, der justeres baseret på skærmbredde: 2px 10px for mindre skærme, 2px 20px for skærme 30em og bredere, og ingen padding for skærme 71,25em og derover. Links i standfirst er #707070 og får en 2px bundgrænse ved hover.
Sociale medie-knapper i metasektionen har ingen overgangseffekt. Ved hover bliver deres baggrund #121212, grænse bliver #121212, tekst bliver #dcdcdc, og eventuelle SVG-ikoner ændrer også til #dcdcdc fyld med #121212 baggrund.
Del-knapper er skjulte. Et lille 4px inline mellemrumselement er defineret. For artikelbrødteksten bruger en navngivet gittercontainer en tokolonnelayout med en maksimal bredde på 620px.
For skærme bredere end 46,25em bruger navnegittercontaineren to kolonner, hver 310px bred. Ulige nummererede elementer i gitteret har 5px højrepadding (10px på bredere skærme), mens lige nummererede elementer har 5px venstrepadding (10px på bredere skærme).
Overskrifter (h2) i gitteret har en 17px skriftstørrelse, en topgrænse, 2px toppadding og en maksimal bredde på 620px. Listeelementerne efter disse overskrifter har ingen padding eller margen, hvor det første element bruger en anden tekstfarve. Listeelementmarkører er skjulte, og afsnitstekst bruger en specifik skrifttypefamilie, 14px størrelse og 130% linjehøjde.
Immersive figurer har en mørk baggrund, og billeder inde i dem starter fuldt gennemsigtige. Når "fade-in"-klassen anvendes, bliver billeder fuldt uigennemsigtige med en jævn 1-sekunds overgang.
Mindehovedet spænder over hele visningsportens bredde (minus rullebjælkebredde), har en mørk baggrund, hvid tekst og negative venstremargener, der justeres baseret på skærmstørrelse. På mellemstore og større skærme inkluderer det centreret padding og en grænse. Navneafsnittet har en minimumshøjde på 200px og ingen top- eller bundgrænser, mens møbelafsnittet er sticky i bunden med yderligere padding og venstrejusteringsjusteringer på større skærme. Det indre møbelafsnit inkluderer venstrepadding og en grænse på bredere skærme.
/
* Serif skriftstak
*/
/
* Overskriftsskriftstak
*/
/
* Skriftløs tekstskriftstak
*/
/
* Skriftløs overskriftsskriftstak
*/
/
* Standard skriftskalaindstillinger
* Se font-scale.html og font-scale.png for visuelle eksempler
*/
/
* Hent alle niveauer af en skriftskala
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale(header);
*
* @return {Map}
*/
/
* Hent info for et specifikt niveau i en skriftskala
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param {Number} $level - Niveau i skalaen
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Hent en skriftstørrelse for et niveau i skriftskalaen
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param {Number} $level - Niveau i skalaen
* @param {Map} $font-scale - Konfiguration
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Hent en linjehøjde for et niveau i skriftskalaen
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param
