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 normal og kursiv stil. Skriftfilerne leveres i WOFF2, WOFF og TrueFormat formater, hostet på Guardians asset-server.@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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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 {
left: -10px;
}
}Dette ser ud til at være en blok CSS-kode, sandsynligvis fra en hjemmesides stilark. Den definerer forskellige stile for elementer som kolonner, interaktivt indhold og typografi, herunder farver, afstande og layoutregler for forskellige skærmstørrelser. Koden inkluderer medieforespørgsler til responsivt design og bruger CSS-egenskaber (variabler) til konsekvent tema. De følgende CSS-regler justerer layoutet og styling for forskellige elementer:
- Afsnit efter vandrette linjer i specifikke beholdere har ingen top-polstring.
- Billedtekster til showcase-elementer er placeret statisk, med en fuld bredde og en maksimal bredde på 620px.
- Immersive elementer spænder over den fulde viewport-bredde minus rullebjælkens bredde.
- For skærme op til 71.24em brede er immersive elementer begrænset til 978px, og deres billedtekster har 10px vandret polstring.
- Mellem 30em og 71.24em har billedtekster til immersive elementer 20px vandret polstring.
- For skærme mellem 46.25em og 61.24em er immersive elementer begrænset til 738px.
- Under 46.24em er immersive elementer justeret til venstre med justerede margener.
- Mellem 30em og 46.24em har immersive elementer en venstre margin på -20px og billedtekster med 20px vandret polstring.
- For skærme 61.25em og bredere anvendes et grid-layout med specifikke kolonne- og rækkedefinitioner.
- Overskrifter i dette grid har en topkant.
- Meta-information er placeret relativt med toppolstring og ingen højre margin.
- Standfirst-elementer har justerede margener, skriftstørrelser og linkstile, herunder understregede links med specifikke farver og hover-effekter.
- Det første afsnit i standfirst-elementer har en topkant og ingen bundpolstring, som fjernes ved 71.25em og derover.
- Figurer i griddet har venstre margener og en maksimal bredde på 630px for inline-elementer.
- Ved 71.25em og derover justeres grid-skabelonen med forskellige kolonne- og rækkedefinitioner.Den leverede tekst ser ud til at være CSS-kode til styling af en websidelayout, specifikt for en furniture-wrapper-klasse. Den definerer grid-strukturer, medieforespørgsler til responsivt design og forskellige stilregler for elementer som overskrifter, meta-information, standfirst-tekst og mediabilledtekster. Koden justerer egenskaber som bredder, skrifttyper, kanter og farver baseret på skærmstørrelses breakpoints.Det andet element af sin type skal vises som en blok med en maksimal bredde på 90%.
På skærme mindst 30em brede skal billedtekster inden for furniture-wrapper have polstring på 4px i toppen, 20px på siderne og 12px i bunden. Billedtekster med "hidden"-klassen skal være usynlige.
En billedtekstknap inde i furniture-wrapper vises som en blok, placeret absolut 10px fra bunden og 8px fra højre, med en høj stakkelrækkefølge. Den har en baggrundsfarve defineret af variablen --captionBackground, ingen kant, en cirkulær form og polstring på 6px i toppen, 5px på siderne og 5px i bunden. SVG'en indeni skaleres til 85% af sin originale størrelse. På skærme mindst 30em brede er knappen placeret 10px fra højre.
For hovedinteraktionskolonnen på skærme mindst 71.25em brede justeres toppositionen med -12px og højden øges med 24px. Overskrifter (h2) i denne kolonne har en maksimal bredde på 620px.
På iOS- og Android-enheder er farvevariablerne sat som følger: --darkBackground til #1a1a1a, --feature til #c70000, --darkmodeFeature til #ff5943, og --new-pillar-colour til værdien af --primary-pillar eller --feature hvis ikke defineret. I mørk tilstand bruger --new-pillar-colour --darkmode-pillar eller --darkmodeFeature.
For det første bogstav i det første afsnit efter specifikke elementer i artikelbeholdere på iOS og Android er farven sat til værdien af --secondary-pillar eller sort hvis ikke defineret.
Overskrifter i artikelbeholdere på iOS og Android har ingen højde. Furniture-wrapper i disse beholdere har polstring på 4px i toppen, 10px på siderne og 0 i bunden. Etiketter inden for furniture-wrapper bruger en fed, 700-vægt skrifttype fra Guardian Headline- eller Guardian Egyptian Web-skrifttypefamilier.Overskriftsskrifttypen er sat til Guardian Headline, Georgia eller serif, med en specifik farve og kapitaliseret tekst. På iOS- og Android-enheder bruger overskriften i artikelbeholdere en 32px fed skrifttype, har 12px bundpolstring og er farvet mørkegrå.
Billeder i disse beholdere er placeret relativt, med en 14px topmargin og en venstre margin på -10px. Deres bredde tilpasses viewporten minus rullebjælken, og deres højde er sat til auto. De indre elementer, billeder og links inden for disse figurer har en gennemsigtig baggrund, den samme responsive bredde og auto-højde.
Standfirst-sektionen har 4px toppolstring, 24px bundpolstring og en -10px højre margin. Afsnit inde i standfirst bruger Guardian Headline- eller Georgia-skrifttypefamilien. Links inden for standfirst og dens listeelementer er styled i overensstemmelse hermed.Til iOS- og Android-enheder er links inden for standfirst-sektionen af feature-, standard- og kommentarartikler styled med en specifik farve, en understregning 6px under teksten og ingen baggrundsbillede eller bundkant. Ved hover ændres understregningsfarven til at matche tekstfarven.
Meta-sektionen i disse beholdere har ingen margin, og elementer som bylines, forfattere og relaterede links er styled konsekvent.Til iOS- og Android-enheder gælder følgende styling for artikelbeholdere:
- Forfatter-byline-links bruger den nye pillefarve.
- Meta-sektionens diverse-elementer har ingen polstring.
- SVG-ikoner i meta-diverse-sektionen bruger den nye pillefarve for streger.
- Billedtekstknapper i showcase-elementer er centreret, 28x28px, med 5px polstring, placeret 14px fra højre.
- Artikelkrop har 12px vandret polstring.
- Ikke-miniature, ikke-immersive billeder spænder viewport-bredden minus 24px og rullebjælkebredde, uden margin og auto-højde. Deres billedtekster har ingen polstring.
- Immersive billedelementer er styled på samme måde.Til immersive billeder i standard- og kommentarartikler på Android, sæt bredden til den fulde viewport-bredde minus rullebjælkens bredde.
På iOS og Android, for feature-, standard- og kommentarartikler, style citerede blockquotes med en farve baseret på den nye pillefarve. Style også links i prosaen med den primære pillefarve, en understregning forskudt med 6px, og en understregningsfarve der matcher overskriftens kant. Ved hover, ændr understregningsfarven til den nye pillefarve.
I mørk tilstand, sæt baggrundsfarven for furniture wrappers til #1a1a1a. Style indholdsetiketter med den nye pillefarve, overskrifter med overskriftens kantfarve, og standfirst-afsnit med overskriftens kantfarve. Style også standfirst-links og byline-forfattere med den samme overskriftens kantfarve.Denne CSS-kode sætter farven på forfatter-bylines til en specifik variabeldefineret farve på både iOS- og Android-enheder for forskellige artikeltyper. Den anvender også den samme farve på SVG-streger i meta-sektionen og på citeret tekst inden for artikler. Derudover definerer den farven for billedtekster ved hjælp af en anden variabel. Koden sigter mod flere beholdere og elementer for at sikre konsekvent styling på tværs af forskellige layouts og platforme.På iOS-enheder styles det første bogstav i afsnit efter specifikke elementer i artikel- og kommentarsektioner med en brugerdefineret drop cap. Dette gælder for forskellige beholdere og indholdstyper, herunder standardartikler, featureartikler og interaktivt indhold.Denne CSS-vælger sigter mod det første bogstav i afsnit, der følger specifikke elementer inden for forskellige artikelbeholdere på iOS- og Android-enheder. Den gælder for forskellige sektioner som artikelorganer, kommentarområder og interaktivt indhold, og sikrer konsekvent styling for drop caps eller initialbogstavsformatering.Til Android-enheder styles det første bogstav i det første afsnit i kommentarartikelbeholdere med en specifik farve. På både iOS og Android har kommentarartikelbeholdere justeret polstring og margener for visse elementer. Overskrifter på niveau to bruger en 24-pixels skriftstørrelse. Billedtekstknapper har forskellige polstringsværdier på iOS og Android.
I mørk tilstand ændres tekst- og ikonfarver for at forbedre læsbarheden. Logoer i branding-sektionen er sat til at vises. Etiketter og overskrif
