Denna CSS-kod definierar typsnittsfamiljen "Guardian Headline Full" med flera stilar och vikter. Den inkluderar light (300), regular (400), medium (500) och semibold (600) varianter, var och en i bÄde normal och kursiv stil. För varje stil tillhandahÄller den typsnittsfiler i WOFF2, WOFF och TrueType-format frÄn Guardians asset-server.
Denna CSS-kod definierar flera typsnittsfamiljer för typsnitten Guardian Headline och Guardian Titlepiece, och specificerar deras kÀllor i olika format (WOFF2, WOFF och TrueType) tillsammans med deras typsnittsvikter och stilar. Den inkluderar ocksÄ responsiva designregler för huvudinnehÄllskolonnen i interaktiva layouter, som justerar marginaler, bredder och positionering baserat pÄ visningsportens storlek. Till exempel lÀggs en vÀnstermarginal och en kantlinje till pÄ bredare skÀrmar, medan elementens bredder och positioner justeras för att passa skÀrmen pÄ mindre skÀrmar. Koden sÀkerstÀller att element som stycken och listor behÄller en maximal bredd för lÀsbarhet, och den hanterar immersiva element genom att expandera dem till full bredd pÄ mobila enheter och justera deras layout pÄ större skÀrmar.
För interaktiva innehÄllskolumner lÀggs en vÀnsterkantlinje till i en ljusgrÄ fÀrg och placeras nÄgot till vÀnster. Element inom dessa kolumner har inga topp- eller bottenmarginaler men inkluderar 12 px utfyllnad. NÀr ett stycke följer efter ett element tas utfyllnaden bort och marginaler sÀtts till 12 px. Inline-element Àr begrÀnsade till en maximal bredd pÄ 620 px, och för bredare skÀrmar följer figurer med en specifik roll ocksÄ denna breddgrÀns.
FÀrgvariabler definieras för olika text- och bakgrundselement, inklusive datumlinje, huvudkantlinjer, bildtexter och feature-fÀrger, med en standard feature-fÀrg instÀlld pÄ röd.
Element med stilen atoms har ingen utfyllnad. Specifika regler gÀller för det första stycket efter vissa element eller horisontella linjer i olika innehÄllsomrÄden, som lÀgger till 14 px topputfyllnad. Dessutom stylas den första bokstaven i dessa stycken med ett stort, fetstilt, versalt typsnitt i en rubrikstil, fÀrgat enligt den definierade feature-fÀrgen, och flyter till vÀnster med en marginal.
Horisontella linjer följda av stycken i olika innehÄllssektioner har ingen topputfyllnad. Utdrag inom specifika innehÄllsomrÄden har en maximal bredd pÄ 620 pixlar.
För showcase-element i olika artikelbehÄllare positioneras bildtexter statiskt med full bredd och en maximal bredd pÄ 620 pixlar.
Immersiva element strÀcker sig över hela visningsportens bredd minus scrollbaren. PÄ skÀrmar upp till 71.24 em breda Àr dessa element begrÀnsade till 978 pixlar, med bildtextutfyllnad pÄ 10 pixlar. Mellan 30 em och 71.24 em ökar bildtextutfyllnaden till 20 pixlar. För skÀrmar mellan 46.25 em och 61.24 em Àr den maximala bredden 738 pixlar. Under 46.24 em justeras immersiva element till vÀnster med justerade marginaler och bildtextutfyllnad pÄ 20 pixlar mellan 30 em och 46.24 em.
Furniture-wrappern anvÀnder en grid-layout pÄ skÀrmar 61.25 em och bredare, med definierade kolumner och rader för att organisera innehÄll. Rubriker har en toppkantlinje, metasektioner har topputfyllnad och standfirst-element inkluderar stylade lÀnkar med understrykningar som byter fÀrg vid hovring. Inledningsvis har det första stycket i standfirst en toppkantlinje och ingen bottenutfyllnad, vilket tas bort pÄ skÀrmar 71.25 em och större.
Figurer inom furniture-wrappern har vÀnstermarginaler och en maximal bredd pÄ 630 pixlar för inline-element. PÄ större skÀrmar (71.25 em och uppÄt) omkonfigureras grid-kolumnerna för olika innehÄllsplacering.
Layouten anvÀnder ett grid med specifika kolumner och rader för olika skÀrmstorlekar. För mindre skÀrmar definierar gridet omrÄden för titel, rubrik, standfirst, metainformation och portrÀtt, med rader instÀllda pÄ fasta och automatiska höjder. En tunn linje visas ovanför metasektionen, och standfirst har en vertikal linje pÄ vÀnster sida.
PÄ större skÀrmar justeras gridet för att anvÀnda fraktionella enheter för rader och expanderar kolumnspann. Rubrikens typsnittsstorlek ökar och dess maximala bredd Àndras, medan vissa element som linjer döljs. Standfirst-texten stylas med en specifik typsnittsvikt och storlek, och huvudmediaomrÄdet positioneras inom gridet, med justeringar för bredd och marginaler pÄ mindre enheter. Bildtexter Àr absolut positionerade lÀngst ner med en bakgrundsfÀrg och utfyllnad.
CSS-koden definierar stilar för en furniture-wrapper-komponent, inklusive dess layout, fÀrger och responsiva beteende över olika skÀrmstorlekar. Den sÀtter bakgrundsfÀrger, textfÀrger och kantstilar med hjÀlp av CSS-egendefinierade egenskaper för teman som mörkt lÀge. Wrappern justerar marginaler, utfyllnad och positionering pÄ större skÀrmar, och inkluderar dolda element och interaktiva knappar med hovringseffekter för social delning. Rubriker och metainformation stylas med specifika typsnitt och fÀrger, vilket sÀkerstÀller konsistens i designen.
Denna CSS-kod definierar stilar för element inom en "furniture-wrapper"-klass, med fokus pÄ metainformation och standfirst-sektioner. Den sÀtter textfÀrg till ljusgrÄ (#dcdcdc) och lÀnkfÀrg till en variabelbaserad nyans, med hovringseffekter som Àndrar textdekorationsfÀrg. LÀnkar i standfirst understryks med ett specifikt avstÄnd och fÀrg, och hovringstillstÄnd justerar understrykningsfÀrgen dÀrefter.
För större skÀrmar (min-width: 61.25em) fÄr det första stycket i standfirst en toppkantlinje, som tas bort pÄ Ànnu större skÀrmar (min-width: 71.25em). Listobjekt i standfirst antar ocksÄ den ljusgrÄ textfÀrgen.
Koden inkluderar responsiva designelement med hjÀlp av media queries för olika skÀrmbredder (46.25em, 61.25em, 71.25em och 81.25em). Dessa justerar bredden och positioneringen av pseudoelement (:before och :after) för att skapa bakgrundsomrÄden med kanter, och berÀknar dimensioner baserat pÄ visningsportens bredd och scrollbarjusteringar.
Dessutom stylas SVG-element inom keylines och sociala medier eller kommentarselement i metasektionen, med deras streck- och textfÀrger instÀllda för att matcha temat med CSS-variabler.
Kommentarsektionen har en kantlinjefÀrg som matchar huvudets kantlinjefÀrg. I artiklar har andra nivÄns rubriker en ljus typsnittsvikt pÄ 200, men om de innehÄller ett strong-element anvÀnder de en fet vikt pÄ 700.
Dessutom definieras typsnittsfamiljen Guardian Headline Full med olika stilar och vikter, inklusive light, regular, medium och semibold, var och en i normala och kursiva versioner. Dessa typsnitt hÀmtas frÄn specifika URL:er i WOFF2, WOFF och TrueType-format.
Denna CSS-kod definierar flera typsnittsytor för typsnittsfamiljen "Guardian Headline Full", var och en med olika vikter och stilar (normal och kursiv), som strÀcker sig frÄn semibold (600) till black (900). Den inkluderar ocksÄ en typsnittsyta för "Guardian Titlepiece" i fetstil. Typsnitten hÀmtas frÄn specifika URL:er i WOFF2, WOFF och TrueType-format.
Dessutom sÀtter koden CSS-egendefinierade egenskaper (variabler) för mörka lÀgesbakgrunder och feature-fÀrger, och justerar dem baserat pÄ anvÀndarens fÀrgschema preferens eller nÀr webbplatsen visas pÄ iOS- eller Android-enheter. Den inkluderar ocksÄ styling för den första bokstaven i stycken i artikelbehÄllare pÄ dessa mobila plattformar, med specifika selektorer för att hantera inloggningsportar.
För Android-enheter stylas den första bokstaven i det första stycket i standard- och kommentarartiklar med en sekundÀr pelarfÀrg. PÄ bÄde iOS och Android döljs artikelhuvuden, och furniture-wrapprar har specifik utfyllnad. Etiketter inom dessa wrapprar anvÀnder ett fetstilt, versalt typsnitt i en rubrikstil med en ny pelarfÀrg. Rubriker Àr instÀllda pÄ 32 px, fetstil, med bottenutfyllnad och en mörk fÀrg. Bilder i furniture-wrapprar Àr relativt positionerade, strÀcker sig över visningsportens bredd minus scrollbaren och justerar sin höjd automatiskt.
För Android-enheter Àr bilder inom artikelbehÄllare instÀllda pÄ att ha en genomskinlig bakgrund, strÀcka sig över hela visningsportens bredd minus scrollbaren och justera sin höjd automatiskt.
PÄ bÄde iOS och Android har artikelöversiktssektioner topp- och bottenutfyllnad pÄ 4 px respektive 24 px, med en höger marginaloffset pÄ -10 px.
Texten i dessa sammanfattningar anvÀnder Guardian Headline-typsnittsfamiljen eller liknande serif-typsnitt.
LÀnkar inom sammanfattningarna stylas med en specifik fÀrg, understryks med ett 6 px avstÄnd och anvÀnder en angiven fÀrg för understrykningen som Àndras vid hovring för att matcha lÀnkfÀrgen.
Dessutom har metadata-sektioner i artiklar pÄ bÄda operativsystemen konsekvent styling.
För Android-enheter Àr marginalen för metaelement i standard- och kommentarartikelbehÄllare instÀlld pÄ noll.
PÄ iOS-enheter kommer byline- och författarinformation i feature-, standard- och kommentarartikelbehÄllare att visas i den angivna pelarfÀrgen. PÄ samma sÀtt kommer samma element i feature-, standard- och kommentarartikelbehÄllare pÄ Android-enheter ocksÄ att anvÀnda pelarfÀrgen.
För bÄde iOS och Android har den övriga metainformationen i feature-, standard- och kommentarartikelbehÄllare ingen utfyllnad, och eventuella SVG-ikoner inom dem stylas med pelarfÀrgen som deras streck.
Bildtextknappen i showcase-element för feature-, standard- och kommentarartiklar pÄ bÄde iOS och Android visas som en flex-container. Den Àr centrerad, mÀter 28 gÄnger 28 pixlar och Àr positionerad 14 pixlar frÄn höger med 5 pixlar utfyllnad.
Artikelkroppen i feature-, standard- och kommentarbehÄllare för iOS och Android har 12 pixlar horisontell utfyllnad och ingen vertikal utfyllnad.
För iOS- och Android-enheter, i feature-, standard- och kommentarartikelbehÄllare, kommer icke-miniatyr- och icke-immersiva bilder inom artikelkroppen att ha ingen marginal, en bredd berÀknad som hela visningsportens bredd minus 24 pixlar och scrollbar-bredden, och en automatisk höjd. Deras bildtexter kommer att ha ingen utfyllnad.
Immersiva bilder i dessa behÄllare kommer att strÀcka sig över hela visningsportens bredd minus scrollbar-bredden.
I artikelkroppens prosa kommer citerade blockcitat att visa en fÀrgad markör med den nya pelarfÀrgen. LÀnkar kommer att stylas med den primÀra pelarfÀrgen, understrykas med ett avstÄnd och anvÀnda huvudets kantlinjefÀrg för understrykningen. Vid hovring Àndras understrykningsfÀrgen till den nya pelarfÀrgen.
I mörkt lÀge kommer furniture-wrapperns bakgrund att vara instÀlld pÄ mörkgrÄ (#1a1a1a).
För iOS- och Android-enheter, applicera följande stilar pÄ feature-, standard- och kommentarartikelbehÄllare:
- SÀtt innehÄllsetiketter att anvÀnda den nya pelarfÀrgen.
- Ta bort bakgrundsfÀrgen frÄn rubriker och sÀtt deras textfÀrg till huvudets kantlinjefÀrg, och sÀkerstÀll att detta har prioritet.
- LÄt standfirst-stycken och lÀnkar anta huvudets kantlinjefÀrg.
- AnvÀnd den nya pelarfÀrgen för byline-författare och deras lÀnkar.
- Applicera den nya pelarfÀrgen pÄ strecket för övriga metaikoner.
- SÀtt fÀrgen pÄ showcase-bildbildtexter till datumlinjefÀrgen.
- Styla citerade blockcitat i artikelkroppens prosa dÀrefter.
För iOS- och Android-enheter Àr textfÀrgen för citerade block i artikelkroppar instÀlld pÄ en specifik pelarfÀrg.
Dessutom tvingas bakgrundsfÀrgen för olika artikelkroppssektioner pÄ bÄda operativsystemen till en mörk bakgrund.
PÄ iOS stylas den första bokstaven efter vissa element i artikelkroppar med en initialeffekt.
Detta verkar vara en CSS-selektor som riktar in sig pÄ den första bokstaven i stycken som följer specifika element i olika artikelbehÄllare pÄ iOS- och Android-plattformar. Selektorn appliceras pÄ olika artikaltyper (standard, feature, comment) och tar hÀnsyn till inloggningsportar som kan visas mellan element.
Denna CSS-kod definierar stilar för specifika element pÄ Android- och iOS-enheter. Den sÀtter fÀrgen pÄ den första bokstaven i vissa stycken till vit eller en anpassad variabelfÀrg. Den justerar ocksÄ utfyllnad och marginaler för standfirst-element i kommentarartiklar, sÀtter typsnittsstorlekar för h2-rubriker och Àndrar utfyllnad för bildtextknappar.
För mörkt lÀge Àndras text- och ikonfÀrger till ljusare nyanser och en mörk bakgrundsfÀrg definieras. Dessutom döljs artikelhuvuden genom att göra dem helt genomskinliga och stilar appliceras pÄ furniture-wrapprar, Àven om den sista regeln verkar ofullstÀndig.
För iOS- och Android-enheter har artikelbehÄllarens furniture-wrapper ingen marginal. Etiketter i feature-, standard- och kommentarartiklar anvÀnder den nya pelarfÀrgen eller en mörkt lÀges-feature-fÀrg. Rubriker i dessa artiklar Àr instÀllda pÄ en ljusgrÄ fÀrg. LÀnkar i artikelhuvuden eller titelsektioner antar ocksÄ den nya pelar- eller mörkt lÀges-feature-fÀrgen.
Före metasektionen i dessa artiklar appliceras en upprepad linjÀr gradient som bakgrund, med hjÀlp av huvudets kantlinjefÀrg för att skapa en randig effekt. Byline-texten inom metaomrÄdet visas i ljusgrÄ.
För iOS- och Android-enheter gÀller följande stilar för lÀnkar inom metasektionen i feature-, standard- och kommentarartikelbehÄllare:
- LÀnkar fÀrgas med den nya pelarfÀrgen eller en mörkt lÀges-feature-fÀrg.
- SVG-ikoner i den övriga metasektionen har sitt streck instÀllt pÄ samma fÀrg.
- Varningsetiketter visas i en ljusgrÄ fÀrg (#dcdcdc) med viktig prioritet.
- Span med data-icon-attribut antar ocksÄ den nya pelar- eller mör
