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 i både normale og kursiverede versioner. Skrifttyperne indlæses fra Guardians servere i tre forskellige filformater: WOFF2, WOFF og TrueType.
@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 for elementer. Afsnit, der følger visse elementer, får 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. Forskellige farvevariabler er defineret for ensartet tema.
Pullquotes i specifikke beholdere skal have en maksimal bredde på 620 pixels.
Billedtekster til showcase-elementer i hovedartikler, features, standardartikler og kommentarer skal være positioneret statisk, spænde over fuld bredde og også have en maksimal bredde på 620 pixels.
Immersive-elementer skal spænde over hele viewport-bredden minus scrollbaren. På større skærme (over 71.24em) er deres maksimale bredde 978px, med justeret billedtekst-padding ved forskellige breakpoints. På mellemstore skærme (mellem 46.25em og 61.24em) er den maksimale bredde 738px. På mindre skærme (under 46.24em) skal disse elementer ikke have venstre margen og skal justeres til venstre kant, med justerede margener og billedtekst-padding til meget små skærme.
For furniture-wrapper på store skærme (over 61.25em) bruges en grid-layout med definerede kolonner og rækker. Overskrifter får en topkant, metainformation er positioneret relativt, og standfirst-tekst har specifik styling for links og afstand. Figurer i denne wrapper har justerede margener og en maksimal bredde på 630px for inline-elementer. På ekstra store skærme (over 71.25em) justeres grid-skabelonen til at inkludere flere kolonner.
CSS'en definerer en grid-layout til en sidehoved med områder for titel, overskrift, standfirst, metainformation og et portræt. Den sætter specifikke dimensioner og positioner for disse elementer ved forskellige skærmstørrelser. Styling inkluderer kanter, skrifttyper og farver, med justeringer for sociale medie-ikoner, billedtekster og responsiv adfærd på mobil- og desktop-visninger.
CSS-koden definerer stilarter til en websidelayout med fokus på en komponent kaldet "furniture-wrapper". Denne komponent har en mørk baggrund og justerer sine margener og padding baseret på skærmstørrelse. Til større skærme tilføjer den dekorative sidebjælker.
Inde i denne wrapper styles elementer som artikelhoveder, overskrifter og metainformation (såsom knapper til deling på sociale medier). Overskrifter bruger en lysegrå farve og fed skrift. Sociale knapper har farvede kanter, der matcher en temafarve, og de skifter til en solid farve ved hover.
Koden styrer også synligheden af billedtekster og en knap til at skjule/vise billedtekster for medieelementer. Overordnet sikrer stilarterne, at layoutet er responsivt og visuelt ensartet på tværs af forskellige enheder.
Denne CSS-kode definerer stilarter til en webkomponent, sandsynligvis en sidebjælke eller indholdswrapper. Den sætter tekstfarver, linkudseender og layoutjusteringer til forskellige skærmstørrelser. Links styles med specifikke farver og understregninger, og layoutet inkluderer baggrundselementer, der justeres baseret på viewport-bredden. Koden håndterer også kanter og afstand for forskellige elementer inden i komponenten.
CSS-koden definerer stilarter til artiklelementer og indlæser brugerdefinerede skrifttyper. Den sætter kantfarven for kommentarer til at matche hovedets kantfarve. Til artikeloverskrifter bruges en let skrifttykkelse som standard, men den skifter til fed, når overskriften indeholder et strong-tag.
Derudover importerer den Guardian Headline Full-skrifttypefamilien i forskellige tykkelser og stilarter (let, normal, medium, semibold, hver med normale og kursiverede versioner) fra Guardians servere, hvor flere filformater specificeres for browserkompatibilitet.
Skrifttypen "Guardian Headline Full" er defineret med flere stilarter: semibold kursiv (tykkelse 600), bold (tykkelse 700), bold kursiv (tykkelse 700), black (tykkelse 900) og black kursiv (tykkelse 900). Hver stil inkluderer skrifttypefiler i WOFF2-, WOFF- og TrueType-formater, hostet på Guardians servere.
Derudover er skrifttypen "Guardian Titlepiece" defineret i sin bold-stil (tykkelse 700), også med WOFF2-, WOFF- og TrueType-filer.
Til iOS- og Android-enheder sættes en mørk baggrundsfarve og specifikke feature-farver. I dark mode justeres feature-farven tilsvarende.
På iOS og Android anvendes specifikke CSS-regler til at style det første bogstav i det første afsnit i visse artikelbeholdere, der følger specifikke 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 artikelhoveder, og furniture-wrapper har specifik padding. Labels i furniture-wrapper 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 i toppen og 24 pixels i bunden, med 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, uden baggrundsbillede eller kant. Ved hover skal understregningen skifte til at matche linkets tekstfarve.
Derudover skal metadata-sektionen i artikler på både iOS og Android modtage specifik styling.
Denne CSS-kode sætter stilarter til artikelbeholdere på iOS- og Android-enheder. Den justerer margener, farver, padding og knapvisning for forskellige artikeltyper og deres komponenter.
På iOS- og Android-enheder, til feature-, standard- og kommentarartikelbeholdere, styles billeder, der ikke er miniaturebilleder eller immersive, til at have ingen margin, 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 sættes til en bredde, der er viewport-bredden minus scrollbar-bredden.
Inde i artikelkroppens prosa viser citerede blockquotes en farvet markør ved hjælp af en brugerdefineret CSS-variabel. Links styles med en specifik farve, en understregning med et offset på 6 pixels og en dekorationsfarve fra en variabel. Ved hover ændres understregningsfarven til en anden variabel.
I dark mode sættes baggrundsfarven for furniture-wrapper i disse beholdere til en mørkegrå (#1a1a1a).
Til iOS- og Android-enheder bruger indholdslabels i feature-, standard- og kommentarartikler den nye pillar-farve. Overskrifter i disse artikler har ingen baggrund og bruger hovedets kantfarve. Standfirst-teksten og links sammen med forfatterbyline antager også den nye pillar-farve. Ikoner i meta-sektionen styles med samme farve. Billedtekster til showcase-billeder bruger datolinjefarven, og citeret tekst i artikelkroppen følger samme styling.
Til iOS- og Android-enheder sættes tekstfarven for citerede blokke i artikelkroppe til en specifik pillar-farve. Derudover tvinges baggrundsfarven for forskellige artikelkropsbeholdere til en mørk baggrund. På iOS styles det første bogstav efter visse elementer i disse beholdere med en drop cap-effekt.
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å en dark mode media query, der justerer farver, når brugeren foretrækker et mørkt farveskema. Nogle elementer, som artikelhoveder, skjules ved at sætte deres opacitet til nul.
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 eller specifikke værdier. Overskrifter sættes til en lysegrå farve, mens links og labels bruger en variabel farve. Meta-sektioner har en stribet baggrund skabt med en gentaget lineær
