Denne CSS-kode definerer en brugerdefineret skrifttypefamilie kaldet "Guardian Headline Full" med flere skrifttykkelser og stile. Den specificerer forskellige skriftfiler i WOFF2-, WOFF- og TrueType-formater for hver variation, herunder let, normal, medium og semibold tykkelser, hver med normale og kursiverede stile. Skriftfilerne er hostet på Guardians hjemmeside.
Denne CSS-kode definerer flere skrifttypefamilier for Guardian Headline- og Guardian Titlepiece-skrifttyper og specificerer deres kilder i forskellige formater (WOFF2, WOFF og TrueType) sammen med deres skrifttykkelser og stile. Den inkluderer også responsive design-regler for hovedindholdskolonnen, der justerer margener og bredder for forskellige skærmstørrelser for at sikre korrekt layout på forskellige enheder. For eksempel får hovedkolonnen en venstremargin på bredere skærme, og elementer som atomer, showcases og immersivt indhold får deres maksimale bredder sat i overensstemmelse hermed for at opretholde læsbarhed og visuel appel.
Dette ser ud til at være CSS-kode, der definerer stile for en hjemmesides interaktive indholdslayout. Den inkluderer regler for kolonnekanter, elementafstande, typografi og responsivt design for forskellige skærmstørrelser. Koden specificerer farver, padding, margener og speciel formatering for elementer som drop caps i afsnit.
For specifikke elementer som afsnit efter vandrette linjer i artikler, kommentarer og features, fjern top-padding.
Begræns bredden af pullquotes i disse sektioner til 620 pixels.
I showcase-elementer på tværs af forskellige artiktyper skal billedtekster holdes på deres normale position og spænde over den fulde bredde op til 620 pixels.
Få immersive elementer til at spænde over hele viewport-bredden under hensyntagen til rullebjælker.
På skærme op til 71.24em bred, skal immersive elementer begrænses til 978 pixels og der tilføjes 10px side-padding til billedtekster. Mellem 30em og 71.24em øges denne padding til 20px.
For skærme mellem 46.25em og 61.24em sættes immersive elementer til en maksimal bredde på 738 pixels.
På enheder op til 46.24em bred fjernes venstremargen og immersive elementer justeres til venstre kant. Mellem 30em og 46.24em justeres venstremargen til -20px og der opretholdes 20px side-padding for billedtekster.
For furniture wrappers på større skærme (61.25em og derover) anvendes en grid-layout med definerede kolonner og rækker. Stil overskrifter med en topkant, positioner metainformation relativt med top-padding, og juster standfirst-indhold med specifikke margener, skriftstørrelser og linkstile, der inkluderer understregning med brugerdefinerede farver og offsets. Tilføj oprindeligt en topkant til det første afsnit i standfirst, men fjern den på skærme 71.25em og bredere.
På større skærme fjernes også venstremargen fra figurer og inline-elementer sættes til en maksimal bredde på 630 pixels. For skærme 71.25em og derover justeres grid template-kolonner i overensstemmelse hermed.
Layoutet bruger en grid med kolonner og rækker defineret for forskellige skærmstørrelser. For medium skærme er kolonner opdelt i sektioner for titel, overskrift, metainformation, standfirst og portræt med specifikke rækkehøjder. På større skærme justeres kolonne- og rækkestrukturen, hvor meta-sektionens topkant udvides og standfirstens venstrekant flyttes.
Overskrifter har en maksimal bredde og skriftstørrelse, der ændrer sig med skærmstørrelsen, og bliver større og smallere på større skærme. Nogle dekorative linjer skjules på større skærme, mens sociale og kommentarelementer i meta-sektionen overtager kantfarven fra headeren.
Standfirsten er indrykket med en venstrekant og har specifik skriftstil, med top-padding tilføjet på medium skærme. Hovedmedieområdet er placeret i portræt-grid-området med fuld bredde og justerede margener på større skærme, og det udvides til viewport-bredden på små skærme med venstremargener justeret i overensstemmelse hermed. Billedtekster sættes til absolut positionering.
Billedteksten for billeder er placeret i bunden med padding, en baggrundsfarve og tekstfarve. Den spænder over hele bredden uden margin i bunden og har en minimumshøjde. Nogle elementer i billedteksten skjules eller vises baseret på deres type, hvor den ene skjules og en anden optager det meste af bredden.
På større skærme øges billedtekstens padding. En knap for billedteksten placeres nederst til højre, cirkulær i form, og justerer sin position på større skærme.
For interaktivt indhold begrænses overskrifters bredde. På iOS- og Android-enheder sættes specifikke farver for mørk tilstand og features, der justeres baseret på brugerpræferencer.
På disse enheder styles det første bogstav i det første afsnit efter visse elementer med en sekundær farve, og headere har ingen højde. Furniture wrapper, som inkluderer elementer som billedtekster, har reduceret padding i toppen.
For iOS- og Android-enheder gælder følgende stile for feature-, standard- og kommentarartikler:
- Indholdsetiketter bruger fed Guardian- eller Georgia-skrifttype i en specifik farve og skrives med store bogstaver.
- Overskrifter er 32px, fedte, har 12px bund-padding og bruger en mørkegrå farve.
- Billeder positions relativt, spænder næsten hele skærmbredden og justerer deres højde automatisk.
- Billedelementer og links har gennemsigtig baggrund og matcher skærmbredden.
- Standfirst-sektioner har top- og bund-padding med en højremargen-forsky
