Denna CSS-kod definierar typsnittsfamiljen "Guardian Headline Full" med olika vikter och stilar, inklusive light, regular, medium och semibold, var och en i normala och kursiva versioner. Den specificerar typsnittsfilerna i WOFF2-, WOFF- och TrueType-format som finns på Guardians servrar.
Denna CSS-kod definierar flera typsnittsfamiljer för Guardian Headline- och Guardian Titlepiece-typsnitten, och specificerar deras källor i olika format (WOFF2, WOFF, TTF) 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å vyportens storlek. Till exempel läggs en vänstermarginal och en kantlinje till på bredare skärmar, medan element expanderas till full bredd och centreras på mindre skärmar. Stilarna säkerställer korrekt formatering över enheter, med maximala bredder satta för olika innehållstyper som atomer, showcases och immersiva element.
För interaktiva innehållskolumner läggs en vänsterkantlinje till före elementet, placerad 11 pixlar till vänster. Inom dessa kolumner har atomer (element) inga topp- eller bottenmarginaler men inkluderar 12 pixlar utfyllnad både på toppen och botten. När ett stycke följer efter en atom 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 bredare skärmar (över 61.25em) följer inline-figurer med en specifik roll också denna breddgräns.
Färgvariabler definieras för olika element, såsom datumrader, rubriker, bildtexter och features, med en standard feature-färg satt till röd. Atomer i huvudkolumnen och på andra ställen har ingen utfyllnad.
Specifika regler gäller för det första stycket efter vissa element eller horisontella linjer i olika innehållsområden (artikelkropp, interaktivt innehåll, kommentarer, features), som lägger till 14 pixlar topputfyllnad. Dessutom är den första bokstaven i dessa stycken formaterad med ett stort, fetstilt, versalt typsnitt i en specifik stil, färgad enligt en variabel, och flyter till vänster med en marginal.
Horisontella linjer följda av stycken i dessa sektioner har ingen topputfyllnad. Pullquotes inom specifika innehållsområden är begränsade till en maximal bredd på 620 pixlar.
För showcase-element i olika artikelbehållare är bildtexter positionerade statiskt med full bredd upp till 620 pixlar.
Immersiva element sträcker sig över hela vyportens bredd minus scrollbar-bredd. På skärmar upp till 71.24em breda är dessa element begränsade till 978px bredd med bildtextsutfyllnad på 10px. Mellan 30em och 71.24em ökar bildtextsutfyllnaden till 20px. För skärmar mellan 46.25em och 61.24em blir den maximala bredden 738px. Under 46.24em anpassar sig immersiva element till vänsterkanten med justerade marginaler och behåller 20px bildtextsutfyllnad mellan 30em och 46.24em.
Furniture wrapper använder en responsiv grid-layout på skärmar 61.25em och bredare, som organiserar titel, rubrik, metainformation, standfirst och porträttsektioner. Rubriker har en toppkantlinje, metasektioner har topputfyllnad, och standfirst-text inkluderar specifik styling för listor och länkar med anpassade understrykningar som byter färg vid hovring. Det första stycket i standfirst har en toppkantlinje på större skärmar men tar bort den över 71.25em.
Figurer inom furniture wrapper har vänsterjusterade marginaler och inline-element är begränsade till 630px bredd. Över 71.25em anpassas grid-layouten för att rymma fler kolumner för porträttinnehåll.
Layouten använder ett grid med specifika kolumner och rader för olika skärmstorlekar. För mindre skärmar har griddet tre kolumner och rader som anpassas automatiskt, med en fast höjd på 80px för titel- och porträttområden. En tunn linje visas ovanför metasektionen, och standfirst-sektionen har en vertikal linje på vänster sida.
På större skärmar expanderar griddet till fler kolumner och rader med fraktionella enheter för flexibilitet. Metasektionens topplinje breddas, och standfirsts vertikala linje förskjuts något. Rubriker har en maximal bredd och typsnittsstorlek som ökar på större skärmar, medan vissa element som linjer döljs eller justeras i marginaler för olika brytpunkter.
Sociala och kommentarselement i metasektionen delar samma kantlinjefärg, och vissa komponenter visas inte. Standfirst-texten har specifik styling med reducerad vänstermarginal och utfyllnad, och typsnittsegenskaper. Huvudmediaelement är positionerade relativt, med full bredd och justerade marginaler på olika enheter, och bildtexter är absolut positionerade längst ner med anpassad bakgrunds- och textfärg.
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 kantlinjestilar med hjälp av CSS-anpassade egenskaper för teman som mörkt läge. Wrappern justerar marginaler, utfyllnad och positionering på större skärmar, och inkluderar regler för att dölja eller visa element som bildtexter och knappar. Rubriker och metainformation är formaterade med specifika typsnitt och färger, och sociala medie-knappar har hovringseffekter som ändrar deras utseende. Media queries säkerställer att designen anpassas till olika enheter.
Denna CSS-kod definierar stilar för en webbsidas furniture-wrapper-klass, med fokus på element som 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-områden har understrykningar med specifika avstånd och inga kanter, medan stycken och listobjekt också använder den ljusgrå färgen.
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 också dekorativa sidofält med hjälp av pseudoelement (:before och :after) som anpassar sig i bredd baserat på vyportstorlek, med mörka bakgrunder och kantade kanter. Dessutom formaterar den SVG-element med streckfärger och sociala medie- eller kommentarsikoner inom metasektioner.
Kommentarsektionen har en kantlinjefärg som matchar rubrikens kantlinjefärg.
I artiklar har andra nivåns rubriker (h2) inom huvudkroppen en ljus typsnittsvikt på 200. Men om en h2 innehåller ett strong-element använder den en fet typsnittsvikt på 700.
Guardian Headline Full-typsnittsfamiljen inkluderar olika stilar och vikter, var och en med specifika filkällor i WOFF2-, WOFF- och TrueType-format:
- Light (vikt 300, normal stil)
- Light Italic (vikt 300, kursiv stil)
- Regular (vikt 400, normal stil)
- Regular Italic (vikt 400, kursiv stil)
- Medium (vikt 500, normal stil)
- Medium Italic (vikt 500, kursiv stil)
- Semibold (vikt 600, normal stil)
- Semibold Italic (vikt 600, kursiv stil)
Denna CSS-kod definierar flera typsnittsytor för "Guardian Headline Full"-typsnittsfamiljen med olika vikter och stilar (normal och kursiv), från semibold (600) till black (900). Varje typsnittsyta specificerar källfiler i WOFF2-, WOFF- och TrueType-format från Guardians assetservrar.
Den definierar också "Guardian Titlepiece"-typsnittet med en fet vikt (700) och normal stil, med liknande filformat från en annan subdomän.
Koden inkluderar CSS-anpassade egenskaper (variabler) för färgscheman, särskilt för mörkt läge på iOS- och Android-enheter. Den sätter upp en mörk bakgrundsfärg, feature-färger för ljust och mörkt läge, och använder media queries för att justera pillar-färgen baserat på användarens föredragna färgschema.
Dessutom finns specifika stilregler för den första bokstaven i stycken i artikelbehållare på iOS- och Android-enheter, som tillämpas när de följer vissa element som atomer, inloggningsgrindar eller specifika gate-element.
För Android-enheter är den första bokstaven i det första stycket i standard- och kommentarartiklar formaterad med en sekundär pillar-färg. På både iOS och Android döljs artikelrubriker, och furniture wrappers har specifik utfyllnad. Etiketter inom dessa wrappers använder ett fetstilt, versalt typsnitt i en rubrikstil med en ny pillar-färg. Rubriker är satta till 32px, fetstil, med bottenutfyllnad och en mörk färg. Bilder i furniture wrappers är positionerade relativt, sträcker sig över vyportens bredd minus scrollbar, och anpassar 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 vyportens bredd minus scrollbar, och anpassa 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öjermarginal på -10px. Textens inuti använder Guardian Headline-typsnittsfamiljen eller reserv-serif-typsnitt.
Länkar inom standfirst på båda plattformarna är formaterade med en specifik färg, understrukna med ett 6px avstånd, och använder en angiven färg för understrykningen som ändras vid hovring. Bakgrundsbilden och underkantslinjen tas bort.
Dessutom är metasektionen i artiklar formaterad konsekvent över iOS och Android för feature-, standard- och kommentarbehållare.
För Android-enheter, ta bort marginaler från metaelement i standard- och kommentarartikelbehållare.
För iOS-enheter, sätt färgen på byline- och authorelement i feature-, standard- och kommentarartikelbehållare till den nya pillar-färgen. Ta också bort utfyllnad från meta misc-element och sätt strecket på SVG-ikoner inom dem till den nya pillar-färgen. Formatera dessutom bildtextsknappen i showcase-element med specifik visning, utfyllnad, justering och dimensioner.
För både iOS och Android, sätt artikelkroppens utfyllnad till 0 på sidorna och 12px på toppen och botten 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 vyporten minus 24 pixlar och scrollbar-bredd, och en automatisk höjd. Deras bildtexter kommer att ha ingen utfyllnad.
Immersiva bilder i dessa behållare sträcker sig över hela vyportens bredd minus scrollbar-bredd.
Citerade blockcitat i artikelkroppen visar en färgad markör med den nya pillar-färgen.
Länkar i artikelkroppen är formaterade med den primära pillar-färgen, understrukna med ett avstånd, och använder rubrikens kantlinjefärg för understrykningen. Vid hovring ändras understrykningsfärgen till den nya pillar-färgen.
I mörkt läge kommer furniture wrapperns bakgrund att vara 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 pillar-färgen.
- Rubriker har ingen bakgrund och använder rubrikens kantlinjefärg för text.
- Standfirst-stycken och länkar använder rubrikens kantlinjefärg.
- Författarbyline och deras länkar använder den nya pillar-färgen.
- Diverse metadata-ikoner är streckade med den nya pillar-färgen.
- Showcase-bildbildtexter använder datumlinjefärgen.
- Citerade blockcitat i artikelkroppen är formaterade med den nya pillar-färgen.
För iOS- och Android-enheter är textfärgen för citerade block i artikelkroppar satt till en specifik pillar-färg.
Dessutom ändras bakgrundsfärgen för olika artikelkroppssektioner på både iOS och Android till en mörk bakgrund, vilket säkerställer att den åsidosätter andra stilar.
Vidare, för den första bokstaven efter vissa element i artikelkroppar på iOS, appliceras en speciell formatering, även om den exakta effekten inte specificeras här.
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 gäller för olika artikaltyper (standard, feature, comment) och tar hänsyn till inloggningsgrindar som kan dyka upp 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 en variabel färg, justerar utfyllnad och marginaler för standfirst-element i kommentarartiklar, och formaterar rubriker med en typsnittsstorlek på 24px.
För bildtextsknappar appliceras olika utfyllnadsvärden på iOS och Android. I mörkt läge ändras olika färgvariabler till mörkare nyanser för bättre läsbarhet och en mörk bakgrundsfärg sätts.
Dessutom döljs artikelrubriker genom att göra dem helt genomskinliga på båda operativsystemen och stilar appliceras på furniture wrappers, även om koden är ofullständig för den senare.
För iOS- och Android-enheter har artikelbehållarens furniture wrapper ingen marginal. Inom feature-, standard- och kommentarartiklar använder innehållsetiketterna en specifik färgvariabel, medan rubriker är satta till en ljusgrå färg. Länkar i artikelns rubrik- eller titelsektion använder också den angivna färgvariabeln.
Dessutom appliceras en upprepad linjär gradient som bakgrund före metasektionen, vilket skapar en mönstrad kantlinjeeffekt. Bylinetexten i metaområdet visas i ljusgrå, och länkar inom metasektionen är formaterade därefter.
För iOS- och Android-enheter gäller följande stilar för länkar inom metasektionen i feature-, standard- och kommentarartikelbehållare
