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. Skrifttypefilerne leveres i WOFF2, WOFF og TrueType-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://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;
}
div#maincontent:focus {
box-shadow: none !important;
}
#init-1, #end-1, #init-2, #end-2, #init-3, #end-3, #init-4, #end-4, #init-5, #end-5,
h2#interactive-slot-1, h2#interactive-slot-2, h2#interactive-slot-3, h2#interactive-slot-4, h2#interactive-slot-5 {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
border: none;
}
:root {
--fires-bg-color: #0b0a32;
--headline-bg-color: #0b0a32;
--custom-text-color: #fff;
--article-border: #fac99b;
--primary-accent-color: #fac99b;
--secondary-accent-color: #ff5943;
--tertiary-accent-color: #59433c;
--block-quote-fill: var(--primary-accent-color);
--share-button: var(--primary-accent-color);
--share-button-hover: var(--fires-bg-color);
--interactive-block-background-datawrapper: transparent;
--branding-border: var(--tertiary-accent-color);
--section-background: #ffffff;
--interactive-block-background: transparent;
--caption-text: var(--primary-accent-color);
--sub-meta-label-text: #fff;
--dateline: var(--secondary-accent-color);
--sub-meta-background: --fires-bg-color;
--sub-meta-text: var(--primary-accent-color);
--sub-meta-text-hover: var(--fires-bg-color);
--straight-lines: var(--primary-accent-color);
--article-meta-lines: var(--primary-accent-color);
--article-background: var(--fires-bg-color);
}
li:before {
background-color: var(--secondary-accent-color) !important;
}
body {
background-color: var(--fires-bg-color) !important;
}
.content--interactive {
background-color: transparent !important;
}
body .content--interactive h1,
body .article h1 {
order: 1;
text-align: left;
color: #fff;
min-width: 50%;
margin: 0 auto 13px 10px;
color: var(--secondary-accent-color) !important;
}
.content__standfirst p {
margin: 0 auto 13px 10px;
}
.content__label__link span {
margin: 0 0 0 10px !important;
}Container-summary har en venstremargin på 10 pixels og bruger en specifik accentfarve til sin tekst. Elementer med data-print-layout-attributten sat til "hide" vises ikke.
Afsnit og hovedoverskrifter inden for interaktivt indhold og artikler bruger brugerdefinerede tekstfarver. Hovedoverskriftens skriftstørrelse er sat til 3 rem, justeret til 2,5 rem på mellemstore skærme. Sekundære overskrifter er formateret med en let skrifttykkelse, en størrelse på 32 pixels og en brugerdefineret tekstfarve.
Introduktionsteksten i interaktivt indhold bruger en primær accentfarve og har en maksimal bredde på 320 pixels. Links inden for artikler og interaktivt indhold er farvet med en sekundær accent. Titelmærkelinket bruger også den primære accentfarve.
Body'en definerer et omfattende farveskema ved hjælp af CSS-brugerdefinerede egenskaber for tekst, baggrunde, linjer, knapper, fremhævninger og specifikke brandfarver. Den overordnede sidebaggrund er sat med en brugerdefineret variabel.
Artikelhoveder og -kroppe har en gennemsigtig baggrund. Hovedkolonnen for interaktivt indhold justerer sin bredde og fjerner standardmargener. Det første figurelement og det første atomelement har farvede bundkanter.
Den vigtigste interaktive artikelcontainer spænder over hele viewportens bredde uden vandret rulning og bruger et specifikt grid-område. På større skærme bruger layoutet et flerkolonnet grid. Artikelkroppen optager hele griddet og skjuler overløb.
Et grænseelement er skjult, og hovedindholdsområdet har ingen topmargin. For meget brede skærme definerer griddet en central kolonne på 1300px med en venstremargin for ikke-kropselementer. Denne centrale kolonne og margin justeres ved forskellige breakpoints for forskellige skærmbredder.
Ikke-kropselementer i det interaktive grid har en højere stakorden og modtager sidepolstring på større skærme. På Android og iOS har artikelkroppen ingen polstring, og headeren er placeret absolut med en gennemsigtig baggrund. Forfatterbyline-tekst og links inden for meta-sektionen bevarer også gennemsigtighed på disse mobile platforme.Byline, forfatterlinks og titelmærker er sat til at bruge den sekundære accentfarve. Meta-byline-komponenten har en venstremargin på 10px. Forfatterlinks har en bundmargin på 13px. Titel- og overskriftssektionerne har en toppolstring på 5vh, med titlen også med en bundpolstring på 4px. Linjeelementet og meta-sektionskanter er skjult på Android og iOS.
På Android og iOS har publiceringsdatoen en toppolstring på 4px. Sociale medie-knapper i meta-sektionen bruger den sekundære accentfarve til tekst og kanter, og deres ikoner er fyldt med samme farve. Ikoner i content-meta-containeren er skjult. Alle ikke-kropselementer i det interaktive grid har venstre- og højrepolstring på 10px. Den sociale medie-sektion i meta-området har ingen topkant, og kommentarsektionen er skjult. Del-knappen skifter til den sekundære accentfarve med et hvidt ikon ved hover.
Det første atomelement-figur spænder over alle kolonner med en bundmargin på 12px. Immersive elementfigurer er fuld bredde, op til 1260px, uden sidemargener, og spænder fra den næstsidste til den anden kolonne.
På små skærme (under 30em) har alle ikke-immersive elementer i hovedkolonnen 10px sidemargener. På mellemstore skærme (46,25em og derover) har den interaktive hovedkolonne en relativ position med en lodret linje til venstre. Ikke-atomelementer placeres i kropsgridkolonnen.
For forskellige skærmstørrelser bruger layoutet specifikke grid-skabeloner:
- Mellem 46,25em og 61,24em: et trekolonnelayout.
- Mellem 61,25em og 71,24em: et firekolonnelayout.
- Mellem 71,25em og 81,24em: et femkolonnelayout med venstre- og højrekolonner.
- Over 81,25em: et femkolonnelayout med bredere kolonner.
Titlen er placeret 20dvh fra toppen, fuld bredde, uden topmargin. På skærme mellem 20em og 46,24em flyttes den til 10dvh. Titelmærker har ingen kant.
Overskriften er også ved 20dvh, fuld bredde, med en mørk baggrund, polstring og en topkant. På mellemstore skærme flyttes den til 10dvh.
Standfirst er placeret ved 20dvh, fuld bredde, med en mørk baggrund og polstring. På mellemstore skærme flyttes den til 10dvh.
Det interaktive grid definerer områder for overskrift, standfirst, medie, linjer, meta og krop.
Meta-sektionen er fuld bredde, placeret ved 20dvh med en mørk baggrund og en z-indeks på 5. På mellemstore skærme flyttes den til 10dvh. Datolinjen har en venstremargin på 10px.
Svelte-scroller-outer vises som en blok med relativ positionering.CSS-koden definerer stilarter for en scroller-komponent og inkluderer font-face-regler for Guardian Headline Full-skrifttypefamilien. Scrolleren har en blokvisning, relativ positionering og fuld bredde. Dens forgrund er sat til et højere z-indeks og rydder floats, mens baggrundscontaineren er absolut placeret uden pointer-events og optimeret til transform-ændringer. Font-face-reglerne indlæser forskellige tykkelser og stilarter af Guardian Headline Full-skrifttypen fra Guardians servere, angiver let, normal, medium og semibold varianter i både normal og kursiv stil, med understøttelse af WOFF2, WOFF og TTF-formater.Guardian bruger brugerdefinerede skrifttyper til sine overskrifter og titelstykker. Disse skrifttyper indlæses fra deres servere i flere formater som WOFF2, WOFF og TTF for at sikre bred browserkompatibilitet. Hver skrifttypevariation, såsom fed eller kursiv, er defineret med specifikke tykkelser og stilarter.
Siden inkluderer en indlæsningsoverlay med en roterende animation, der vises under datahentning. Hovedindholdsområdet har et fuldskærmskort og en rullefortællingssektion. Tekstbokse inden for denne sektion har en formateret baggrund, kant og typografi ved hjælp af Guardians Egyptian Web-skrifttype til brødtekst. Visse tekstspænder er fremhævet med en farvet baggrund for at understrege.CSS definerer en kantradius på 12 pixels og indlæser Guardian Headline Full-skrifttypefamilien. Dette inkluderer flere skrifttypefiler i forskellige tykkelser og stilarter (let, normal, medium, semibold og deres kursiverede versioner) fra Guardians servere. Filerne leveres i WOFF2, WOFF og TrueType-formater for at sikre bred browserkompatibilitet.Hver dag i 2024 brændte skovbrande over 360 kvadratkilometer skov – et område større end Malta. Ved årets udgang var mere end 134.000 kvadratkilometer blevet fortæret af flammer, et samlet areal større end England. Over de sidste 24 år har skovbrande ødelagt 1,5Verden mister et skovareal på størrelse med Mongoliet til brand, en hastighed eksperter advarer er uholdbar. Mens skovbrande er en naturlig del af økosystemer, er deres omfang, hyppighed og intensitet i kulstofrige skove steget kraftigt de seneste årtier.
Forskning fra World Resources Institute (WRI) viser, at brande nu ødelægger mere end dobbelt så meget trædække som for tyve år siden. I 2024 alene brændte 135.000 kvadratkilometer skov, hvilket gjorde det til det mest ekstreme skovbrandsår nogensinde.
Interessant nok viser forskning fra University of Tasmania, at brande i andre landskaber ikke er steget på samme måde. Det samlede brændte areal globalt er faktisk faldet i årtier, delvis på grund af udvidende landbrug i Afrika, der bremser spredningen af brande. Dog er skove blevet et nyt hotspot for brande.
Stigningen i skovbrande er tydelig. Fire af de fem værste år nogensinde er sket siden 2020. WRI-forskning fremhæver, at 2024 var første gang, større brande rasede samtidigt på tværs af både tropiske, fugtige skove som Amazonas og boreale skove, såsom dem i Canada.
Lande som Brasilien, Bolivia, Rusland, Australien og Canada har alle oplevet nogle af deres værste brandsæsoner i de seneste år. Højdebølger, forstærket af fossilt brandstofs forurening, driver risikoen for ekstreme brande højere.
For eksempel har Rusland lidt under tre af sine værste brandsæsoner siden 2020, med 2021 som den mest alvorlige. Omkring 45.000 kvadratkilometer skov brændte, primært på tværs af Sibirien og det fjerne østen. Brandene strakte sig så langt nordpå, at de nåede permafrostregioner inden for Arktiske Cirkel. I
