Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er umfasst leichte, reguläre, mittlere und halbfette Gewichte, jeweils in normalen und kursiven Stilen. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType bereitgestellt, die auf den Servern des Guardian gehostet werden.@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;
}Die Container-Zusammenfassung hat einen linken Rand von 10 Pixeln und verwendet eine bestimmte Akzentfarbe für ihren Text. Elemente mit dem Attribut data-print-layout="hide" werden nicht angezeigt.
Absätze und Hauptüberschriften innerhalb von interaktiven Inhalten und Artikeln verwenden benutzerdefinierte Textfarben. Die Schriftgröße der Hauptüberschrift ist auf 3 rem festgelegt und passt sich auf mittelgroßen Bildschirmen auf 2,5 rem an. Sekundäre Überschriften sind mit einem leichten Schriftgewicht, einer Größe von 32 Pixeln und einer benutzerdefinierten Textfarbe gestaltet.
Der Einleitungstext in interaktiven Inhalten verwendet eine primäre Akzentfarbe und hat eine maximale Breite von 320 Pixeln. Links innerhalb von Artikeln und interaktiven Inhalten sind mit einer sekundären Akzentfarbe eingefärbt. Der Titel-Label-Link verwendet ebenfalls die primäre Akzentfarbe.
Der Body definiert ein umfassendes Farbschema mithilfe von CSS-Custom-Properties für Text, Hintergründe, Linien, Schaltflächen, Hervorhebungen und bestimmte Markenfarben. Der gesamte Seitenhintergrund wird mit einer benutzerdefinierten Variable festgelegt.
Artikel-Header und -Body haben einen transparenten Hintergrund. Die Hauptspalte für interaktive Inhalte passt ihre Breite an und entfernt Standardränder. Die erste Abbildung und das erste Atom-Element haben farbige untere Ränder.
Der Hauptcontainer für interaktive Artikel erstreckt sich über die gesamte Viewport-Breite ohne horizontales Scrollen und verwendet einen bestimmten Grid-Bereich. Auf größeren Bildschirmen verwendet das Layout ein mehrspaltiges Grid. Der Artikel-Body nimmt das gesamte Grid ein und versteckt Überlauf.
Ein Randelement ist ausgeblendet, und der Hauptinhaltsbereich hat keinen oberen Rand. Für sehr breite Bildschirme definiert das Grid eine zentrale Spalte von 1300px mit einem linken Rand für Nicht-Body-Elemente. Diese zentrale Spalte und der Rand passen sich bei verschiedenen Breakpoints für unterschiedliche Bildschirmbreiten an.
Nicht-Body-Elemente im interaktiven Grid haben eine höhere Stapelreihenfolge und erhalten auf größeren Bildschirmen seitliche Polsterung. Auf Android und iOS hat der Artikel-Body keine Polsterung, und der Header ist absolut positioniert mit transparentem Hintergrund. Autoren-Byline-Text und Links innerhalb des Meta-Bereichs behalten auf diesen mobilen Plattformen ebenfalls Transparenz bei.Die Byline, Autorenlinks und Titel-Labels sind so eingestellt, dass sie die sekundäre Akzentfarbe verwenden. Die Meta-Byline-Komponente hat einen linken Rand von 10px. Autorenlinks haben einen unteren Rand von 13px. Die Titel- und Überschriftenbereiche haben eine obere Polsterung von 5vh, wobei der Titel auch eine untere Polsterung von 4px hat. Das Linien-Element und die Meta-Bereichsränder sind auf Android und iOS ausgeblendet.
Auf Android und iOS hat das Veröffentlichungsdatum eine obere Polsterung von 4px. Social-Media-Schaltflächen im Meta-Bereich verwenden die sekundäre Akzentfarbe für Text und Ränder, und ihre Symbole sind mit derselben Farbe gefüllt. Symbole im Content-Meta-Container sind ausgeblendet. Alle Nicht-Body-Elemente im interaktiven Grid haben eine linke und rechte Polsterung von 10px. Der Social-Media-Bereich im Meta-Bereich hat keinen oberen Rand, und der Kommentarbereich ist ausgeblendet. Die Teilen-Schaltfläche ändert sich bei Hover in die sekundäre Akzentfarbe mit einem weißen Symbol.
Die erste Atom-Element-Abbildung erstreckt sich über alle Spalten mit einem unteren Rand von 12px. Immersive Element-Abbildungen sind vollständig breit, bis zu 1260px, ohne seitliche Ränder, und erstrecken sich von der vorletzten bis zur zweiten Spalte.
Auf kleinen Bildschirmen (unter 30em) haben alle nicht-immersiven Elemente in der Hauptspalte seitliche Ränder von 10px. Auf mittleren Bildschirmen (46,25em und darüber) hat die Hauptinteraktionsspalte eine relative Position mit einer vertikalen Linie links. Nicht-Atom-Elemente werden in die Body-Grid-Spalte platziert.
Für verschiedene Bildschirmgrößen verwendet das Layout spezifische Grid-Vorlagen:
- Zwischen 46,25em und 61,24em: ein Drei-Spalten-Layout.
- Zwischen 61,25em und 71,24em: ein Vier-Spalten-Layout.
- Zwischen 71,25em und 81,24em: ein Fünf-Spalten-Layout mit linken und rechten Spalten.
- Über 81,25em: ein Fünf-Spalten-Layout mit breiteren Spalten.
Der Titel ist 20dvh von oben positioniert, vollständig breit, ohne oberen Rand. Auf Bildschirmen zwischen 20em und 46,24em bewegt er sich auf 10dvh. Titel-Labels haben keinen Rand.
Die Überschrift ist ebenfalls bei 20dvh, vollständig breit, mit dunklem Hintergrund, Polsterung und einem oberen Rand. Auf mittleren Bildschirmen bewegt sie sich auf 10dvh.
Der Standfirst ist bei 20dvh positioniert, vollständig breit, mit dunklem Hintergrund und Polsterung. Auf mittleren Bildschirmen bewegt er sich auf 10dvh.
Das interaktive Grid definiert Bereiche für Überschrift, Standfirst, Medien, Linien, Meta und Body.
Der Meta-Bereich ist vollständig breit, bei 20dvh positioniert mit dunklem Hintergrund und einem z-index von 5. Auf mittleren Bildschirmen bewegt er sich auf 10dvh. Die Datumszeile hat einen linken Rand von 10px.
Der svelte-scroller-outer wird als Block mit relativer Positionierung angezeigt.Der CSS-Code definiert Stile für eine Scroller-Komponente und enthält @font-face-Regeln für die Schriftfamilie Guardian Headline Full. Der Scroller hat eine Block-Anzeige, relative Positionierung und volle Breite. Sein Vordergrund ist auf einen höheren z-index gesetzt und klart Floats, während der Hintergrund-Container absolut positioniert ist, ohne Pointer-Events und für Transform-Änderungen optimiert ist. Die @font-face-Regeln laden verschiedene Gewichte und Stile der Guardian Headline Full-Schrift von den Servern des Guardian, wobei leichte, reguläre, mittlere und halbfette Varianten in normalen und kursiven Stilen angegeben werden, mit Unterstützung für WOFF2-, WOFF- und TTF-Formate.Der Guardian verwendet benutzerdefinierte Schriftarten für seine Überschriften und Titelstücke. Diese Schriftarten werden von seinen Servern in mehreren Formaten wie WOFF2, WOFF und TTF geladen, um breite Browserkompatibilität zu gewährleisten. Jede Schriftvariation, wie fett oder kursiv, ist mit spezifischen Gewichten und Stilen definiert.
Die Seite enthält ein Lade-Overlay mit einer sich drehenden Animation, das während des Datenabrufs erscheint. Der Hauptinhaltsbereich verfügt über eine Vollbildkarte und einen scrollenden Erzählabschnitt. Textboxen innerhalb dieses Abschnitts haben einen gestalteten Hintergrund, Rand und Typografie unter Verwendung der Guardian Egyptian Web-Schrift für Fließtext. Bestimmte Textspannen sind mit einem farbigen Hintergrund zur Hervorhebung versehen.Der CSS definiert einen Randradius von 12 Pixeln und lädt die Schriftfamilie Guardian Headline Full. Dies umfasst mehrere Schriftdateien in verschiedenen Gewichten und Stilen (leicht, regulär, mittel, halbfett und ihre kursiven Versionen) von den Servern des Guardian. Die Dateien werden in den Formaten WOFF2, WOFF und TrueType bereitgestellt, um breite Browserkompatibilität zu gewährleisten.Jeden Tag im Jahr 2024 verbrannten Waldbrände über 360 Quadratkilometer Wald – eine Fläche größer als Malta. Bis zum Jahresende waren mehr als 134.000 Quadratkilometer von Flammen verzehrt worden, eine Gesamtfläche größer als England. In den letzten 24 Jahren haben Waldbrände 1,5Die Welt verliert eine Waldfläche in der Größe der Mongolei durch Feuer, ein Tempo, das Experten als nicht nachhaltig warnen. Während Waldbrände ein natürlicher Teil von Ökosystemen sind, haben ihr Ausmaß, ihre Häufigkeit und Intensität in kohlenstoffreichen Wäldern in den letzten Jahrzehnten stark zugenommen.
Forschung des World Resources Institute (WRI) zeigt, dass Brände heute mehr als doppelt so viel Baumbedeckung zerstören wie vor zwanzig Jahren. Allein im Jahr 2024 verbrannten 135.000 Quadratkilometer Wald, was es zum extremsten Waldbrandjahr seit Aufzeichnungsbeginn macht.
Interessanterweise zeigt Forschung der Universität von Tasmanien, dass Brände in anderen Landschaften nicht in gleicher Weise zugenommen haben. Die global verbrannte Gesamtfläche ist seit Jahrzehnten sogar zurückgegangen, teilweise aufgrund sich ausdehnender Farmen in Afrika, die die Ausbreitung von Bränden verlangsamen. Allerdings sind Wälder zu einem neuen Hotspot für Brände geworden.
Der Anstieg der Waldbrände ist deutlich. Vier der fünf schlimmsten Jahre seit Aufzeichnungsbeginn sind seit 2020 aufgetreten. WRI-Forschung hebt hervor, dass 2024 das erste Jahr war, in dem große Brände gleichzeitig in tropischen, feuchten Wäldern wie dem Amazonas und borealen Wäldern, wie denen in Kanada, wüteten.
Länder wie Brasilien, Bolivien, Russland, Australien und Kanada haben in den letzten Jahren einige ihrer schlimmsten Feuersaisonen erlebt. Hitzewellen, verstärkt durch fossile Brennstoffverschmutzung, treiben das Risiko extremer Brände in die Höhe.
Zum Beispiel hat Russland seit 2020 drei seiner schlimmsten Feuersaisonen erlitten, wobei 2021 die schwerste war. Etwa 45.000 Quadratkilometer Wald brannten, hauptsächlich in Sibirien und dem Fernen Osten. Die Brände erstreckten sich so weit nach Norden, dass sie Permafrostregionen innerhalb des Polarkreises erreichten. Im Jahr 2021 zeichneten Satelliten den nördlichsten Waldbrand aller Zeiten auf.
