Acest cod CSS definește o familie de fonturi personalizată numită „Guardian Headline Full” cu mai multe greutăți și stiluri de font. Include greutăți light, regular, medium și semibold, fiecare în stiluri atât normale, cât și italice. Fișierele de font sunt furnizate în formatele WOFF2, WOFF și TrueType, găzduite pe serverele 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;
}
Rezumatul containerului are o margine stângă de 10 pixeli și folosește o culoare de accent specifică pentru textul său. Elementele cu atributul data-print-layout setat la „hide” nu sunt afișate.
Paragrafele și titlurile principale din conținutul interactiv și articole folosesc culori personalizate pentru text. Dimensiunea fontului pentru titlul principal este setată la 3 rem, ajustându-se la 2,5 rem pe ecrane de dimensiuni medii. Titlurile secundare sunt stilizate cu o greutate de font light, o dimensiune de 32 de pixeli și o culoare personalizată pentru text.
Textul introductiv din conținutul interactiv folosește o culoare de accent primară și are o lățime maximă de 320 de pixeli. Linkurile din articole și conținutul interactiv sunt colorate cu un accent secundar. Linkul etichetei titlului folosește și el culoarea de accent primară.
Corpul definește o schemă cuprinzătoare de culori folosind proprietăți CSS personalizate pentru text, fundaluri, linii, butoane, evidențieri și culori specifice de brand. Fundalul general al paginii este setat cu o variabilă personalizată.
Anteturile și corpurile articolelor au un fundal transparent. Coloana principală pentru conținutul interactiv își ajustează lățimea și elimină marginile implicite. Prima figură și primul element atom au borduri inferioare colorate.
Containerul principal al articolului interactiv acoperă lățimea completă a viewport-ului fără derulare orizontală și folosește o zonă de grid specifică. Pe ecrane mai mari, layout-ul folosește un grid cu mai multe coloane. Corpul articolului ocupă întregul grid și ascunde overflow-ul.
Un element de bordură este ascuns, iar zona principală de conținut nu are margine superioară. Pentru ecrane foarte largi, gridul definește o coloană centrală de 1300px cu o margine stângă pentru elementele non-body. Această coloană centrală și marginea se ajustează la diferite puncte de întrerupere pentru diferite lățimi de ecran.
Elementele non-body din gridul interactiv au un ordin de suprapunere mai ridicat și primesc padding lateral pe ecrane mai mari. Pe Android și iOS, corpul articolului nu are padding, iar antetul este poziționat absolut cu un fundal transparent. Textul byline-ului autorului și linkurile din secțiunea meta mențin, de asemenea, transparența pe aceste platforme mobile.
Byline-ul, linkurile autorului și etichetele titlului sunt setate să folosească culoarea de accent secundar. Componenta meta-byline are o margine stângă de 10px. Linkurile autorului au o margine inferioară de 13px. Secțiunile titlu și headline au un padding superior de 5vh, titlul având și un padding inferior de 4px. Elementul lines și marginile secțiunii meta sunt ascunse pe Android și iOS.
Pe Android și iOS, data publicării are un padding superior de 4px. Butoanele de social media din secțiunea meta folosesc culoarea de accent secundar pentru text și borduri, iar iconițele lor sunt umplute cu aceeași culoare. Iconițele din containerul meta al conținutului sunt ascunse. Toate elementele non-body din gridul interactiv au padding stânga și dreapta de 10px. Secțiunea de social media din zona meta nu are bordură superioară, iar secțiunea de comentarii este ascunsă. Butonul de share se schimbă în culoarea de accent secundară cu o iconiță albă la hover.
Prima figură a elementului atom se întinde pe toate coloanele cu o margine inferioară de 12px. Figurile elementelor immersive au lățime completă, până la 1260px, fără margini laterale și se întind de la penultima la a doua coloană.
Pe ecrane mici (sub 30em), toate elementele non-immersive din coloana principală au margini laterale de 10px. Pe ecrane medii (46,25em și mai sus), coloana interactivă principală are o poziție relativă cu o linie verticală în stânga. Elementele non-atom sunt plasate în coloana grid a corpului.
Pentru diferite dimensiuni de ecran, layout-ul folosește șabloane de grid specifice:
- Între 46,25em și 61,24em: un layout cu trei coloane.
- Între 61,25em și 71,24em: un layout cu patru coloane.
- Între 71,25em și 81,24em: un layout cu cinci coloane cu coloane stânga și dreapta.
- Peste 81,25em: un layout cu cinci coloane cu coloane mai largi.
Titlul este poziționat la 20dvh de sus, cu lățime completă, fără margine superioară. Pe ecrane între 20em și 46,24em, se mută la 10dvh. Etichetele titlului nu au bordură.
Headline-ul este, de asemenea, la 20dvh, cu lățime completă, cu un fundal întunecat, padding și o bordură superioară. Pe ecrane medii, se mută la 10dvh.
Standfirst-ul este poziționat la 20dvh, cu lățime completă, cu un fundal întunecat și padding. Pe ecrane medii, se mută la 10dvh.
Gridul interactiv definește zone pentru headline, standfirst, media, lines, meta și body.
Secțiunea meta are lățime completă, poziționată la 20dvh cu un fundal întunecat și un z-index de 5. Pe ecrane medii, se mută la 10dvh. Dateline-ul are o margine stângă de 10px.
Svelte-scroller-outer este afișat ca un bloc cu poziționare relativă.
Codul CSS definește stiluri pentru o componentă scroller și include reguli font-face pentru familia de fonturi Guardian Headline Full. Scroller-ul are un display block, poziționare relativă și lățime completă. Foreground-ul său este setat la un z-index mai ridicat și elimină float-urile, în timp ce containerul de fundal este poziționat absolut fără evenimente de pointer și optimizat pentru modificări de transformare. Regulile font-face încarcă diverse greutăți și stiluri ale fontului Guardian Headline Full de pe serverele Guardian, specificând variante light, regular, medium și semibold atât în stiluri normale, cât și italice, cu suport pentru formatele WOFF2, WOFF și TTF.
Guardian folosește fonturi personalizate pentru titlurile și piesele de titlu. Aceste fonturi sunt încărcate de pe serverele lor în mai multe formate precum WOFF2, WOFF și TTF pentru a asigura compatibilitatea largă cu browserele. Fiecare variație de font, cum ar fi bold sau italic, este definită cu greutăți și stiluri specifice.
Pagina include un overlay de încărcare cu o animație de rotire care apare în timpul preluării datelor. Zona principală de conținut prezintă o hartă pe tot ecranul și o secțiune de narațiune cu derulare. Casetele de text din această secțiune au un fundal stilizat, bordură și tipografie folosind fontul Egyptian Web al Guardian pentru textul corpului. Anumite intervale de text sunt evidențiate cu un fundal colorat pentru accent.
CSS-ul definește un border radius de 12 pixeli și încarcă familia de fonturi Guardian Headline Full. Aceasta include mai multe fișiere de fonturi în diferite greutăți și stiluri (light, regular, medium, semibold și versiunile lor italice) de pe serverele Guardian. Fișierele sunt furnizate în formatele WOFF2, WOFF și TrueType pentru a asigura compatibilitatea largă cu browserele.
În fiecare zi din 2024, incendiile de vegetație au ars peste 360 de kilometri pătrați de pădure - o suprafață mai mare decât Malta. Până la sfârșitul anului, peste 134.000 de kilometri pătrați fuseseră consumați de flăcări, un total mai mare decât suprafața Angliei. În ultimii 24 de ani, incendiile de vegetație au distrus 1,5.
Lumea pierde o suprafață de pădure de mărimea Mongoliei din cauza incendiilor, un ritm pe care experții avertizează că este nesustenabil. Deși incendiile de vegetație sunt o parte naturală a ecosistemelor, scara, frecvența și intensitatea lor în pădurile bogate în carbon au crescut brusc în ultimele decenii.
Cercetările de la World Resources Institute (WRI) arată că incendiile distrug acum de peste două ori mai multă suprafață arborată decât acum douăzeci de ani. Doar în 2024, 135.000 de kilometri pătrați de pădure au ars, făcând din acesta cel mai extrem an de incendii înregistrat.
Interesant, cercetările de la Universitatea din Tasmania indică faptul că incendiile din alte peisaje nu au crescut în același mod. Suprafața totală arsă la nivel global a scăzut de fapt de zeci de ani, parțial datorită extinderii ferm
