Ce code CSS définit une famille de polices personnalisée appelée "Guardian Headline Full" avec plusieurs poids et styles de police. Il inclut les poids light, regular, medium et semibold, chacun dans les styles normal et italique. Les fichiers de police sont fournis aux formats WOFF2, WOFF et TrueType, hébergés sur les serveurs du Guardian.@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;
}Le résumé du conteneur a une marge gauche de 10 pixels et utilise une couleur d'accent spécifique pour son texte. Les éléments dont l'attribut data-print-layout est défini sur "hide" ne sont pas affichés.
Les paragraphes et les titres principaux dans le contenu interactif et les articles utilisent des couleurs de texte personnalisées. La taille de police du titre principal est définie sur 3 rem, s'ajustant à 2,5 rem sur les écrans de taille moyenne. Les titres secondaires sont stylisés avec un poids de police léger, une taille de 32 pixels et une couleur de texte personnalisée.
Le texte introductif dans le contenu interactif utilise une couleur d'accent primaire et a une largeur maximale de 320 pixels. Les liens dans les articles et le contenu interactif sont colorés avec un accent secondaire. Le lien du label du titre utilise également la couleur d'accent primaire.
Le corps définit un schéma de couleurs complet en utilisant des propriétés personnalisées CSS pour le texte, les arrière-plans, les lignes, les boutons, les surbrillances et des couleurs de marque spécifiques. L'arrière-plan global de la page est défini avec une variable personnalisée.
Les en-têtes et les corps d'articles ont un arrière-plan transparent. La colonne principale pour le contenu interactif ajuste sa largeur et supprime les marges par défaut. La première figure et le premier élément atom ont des bordures inférieures colorées.
Le conteneur principal de l'article interactif s'étend sur toute la largeur de la fenêtre sans défilement horizontal et utilise une zone de grille spécifique. Sur les écrans plus larges, la mise en page utilise une grille à plusieurs colonnes. Le corps de l'article occupe toute la grille et masque le débordement.
Un élément de bordure est masqué, et la zone de contenu principal n'a pas de marge supérieure. Pour les écrans très larges, la grille définit une colonne centrale de 1300px avec une marge gauche pour les éléments non-corps. Cette colonne centrale et cette marge s'ajustent à différents points de rupture pour différentes largeurs d'écran.
Les éléments non-corps dans la grille interactive ont un ordre d'empilement plus élevé et reçoivent un remplissage latéral sur les écrans plus larges. Sur Android et iOS, le corps de l'article n'a pas de remplissage, et l'en-tête est positionné de manière absolue avec un arrière-plan transparent. Le texte de la signature d'auteur et les liens dans la section meta maintiennent également la transparence sur ces plateformes mobiles.La signature, les liens d'auteur et les labels de titre sont configurés pour utiliser la couleur d'accent secondaire. Le composant meta-byline a une marge gauche de 10px. Les liens d'auteur ont une marge inférieure de 13px. Les sections de titre et de manchette ont un remplissage supérieur de 5vh, le titre ayant également un remplissage inférieur de 4px. L'élément lines et les bordures de la section meta sont masqués sur Android et iOS.
Sur Android et iOS, la date de publication a un remplissage supérieur de 4px. Les boutons de médias sociaux dans la section meta utilisent la couleur d'accent secondaire pour le texte et les bordures, et leurs icônes sont remplies de la même couleur. Les icônes dans le conteneur meta du contenu sont masquées. Tous les éléments non-corps dans la grille interactive ont un remplissage gauche et droit de 10px. La section des médias sociaux dans la zone meta n'a pas de bordure supérieure, et la section des commentaires est masquée. Le bouton de partage change pour la couleur d'accent secondaire avec une icône blanche au survol.
La première figure d'élément atom s'étend sur toutes les colonnes avec une marge inférieure de 12px. Les figures d'éléments immersifs ont une largeur complète, jusqu'à 1260px, sans marges latérales, et s'étendent de l'avant-dernière à la deuxième colonne.
Sur les petits écrans (moins de 30em), tous les éléments non-immersifs dans la colonne principale ont des marges latérales de 10px. Sur les écrans moyens (46,25em et plus), la colonne interactive principale a une position relative avec une ligne verticale à gauche. Les éléments non-atom sont placés dans la colonne de grille du corps.
Pour différentes tailles d'écran, la mise en page utilise des modèles de grille spécifiques :
- Entre 46,25em et 61,24em : une mise en page à trois colonnes.
- Entre 61,25em et 71,24em : une mise en page à quatre colonnes.
- Entre 71,25em et 81,24em : une mise en page à cinq colonnes avec des colonnes gauche et droite.
- Au-dessus de 81,25em : une mise en page à cinq colonnes avec des colonnes plus larges.
Le titre est positionné à 20dvh du haut, en pleine largeur, sans marge supérieure. Sur les écrans entre 20em et 46,24em, il passe à 10dvh. Les labels de titre n'ont pas de bordure.
La manchette est également à 20dvh, en pleine largeur, avec un arrière-plan sombre, un remplissage et une bordure supérieure. Sur les écrans moyens, elle passe à 10dvh.
Le standfirst est positionné à 20dvh, en pleine largeur, avec un arrière-plan sombre et un remplissage. Sur les écrans moyens, il passe à 10dvh.
La grille interactive définit des zones pour la manchette, le standfirst, les médias, les lignes, la meta et le corps.
La section meta est en pleine largeur, positionnée à 20dvh avec un arrière-plan sombre et un z-index de 5. Sur les écrans moyens, elle passe à 10dvh. La dateline a une marge gauche de 10px.
Le svelte-scroller-outer est affiché en bloc avec un positionnement relatif.Le code CSS définit les styles pour un composant de défilement et inclut des règles @font-face pour la famille de polices Guardian Headline Full. Le défileur a un affichage en bloc, un positionnement relatif et une largeur complète. Son premier plan est défini sur un z-index plus élevé et efface les flottants, tandis que le conteneur d'arrière-plan est positionné de manière absolue sans événements de pointeur et optimisé pour les changements de transformation. Les règles @font-face chargent différents poids et styles de la police Guardian Headline Full depuis les serveurs du Guardian, spécifiant les variantes light, regular, medium et semibold en styles normal et italique, avec support des formats WOFF2, WOFF et TTF.Le Guardian utilise des polices personnalisées pour ses manchettes et ses titres. Ces polices sont chargées depuis ses serveurs dans plusieurs formats comme WOFF2, WOFF et TTF pour assurer une large compatibilité des navigateurs. Chaque variation de police, telle que bold ou italic, est définie avec des poids et styles spécifiques.
La page inclut un overlay de chargement avec une animation de rotation qui apparaît pendant la récupération des données. La zone de contenu principal présente une carte plein écran et une section narrative défilante. Les boîtes de texte dans cette section ont un arrière-plan stylisé, une bordure et une typographie utilisant la police Egyptian Web du Guardian pour le texte principal. Certaines étendues de texte sont mises en évidence avec un arrière-plan coloré pour l'accentuation.Le CSS définit un rayon de bordure de 12 pixels et charge la famille de polices Guardian Headline Full. Cela inclut plusieurs fichiers de police dans différents poids et styles (light, regular, medium, semibold et leurs versions italiques) depuis les serveurs du Guardian. Les fichiers sont fournis aux formats WOFF2, WOFF et TrueType pour assurer une large compatibilité des navigateurs.Chaque jour en 2024, les incendies de forêt ont brûlé plus de 360 kilomètres carrés de forêt—une superficie plus grande que Malte. D'ici la fin de l'année, plus de 134 000 kilomètres carrés avaient été consumés par les flammes, un total supérieur à la taille de l'Angleterre. Au cours des 24 dernières années, les incendies de forêt ont détruit 1,5Le monde perd une superficie de forêt équivalente à la Mongolie à cause du feu, un rythme que les experts jugent insoutenable. Bien que les incendies de forêt fassent partie naturelle des écosystèmes, leur ampleur, fréquence et intensité dans les forêts riches en carbone ont explosé ces dernières décennies.
Des recherches du World Resources Institute (WRI) montrent que les incendies détruisent désormais plus de deux fois plus de couvert arboré qu'il y a vingt ans. Rien qu'en 2024, 135 000 kilomètres carrés de forêt ont brûlé, faisant de cette année la plus extrême jamais enregistrée pour les incendies de forêt.
Fait intéressant, des recherches de l'Université de Tasmanie indiquent que les incendies dans d'autres paysages n'ont pas augmenté de la même manière. La superficie totale brûlée dans le monde a en fait diminué depuis des décennies, en partie à cause de l'expansion des fermes en Afrique qui ralentit la propagation des incendies. Cependant, les forêts sont devenues un nouveau point chaud pour les incendies.
La hausse des incendies de forêt est claire. Quatre des cinq pires années jamais enregistrées se sont produites depuis 2020. Les recherches du WRI soulignent que 2024 a été la première fois que des incendies majeurs ont fait rage simultanément à travers les forêts tropicales humides comme l'Amazonie et les forêts boréales, comme celles du Canada.
Des pays comme le Brésil, la Bolivie, la Russie, l'Australie et le Canada ont tous subi certaines de leurs pires saisons d'incendies ces dernières années. Les vagues de chaleur, intensifiées par la pollution aux combustibles fossiles, augmentent le risque d'incendies extrêmes.
Par exemple, la Russie a subi trois de ses pires saisons d'incendies depuis 2020, 2021 étant la plus grave. Environ 45 000 kilomètres carrés de forêt ont brûlé, principalement à travers la Sibérie et l'Extrême-Orient. Les incendies se sont étendus si loin au nord qu'ils ont atteint les régions de pergélisol à l'intérieur du cercle arctique. En 2021,
