Denna CSS-kod definierar en anpassad teckensnittsfamilj som heter "Guardian Headline Full" med flera teckensnittsvikter och stilar. Den inkluderar lätt, normal, medium och halvfet vikt, var och en i både normal och kursiv stil. Teckensnittsfilerna tillhandahålls i WOFF2-, WOFF- och TrueType-format, värdbaserade på Guardians servrar.
@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;
}
Sammanfattningsbehållaren har en vänstermarginal på 10 pixlar och använder en specifik accentfärg för sin text. Element med attributet data-print-layout inställt på "hide" visas inte.
Stycken och huvudrubriker inom interaktivt innehåll och artiklar använder anpassade textfärger. Huvudrubrikens teckensnittsstorlek är inställd på 3 rem, vilket justeras till 2,5 rem på medelstora skärmar. Sekundära rubriker är formaterade med en lätt teckensnittsvikt, en storlek på 32 pixlar och en anpassad textfärg.
Introduktionstexten i interaktivt innehåll använder en primär accentfärg och har en maximal bredd på 320 pixlar. Länkar inom artiklar och interaktivt innehåll är färgade med en sekundär accent. Titelmärkeslänken använder också den primära accentfärgen.
Kroppen definierar ett omfattande färgschema med CSS-anpassade egenskaper för text, bakgrunder, linjer, knappar, höjdpunkter och specifika varumärkesfärger. Sidans övergripande bakgrund är inställd med en anpassad variabel.
Artikelhuvuden och kroppar har en genomskinlig bakgrund. Huvudkolumnen för interaktivt innehåll justerar sin bredd och tar bort standardmarginaler. Den första figuren och det första atomelementet har färgade nedre kanter.
Den huvudsakliga interaktiva artikelbehållaren sträcker sig över hela viewportens bredd utan horisontell rullning och använder ett specifikt rutnätsområde. På större skärmar använder layouten ett flerkolumnsrutnät. Artikelkroppen upptar hela rutnätet och döljer overflow.
Ett kantelement är dolt, och huvudinnehållsområdet har ingen toppmarginal. För mycket breda skärmar definierar rutnätet en central kolumn på 1300 px med en vänstermarginal för icke-kroppselement. Denna centrala kolumn och marginal justeras vid olika brytpunkter för olika skärmbredder.
Icke-kroppselement i det interaktiva rutnätet har en högre staplingsordning och får sidopadding på större skärmar. På Android och iOS har artikelkroppen ingen padding, och sidhuvudet är positionerat absolut med en genomskinlig bakgrund. Författarbyline-text och länkar inom metasektionen bibehåller också transparens på dessa mobila plattformar.
Byline, författarlänkar och titelmärken är inställda på att använda den sekundära accentfärgen. Meta-byline-komponenten har en vänstermarginal på 10 px. Författarlänkar har en nedre marginal på 13 px. Titel- och rubriksektionerna har en topppadding på 5 vh, med titeln som också har en bottenpadding på 4 px. Linjeelementet och metasektionskanter är dolda på Android och iOS.
På Android och iOS har publiceringsdatumet en topppadding på 4 px. Sociala medie-knappar i metasektionen använder den sekundära accentfärgen för text och kanter, och deras ikoner är ifyllda med samma färg. Ikoner i innehållsmetabehållaren är dolda. Alla icke-kroppselement i det interaktiva rutnätet har vänster- och högerpadding på 10 px. Sociala medie-sektionen i metaområdet har ingen övre kant, och kommentarssektionen är dold. Delningsknappen ändras till den sekundära accentfärgen med en vit ikon vid hovring.
Den första atomelementfiguren sträcker sig över alla kolumner med en nedre marginal på 12 px. Immersiva elementfigurer är full bredd, upp till 1260 px, utan sidomarginaler, och sträcker sig från den näst sista till den andra kolumnen.
På små skärmar (under 30 em) har alla icke-immersiva element i huvudkolumnen 10 px sidomarginaler. På medelstora skärmar (46,25 em och uppåt) har den huvudsakliga interaktiva kolumnen en relativ position med en vertikal linje till vänster. Icke-atomelement placeras i kroppens rutnätskolumn.
För olika skärmstorlekar använder layouten specifika rutnätsmallar:
- Mellan 46,25 em och 61,24 em: en trekolumnslayout.
- Mellan 61,25 em och 71,24 em: en fyrkolumnslayout.
- Mellan 71,25 em och 81,24 em: en femkolumnslayout med vänster- och högerkolumner.
- Över 81,25 em: en femkolumnslayout med bredare kolumner.
Titeln är positionerad 20 dvh från toppen, full bredd, utan toppmarginal. På skärmar mellan 20 em och 46,24 em flyttas den till 10 dvh. Titelmärken har ingen kant.
Rubriken är också vid 20 dvh, full bredd, med en mörk bakgrund, padding och en övre kant. På medelstora skärmar flyttas den till 10 dvh.
Standfirst är positionerad vid 20 dvh, full bredd, med en mörk bakgrund och padding. På medelstora skärmar flyttas den till 10 dvh.
Det interaktiva rutnätet definierar områden för rubrik, standfirst, media, linjer, meta och kropp.
Metasektionen är full bredd, positionerad vid 20 dvh med en mörk bakgrund och ett z-index på 5. På medelstora skärmar flyttas den till 10 dvh. Datumraden har en vänstermarginal på 10 px.
Svelte-scroller-outer visas som ett block med relativ positionering.
CSS-koden definierar stilar för en scroller-komponent och inkluderar font-face-regler för teckensnittsfamiljen Guardian Headline Full. Scrollern har blockvisning, relativ positionering och full bredd. Dess förgrund är inställd på ett högre z-index och rensar flytar, medan bakgrundsbehållaren är absolut positionerad utan pekarehändelser och optimerad för transformförändringar. Font-face-reglerna laddar olika vikter och stilar för teckensnittet Guardian Headline Full från Guardians servrar, specificerar lätt, normal, medium och halvfet varianter i både normal och kursiv stil, med stöd för WOFF2-, WOFF- och TTF-format.
Guardian använder anpassade teckensnitt för sina rubriker och titelbitar. Dessa teckensnitt laddas från deras servrar i flera format som WOFF2, WOFF och TTF för att säkerställa bred webbläsarkompatibilitet. Varje teckensnittsvariation, såsom fet eller kursiv, definieras med specifika vikter och stilar.
Sidan inkluderar en laddningsöverlägg med en snurrande animation som visas under datahämtning. Huvudinnehållsområdet har en helskärmskarta och en rullande narrativ sektion. Textrutor inom denna sektion har en formaterad bakgrund, kant och typografi med Guardians Egyptian Web-teckensnitt för brödtext. Vissa textspänn är markerade med en färgad bakgrund för betoning.
CSS definierar en kantradie på 12 pixlar och laddar teckensnittsfamiljen Guardian Headline Full. Detta inkluderar flera teckensnittsfiler i olika vikter och stilar (lätt, normal, medium, halvfet och deras kursiva versioner) från Guardians servrar. Filerna tillhandahålls i WOFF2-, WOFF- och TrueType-format för att säkerställa bred webbläsarkompatibilitet.
Varje dag under 2024 brände skogsbränder över 360 kvadratkilometer skog – ett område större än Malta. Vid årets slut hade mer än 134 000 kvadratkilometer förstörts av lågor, en total som är större än Englands yta. Under de senaste 24 åren har skogsbränder förstört 1,5
Världen förlorar ett skogsområde storleken av Mongoliet till eld, en takt som experter varnar är ohållbar. Medan skogsbränder är en naturlig del av ekosystem, har deras omfattning, frekvens och intensitet i kolrik skog ökat kraftigt under de senaste decennierna.
Forskning från World Resources Institute (WRI) visar att bränder nu förstör mer än dubbelt så mycket trädtäckning som för tjugo år sedan. Under 2024 brann 135 000 kvadratkilometer skog, vilket gör det till det mest extrema skogsbrändsåret någonsin.
Intressant nog indikerar forskning från University of Tasmania att bränder i andra landskap inte har ökat på samma sätt. Det totala brända området globalt har faktiskt minskat i decennier, delvis på grund av expanderande jordbruk i Afrika som bromsar spridningen av bränder. Dock har skogar blivit en ny hotspot för bränder.
Ökningen av skogsbränder är tydlig. Fyra av de fem värsta åren i historien har inträffat sedan 2020. WRI-forskning framhäver att 2024 var första gången stora bränder rasade samtidigt över både tropisk, fuktig skog som Amazonas och boreal skog, såsom i Kanada.
Länder som Brasilien, Bolivia, Ryssland, Australien och Kanada har alla utstått några av sina värsta brändsäsonger under senare år. Värmeböljor, förstärkta av fossila bränsleutsläpp, driver risken för extrema bränder högre.
Till exempel har Ryssland utstått tre av sina värsta brändsäsonger sedan 2020, med
