Tento CSS kód definuje vlastní rodinu písem s názvem "Guardian Headline Full" s více váhami a styly. Zahrnuje lehkou, běžnou, střední a polotučnou váhu, každou v normálním i kurzívním stylu. Soubory písem jsou poskytovány ve formátech WOFF2, WOFF a TrueType, hostované na serverech Guardianu.
@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;
}
Shrnutí kontejneru má levý okraj 10 pixelů a používá specifickou akcentní barvu pro svůj text. Prvky s atributem data-print-layout nastaveným na "hide" se nezobrazují.
Odstavce a hlavní nadpisy v interaktivním obsahu a článcích používají vlastní barvy textu. Velikost písma hlavního nadpisu je nastavena na 3 rem, upravuje se na 2,5 rem na středně velkých obrazovkách. Sekundární nadpisy jsou stylovány s lehkou váhou písma, velikostí 32 pixelů a vlastní barvou textu.
Úvodní text v interaktivním obsahu používá primární akcentní barvu a má maximální šířku 320 pixelů. Odkazy v článcích a interaktivním obsahu jsou obarveny sekundárním akcentem. Odkaz na štítek titulu také používá primární akcentní barvu.
Tělo definuje komplexní barevné schéma pomocí vlastních vlastností CSS pro text, pozadí, čáry, tlačítka, zvýraznění a specifické barvy značky. Celkové pozadí stránky je nastaveno pomocí vlastní proměnné.
Hlavičky a těla článků mají průhledné pozadí. Hlavní sloupec pro interaktivní obsah upravuje svou šířku a odstraňuje výchozí okraje. První obrázek a první atomový prvek mají barevné spodní ohraničení.
Hlavní kontejner interaktivního článku pokrývá celou šířku okna prohlížeče bez horizontálního posouvání a používá specifickou oblast mřížky. Na větších obrazovkách rozvržení používá více sloupcovou mřížku. Tělo článku zabírá celou mřížku a skrývá přetečení.
Ohraničovací prvek je skrytý a hlavní obsahová oblast nemá horní okraj. Pro velmi široké obrazovky mřížka definuje centrální sloupec 1300px s levým okrajem pro prvky mimo tělo. Tento centrální sloupec a okraj se upravují v různých zlomových bodech pro různé šířky obrazovky.
Prvky mimo tělo v interaktivní mřížce mají vyšší pořadí vrstvení a na větších obrazovkách dostávají boční odsazení. Na Androidu a iOS nemá tělo článku žádné odsazení a hlavička je absolutně pozicována s průhledným pozadím. Text autorovy tiráže a odkazy v meta sekci také zachovávají průhlednost na těchto mobilních platformách.
Tiráž, odkazy autorů a štítky titulů jsou nastaveny na použití sekundární akcentní barvy. Komponenta meta-byline má levý okraj 10px. Odkazy autorů mají spodní okraj 13px. Sekce titulu a hlavního nadpisu mají horní odsazení 5vh, přičemž titul má také spodní odsazení 4px. Prvek lines a ohraničení meta sekce jsou skryty na Androidu a iOS.
Na Androidu a iOS má datum publikace horní odsazení 4px. Tlačítka sociálních médií v meta sekci používají sekundární akcentní barvu pro text a ohraničení a jejich ikony jsou vyplněny stejnou barvou. Ikony v kontejneru meta obsahu jsou skryty. Všechny prvky mimo tělo v interaktivní mřížce mají levé a pravé odsazení 10px. Sekce sociálních médií v meta oblasti nemá horní ohraničení a sekce komentářů je skryta. Tlačítko sdílení se při najetí myší změní na sekundární akcentní barvu s bílou ikonou.
Obrázek prvního atomového prvku pokrývá všechny sloupce se spodním okrajem 12px. Obrázky ponořených prvků jsou plné šířky, až do 1260px, bez bočních okrajů a sahají od předposledního do druhého sloupce.
Na malých obrazovkách (pod 30em) mají všechny neponořené prvky v hlavním sloupci boční okraje 10px. Na středních obrazovkách (46,25em a výše) má hlavní interaktivní sloupec relativní pozici s vertikální čárou vlevo. Neatomové prvky jsou umístěny ve sloupci mřížky těla.
Pro různé velikosti obrazovek rozvržení používá specifické šablony mřížky:
- Mezi 46,25em a 61,24em: rozvržení se třemi sloupci.
- Mezi 61,25em a 71,24em: rozvržení se čtyřmi sloupci.
- Mezi 71,25em a 81,24em: rozvržení s pěti sloupci s levým a pravým sloupcem.
- Nad 81,25em: rozvržení s pěti sloupci se širšími sloupci.
Titul je pozicován 20dvh odshora, plné šířky, bez horního okraje. Na obrazovkách mezi 20em a 46,24em se přesouvá na 10dvh. Štítky titulů nemají ohraničení.
Hlavní nadpis je také na 20dvh, plné šířky, s tmavým pozadím, odsazením a horním ohraničením. Na středních obrazovkách se přesouvá na 10dvh.
Standfirst je pozicován na 20dvh, plné šířky, s tmavým pozadím a odsazením. Na středních obrazovkách se přesouvá na 10dvh.
Interaktivní mřížka definuje oblasti pro hlavní nadpis, standfirst, média, čáry, meta a tělo.
Meta sekce je plné šířky, pozicována na 20dvh s tmavým pozadím a z-indexem 5. Na středních obrazovkách se přesouvá na 10dvh. Datum má levý okraj 10px.
Svelte-scroller-outer je zobrazen jako blok s relativním pozicováním.
CSS kód definuje styly pro komponentu scroller a zahrnuje pravidla font-face pro rodinu písem Guardian Headline Full. Scroller má blokové zobrazení, relativní pozicování a plnou šířku. Jeho popředí je nastaveno na vyšší z-index a čistí plováky, zatímco pozadí kontejneru je absolutně pozicováno bez událostí ukazatele a optimalizováno pro změny transformace. Pravidla font-face načítají různé váhy a styly písma Guardian Headline Full ze serverů Guardianu, specifikují lehké, běžné, střední a polotučné varianty v normálním i kurzívním stylu, s podporou formátů WOFF2, WOFF a TTF.
Guardian používá vlastní písma pro své hlavní nadpisy a titulky. Tato písma jsou načítána z jejich serverů ve více formátech, jako jsou WOFF2, WOFF a TTF, aby byla zajištěna široká kompatibilita s prohlížeči. Každá variace písma, jako je tučné nebo kurzíva, je definována specifickými váhami a styly.
Stránka obsahuje překryvné načítání s animací rotace, která se objevuje během načítání dat. Hlavní obsahová oblast obsahuje celoobrazovkovou mapu a posouvací sekci s vyprávěním. Textová pole v této sekci mají stylované pozadí, ohraničení a typografii s použitím Guardianova písma Egyptian Web pro text těla. Některé textové rozsahy jsou zvýrazněny barevným pozadím pro důraz.
CSS definuje poloměr ohraničení 12 pixelů a načítá rodinu písem Guardian Headline Full. To zahrnuje několik souborů písem v různých váhách a stylech (lehké, běžné, střední, polotučné a jejich kurzívní verze) ze serverů Guardianu. Soubory jsou poskytovány ve formátech WOFF2, WOFF a TrueType, aby byla zajištěna široká kompatibilita s prohlížeči.
Každý den v roce 2024 lesní požáry spálily přes 360 čtverečních kilometrů lesa – oblast větší než Malta. Do konce roku bylo plameny zničeno více než 134 000 čtverečních kilometrů, celkem více než rozloha Anglie. Za posledních 24 let požáry zničily 1,5
Svět ztrácí oblast lesa velikosti Mongolska kvůli ohni, což je míra, kterou experti varují, že je neudržitelná. Zatímco lesní požáry jsou přirozenou součástí ekosystémů, jejich rozsah, frekvence a intenzita v lesech bohatých na uhlík v posledních desetiletích prudce vzrostly.
Výzkum Světového institutu zdrojů (WRI) ukazuje, že požáry nyní ničí více než dvakrát tolik stromového pokryvu než před dvaceti lety. Jen v roce 2024 shořelo 135 000 čtverečních kilometrů lesa, což z něj činí nejextrémnější rok lesních požárů v historii.
Zajímavé je, že výzkum Univerzity v Tasmánii naznačuje, že požáry v jiných typech krajiny se nezvýšily stejným způsobem. Celková spálená plocha na světě ve skutečnosti po desetiletí klesá, částečně kvůli rozšiřování farem v Africe, které zpomalují šíření požárů. Lesy se
