Ten kod CSS definiuje niestandardową rodzinę czcionek o nazwie "Guardian Headline Full" z wieloma wagami i stylami czcionek. Zawiera wagi lekką, regularną, średnią i półgrubą, każdą w stylach normalnym i kursywie. Pliki czcionek są dostarczane w formatach WOFF2, WOFF i TrueType, hostowanych na serwerach Guardiana.@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;
}Podsumowanie kontenera ma lewy margines 10 pikseli i używa określonego koloru akcentu dla tekstu. Elementy z atrybutem data-print-layout ustawionym na "hide" nie są wyświetlane.
Akapity i główne nagłówki w treści interaktywnej i artykułach używają niestandardowych kolorów tekstu. Rozmiar czcionki głównego nagłówka jest ustawiony na 3 rem, dostosowując się do 2,5 rem na ekranach średniej wielkości. Nagłówki drugiego poziomu są stylizowane z lekką wagą czcionki, rozmiarem 32 pikseli i niestandardowym kolorem tekstu.
Tekst wprowadzający w treści interaktywnej używa podstawowego koloru akcentu i ma maksymalną szerokość 320 pikseli. Linki w artykułach i treści interaktywnej są kolorowane drugorzędnym akcentem. Link etykiety tytułu również używa podstawowego koloru akcentu.
Ciało strony definiuje kompleksową paletę kolorów za pomocą niestandardowych właściwości CSS dla tekstu, tła, linii, przycisków, wyróżnień i określonych kolorów marki. Ogólne tło strony jest ustawione za pomocą niestandardowej zmiennej.
Nagłówki i treści artykułów mają przezroczyste tło. Główna kolumna dla treści interaktywnej dostosowuje swoją szerokość i usuwa domyślne marginesy. Pierwsza figura i pierwszy element atomowy mają kolorowe dolne obramowania.
Główny kontener artykułu interaktywnego rozciąga się na pełną szerokość okna bez przewijania poziomego i używa określonego obszaru siatki. Na większych ekranach układ wykorzystuje wielokolumnową siatkę. Treść artykułu zajmuje całą siatkę i ukrywa przepełnienie.
Element obramowania jest ukryty, a główny obszar treści nie ma górnego marginesu. Dla bardzo szerokich ekranów siatka definiuje centralną kolumnę o szerokości 1300px z lewym marginesem dla elementów niebędących częścią treści. Ta centralna kolumna i margines dostosowują się w różnych punktach przerwania dla różnych szerokości ekranu.
Elementy niebędące częścią treści w siatce interaktywnej mają wyższy porządek układania i otrzymują boczne wypełnienie na większych ekranach. Na Androidzie i iOS treść artykułu nie ma wypełnienia, a nagłówek jest pozycjonowany absolutnie z przezroczystym tłem. Tekst autora i linki w sekcji metadanych również zachowują przezroczystość na tych platformach mobilnych.Byline, linki autorskie i etykiety tytułów są ustawione na używanie drugorzędnego koloru akcentu. Komponent meta-byline ma lewy margines 10px. Linki autorskie mają dolny margines 13px. Sekcje tytułu i nagłówka mają górne wypełnienie 5vh, a tytuł ma również dolne wypełnienie 4px. Element linii i obramowania sekcji metadanych są ukryte na Androidzie i iOS.
Na Androidzie i iOS opublikowana data ma górne wypełnienie 4px. Przyciski mediów społecznościowych w sekcji metadanych używają drugorzędnego koloru akcentu dla tekstu i obramowań, a ich ikony są wypełnione tym samym kolorem. Ikony w kontenerze metadanych treści są ukryte. Wszystkie elementy niebędące częścią treści w siatce interaktywnej mają lewe i prawe wypełnienie 10px. Sekcja mediów społecznościowych w obszarze metadanych nie ma górnego obramowania, a sekcja komentarzy jest ukryta. Przycisk udostępniania zmienia się na drugorzędny kolor akcentu z białą ikoną po najechaniu.
Pierwsza figura elementu atomowego rozciąga się na wszystkie kolumny z dolnym marginesem 12px. Figury elementów immersyjnych mają pełną szerokość, do 1260px, bez bocznych marginesów i rozciągają się od przedostatniej do drugiej kolumny.
Na małych ekranach (poniżej 30em) wszystkie elementy nieimmersyjne w głównej kolumnie mają boczne marginesy 10px. Na średnich ekranach (46,25em i więcej) główna kolumna interaktywna ma pozycję względną z pionową linią po lewej stronie. Elementy nieatomowe są umieszczane w kolumnie siatki treści.
Dla różnych rozmiarów ekranów układ używa określonych szablonów siatki:
- Między 46,25em a 61,24em: układ trójkolumnowy.
- Między 61,25em a 71,24em: układ czterokolumnowy.
- Między 71,25em a 81,24em: układ pięciokolumnowy z lewą i prawą kolumną.
- Powyżej 81,25em: układ pięciokolumnowy z szerszymi kolumnami.
Tytuł jest pozycjonowany 20dvh od góry, pełnej szerokości, bez górnego marginesu. Na ekranach między 20em a 46,24em przesuwa się do 10dvh. Etykiety tytułów nie mają obramowania.
Nagłówek również znajduje się na 20dvh, pełnej szerokości, z ciemnym tłem, wypełnieniem i górnym obramowaniem. Na średnich ekranach przesuwa się do 10dvh.
Standfirst jest pozycjonowany na 20dvh, pełnej szerokości, z ciemnym tłem i wypełnieniem. Na średnich ekranach przesuwa się do 10dvh.
Siatka interaktywna definiuje obszary dla nagłówka, standfirst, mediów, linii, metadanych i treści.
Sekcja metadanych ma pełną szerokość, jest pozycjonowana na 20dvh z ciemnym tłem i indeksem z równa 5. Na średnich ekranach przesuwa się do 10dvh. Dateline ma lewy margines 10px.
Svelte-scroller-outer jest wyświetlany jako blok z pozycjonowaniem względnym.Kod CSS definiuje style dla komponentu przewijania i zawiera reguły @font-face dla rodziny czcionek Guardian Headline Full. Przewijak ma wyświetlanie blokowe, pozycjonowanie względne i pełną szerokość. Jego pierwszy plan jest ustawiony na wyższy indeks z i czyści floaty, podczas gdy kontener tła jest pozycjonowany absolutnie bez zdarzeń wskaźnika i zoptymalizowany pod kątem zmian transformacji. Reguły @font-face ładują różne wagi i style czcionki Guardian Headline Full z serwerów Guardiana, określając lekkie, regularne, średnie i półgrube warianty w stylach normalnym i kursywie, z obsługą formatów WOFF2, WOFF i TTF.Guardian używa niestandardowych czcionek do swoich nagłówków i tytułów. Te czcionki są ładowane z ich serwerów w wielu formatach, takich jak WOFF2, WOFF i TTF, aby zapewnić szeroką kompatybilność z przeglądarkami. Każda odmiana czcionki, taka jak pogrubiona lub kursywa, jest zdefiniowana z określonymi wagami i stylami.
Strona zawiera nakładkę ładowania z animacją obracania, która pojawia się podczas pobierania danych. Główny obszar treści zawiera pełnoekranową mapę i sekcję narracji z przewijaniem. Pola tekstowe w tej sekcji mają stylizowane tło, obramowanie i typografię wykorzystującą czcionkę Guardian Egyptian Web do tekstu głównego. Niektóre fragmenty tekstu są podświetlone kolorowym tłem dla podkreślenia.CSS definiuje promień obramowania 12 pikseli i ładuje rodzinę czcionek Guardian Headline Full. Obejmuje to kilka plików czcionek o różnych wagach i stylach (lekkie, regularne, średnie, półgrube i ich wersje kursywne) z serwerów Guardiana. Pliki są dostarczane w formatach WOFF2, WOFF i TrueType, aby zapewnić szeroką kompatybilność z przeglądarkami.Każdego dnia w 2024 roku pożary lasów spaliły ponad 360 kilometrów kwadratowych lasu – obszar większy niż Malta. Do końca roku ponad 134 000 kilometrów kwadratowych zostało pochłoniętych przez płomienie, łącznie więcej niż powierzchnia Anglii. W ciągu ostatnich 24 lat pożary zniszczyły 1,5Świat traci obszar lasu wielkości Mongolii z powodu pożarów, a eksperci ostrzegają, że to tempo jest niezrównoważone. Chociaż pożary są naturalną częścią ekosystemów, ich skala, częstotliwość i intensywność w lasach bogatych w węgiel gwałtownie wzrosły w ostatnich dziesięcioleciach.
Badania World Resources Institute (WRI) pokazują, że pożary niszczą obecnie ponad dwa razy więcej pokrywy drzewnej niż dwadzieścia lat temu. Tylko w 2024 roku spłonęło 135 000 kilometrów kwadratowych lasu, co czyni go najbardziej ekstremalnym rokiem pod względem pożarów w historii.
Co ciekawe, badania University of Tasmania wskazują, że pożary w innych krajobrazach nie zwiększyły się w ten sam sposób. Całkowita powierzchnia spalona globalnie faktycznie spada od dziesięcioleci, częściowo z powodu rozszerzania się farm w Afryce, co spow
