Denne CSS-kode definerer en brugerdefineret skrifttypefamilie kaldet "Guardian Headline Full" med flere skrifttykkelser og stilarter. Den inkluderer let, normal, medium og semibold tykkelser, hver med normale og kursiv variationer. Skrifttypefilerne leveres i WOFF2, WOFF og TrueFormat formater, hostet på Guardians servere.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Den interaktive indholdskolonne har en venstre kant og specifik afstand til elementer. Afsnit, der følger visse elementer, har ekstra top-padding, og det første bogstav i disse afsnit er formateret som et stort, farvet drop cap. Inline-elementer og figurer er begrænset til en maksimal bredde på 620px på større skærme. Forskellige farvevariabler er defineret for ensartet tema.
Pullquotes i specifikke beholdere skal have en maksimal bredde på 620 pixels.
Billedtekster til showcase-elementer i hovedindhold og artikelbeholdere skal være positioneret statisk, med en fuld bredde op til 620 pixels.
Immersive elementer skal spænde over hele viewport-bredden, minus scrollbaren. På større skærme er de begrænset til 978 pixels, med justeret billedtekst-padding til mellemstore skærme. På mellemstore skærme er den maksimale bredde 738 pixels. På mindre skærme justeres immersive elementer til venstre kant med tilpassede margener og billedtekst-padding.
Til furniture wrappers på større skærme bruges et grid-layout med definerede kolonner og rækker. Overskrifter har en topkant, meta-sektioner er positioneret relativt, og standfirst-indhold inkluderer specifik styling til links og afsnit. Figurer i wrapperen har ingen venstremargin og en maksimal bredde på 630 pixels, når de er inline. På ekstra store skærme justeres grid-template-kolonnerne.
CSS'en definerer et grid-layout til en artikelheader med specifikke områder til titel, overskrift, standfirst, metainformation og et portrætbillede. Den sætter stilarter til kanter, typografi og afstand, og justerer disse egenskaber på tværs af forskellige skærmstørrelser ved hjælp af media queries. For eksempel øges overskriftens skriftstørrelse på større skærme, og visse elementer skjules eller ompositioneres, når viewporten ændres. Hovedmedieområdet er konfigureret til at være fuld bredde på mobile enheder.
CSS-koden definerer stilarter til en websidelayout med fokus på et furniture wrapper-element. Den sætter baggrundsfarver, margener, padding og responsiv adfærd til forskellige skærmstørrelser. Stilarterne inkluderer brugerdefinerede egenskaber for farver, såsom mørktilstandsfunktioner og headerkanter. Specifikke regler styrer udseendet af billedtekster, knapper, overskrifter og metainformation, med justeringer til hover-effekter og sociale medie-ikoner. Media queries sikrer, at layoutet tilpasser sig fra mobil til desktop-visninger, inklusive bredere skærme, hvor sidebaggrunde tilføjes.
Denne CSS-kode definerer stilarter til en web-sidekomponent, sandsynligvis en sidebjælke eller indholdswrapper. Den sætter farver, kanter og layoutjusteringer til forskellige elementer som links, tekst og sociale medie-ikoner. Stilarterne tilpasser sig til forskellige skærmstørrelser ved hjælp af media queries, der ændrer bredder og kanter for at passe til større skærme. Farver administreres ved hjælp af CSS-variabler til temaer, såsom mørk tilstand.
CSS-koden definerer stilarter til artiklelementer og indlæser brugerdefinerede skrifttyper. Den sætter kantfarven for kommentarer til at matche headerkantens farve. Til artikeloverskrifter bruges en let skrifttykkelse, men overskrifter med stærk tekst gøres fed. Koden importerer også Guardian Headline-skrifttypefamilien i forskellige vægte og stilarter, inklusive let, normal, medium og semibold, i både normale og kursiv versioner.
Skrifttypen "Guardian Headline Full" er defineret med flere stilarter: semibold kursiv (vægt 600), fed (vægt 700), fed kursiv (vægt 700), sort (vægt 900) og sort kursiv (vægt 900). Hver stil inkluderer skrifttypefiler i WOFF2, WOFF og TrueType formater.
Derudover er skrifttypen "Guardian Titlepiece" defineret i sin fede stil (vægt 700), også med WOFF2, WOFF og TrueType filer.
Til iOS- og Android-enheder sættes en mørk baggrundsfarve (#1a1a1a) og specifikke funktionsfarver. I mørk tilstand justeres funktionsfarven tilsvarende.
På iOS og Android anvendes speciel styling til det første bogstav i det første afsnit i artikelbeholdere, der følger visse elementer som `.element-atom` eller sign-in gates.
Til 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 wrapperen har specifik padding. Labels i furniture wrapperen bruger en fed, kapitaliseret skrifttype med en ny pillar-farve. Overskrifter sættes til 32px, fed, med bund-padding og en mørk farve. Billedfigurer er positioneret relativt, med fuld bredde-margener og automatisk højde.
Til Android-enheder skal billeder i artikelbeholdere have en gennemsigtig baggrund, spænde over hele viewport-bredden (med hensyn til scrollbars) og justere deres højde automatisk.
På både iOS og Android skal den indledende tekst i artikler have specifik afstand: 4 pixels padding på toppen, 24 pixels på bunden og en negativ margin på 10 pixels til højre.
Afsnittene i denne indledende tekst skal bruge Guardians overskriftsskrifttypefamilie.
Links i denne tekst skal styles med en specifik farve, en understregning placeret 6 pixels under teksten og en lysegrå understregningsfarve. De skal have ingen baggrundsbillede eller bundkant. Ved hover skal understregningen ændres til at matche linkets tekstfarve.
Derudover skal artikelmetadata-sektionen styles ensartet for begge operativsystemer.
Denne CSS-kode sætter stilarter til artikelbeholdere på Android- og iOS-enheder. Den justerer margener, farver, padding og knapvisning for forskellige artikeltyper og deres komponenter.
På iOS- og Android-enheder, for feature-, standard- og kommentarartikelbeholdere, har billeder, der ikke er miniaturebilleder eller immersive, en margin på nul, en bredde beregnet fra viewport minus 24 pixels og scrollbar-bredden, og en automatisk højde. Deres billedtekster har ingen padding.
Immersive billeder i disse beholdere har en bredde beregnet fra viewport minus scrollbar-bredden.
I artikelkroppens prosa bruger citerede blockquotes den nye pillar-farve til deres dekorative element. Links styles med den primære pillar-farve, en understregning med 6px offset og en kantfarve-understregning, der ændres til den nye pillar-farve ved hover.
I mørk tilstand sættes furniture wrapperens baggrundsfarve til #1a1a1a.
Til iOS- og Android-enheder bruger indholdslabels i feature-, standard- og kommentarartikler den nye pillar-farve.
På både iOS og Android har hovedoverskriften i disse artikeltyper ingen baggrund og bruger headerkantens farve til teksten.
Standfirst-teksten i disse artikler bruger også headerkantens farve. Links i standfirst, samt forfatterby-lines og deres links, styles med den nye pillar-farve.
Ikoner i artikelmetadata bruger den nye pillar-farve til deres streger.
Billedtekster til showcase-billeder i disse artikler bruger datolinjens farve.
Endelig bruger citeret tekst i artikelkroppen på iOS den specificerede styling.
Til iOS- og Android-enheder sættes tekstfarven for citerede blokke i artikelkroppe til en specifik variabel farve.
Derudover tvinges baggrundsfarven for forskellige artikelkropsbeholdere på både iOS og Android til en mørk baggrund ved hjælp af en important-deklaration.
Yderligere, for iOS-enheder, styles det første bogstav efter visse elementer som atomer, sign-in gates eller specifikke ID'er i artikelkroppe, selvom den præcise styling er afkortet i den leverede tekst.
Dette ser ud til at være en CSS-selector, der rammer det første bogstav i afsnit i specifikke artikelbeholdere på iOS- og Android-enheder. Selectoren gælder for forskellige artikeltyper (standard, feature, kommentar) og tager højde for forskellige sidestrukturer og sign-in gate-elementer.
Denne CSS-kode sætter stilarter til specifikke elementer på Android- og iOS-enheder. Den definerer farver, padding, margener og andre visuelle egenskaber for forskellige artikelbeholdere, knapper og tekstelementer. Koden inkluderer også præferencer for mørk tilstand og sætter visse headers til at være usynlige.
CSS-koden sætter stilarter til artikelbeholdere på iOS- og Android-enheder. Den fjerner margener fra furniture wrappers og justerer farver for labels, overskrifter og links baseret på brugerdefinerede egenskaber. Overskrifter sættes til en lysegrå farve, mens links og labels bruger en variabel farve. Meta-sektioner har et stribet baggrundsmønster og by-lines i lysegrå.
Til iOS- og Android-enheder skal links i meta-sektionen af feature-, standard- og kommentarartikler bruge den nye pillar-farve (eller en mørktilstandsfunktionsfarve som fallback).
Tilsvarende skal SVG-ikoner i meta-sektionens diverse område
