Denne CSS-koden definerer en egendefinert skriftfamilie kalt "Guardian Headline Full" med flere skriftvekter og stiler. Den inkluderer lette, vanlige, mellomtunge og halvfet skriftvekter, hver i både normale og kursiv stil. Skriftfilene leveres i WOFF2, WOFF og TrueType-formater, hostet på Guardians asset-server.
Guardian Headline Full-skriftfamilien inkluderer flere stiler, hver tilgjengelig i flere formater (WOFF2, WOFF og TTF). Stilene er:
- Fet (vekt 700, normal stil)
- Fet kursiv (vekt 700, kursiv stil)
- Svart (vekt 900, normal stil)
- Svart kursiv (vekt 900, kursiv stil)
- Lett (vekt 300, normal stil)
- Lett kursiv (vekt 300, kursiv stil)
- Vanlig (vekt 400, normal stil)
- Vanlig kursiv (vekt 400, kursiv stil)
I tillegg er Guardian Titlepiece-skriften tilgjengelig i Fet (vekt 700, normal stil).
Skriftfamilien "Guardian Headline Full" inkluderer flere skriftfiler i ulike vekter og stiler. Hver skrift er tilgjengelig i WOFF2, WOFF og TrueType-formater, hostet på de spesifiserte URL-ene. Vektene spenner fra 400 (vanlig) til 900 (svart), med både normale og kursiv stiler for hver vekt.
@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 {
/ Stilsetting for bildetekst fortsetter her /
}
}
For inngående figurtekster og interaktivt grid-innhold er padding satt til 4 piksler på toppen og 0 andre steder. Elementer med navnene "lines" og "meta" innenfor interaktive grids er plassert i et spesifikt grid-område. "Lines"-elementene har en høyde satt til å passe innholdet deres og en toppmarg på 5 piksler, mens "meta"-elementene har en toppmarg på 18 piksler.
På skjermer bredere enn 81,25 em bruker interaktive grids en fem-kolonne layout med faste og fleksible bredder.
På iOS- og Android-enheter bruker artikkeloverskrifter spesifikke skrifter og vekter for standfirst-tekst, seksjonsetiketter og byliner. Seksjonsetiketter skrives med store bokstaver, og keylines har justert padding. Figurbilder har gjennomsiktige bakgrunner, og bilder flyttes litt til høyre. Overskrifter har gjennomsiktige bakgrunner, justert padding og bruker en 24-pikslers skriftstørrelse med 115 % linjehøyde.
For Android er hoved- og underoverskrifter satt til å vises som blokker. På både iOS og Android er underoverskrifter stilsett med lett skriftvekt, venstrejustering og balansert tekstbryting.
Artikkel-kickere har ingen padding, og kopien deres er skjult.
Byline- og publiseringsdato-elementer bruker en 17px skrift med normal vekt og 130 % linjehøyde. Byline-tekst og forfatterlenker er farget #707070.
Standfirst-avsnitt er satt til 20px, normal stil, lett vekt og 115 % linjehøyde. Lenker innenfor standfirst-avsnitt er fet, farget #707070, med en nederst kantlinje og ingen bakgrunnsbilder.
Overskriftstekst er farget #dcdcdc.
Bilder og deres beholdere er satt til en bredde på 100vw minus 20px, med auto høyde og en maksimal bredde på 620px. Indre figurelementer har sin høyde satt til unset. Utstillingsbilder har en maksimal bredde på 280px.
Visse seksjoner og sidefelt etter navigasjonen er skjult. Atomelementer har ingen marg eller padding.
Utstillingsselementer og deres innhold har en maksimal bredde på 210px, økende til 260px for visningsport bredere enn 61,25em. Bildetekst-spenn innenfor inline- og utstillingsselementer er også stilsett tilsvarende.
For bildetekster innenfor kroppen er spenn-teksten satt til 14px, en lys gråfarge (#707070), og vist inline. Det første spennet i bildetekster for inline- og utstillingsselementer er satt til inline-block.
På skjermer bredere enn 71,25em er bildetekster for inline- og utstillingsselementer posisjonert relativt og har sin bredde tilbakestilt.
For interaktive innholdsartikler bruker layouten grid-områder med navnene "header", "headline", "standfirst", "lines", "meta" og "body". På større skjermer (71,25em og over) endrer grid-layouten til tre kolonner med områder for "header", "meta", "border", "standfirst" og "body". Hovedkolonnemargen fjernes, den venstre kantlinjen skjules, og avsnittsbredden settes til 620px.
Overskriftselementer har spesifikke skriftinnstillinger: Guardian Headline eller lignende skrifter, 24px størrelse, lett vekt (300) og en lys gråfarge (#dcdcdc). Padding er 0–10px på små skjermer, 0–20px på mellomstore skjermer (30em og over), og fjernet på store skjermer (71,25em og over).
Keylines og linjer er skjult. På store skjermer er artikkeloverskriften posisjonert absolutt 20px fra venstre.
Artikkeloverskriftlenker bruker en 17px skriftstørrelse og normal stil. Overskriftens toppadding er 2px, og etiketter har en toppkantlinje og padding (0–10px på små skjermer, 0–20px på mellomstore skjermer). På større skjermer (46,25em og over) fjernes toppkantlinjen, og padding settes til 0 på de største skjermene (71,25em og over).
Denne CSS-koden stilsetter elementer innenfor en interaktiv artikkel.
For artikkeltitler og lenker setter den linjehøyden til 115% og tekstfargen til #ff5943. Når man holder over tittellinker, endres understrekingsfargen til #dcdcdc.
Standfirst (artikkelsammendrag) bruker spesifikke skrifter, en gråfarge (#606060), 24px skriftstørrelse, normal stil, 400 vekt og 115% linjehøyde. Den har padding som justerer seg basert på skjermbredde: 2px 10px for mindre skjermer, 2px 20px for skjermer 30em og bredere, og ingen padding for skjermer 71,25em og opp. Lenker i standfirst er #707070 og får en 2px bunnkantlinje ved hovering.
Sosiale medie-knapper i meta-delen har ingen overgangseffekt. Ved hovering blir deres bakgrunn #121212, kantlinje blir #121212, tekst blir #dcdcdc, og eventuelle SVG-ikoner endrer også til #dcdcdc fyll med #121212 bakgrunn.
Del-knapper er skjult. Et lite 4px inline mellomromselement er definert. For artikkelkroppen bruker en navngrid-beholder en tokolonnelayout med en maksimal bredde på 620px.
For skjermer bredere enn 46,25em bruker navngrid-beholderen to kolonner, hver 310px bred. Oddetallselementer i griden har 5px høyrepadding (10px på bredere skjermer), mens partallselementer har 5px venstrepadding (10px på bredere skjermer).
Overskrifter (h2) innenfor griden har en 17px skriftstørrelse, en toppkantlinje, 2px toppadding og en maksimal bredde på 620px. Listeelementene som følger disse overskriftene har ingen padding eller marg, med det første elementet som bruker en annen tekstfarge. Listeelementmarkører er skjult, og avsnittstekst bruker en spesifikk skriftfamilie, 14px størrelse og 130% linjehøyde.
Inngående figurer har en mørk bakgrunn, og bilder inni dem starter helt gjennomsiktige. Når "fade-in"-klassen brukes, blir bildene helt ugjennomsiktige med en jevn 1-sekunds overgang.
Minneoverskriften spenner over full visningsportbredde (minus rullebredde), har en mørk bakgrunn, hvit tekst, og negative venstremarger som justerer seg basert på skjermstørrelse. På mellomstore og større skjermer inkluderer den sentrert padding og en kantlinje. Navnseksjonen har en minimumshøyde på 200px og ingen topp- eller bunnkantlinjer, mens møbelseksjonen er sticky i bunnen med ekstra padding og venstrejusteringsjusteringer på større skjermer. Den indre møbelseksjonen inkluderer venstrepadding og en kantlinje på bredere skjermer.
/
* Serif-skriftstabel
*/
/
* Overskriftsskriftstabel
*/
/
* Sans-serif tekstskriftstabel
*/
/
* Sans-serif overskriftsskriftstabel
*/
/
* Standard skriftskala-innstillinger
* Se font-scale.html og font-scale.png for visuelle eksempler
*/
/
* Hent alle nivåer av 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 spesifikt nivå av en skriftskala
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param {Number} $level - Nivå i skalaen
* @param {Map} $font-scale ($font-scale)
*
* @example
* font-size: get-scale-level(header, 1);
*
* @return {Map}
*/
/
* Hent en skriftstørrelse for et nivå i skriftskalaen
*
* @param {String} $name - Navn på skriftskalaen (f.eks. headline)
* @param {Number} $level - Nivå i skalaen
* @param {Map} $font-scale - Konfigurasjon
*
* @example
* font-size: get-font-size(header, 3);
*
* @return {Number}
*/
/
* Hent en linjehøyde for et nivå i skriftskalaen
*
* @param {String} $name - Navn på skriftskalaen (f.eks
