Denne CSS-koden definerer "Guardian Headline Full"-skriftfamilien med ulike vekter og stiler, inkludert lett, vanlig, medium og halvfet, hver i normale og kursivversjoner. Den spesifiserer skriftfilene i WOFF2-, WOFF- og TrueType-formater som er hostet på Guardians servere.
Denne CSS-koden definerer flere skriftfamilier for Guardian Headline- og Guardian Titlepiece-skriftene, og angir deres kilder i ulike formater (WOFF2, WOFF, TTF) sammen med deres skriftvekter og stiler. Den inkluderer også responsive design-regler for hovedinnholdskolonnen i interaktive layouter, som justerer marger, bredder og posisjonering basert på visningsportens størrelse. For eksempel, på bredere skjermer legger den til en venstremargin og en ramme, mens den på mindre skjermer utvider elementer til full bredde og sentrerer dem. Stilene sikrer riktig formatering på tvers av enheter, med maksimumsbredder satt for ulike innholdstyper som atomer, showcase- og immersive elementer.
For interaktive innholdskolonner legges det til en venstreramme før elementet, plassert 11 piksler til venstre. Innenfor disse kolonnene har atomer (elementer) ingen topp- eller bunnmarger, men inkluderer 12 piksler polstring på både topp og bunn. Når et avsnitt følger et atom, fjernes polstringen, og marger på 12 piksler brukes i stedet. Inline-elementer er begrenset til en maksimumsbredde på 620 piksler, og for bredere skjermer (over 61,25 em) følger inline-figurer med en spesifikk rolle også denne breddegrensen.
Fargevariabler er definert for ulike elementer, som datolinjer, topptekster, bildetekster og funksjoner, med en standard funksjonsfarge satt til rød. Atomer i hovedkolonnen og andre steder har ingen polstring.
Spesifikke regler gjelder for det første avsnittet etter visse elementer eller horisontale linjer i ulike innholdsområder (artikkelkropp, interaktive innhold, kommentarer, funksjoner), som legger til 14 piksler topppolstring. I tillegg er den første bokstaven i disse avsnittene stilsett med en stor, fet, versal skrift i en spesifikk skrifttype, farget i henhold til en variabel, og flyter til venstre med en margin.
Horisontale linjer etterfulgt av avsnitt i disse seksjonene har ingen topppolstring. Sitatblokkeringer innenfor spesifikke innholdsområder er begrenset til en maksimumsbredde på 620 piksler.
For showcase-elementer i ulike artikkelcontainere er bildetekster posisjonert statisk med full bredde opp til 620 piksler.
Immersive elementer spenner over hele visningsportens bredde minus rullefeltets bredde. På skjermer opp til 71,24 em brede, er disse elementene begrenset til 978 px bredde med bildetekstpolstring på 10 px. Mellom 30 em og 71,24 em øker bildetekstpolstringen til 20 px. For skjermer mellom 46,25 em og 61,24 em blir maksimumsbredden 738 px. Under 46,24 em justeres immersive elementer til venstrekanten med justerte marger og opprettholder 20 px bildetekstpolstring mellom 30 em og 46,24 em.
Furniture-wrapperen bruker et responsivt grid-layout på skjermer 61,25 em og bredere, og organiserer tittel, overskrift, metainformasjon, standfirst- og portrettseksjoner. Overskrifter har en toppramme, metaseksjoner har topppolstring, og standfirst-tekst inkluderer spesifikk styling for lister og lenker med egendefinerte understrekninger som endrer farge ved hovering. Det første avsnittet i standfirst har en toppramme på større skjermer, men fjerner den over 71,25 em.
Figurer innenfor furniture-wrapperen har venstrejusterte marger og inline-elementer er begrenset til 630 px bredde. Over 71,25 em justeres grid-layoutet for å tilpasse seg flere kolonner for portrettinnhold.
Layoutet bruker et grid med spesifikke kolonner og rader for ulike skjermstørrelser. For mindre skjermer har griddet tre kolonner og rader som justerer seg automatisk, med en fast høyde på 80 px for tittel- og portrettområder. En tynn linje vises over metaseksjonen, og standfirst-seksjonen har en vertikal linje på venstre side.
På større skjermer utvides griddet til flere kolonner og rader med brøkenheter for fleksibilitet. Metaseksjonens topplinje utvides, og standfirstens vertikale linje forskyves litt. Overskrifter har en maksimumsbredde og skriftstørrelse som øker på større skjermer, mens visse elementer som linjer skjules eller justeres i marger for ulike brytningspunkter.
Sosiale og kommentarelementer i metaseksjonen deler samme rammefarge, og noen komponenter vises ikke. Standfirst-teksten har spesifikk styling med redusert venstremargin og polstring, og skriftegenskaper. Hovedmedieelementer er posisjonert relativt, med full bredde og justerte marger på ulike enheter, og bildetekster er absolutt posisjonert i bunnen med egendefinert bakgrunn og tekstfarger.
CSS-koden definerer stiler for en furniture-wrapper-komponent, inkludert dens layout, farger og responsive oppførsel på tvers av ulike skjermstørrelser. Den setter bakgrunnsfarger, tekstfarger og rammestiler ved hjelp av CSS-egendefinerte egenskaper for temaer som mørk modus. Wrapperen justerer marger, polstring og posisjonering på større skjermer, og inkluderer regler for å skjule eller vise elementer som bildetekster og knapper. Overskrifter og metainformasjon er stilsett med spesifikke skrifter og farger, og sosiale medier-knapper har hover-effekter som endrer utseendet deres. Mediesporringer sikrer at designet tilpasser seg ulike enheter.
Denne CSS-koden definerer stiler for en nettsides furniture-wrapper-klasse, med fokus på elementer som metainformasjon og standfirst-seksjoner. Den setter tekstfarger til lys grå (#dcdcdc) og lenkefarger til en variabelbasert nyanse, med hover-effekter som endrer tekstdekorasjonsfarger. Lenker i standfirst-områder har understrekninger med spesifikke avstander og ingen rammer, mens avsnitt og listeelementer også tar i bruk den lyse gråfargen.
For større skjermer (min-width: 61,25 em) får det første avsnittet i standfirst en toppramme, som fjernes på enda større skjermer (71,25 em). Koden lager også dekorative sidefelt ved hjelp av pseudoelementer (:before og :after) som justerer seg i bredde basert på visningsportens størrelse, med mørke bakgrunner og kantede kanter. I tillegg stilsetter den SVG-elementer med strekfarger og sosiale medier- eller kommentarikoner innenfor metaseksjoner.
Kommentarseksjonen har en rammefarge som samsvarer med topptekstens rammefarge.
I artikler har andre nivås overskrifter (h2) innenfor hoveddelen en lett skriftvekt på 200. Men hvis en h2 inneholder et strong-element, bruker den en fet skriftvekt på 700.
Guardian Headline Full-skriftfamilien inkluderer ulike stiler og vekter, hver med spesifikke filkilder i WOFF2-, WOFF- og TrueType-formater:
- Lett (vekt 300, normal stil)
- Lett kursiv (vekt 300, kursiv stil)
- Vanlig (vekt 400, normal stil)
- Vanlig kursiv (vekt 400, kursiv stil)
- Medium (vekt 500, normal stil)
- Medium kursiv (vekt 500, kursiv stil)
- Halvfet (vekt 600, normal stil)
- Halvfet kursiv (vekt 600, kursiv stil)
Denne CSS-koden definerer flere skrifttyper for "Guardian Headline Full"-skriftfamilien med ulike vekter og stiler (normal og kursiv), fra halvfet (600) til svart (900). Hver skrifttype spesifiserer kildefiler i WOFF2-, WOFF- og TrueType-formater fra Guardians asset-servere.
Den definerer også "Guardian Titlepiece"-skriften med en fet vekt (700) og normal stil, ved bruk av lignende filformater fra et annet subdomene.
Koden inkluderer CSS-egendefinerte egenskaper (variabler) for fargeskjemaer, spesielt for mørk modus på iOS- og Android-enheter. Den setter opp en mørk bakgrunnsfarge, funksjonsfarger for lys og mørk modus, og bruker mediesporringer for å justere pillar-fargen basert på brukerens foretrukne fargeskjema.
I tillegg er det spesifikke stilregler for den første bokstaven i avsnitt i artikkelcontainere på iOS- og Android-enheter, som gjelder når de følger visse elementer som atomer, påloggingsporter eller spesifikke portelementer.
For Android-enheter er den første bokstaven i det første avsnittet i standard- og kommentarartikler stilsett med en sekundær pillar-farge. På både iOS og Android skjules artikkeltopptekster, og furniture wrappere har spesifikk polstring. Etiketter innenfor disse wrapperne bruker en fet, kapitalisert skrift i en overskriftstil med en ny pillar-farge. Overskrifter er satt til 32 px, fet, med bunnpolstring og en mørk farge. Bilder i furniture wrappere er posisjonert relativt, spenner over visningsportens bredde minus rullefeltet, og justerer høyden automatisk.
For Android-enheter er bilder innenfor artikkelcontainere satt til å ha en gjennomsiktig bakgrunn, spenne over full visningsportbredde minus rullefeltet, og justere høyden automatisk.
På både iOS og Android har standfirst-seksjonen i artikler topp- og bunnpolstring på henholdsvis 4 px og 24 px, med en høyremargin på -10 px. Teksten inni bruker Guardian Headline-skriftfamilien eller fallback serif-skrifter.
Lenker innenfor standfirst på begge plattformer er stilsett med en spesifikk farge, understreket med en 6 px avstand, og bruker en angitt farge for understrekningen som endres ved hovering. Bakgrunnsbildet og bunnrammen fjernes.
I tillegg er metaseksjonen i artikler stilsett konsekvent på tvers av iOS og Android for funksjons-, standard- og kommentarcontainere.
For Android-enheter fjernes marger fra metaelementer i standard- og kommentarartikkelcontainere.
For iOS-enheter settes fargen på byline- og forfatterelementer i funksjons-, standard- og kommentarartikkelcontainere til den nye pillar-fargen. I tillegg fjernes polstring fra meta misc-elementer og streken til SVG-ikoner innenfor dem settes til den nye pillar-fargen. Videre stilsettes bildetekstknappen i showcase-elementer med spesifikk visning, polstring, justering og dimensjoner.
For både iOS og Android settes artikkelkroppens polstring til 0 på sidene og 12 px på topp og bunn i funksjons-, standard- og kommentarartikkelcontainere.
For iOS- og Android-enheter, i funksjons-, standard- og kommentarartikkelcontainere, vil ikke-miniatyr- og ikke-immersive bilder innenfor artikkelkroppen ha ingen margin, en bredde på full visningsport minus 24 piksler og rullefeltets bredde, og en automatisk høyde. Deres bildetekster vil ha ingen polstring.
Immersive bilder i disse containerne vil spenne over full visningsportbredde minus rullefeltets bredde.
Siterte blokksitat i artikkelkroppen vil vise en farget markør ved bruk av den nye pillar-fargen.
Lenker i artikkelkroppen vil være stilsett med den primære pillar-fargen, understreket med en avstand, og bruke topptekstens rammefarge for understrekningen. Ved hovering endres understrekningsfargen til den nye pillar-fargen.
I mørk modus vil furniture wrapperens bakgrunn være mørk grå (#1a1a1a).
For iOS- og Android-enheter gjelder følgende stiler for funksjons-, standard- og kommentarartikkelcontainere:
- Innholdsetiketter bruker den nye pillar-fargen.
- Overskrifter har ingen bakgrunn og bruker topptekstens rammefarge for tekst.
- Standfirst-avsnitt og lenker bruker topptekstens rammefarge.
- Forfatterbyline og deres lenker bruker den nye pillar-fargen.
- Diverse metadata-ikoner er streket med den nye pillar-fargen.
- Showcase-bildebildetekster bruker datolinjefargen.
- Siterte blokksitat i artikkelkroppen er stilsett med den nye pillar-fargen.
For iOS- og Android-enheter er tekstfargen til siterte blokker i artikkelkropper satt til en spesifikk pillar-farge.
I tillegg endres bakgrunnsfargen til ulike artikkelkroppsseksjoner på både iOS og Android til en mørk bakgrunn, noe som sikrer at den overstyrer andre stiler.
Videre, for den første bokstaven etter visse elementer i artikkelkropper på iOS, brukes en spesiell styling, selv om den eksakte effekten ikke er spesifisert her.
Dette ser ut til å være en CSS-velger som retter seg mot den første bokstaven i avsnitt som følger spesifikke elementer i ulike artikkelcontainere på iOS- og Android-plattformer. Velgeren gjelder for ulike artikkeltyper (standard, funksjon, kommentar) og tar hensyn til påloggingsporter som kan vises mellom elementer.
Denne CSS-koden definerer stiler for spesifikke elementer på Android- og iOS-enheter. Den setter fargen på den første bokstaven i visse avsnitt til en variabel farge, justerer polstring og marger for standfirst-elementer i kommentarartikler, og stilsetter overskrifter med en skriftstørrelse på 24 px.
For bildetekstknapper brukes ulike polstringsverdier på iOS og Android. I mørk modus endres ulike fargevariabler til mørkere nyanser for bedre lesbarhet og en mørk bakgrunnsfarge settes.
I tillegg skjules artikkeltopptekster ved å gjøre dem fullstendig gjennomsiktige på begge operativsystemer, og det brukes stiler på furniture wrappere, selv om koden er ufullstendig for sistnevnte.
For iOS- og Android-enheter har artikkelcontainerens furniture wrapper ingen margin. Innenfor funksjons-, standard- og kommentarartikler bruker innholdsetiketter en spesifikk fargevariabel, mens overskrifter er satt til en lys gråfarge. Lenker i artikkeltoppteksten eller tittelseksjonen tar også i bruk den angitte fargevariabelen.
I tillegg brukes en repeterende lineær gradient som bakgrunn før metaseksjonen, som skaper en mønstret rammeeffekt. Byline-teksten i metaområdet vises i lys grå, og lenker innenfor metaseksjonen er stilsett i henhold til dette.
For iOS- og Android-enheter gjelder følgende stiler for lenker innenfor metaseksjonen i funksjons-, standard-
