Denna CSS-kod definierar typsnittsfamiljen "Guardian Headline Full" med olika vikter och stilar, och tillhandahåller flera filformat (WOFF2, WOFF, TTF) för varje variant för att säkerställa kompatibilitet mellan olika webbläsare. Typsnittsfilerna finns på Guardians assets-server.
Denna CSS-kod definierar flera typsnittsfamiljer för Guardian Headline- och Guardian Titlepiece-typsnitten, anger deras källor i olika format (WOFF2, WOFF, TTF) tillsammans med deras typsnittsvikter och stilar. Den innehåller även 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 på mindre skärmar för att passa skärmen. Koden säkerställer att element som stycken och listor behåller en maximal bredd för läsbarhet, och hanterar immersiva element genom att expandera dem till full bredd på mobila enheter och justera deras layout på större skärmar.
För den interaktiva huvudkolonnen läggs en vänsterkantlinje till före innehållet, placerad 11 pixlar till vänster. Element inom denna kolonn har ingen topp- eller bottenmarginal men inkluderar 12 pixlar utfyllnad både över och under. När ett stycke följer efter ett element tas utfyllnaden bort och marginaler på 12 pixlar appliceras istället. Inline-element är begränsade till en maximal bredd på 620 pixlar, och för skärmar bredare än 61.25em följer även inline-figurer denna breddgräns.
Färgvariabler definieras för olika element, såsom datumlinje, rubrikkant, bildtext och feature-färger, där den nya pelarfärgen standardmässigt använder primär- eller feature-färg. Element med atom-klassen har ingen utfyllnad.
Specifika regler gäller för det första stycket efter vissa element eller horisontella linjer i olika innehållsområden, där 14 pixlar topputfyllnad läggs till. Dessutom stylas den första bokstaven i dessa stycken med ett stort, fetstilt, versalt typsnitt i en specifik stil, färgsatt enligt initialfärgen eller den nya pelarfärgen, och flyter till vänster med en marginal.
Horisontella linjer följda av stycken i dessa områden har ingen topputfyllnad.
Utdrag inom specifika innehållsområden är begränsade till 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 rullningslistans bredd. På skärmar upp till 71.24em breda är dessa element begränsade till 978px bredd med bildtextutfyllnad på 10px. Mellan 30em och 71.24em ökar bildtextutfyllnaden till 20px. För skärmar mellan 46.25em och 61.24em är den maximala bredden 738px. Under 46.24em justeras immersiva element till vänsterkanten med anpassade marginaler och behåller 20px bildtextutfyllnad mellan 30em och 46.24em.
Furniture-wrapper använder en grid-layout på skärmar 61.25em och bredare, med definierade kolumner och rader för att organisera titel, rubrik, metainformation, standfirst och porträttsektioner. Rubriker har en toppkant, metasektioner har topputfyllnad, och standfirst-text inkluderar specifik styling för länkar och listobjekt, med understrykningar istället för kantlinjer under och hover-effekter som använder den nya pelarfärgen. Det första stycket i standfirst har en toppkant på större skärmar men tar bort den vid 71.25em och uppåt. Figurer inom wrappern har vänsterjusterade marginaler och en maximal bredd på 630px för inline-element. Vid 71.25em och bredare justeras gridets kolumnstruktur för en bättre layout.
Layouten använder ett grid med specifika kolumner och rader för olika skärmstorlekar. Till exempel har griddet på större skärmar tre lika kolumner för titel, rubrik och metasektioner, följt av fem för standfirst och åtta för porträtt, med proportionellt fördelade rader.
Styling inkluderar en toppkant för metasektionen och en vänsterkant för standfirst, båda använder en anpassad färgvariabel. Rubriker är fetstilta och justeras i storlek och bredd baserat på visningsporten, med större typsnitt på större skärmar.
Sociala och kommentarselement i metasektionen delar samma kantfärg, medan vissa komponenter är dolda. Standfirst-texten är stylad med normal vikt, en specifik typsnittsstorlek och utfyllnad, och positioneras med en vänstermarginal och utfyllnad.
Huvudmediaelement placeras i porträttgrid-området, med full bredd och justerade marginaler på mindre skärmar, och bildtexter är absolutpositionerade längst ner med en bakgrundsfärg och utfyllnad. På medelskärmar och uppåt döljs vissa linjer och marginaler återställs för vissa element.
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 CSS-variabler för konsistens. Wrappern justerar marginaler, utfyllnad och positionering på större skärmar, med specifika regler för element som bildtexter, knappar och rubriker. Sociala medie-knappar ändrar färg vid hovring, och vissa element döljs eller visas baserat på villkor. Designen säkerställer en sammanhängande look samtidigt som den anpassas till olika enheter.
Denna CSS-kod definierar stilar för en webbsidas furniture-wrapper-klass, med fokus på metainformation och standfirst-sektioner. Den sätter textfärger till ljusgrå (#dcdcdc) och länkfärger till en variabelbaserad nyans, med hover-effekter som behåller färgen och lägger till understrykningar. Länkar i standfirst har understrykningar med specifika avstånd och färger, samtidigt som kanter och bakgrundsbilder tas bort.
För större skärmar (min-width: 61.25em) får det första stycket i standfirst en toppkant, som tas bort på ännu större skärmar (71.25em). Koden skapar även dekorativa sidofält med pseudo-element (:before och :after) som justerar sin bredd och position baserat på visningsportens storlek, med mörka bakgrunder och kantade kanter. Sociala och kommentarselement inom metasektionen ärver liknande styling för ikoner och text.
Kommentarsektionen har en kantfärg som matchar rubrikens kantfärg.
I artiklar använder andra nivåns rubriker (h2) inom huvudtexten en lätt typsnittsvikt på 200. Om en h2 dock innehåller ett strong-element använder den en fet typsnittsvikt på 700.
Guardian Headline Full-typsnittsfamiljen inkluderar flera varianter:
- Light (vikt 300) i normal och kursiv stil
- Regular (vikt 400) i normal och kursiv stil
- Medium (vikt 500) i normal och kursiv stil
- Semibold (vikt 600) i normal och kursiv stil
Varje stil finns tillgänglig i WOFF2-, WOFF- och TrueType-format, hostade på Guardians assets-server.
Denna CSS-kod definierar flera @font-face för "Guardian Headline Full"-typsnittsfamiljen med olika vikter och stilar (normal och kursiv), från semibold (600) till black (900). Varje @font-face anger källfiler i WOFF2-, WOFF- och TrueType-format från Guardians asset-servrar.
Den definierar även typsnittet "Guardian Titlepiece" i fetstil med samma filformat.
Koden inkluderar CSS-egendefinierade egenskaper (variabler) för färgscheman, och justerar dem för mörkt läge på iOS- och Android-enheter. Dessutom innehåller den specifika stylingregler för den första bokstaven i stycken i artikelbehållare på iOS- och Android-plattformar, särskilt när de följer vissa element som atomer eller inloggningsgrindar.
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 rubrikstil med en ny pelarfärg. Rubriker sätts till 32px, fetstil, med bottenutfyllnad och en mörk färg. Bilder i furniture-wrapprar positioneras relativt, med justerade marginaler och full visningsportsbredd minus rullningslisten.
För Android-enheter sätts bilder inom artikelbehållare att ha en genomskinlig bakgrund, sträcka sig över hela visningsportens bredd minus rullningslistans bredd, och justera sin höjd automatiskt.
På både iOS och Android har standfirst-sektionen i artiklar topp- och bottenutfyllnad på 4px respektive 24px, med en höger marginal på -10px. Textens inuti använder Guardian Headline-typsnittsfamiljen eller liknande serif-typsnitt.
Länkar inom standfirst på båda operativsystemen stylas med en specifik färg, understrukna med ett avstånd, och använder en specifik färg för understrykningen som ändras vid hovring för att matcha länkfärgen.
Dessutom stylas metasektionen i artiklar konsekvent över iOS- och Android-plattformar.
För Android-enheter tas marginaler bort från metaelement i standard- och kommentarartikelbehållare.
För iOS-enheter sätts färgen på byline- och authorelement i feature-, standard- och kommentarartikelbehållare till den nya pelarfärgen. Dessutom tas utfyllnad bort från meta misc-element och strecket på SVG-ikoner inom dem sätts till den nya pelarfärgen. Ytterligare stylas bildtextknappen i showcase-element med specifik display, utfyllnad, justering och dimensioner.
För både iOS och Android sätts artikelkroppens utfyllnad till 0 på sidorna och 12px över och under i feature-, standard- och kommentarartikelbehållare.
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 på hela visningsporten minus 24 pixlar och rullningslistans bredd, och en automatisk höjd. Deras bildtexter kommer att ha ingen utfyllnad.
Immersiva bilder i dessa behållare sträcker sig över hela visningsportens bredd minus rullningslistans bredd.
Citerade blockcitat i artikelkroppen visar en färgad markör med den nya pelarfärgen.
Länkar i artikelkroppen stylas med den primära pelarfärgen, understrukna med ett avstånd, och använder rubrikkantens färg för understrykningen. Vid hovring ändras understrykningens färg till den nya pelarfärgen.
I mörkt läge sätts furniture-wrapper-bakgrunden till en mörkgrå (#1a1a1a).
För iOS- och Android-enheter gäller följande stilar för feature-, standard- och kommentarartikelbehållare:
- Innehållsetiketter använder den nya pelarfärgen.
- Rubriker har ingen bakgrund och använder rubrikkantens färg för text.
- Standfirst-stycken och länkar använder rubrikkantens färg.
- Författarbylines och deras länkar använder den nya pelarfärgen.
- Diverse metadata-ikoner streckas med den nya pelarfärgen.
- Showcase-bildtexter använder datumlinjefärgen.
- Citerade blockcitat i artikelkroppen stylas med den nya pelarfärgen för text och en matchande kant.
För iOS- och Android-enheter kommer den citerade texten i artikelkroppar att använda den nya pelarfärgen.
Dessutom sätts bakgrundsfärgen för olika artikelkroppssektioner på både iOS och Android till en mörk bakgrund.
För den första bokstaven efter vissa element i artikelkroppar på iOS appliceras en specifik styling, men detaljerna är repetitiva och följer samma mönster som ovan.
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 sektioner som artikelkroppar, feature-kroppar, kommentarsektioner och interaktiva innehållsområden, särskilt när de kommer efter element med klasser som 'element-atom' eller föregår inloggningsgrindar.
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 även utfyllnad och marginaler för standfirst-element i kommentarartiklar, storlekar för h2-rubriker och utfyllnad för bildtextknappar olika på iOS och Android.
För mörkt lägespreferenser ändrar den färger för följetext, ikoner, standfirst-text, länkar och bylines till ljusare nyanser och specifika mörka lägespelarfärger. Den sätter en mörk bakgrundsfärg och gör artikelhuvuden osynliga på båda plattformarna. Dessutom applicerar den dessa stilar på furniture-wrapprar i feature-, standard- och kommentarartikelbehållare.
För iOS- och Android-enheter har artikelbehållarens furniture-wrapper ingen marginal. Etiketter i feature-, standard- och kommentarartiklar använder en specifik färgvariabel. Rubriker i dessa artiklar sätts till en ljusgrå färg. Länkar i artikelhuvuden och titelsektioner använder också den angivna färgvariabeln. Metasektioner visar en upprepad linjär gradient som bakgrundsbild. Bylines inom metasektioner är färgsatta 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ärgsätts med den nya pelarfärgen eller en mörkt läges-feature-färg.
- SVG-ikoner i meta miscellaneous-sektionen har sitt streck satt till samma färg.
- Varningsetiketter visas i en ljusgrå färg (#dcdcdc) med important-prioritet.
- Span med data-icon-attribut använder också den nya pelar- eller mörkt läges-feature-färgen.
För iOS- och Android-enheter sätts färgen på ikoner inom metasektionen i feature-, standard- och kommentarartikelbehållare till den nya pelarfärgen eller en mörkt läges-feature-färg.
På större skärmar (71.25em och uppåt) visar metasektionen i dessa behållare en toppkant med den nya pelarfärgen eller rubrikkantens
