Denne CSS-kode definerer skriftfamilien "Guardian Headline Full" med forskellige vægte og stilarter og leverer flere filformater (WOFF2, WOFF, TTF) for hver variant for at sikre kompatibilitet på tværs af forskellige browsere. Skriftfilerne hostes på Guardians assets-server.
Denne CSS-kode definerer flere skriftfamilier for Guardian Headline- og Guardian Titlepiece-skrifterne og angiver deres kilder i forskellige formater (WOFF2, WOFF, TTF) sammen med deres skriftvægte og -stile. Den indeholder 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 venstremargin og en ramme på bredere skærme, mens bredder og positioner på elementer justeres på mindre skærme for at passe til skærmen. Koden sikrer, at elementer som afsnit og lister bevarer 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 den interaktive hovedkolonne tilføjes en venstre ramme før indholdet, placeret 11 pixels til venstre. Elementer i denne kolonne har ingen top- eller bundmargin, men indeholder 12 pixels polstring i top og bund. Når et afsnit følger efter et element, fjernes polstring, og margener på 12 pixels anvendes i stedet. Inline-elementer er begrænset til en maksimal bredde på 620 pixels, og for skærme bredere end 61,25 em overholder inline-figurer også denne breddebegrænsning.
Farvevariabler er defineret for forskellige elementer, såsom datolinje, header-ramme, billedtekst og featurefarver, hvor den nye pillar-farve standardiseres til primær- eller featurefarven. Elementer med atom-klassen har ingen polstring.
Specifikke regler gælder for det første afsnit efter visse elementer eller vandrette streger i forskellige indholdsområder, der tilføjer 14 pixels toppolstring. Derudover styles det første bogstav i disse afsnit med en stor, fed, versal skrift i en bestemt skrifttype, farvet efter drop cap- eller ny pillar-farve, og flødes til venstre med en margin.
Vandrette streger efterfulgt af afsnit i disse områder har ingen toppolstring. Pullquotes i 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 og en maksimal bredde på 620 pixels.
Immersive elementer spænder over hele viewport-bredden minus rullebjælkens bredde. På skærme op til 71,24 em brede er disse elementer begrænset til 978 px bredde med billedtekstpolstring på 10 px. Mellem 30 em og 71,24 em øges billedtekstpolstring til 20 px. For skærme mellem 46,25 em og 61,24 em er den maksimale bredde 738 px. Under 46,24 em justeres immersive elementer til venstre kant med justerede margener og bevarer 20 px billedtekstpolstring mellem 30 em og 46,24 em.
Furniture-wrapperen bruger en grid-layout på skærme på 61,25 em og derover, med definerede kolonner og rækker til organisering af titel, overskrift, metainformation, standfirst og portrætsektioner. Overskrifter har en topramme, metasektioner har toppolstring, og standfirst-tekst inkluderer specifik styling for links og listeelementer med understregning i stedet for bundrammer og hover-effekter ved hjælp af den nye pillar-farve. Det første afsnit i standfirst har en topramme på større skærme, men fjerner den ved 71,25 em og derover. Figurer i wrapperen har venstrestillede margener og en maksimal bredde på 630 px for inline-elementer. Ved 71,25 em og derover justerer griddet sin kolonnestruktur for bedre layout.
Layoutet bruger et grid med specifikke kolonner og rækker til forskellige skærmstørrelser. For eksempel har griddet på større skærme tre lige store kolonner for titel-, overskrifts- og metasektioner, efterfulgt af fem for standfirst og otte for portrættet, med rækker tildelt proportionalt.
Styling inkluderer en topramme for metasektionen og en venstre ramme for standfirst, begge ved hjælp af en brugerdefineret farvevariabel. Overskrifter er fedt og justeres i størrelse og bredde baseret på viewport, med større skrifttyper på større skærme.
Sociale og kommentarelementer i metasektionen deler samme rammefarve, mens visse komponenter er skjulte. Standfirst-teksten er styled med normal vægt, en specifik skriftstørrelse og polstring og er positioneret med en venstremargin og polstring.
Hovedmedieelementer placeres i portræt-grid-området med fuld bredde og justerede margener på mindre skærme, og billedtekster er absolut positioneret i bunden med en baggrundsfarve og polstring. På mellemstore skærme og derover er nogle linjer skjulte, og margener nulstilles for visse elementer.
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 rammestile ved hjælp af CSS-variabler for konsistens. Wrapperen justerer margener, polstring og positionering på større skærme med specifikke regler for elementer som billedtekster, knapper og overskrifter. Sociale medie-knapper skifter farve ved hover, og visse elementer skjules eller vises baseret på betingelser. Designet sikrer et sammenhængende udseende samtidig med at det tilpasser sig forskellige enheder.
Denne CSS-kode definerer stile for en websides furniture-wrapper-klasse med fokus på metainformation og standfirst-sektioner. Den indstiller tekstfarver til lysegrå (#dcdcdc) og linkfarver til en variabelbaseret farve, med hover-effekter der bevarer farven og tilføjer understregninger. Links i standfirst har understregninger med specifikke offsets og farver, mens rammer og baggrundsbilleder fjernes.
For større skærme (min-width: 61,25 em) får det første afsnit i standfirst en topramme, som fjernes på endnu større skærme (71,25 em). Koden opretter også dekorative sidebjælker ved hjælp af pseudo-elementer (:before og :after), der justerer deres bredde og position baseret på viewport-størrelse, med mørke baggrunde og rammede kanter. Sociale og kommentarelementer i metasektionen arver lignende styling for ikoner og tekst.
Kommentarsektionen har en rammefarve, der matcher headerens rammefarve.
I artikler bruger anden-niveaus overskrifter (h2) i hovedteksten en lys skriftvægt på 200. Hvis en h2 indeholder et strong-element, antager den imidlertid en fed skriftvægt på 700.
Guardian Headline Full-skriftfamilien inkluderer flere variationer:
- Light (vægt 300) i normal og kursiv stil
- Regular (vægt 400) i normal og kursiv stil
- Medium (vægt 500) i normal og kursiv stil
- Semibold (vægt 600) i normal og kursiv stil
Hver stil er tilgængelig i WOFF2-, WOFF- og TrueType-formater, hostet på Guardians assets-server.
Denne CSS-kode definerer flere @font-face-regler for "Guardian Headline Full"-skriftfamilien med forskellige vægte og stile (normal og kursiv), der spænder fra semibold (600) til black (900). Hver @font-face angiver kildefiler i WOFF2-, WOFF- og TrueType-formater fra Guardians asset-servere.
Den definerer også "Guardian Titlepiece"-skriften i fed vægt med de samme filformater.
Koden inkluderer CSS-egenskaber (variabler) for farveskemaer og justerer dem for mørk tilstand på iOS- og Android-enheder. Derudover indeholder den specifikke stylingregler for det første bogstav i afsnit i artikelcontainere på iOS- og Android-platforme, især når de følger visse elementer som atomer eller 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 wrappers har specifik polstring. Labels i disse wrappers bruger en fed, kapitaliseret skrift i en overskriftstil med en ny pillar-farve. Overskrifter er sat til 32 px, fed, med bundpolstring og en mørk farve. Billeder i furniture wrappers er positioneret relativt med justerede margener og fuld viewport-bredde minus rullebjælken.
For Android-enheder indstilles billeder i artikelcontainere til at have en gennemsigtig baggrund, spænde over hele viewport-bredden 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 4 px og 24 px med en højremargin på -10 px. Teksten indeni bruger Guardian Headline-skriftfamilien eller lignende serif-skrifter.
Links i standfirst på begge operativsystemer styles med en specifik farve, understreget med en offset og bruger en bestemt farve til understregningen, der skifter ved hover for at matche linkfarven.
Derudover styles metasektionen i artikler ensartet på tværs af iOS- og Android-platforme.
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. Derudover fjernes polstring fra meta misc-elementer, og stregen på SVG-ikoner i dem indstilles til den nye pillar-farve. Derudover styles caption-knappen i showcase-elementer med specifik visning, polstring, justering og dimensioner.
For både iOS og Android indstilles artikelkroppens polstring til 0 på siderne og 12 px 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å hele viewporten minus 24 pixels og rullebjælkens bredde og en automatisk højde. Deres billedtekster har ingen polstring.
Immersive billeder i disse containere spænder over hele viewport-bredden minus rullebjælkens bredde.
Citerede blockquotes i artikelkroppen viser en farvet markør ved hjælp af den nye pillar-farve.
Links i artikelkroppen styles med den primære pillar-farve, understreget med en offset og bruger header-rammefarven til understregningen. Ved hover ændres understregningsfarven til den nye pillar-farve.
I mørk tilstand indstilles furniture wrapper-baggrunden til en 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 header-rammefarven til tekst.
- Standfirst-afsnit og links bruger header-rammefarven.
- 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 tekst og en matchende ramme.
For iOS- og Android-enheder vil den citerede tekst i artikelkroppe bruge den nye pillar-farve.
Derudover indstilles baggrundsfarven for forskellige artikelkropssektioner på både iOS og Android til en mørk baggrund.
For det første bogstav efter visse elementer i artikelkroppe på iOS anvendes en specifik styling, men detaljerne er gentagende og følger samme mønster som ovenfor.
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 sektioner som artikelkroppe, feature-kroppe, kommentarsektioner og interaktive indholdsområder, især når de kommer efter elementer med klasser som 'element-atom' eller forudgår sign-in-gates.
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 hvid eller en brugerdefineret variabel farve. Den justerer også polstring og margener for standfirst-elementer i kommentarartikler, størrelser for h2-overskrifter og polstring for caption-knapper forskelligt på iOS og Android.
For mørk tilstandspræferencer ændrer den farver for følgetekst, ikoner, standfirst-tekst, links og bylines til lysere nuancer og specifikke mørk tilstand pillar-farver. Den indstiller en mørk baggrundsfarve og gør artikelheaders usynlige på begge platforme. Derudover anvender den disse stile til furniture wrappers i feature-, standard- og kommentarartikelcontainere.
For iOS- og Android-enheder har artikelcontainerens furniture wrapper ingen margin. Labels i feature-, standard- og kommentarartikler bruger en specifik farvevariabel. Overskrifter i disse artikler er sat til en lysegrå farve. Links i artikelheaders og titelsektioner antager også den angivne farvevariabel. Metasektioner viser en gentaget lineær gradient som baggrundsbillede. Byline i metasektioner er farvet lysegrå.
For iOS- og Android-enheder gælder følgende stile for links i metasektionen af feature-, standard- og kommentarartikelcontainere:
- Links er farvet ved hjælp af den nye pillar-farve eller en mørk tilstand feature-farve.
- SVG-ikoner i meta miscellaneous-sektionen har deres streg indstillet til samme farve.
- Alert-labels vises i en lysegrå farve (#dcdcdc) med important-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,25 em og derover) viser metasektionen i disse containere en topramme ved hjælp af den nye pillar-farve eller header-rammefarven. Derudover nulstilles margin for meta miscellaneous-elementer, og de indrykkes 20 pixels fra venstre.
Afsnit og uordnede lister i artikelkroppen af disse containere er begrænset til en maksimal bredde på 620 pixels.
Blockquotes med "quoted"-klassen i artikelkroppens prose-sektion modtager også stylingjusteringer for både iOS- og Android-platforme.
Judi Love var 17 år, da hun blev bortført, selvom hun tilføjer et par år, når hun fortæ
