Denne CSS-koden definerer "Guardian Headline Full" font-familien med flere stiler og vekter. Den inkluderer lette (300), vanlige (400), medium (500) og halvfet (600) varianter, hver i både normal og kursiv stil. For hver stil tilbyr den fontfiler i WOFF2, WOFF og TrueType-formater fra Guardians asset-server.
Denne CSS-koden definerer flere font-familier for Guardian Headline og Guardian Titlepiece-fontene, og spesifiserer deres kilder i forskjellige formater (WOFF2, WOFF og TrueType) sammen med deres font-vekter 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 justerer elementbredder og posisjoner for å passe skjermen. Koden sikrer at elementer som avsnitt og lister opprettholder en maksimal bredde for lesbarhet, og den håndterer immersive elementer ved å utvide dem til full bredde på mobile enheter og justere deres plassering på større skjermer.
For interaktive innholdskolonner legges det til en venstre ramme i en lysegrå farge og plasseres litt til venstre. Elementer innenfor disse kolonnene har ingen topp- eller bunnmarger, men inkluderer 12px padding. Når et avsnitt følger et element, fjernes paddingen og marger settes til 12px. Innebygde elementer er begrenset til en maksimal bredde på 620px, og for bredere skjermer følger figurer med en spesifikk rolle også denne breddegrensen.
Fargevariabler er definert for ulike tekst- og bakgrunnselementer, inkludert datolinje, header-rammer, bildetekster og funksjonsfarger, med en standard funksjonsfarge satt til rød.
Elementer stilet som atomer har ingen padding. Spesifikke regler gjelder for det første avsnittet etter visse elementer eller horisontale linjer i forskjellige innholdsområder, som legger til 14px topp-padding. I tillegg er den første bokstaven i disse avsnittene stilet med en stor, fet, versal skrift i en overskriftstil, farget i henhold til den definerte funksjonsfargen, og flyter til venstre med en margin.
Horisontale linjer etterfulgt av avsnitt i ulike innholdsseksjoner har ingen topp-padding.
Sitatblokkene innenfor spesifikke innholdsområder har en maksimal bredde på 620 piksler.
For showcase-elementer i ulike artikkelcontainere er bildetekster posisjonert statisk med full bredde og en maksimal bredde på 620 piksler.
Immersive elementer spenner over hele visningsportens bredde minus rullefeltet. På skjermer opp til 71.24em brede er disse elementene begrenset til 978 piksler, med bildetekst-padding på 10 piksler. Mellom 30em og 71.24em øker bildetekst-paddingen til 20 piksler. For skjermer mellom 46.25em og 61.24em er maksimal bredde 738 piksler. Under 46.24em justeres immersive elementer til venstre med justerte marger og bildetekst-padding på 20 piksler mellom 30em og 46.24em.
Møbel-innpakningen bruker en grid-layout på skjermer 61.25em og bredere, med definerte kolonner og rader for organisering av innhold. Overskrifter har en toppramme, meta-seksjoner har topp-padding, og standfirst-elementer inkluderer stilerte lenker med understrekninger som endrer farge ved hovering. Opprinnelig har det første avsnittet i standfirst en toppramme og ingen bunn-padding, som fjernes på skjermer 71.25em og over.
Figurer innenfor møbel-innpakningen har venstremarger og en maksimal bredde på 630 piksler for innebygde elementer. På større skjermer (71.25em og oppover) rekonfigureres grid-kolonner for annen innholdsplassering.
Layoutet bruker en grid med spesifikke kolonner og rader for forskjellige skjermstørrelser. For mindre skjermer definerer griden områder for tittel, overskrift, standfirst, metainformasjon og portrett, med rader satt til faste og automatiske høyder. En tynn linje vises over metaseksjonen, og standfirst har en vertikal linje på venstre side.
På større skjermer justerer griden seg til å bruke brøkenheter for rader og utvider kolonne-spenn. Overskriftens skriftstørrelse øker og dens maksimale bredde endres, mens noen elementer som linjer skjules. Standfirst-teksten er stilet med en spesifikk font-vekt og størrelse, og hovedmedia-området er posisjonert innenfor griden, med justeringer for bredde og marger på mindre enheter. Bildetekster er absolutt posisjonert i bunnen med en bakgrunnsfarge og padding.
CSS-koden definerer stiler for en møbel-innpakningskomponent, inkludert dens layout, farger og responsive oppførsel på tvers av forskjellige skjermstørrelser. Den setter bakgrunnsfarger, tekstfarger og rammestiler ved hjelp av CSS-egendefinerte egenskaper for temaer som mørk modus. Innpakningen justerer marger, padding og posisjonering på større skjermer, og inkluderer skjulte elementer og interaktive knapper med hover-effekter for sosiale delinger. Overskrifter og metainformasjon er stilet med spesifikke fonter og farger, noe som sikrer konsistens i designet.
Denne CSS-koden definerer stiler for elementer innenfor en "furniture-wrapper"-klasse, med fokus på metainformasjon og standfirst-seksjoner. Den setter tekstfarger til lysegrå (#dcdcdc) og lenkefarger til en variabelbasert farge, med hover-effekter som endrer tekstdekorasjonsfarge. Lenker i standfirst er understreket med en spesifikk offset og farge, og hover-tilstander justerer understrekingsfargen tilsvarende.
For større skjermer (min-width: 61.25em) får det første avsnittet i standfirst en toppramme, som fjernes på enda større skjermer (min-width: 71.25em). Listeelementer i standfirst tar også i bruk den lysegrå tekstfargen.
Koden inkluderer responsive designelementer ved hjelp av media-spørringer for forskjellige skjermbredder (46.25em, 61.25em, 71.25em og 81.25em). Disse justerer bredden og posisjoneringen til pseudo-elementer (:before og :after) for å lage bakgrunnsområder med rammer, og beregner dimensjoner basert på visningsportens bredde og rullefeltjusteringer.
I tillegg stiliserer den SVG-elementer innenfor keylines og sosiale medier- eller kommentarelementer i metaseksjonen, og setter deres strek- og tekstfarger for å matche temaet ved hjelp av CSS-variabler.
Kommentarseksjonen har en rammefarge som matcher headerens rammefarge. I artikler har andre nivås overskrifter en lys font-vekt på 200, men hvis de inneholder et strong-element, bruker de en fet vekt på 700.
I tillegg er Guardian Headline Full font-familien definert med ulike stiler og vekter, inkludert lett, vanlig, medium og halvfet, hver i normale og kursiv versjoner. Disse fontene hentes fra spesifikke URL-er i WOFF2, WOFF og TrueType-formater.
Denne CSS-koden definerer flere font-typer for "Guardian Headline Full" font-familien, hver med forskjellige vekter og stiler (normal og kursiv), fra halvfet (600) til svart (900). Den inkluderer også en font-type for "Guardian Titlepiece" i fet stil. Fontene hentes fra spesifikke URL-er i WOFF2, WOFF og TrueType-formater.
I tillegg setter koden CSS-egendefinerte egenskaper (variabler) for mørk modus-bakgrunner og funksjonsfarger, og justerer dem basert på brukerens farge skjema-preferanse eller når nettstedet vises på iOS- eller Android-enheter. Den inkluderer også styling for den første bokstaven i avsnitt i artikkelcontainere på disse mobile plattformene, med spesifikke selektorer for å håndtere påloggingsporter.
For Android-enheter er den første bokstaven i det første avsnittet i standard- og kommentarartikler stilet med en sekundær søylefarge. På både iOS og Android skjules artikkelheaders, og møbel-innpakninger har spesifikk padding. Etiketter innenfor disse innpakningene bruker en fet, kapitalisert skrift i en overskriftstil med en ny søylefarge. Overskrifter er satt til 32px, fet, med bunn-padding og en mørk farge. Bilder i møbel-innpakninger 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 artikkelsammendrag-seksjonene topp- og bunn-padding på henholdsvis 4px og 24px, med en høyremargin-offset på -10px.
Teksten i disse sammendragene bruker Guardian Headline-fontfamilien eller lignende seriffonter.
Lenker innenfor sammendragene er stilet med en spesifikk farge, understreket med en 6px offset, og bruker en angitt farge for understrekingen som endres ved hovering for å matche lenkefargen.
I tillegg har metadataseksjoner i artikler på begge operativsystemer konsekvent styling.
For Android-enheter er margen for metaelementer i standard- og kommentarartikkelcontainere satt til null.
På iOS-enheter vil byline- og forfatterinformasjon i feature-, standard- og kommentarartikkelcontainere vises i den angitte søylefargen. Tilsvarende vil de samme elementene i feature-, standard- og kommentarartikkelcontainere på Android-enheter også bruke søylefargen.
For både iOS og Android har den diverse metainformasjonen i feature-, standard- og kommentarartikkelcontainere ingen padding, og eventuelle SVG-ikoner innenfor dem er stilet med søylefargen som deres strek.
Bildetekstknappen i showcase-elementer for feature-, standard- og kommentarartikler på både iOS og Android vises som en flex-container. Den er sentrert, måler 28 ganger 28 piksler, og posisjoneres 14 piksler fra høyre med 5 piksler padding.
Artikkelteksten i feature-, standard- og kommentarcontainere for iOS og Android har 12 piksler horisontal padding og ingen vertikal padding.
For iOS- og Android-enheter, i feature-, standard- og kommentarartikkelcontainere, vil ikke-miniatyr- og ikke-immersive bilder innenfor artikkelteksten ha ingen margin, en bredde beregnet som full visningsportbredde minus 24 piksler og rullefeltbredde, og en automatisk høyde. Deres bildetekster vil ha ingen padding.
Immersive bilder i disse containerne vil spenne over full visningsportbredde minus rullefeltbredden.
I artikkeltekstens prosa vil blokksitater med sitatmarkør vise en farget markør ved bruk av den nye søylefargen. Lenker vil være stilet med den primære søylefargen, understreket med en offset, og bruke header-rammefargen for understrekingen. Ved hovering endres understrekingsfargen til den nye søylefargen.
I mørk modus vil møbel-innpakningens bakgrunn være satt til en mørkegrå (#1a1a1a).
For iOS- og Android-enheter, bruk følgende stiler på feature-, standard- og kommentarartikkelcontainere:
- Sett innholdsetiketter til å bruke den nye søylefargen.
- Fjern bakgrunnsfargen fra overskrifter og sett deres tekstfarge til header-rammefargen, og sikre at dette har prioritet.
- Få standfirst-avsnitt og lenker til å ta i bruk header-rammefargen.
- Bruk den nye søylefargen for byline-forfattere og deres lenker.
- Bruk den nye søylefargen på streken til diverse meta-ikoner.
- Sett fargen på showcase-bildebildetekster til datolinjefargen.
- Stiler sitater i artikkeltekstens prosa tilsvarende.
For iOS- og Android-enheter er tekstfargen til sitatblokker i artikkeltekster satt til en spesifikk søylefarge.
I tillegg tvinges bakgrunnsfargen for ulike artikkeltekstseksjoner på begge operativsystemer til en mørk bakgrunn.
På iOS er den første bokstaven etter visse elementer i artikkeltekster stilet med en initialeffekt.
Dette ser ut til å være en CSS-selektor som retter seg mot den første bokstaven i avsnitt som følger spesifikke elementer i ulike artikkelcontainere på iOS- og Android-plattformer. Selektor
