Denne CSS-kode definerer fontfamilien "Guardian Headline Full" med forskellige vægte og stilarter, herunder light, regular, medium og semibold, hver i normale og kursiverede versioner. Den angiver fontfilerne i WOFF2-, WOFF- og TrueType-formater hostet på Guardians servere.
Denne CSS-kode definerer flere fontfamiljer for Guardian Headline- og Guardian Titlepiece-skrifttyperne og specificerer deres kilder i forskellige formater (WOFF2, WOFF, TTF) sammen med deres fontvægte og -stile. Den inkluderer også responsive designregler for hovedindholdskolonnen i interaktive layout, der justerer margener, bredder og positionering baseret på viewport-størrelse. For eksempel tilføjes der en venstremargin og en kant på bredere skærme, mens elementer på mindre skærme udvides til fuld bredde og centreres. Stilene sikrer korrekt formatering på tværs af enheder med maksimale bredder sat for forskellige indholdstyper som atomer, showcases og immersive elementer.
For interaktive indholdskolonner tilføjes en venstrekant før elementet, placeret 11 pixels til venstre. Inden for disse kolonner har atomer (elementer) ingen top- eller bundmargener men inkluderer 12 pixels polstring både i top og bund. Når et afsnit følger efter et atom, fjernes polstringen og margener på 12 pixels anvendes i stedet. Inline-elementer er begrænset til en maksimal bredde på 620 pixels, og for bredere skærme (over 61,25em) overholder inline-figurer med en specifik rolle også denne breddebegrænsning.
Farvevariabler er defineret for forskellige elementer, såsom datolinjer, overskrifter, billedtekster og features, med en standard feature-farve sat til rød. Atomer i hovedkolonnen og andre steder har ingen polstring.
Specifikke regler gælder for det første afsnit efter visse elementer eller vandrette linjer i forskellige indholdsområder (artikelkrop, interaktivt indhold, kommentarer, features), der tilføjer 14 pixels toppolstring. Derudover styles det første bogstav i disse afsnit med en stor, fed, versal skrifttype i en specifik typefarve, farvet efter en variabel og fløjet til venstre med en margin.
Vandrette linjer efterfulgt af afsnit i disse sektioner har ingen toppolstring.
Pullquotes inden for specifikke indholdsområder er begrænset til en maksimal bredde på 620 pixels.
For showcase-elementer i forskellige artikelcontainere positioneres billedtekster statisk med fuld bredde op til 620 pixels.
Immersive elementer spænder over hele viewport-bredden minus rullebjælkens bredde. På skærme op til 71,24em brede er disse elementer begrænset til 978px bredde med billedtekstpolstring på 10px. Mellem 30em og 71,24em stiger billedtekstpolstringen til 20px. For skærme mellem 46,25em og 61,24em bliver den maksimale bredde 738px. Under 46,24em justeres immersive elementer til venstre kant med tilpassede margener og bevarer 20px billedtekstpolstring mellem 30em og 46,24em.
Furniture-wrapperen bruger et responsivt grid-layout på skærme på 61,25em og derover, der organiserer titel, overskrift, metainformation, standfirst og portrætsektioner. Overskrifter har en topkant, metasektioner har toppolstring, og standfirst-tekst inkluderer specifik styling for lister og links med brugerdefinerede understregninger, der skifter farve ved hover. Det første afsnit i standfirst har en topkant på større skærme men fjerner den over 71,25em.
Figurer i furniture-wrapperen har venstrestillede margener og inline-elementer er begrænset til 630px bredde. Over 71,25em justeres grid-layoutet til at rumme flere kolonner til portrætindhold.
Layoutet bruger et grid med specifikke kolonner og rækker til forskellige skærmstørrelser. For mindre skærme har griddet tre kolonner og rækker, der justerer automatisk, med en fast højde på 80px for titel- og portrætområder. En tynd linje vises over metasektionen, og standfirst-sektionen har en lodret linje på dens venstre side.
På større skærme udvides griddet til flere kolonner og rækker med fractional enheder for fleksibilitet. Metasektionens toplinje udvides, og standfirstens lodrette linje forskydes let. Overskrifter har en maksimal bredde og skriftstørrelse, der øges på større skærme, mens visse elementer som linjer skjules eller justeres i margener for forskellige breakpoints.
Sociale og kommentarelementer i metasektionen deler den samme kantfarve, og nogle komponenter vises ikke. Standfirst-teksten har specifik styling med reduceret venstremargin og polstring samt fontegenskaber. Hovedmedieelementer positioneres relativt med fuld bredde og justerede margener på forskellige enheder, og billedtekster positions absolut i bunden med brugerdefineret baggrund og tekstfarver.
CSS-koden definerer stile for en furniture-wrapper-komponent, inklusive dens layout, farver og responsive adfærd på tværs af forskellige skærmstørrelser. Den indstiller 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 regler for at skjule eller vise elementer som billedtekster og knapper. Overskrifter og metainformation styles med specifikke skrifttyper og farver, og sociale medie-knapper har hover-effekter, der ændrer deres udseende. Media queries sikrer, at designet tilpasser sig til forskellige enheder.
Denne CSS-kode definerer stile for en websides furniture-wrapper-klasse med fokus på elementer som metainformation og standfirst-sektioner. Den indstiller tekstfarve til lysegrå (#dcdcdc) og linkfarve til en variabelbaseret nuance, med hover-effekter der ændrer tekstdekorationsfarve. Links i standfirst-områder har understregninger med specifikke offsets og ingen kanter, mens afsnit og listepunkter også antager den lysegrå farve.
For større skærme (min-width: 61.25em) får det første afsnit i standfirst en topkant, som fjernes på endnu større skærme (71.25em). Koden opretter også dekorative sidebjælker ved hjælp af pseudo-elementer (:before og :after), der justerer i bredde baseret på viewport-størrelse, med mørke baggrunde og kantede kanter. Derudover styles SVG-elementer med stregfarver og sociale medie- eller kommentar-ikoner i metasektioner.
Kommentarsektionen har en kantfarve, der matcher overskriftens kantfarve.
I artikler har anden-niveau overskrifter (h2) i hovedkroppen en let fontvægt på 200. Hvis en h2 dog indeholder et strong-element, bruger den en fed fontvægt på 700.
Guardian Headline Full-fontfamilien inkluderer forskellige stile og vægte, hver med specifikke filkilder i WOFF2-, WOFF- og TrueType-formater:
- Light (vægt 300, normal stil)
- Light Italic (vægt 300, kursiv stil)
- Regular (vægt 400, normal stil)
- Regular Italic (vægt 400, kursiv stil)
- Medium (vægt 500, normal stil)
- Medium Italic (vægt 500, kursiv stil)
- Semibold (vægt 600, normal stil)
- Semibold Italic (vægt 600, kursiv stil)
Denne CSS-kode definerer flere font faces for "Guardian Headline Full"-fontfamilien med forskellige vægte og stile (normal og kursiv), der spænder fra semibold (600) til black (900). Hvert font face specificerer kildefiler i WOFF2-, WOFF- og TrueType-formater fra Guardians asset-servere.
Den definerer også "Guardian Titlepiece"-fonten med en fed vægt (700) og normal stil, der bruger lignende filformater fra et andet subdomæne.
Koden inkluderer CSS-egenskaber (variabler) for farveskemaer, især for mørk tilstand på iOS- og Android-enheder. Den opsætter en mørk baggrundsfarve, feature-farver for lys og mørk tilstand og bruger media queries til at justere pillar-farven baseret på brugerens foretrukne farveskema.
Derudover er der specifikke stilregler for det første bogstav i afsnit i artikelcontainere på iOS- og Android-enheder, der anvendes, når de følger visse elementer som atomer, sign-in gates eller specifikke gate-elementer.
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 artikeloverskrifter, og furniture wrappers har specifik polstring. Labels i disse wrappers bruger en fed, kapitaliseret skrifttype i en overskriftsstil med en ny pillar-farve. Overskrifter er sat til 32px, fed, med bundpolstring og en mørk farve. Billeder i furniture wrappers positions relativt, spænder viewport-bredden minus rullebjælken og justerer deres højde automatisk.
For Android-enheder indstilles billeder i artikelcontainere til at have en gennemsigtig baggrund, spænde den fulde viewport-bredde minus rullebjælken og justere deres højde automatisk.
På både iOS og Android har standfirst-sektionen i artikler top- og bundpolstring på henholdsvis 4px og 24px, med en højremargin offset på -10px. Teksten indeni bruger Guardian Headline-fontfamilien eller fallback serif-fonter.
Links i standfirst på begge platforme styles med en specifik farve, understreget med en 6px offset og bruger en angivet farve for understregningen, der ændres ved hover. Baggrundsbilledet og bundkanten fjernes.
Derudover styles metasektionen i artikler konsekvent på tværs af iOS og Android for feature-, standard- og kommentarcontainere.
For Android-enheder fjernes margener fra metaelementer i standard- og kommentarartikelcontainere.
For iOS-enheder indstilles farven på byline- og forfatterelementer i feature-, standard- og kommentarartikelcontainere til den nye pillar-farve. Fjern også polstring fra meta misc-elementer og indstil stregen på SVG-ikoner i dem til den nye pillar-farve. Styles også caption-knappen i showcase-elementer med specifik visning, polstring, justering og dimensioner.
For både iOS og Android indstilles artikelkropspolstring til 0 på siderne og 12px i top og bund i feature-, standard- og kommentarartikelcontainere.
For iOS- og Android-enheder i feature-, standard- og kommentarartikelcontainere vil ikke-miniature- og ikke-immersive billeder i artikelkroppen have ingen margin, en bredde på den fulde viewport minus 24 pixels og rullebjælkens bredde og en automatisk højde. Deres billedtekster vil have ingen polstring.
Immersive billeder i disse containere vil spænde den fulde viewport-bredde minus rullebjælkens bredde.
Citerede blockquotes i artikelkroppen vil vise en farvet markør ved hjælp af den nye pillar-farve.
Links i artikelkroppen vil blive styles med den primære pillar-farve, understreget med en offset og bruge overskriftens kantfarve til understregningen. Ved hover ændres understregningsfarven til den nye pillar-farve.
I mørk tilstand vil furniture wrapperens baggrund være mørkegrå (#1a1a1a).
For iOS- og Android-enheder gælder følgende stile for feature-, standard- og kommentarartikelcontainere:
- Indholdslabels bruger den nye pillar-farve.
- Overskrifter har ingen baggrund og bruger overskriftens kantfarve til tekst.
- Standfirst-afsnit og links bruger overskriftens kantfarve.
- Forfatter-byline og deres links bruger den nye pillar-farve.
- Diverse metadata-ikoner streges med den nye pillar-farve.
- Showcase-billedtekster bruger datolinjefarven.
- Citerede blockquotes i artikelkroppen styles med den nye pillar-farve.
For iOS- og Android-enheder indstilles tekstfarven for citerede blokke i artikelkroppe til en specifik pillar-farve.
Derudover ændres baggrundsfarven for forskellige artikelkropssektioner på både iOS og Android til en mørk baggrund, hvilket sikrer, at den tilsidesætter andre stile.
Yderligere anvendes en speciel styling for det første bogstav efter visse elementer i artikelkroppe på iOS, selvom den nøjagtige effekt ikke er specificeret her.
Dette ser ud til at være en CSS-selector, der targeter det første bogstav i afsnit, der følger specifikke elementer i forskellige artikelcontainere på iOS- og Android-platforme. Selectoren gælder for forskellige artikeltyper (standard, feature, comment) og tager højde for sign-in gates, der kan vises mellem elementer.
Denne CSS-kode definerer stile for specifikke elementer på Android- og iOS-enheder. Den indstiller farven på det første bogstav i visse afsnit til en variabel farve, justerer polstring og margener for standfirst-elementer i kommentarartikler og styles overskrifter med en skriftstørrelse på 24px.
For caption-knapper anvendes forskellige polstringsværdier på iOS og Android. I mørk tilstand ændres forskellige farvevariabler til mørkere nuancer for bedre læsbarhed og indstilles en mørk baggrundsfarve.
Derudover skjules artikeloverskrifter ved at gøre dem fuldt gennemsigtige på begge operativsystemer og anvendes stile til furniture wrappers, selvom koden er ufuldstændig for sidstnævnte.
For iOS- og Android-enheder har artikelcontainerens furniture wrapper ingen margin. Inden for feature-, standard- og kommentarartikler bruger indholdslabels en specifik farvevariabel, mens overskrifter er sat til en lysegrå farve. Links i artikeloverskriften eller titelsektionen antager også den angivne farvevariabel.
Derudover anvendes en gentaget lineær gradient som baggrund før metasektionen, der skaber en mønstret kanteffekt. Byline-teksten i metaområdet vises i lysegrå, og links i metasektionen styles i overensstemmelse hermed.
For iOS- og Android-enheder gælder følgende stile for links i metasektionen af feature-, standard- og kommentarartikelcontainere:
- Links farves ved hjælp af den nye pillar-farve eller en mørk tilstand feature-farve.
- SVG-ikoner i meta miscellaneous-sektionen har deres streg sat til den samme farve.
- Alert-labels vises i en lysegrå farve (#dcdcdc) med vigtig prioritet.
- Spans med data-icon-attributter antager også den nye pillar- eller mørk tilstand feature-farve.
For iOS- og Android-enheder indstilles farven på ikoner i metasektionen af feature-, standard- og kommentarartikelcontainere til den nye pillar-farve eller en mørk tilstand feature-farve.
På større skærme (71.25em og derover) viser metasektionen i disse containere en topkant ved hjælp af den nye pillar-farve eller overskriftens kant
