Denne CSS-kode definerer font-familien "Guardian Headline Full" med flere stilarter og vægte. Den inkluderer let (300), normal (400), medium (500) og semibold (600) varianter, hver i både normal og kursiv stil. For hver stil leverer den fontfiler i WOFF2, WOFF og TrueFormat formater fra Guardians asset-server.
Denne CSS-kode definerer flere font-familier for Guardian Headline og Guardian Titlepiece skrifttyper, der specificerer deres kilder i forskellige formater (WOFF2, WOFF og TrueType) sammen med deres font-vægte og -stile. Den inkluderer også responsive design-regler for hovedindholdskolonnen i interaktive layout, der justerer margener, bredder og positionering baseret på viewport-størrelse. For eksempel tilføjes der en venstre margin og en kant på bredere skærme, mens der på mindre skærme justeres elementbredder og -positioner for at passe til skærmen. Koden sikrer, at elementer som afsnit og lister opretholder en maksimal bredde for læsbarhed, og den håndterer immersive elementer ved at udvide dem til fuld bredde på mobile enheder og justere deres layout på større skærme.
For interaktive indholdskolonner tilføjes en venstre kant med en lysegrå farve og placeres lidt til venstre. Elementer inden for disse kolonner har ingen top- eller bundmargener men inkluderer 12 px polstring. Når et afsnit følger et element, fjernes polstringen og margener sættes til 12 px. Inline-elementer er begrænset til en maksimal bredde på 620 px, og for bredere skærme overholder figurer med en specifik rolle også denne breddebegrænsning.
Farvevariabler er defineret for forskellige tekst- og baggrundselementer, herunder datolinje, header-kanter, billedtekster og featurefarver, med en standard featurefarve sat til rød.
Elementer stylede som atomer har ingen polstring. Specifikke regler gælder for det første afsnit efter visse elementer eller vandrette linjer i forskellige indholdsområder, der tilføjer 14 px top-polstring. Derudover styles det første bogstav i disse afsnit med en stor, fed, versal skrift i en overskriftstil, farvet i henhold til den definerede featurefarve, og flødes til venstre med en margin.
Vandrette linjer efterfulgt af afsnit i forskellige indholdssektioner har ingen top-polstring. Pullquotes inden for specifikke indholdsområder har en maksimal bredde på 620 pixels.
For showcase-elementer i forskellige artikelcontainere er billedtekster positioneret statisk med fuld bredde og en maksimal bredde på 620 pixels.
Immersive elementer spænder over hele viewport-bredden minus scrollbaren. På skærme op til 71,24 em brede er disse elementer begrænset til 978 pixels, med billedtekstpolstring på 10 pixels. Mellem 30 em og 71,24 em stiger billedtekstpolstring til 20 pixels. For skærme mellem 46,25 em og 61,24 em er den maksimale bredde 738 pixels. Under 46,24 em justeres immersive elementer til venstre med justerede margener og billedtekstpolstring på 20 pixels mellem 30 em og 46,24 em.
Furniture-wrapperen bruger en grid-layout på skærme 61,25 em og bredere, med definerede kolonner og rækker til organisering af indhold. Overskrifter har en topkant, metasektioner har toppolstring, og standfirst-elementer inkluderer stylede links med understregninger, der skifter farve ved hover. Oprindeligt har det første afsnit i standfirst en topkant og ingen bundpolstring, hvilket fjernes på skærme 71,25 em og derover.
Figurer inden for furniture-wrapperen har venstremargener og en maksimal bredde på 630 pixels for inline-elementer. På større skærme (71,25 em og derover) rekonfigureres grid-kolonner for forskellig placeringsindhold.
Layoutet bruger et grid med specifikke kolonner og rækker for forskellige skærmstørrelser. For mindre skærme definerer gridet områder for titel, overskrift, standfirst, metainformation og portræt, med rækker sat til faste og automatiske højder. En tynd linje vises over metasektionen, og standfirst har en lodret linje på dens venstre side.
På større skærme justerer gridet sig til at bruge brøkenheder for rækker og udvider kolonne-spænd. Overskriftens skriftstørrelse øges og dens maksimale bredde ændres, mens nogle elementer som linjer skjules. Standfirst-teksten styles med en specifik fontvægt og -størrelse, og hovedmedieområdet positioneres inden for gridet med justeringer for bredde og margener på mindre enheder. Billedtekster er absolut positioneret i bunden med en baggrundsfarve og polstring.
CSS-koden definerer stile for en furniture-wrapper-komponent, inklusive dens layout, farver og responsiv adfærd på tværs af forskellige skærmstørrelser. Den sætter baggrundsfarver, tekstfarver og kantstile ved hjælp af CSS-egenskaber for temaer som mørk tilstand. Wrapperen justerer margener, polstring og positionering på større skærme og inkluderer skjulte elementer og interaktive knapper med hover-effekter til social deling. Overskrifter og metainformation styles med specifikke skrifttyper og farver for at sikre konsistens i designet.
Denne CSS-kode definerer stile for elementer inden for en "furniture-wrapper"-klasse, der fokuserer på metainformation og standfirst-sektioner. Den sætter tekstfarver til lysegrå (#dcdcdc) og linkfarver til en variabelbaseret farve, med hover-effekter der ændrer tekstdekorationsfarve. Links i standfirst er understreget med en specifik offset og farve, og hover-tilstande justerer understregningsfarven tilsvarende.
For større skærme (min-bredde: 61,25 em) får det første afsnit i standfirst en topkant, som fjernes på endnu større skærme (min-bredde: 71,25 em). Listeelementer i standfirst antager også den lysegrå tekstfarve.
Koden inkluderer responsive design-elementer ved hjælp af media queries for forskellige skærmbredder (46,25 em, 61,25 em, 71,25 em og 81,25 em). Disse justerer bredden og positioneringen af pseudo-elementer (:before og :after) for at skabe baggrundsområder med kanter, der beregner dimensioner baseret på viewport-bredde og scrollbar-justeringer.
Derudover styles SVG-elementer inden for keylines og sociale medier eller kommentarelementer i metasektionen, hvor deres streg- og tekstfarver sættes til at matche temaet ved hjælp af CSS-variabler.
Kommentarsektionen har en kantfarve der matcher headerens kantfarve. I artikler har anden-niveau overskrifter en let fontvægt på 200, men hvis de indeholder et strong-element, bruger de en fed vægt på 700.
Derudover er font-familien Guardian Headline Full defineret med forskellige stile og vægte, inklusive let, normal, medium og semibold, hver i normale og kursiverede versioner. Disse skrifttyper hentes fra specifikke URL'er i WOFF2, WOFF og TrueType formater.
Denne CSS-kode definerer flere font faces for font-familien "Guardian Headline Full", hver med forskellige vægte og stile (normal og kursiv), der spænder fra semibold (600) til sort (900). Den inkluderer også et font face for "Guardian Titlepiece" i fed. Skrifttyperne hentes fra specifikke URL'er i WOFF2, WOFF og TrueType formater.
Derudover sætter koden CSS-egenskaber (variabler) for mørk tilstandsbaggrunde og featurefarver, justerer dem baseret på brugerens farveskema-præference eller når sitet vises på iOS- eller Android-enheder. Den inkluderer også styling for det første bogstav i afsnit i artikelcontainere på disse mobile platforme, med specifikke selektorer til håndtering af sign-in gates.
For Android-enheder styles det første bogstav i det første afsnit i standard- og kommentarartikler med en sekundær pillar-farve. På både iOS og Android skjules artikelheaders, og furniture-wrappere har specifik polstring. Labels inden for disse wrappere bruger en fed, kapitaliseret skrift i en overskriftstil med en ny pillar-farve. Overskrifter sættes til 32 px, fed, med bundpolstring og en mørk farve. Billeder i furniture-wrappere er positioneret relativt, spænder viewport-bredden minus scrollbaren og justerer deres højde automatisk.
For Android-enheder sættes billeder inden for artikelcontainere til at have en gennemsigtig baggrund, spænde den fulde viewport-bredde minus scrollbaren og justere deres højde automatisk.
På både iOS og Android har artikelresume-sektioner henholdsvis top- og bundpolstring på 4 px og 24 px, med en højremargin offset på -10 px.
Teksten i disse resumer bruger Guardian Headline font-familien eller lignende serif-skrifttyper.
Links inden for resumerne styles med en specifik farve, understreget med en 6 px offset og bruger en angivet farve for understregningen, der skifter ved hover til at matche linkfarven.
Derudover har metadatasektioner i artikler på begge operativsystemer konsekvent styling.
For Android-enheder sættes marginen for metaelementer i standard- og kommentarartikelcontainere til nul.
På iOS-enheder vil byline- og forfatterinformation i feature-, standard- og kommentarartikelcontainere vises i den angivne pillar-farve. Tilsvarende vil de samme elementer i feature-, standard- og kommentarartikelcontainere på Android-enheder også bruge pillar-farven.
For både iOS og Android har den diverse metainformation i feature-, standard- og kommentarartikelcontainere ingen polstring, og eventuelle SVG-ikoner inden for dem styles med pillar-farven som deres streg.
Billedtekstknappen i showcase-elementer for feature-, standard- og kommentarartikler på både iOS og Android vises som en flex-container. Den er centreret, måler 28 gange 28 pixels og positioneres 14 pixels fra højre med 5 pixels polstring.
Artikelkroppen i feature-, standard- og kommentarcontainere for iOS og Android har 12 pixels horisontal polstring og ingen vertikal polstring.
For iOS- og Android-enheder, i feature-, standard- og kommentarartikelcontainere, vil ikke-miniature- og ikke-immersive billeder inden for artikelkroppen have ingen margin, en bredde beregnet som den fulde viewport-bredde minus 24 pixels og scrollbar-bredden, og en automatisk højde. Deres billedtekster vil have ingen polstring.
Immersive billeder i disse containere vil spænde den fulde viewport-bredde minus scrollbar-bredden.
I artikelkroppens prosa vil citerede blockquotes vise en farvet markør ved hjælp af den nye pillar-farve. Links vil blive styled med den primære pillar-farve, understreget med en offset og bruge header-kantfarven til understregningen. Ved hover ændres understregningsfarven til den nye pillar-farve.
I mørk tilstand vil furniture-wrapperens baggrund blive sat til en mørkegrå (#1a1a1a).
For iOS- og Android-enheder, anvend følgende stile til feature-, standard- og kommentarartikelcontainere:
- Sæt indholdslabels til at bruge den nye pillar-farve.
- Fjern baggrundsfarven fra overskrifter og sæt deres tekstfarve til header-kantfarven for at sikre at dette har prioritet.
- Få standfirst-afsnit og links til at antage header-kantfarven.
- Brug den nye pillar-farve for byline-forfattere og deres links.
- Anvend den nye pillar-farve til stregen på diverse meta-ikoner.
- Sæt farven på showcase-billedtekster til datolinjefarven.
- Style citerede blockquotes i artikelkroppens prosa tilsvarende.
For iOS- og Android-enheder sættes tekstfarven for citerede blokke i artikelkroppe til en specifik pillar-farve.
Derudover tvinges baggrundsfarven for forskellige artikelkropssektioner på begge operativsystemer til en mørk baggrund.
På iOS styles det første bogstav efter visse elementer i artikelkroppe med en drop cap-effekt.
Dette ser ud til at være en CSS-selektor der targeter det første bogstav i afsnit der følger specifikke elementer i forskellige artikelcontainere på iOS- og Android-platforme. Selektor
