Tämä CSS-koodi määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full", jossa on useita fontin paksuuksia ja tyylejä. Se sisältää kevyen, normaalin, keskiraskaan ja puoliraskaan paksuudet, kukin sekä normaalina että kursiivisena tyylinä. Fonttitiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa, ja ne sijaitsevat Guardianin palvelimilla.
@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;
}
Yhteenvetokontilla on vasen marginaali 10 pikseliä, ja sen tekstin väri on tietty korostusväri. Elementit, joilla on data-print-layout-attribuutti asetettuna arvoon "hide", eivät näy.
Kappaleet ja pääotsikot interaktiivisessa sisällössä ja artikkeleissa käyttävät mukautettuja tekstinvärejä. Pääotsikon fonttikoko on asetettu 3 rem:iin, joka muuttuu 2,5 rem:iin keskikokoisilla näytöillä. Toissijaiset otsikot on tyylitelty kevyellä fontin paksuudella, 32 pikselin koolla ja mukautetulla tekstin värillä.
Interaktiivisen sisällön johdantoteksti käyttää ensisijaista korostusväriä ja sen enimmäisleveys on 320 pikseliä. Linkit artikkeleissa ja interaktiivisessa sisällössä on väritetty toissijaisella korostusväriä. Otsikkotunnisteen linkki käyttää myös ensisijaista korostusväriä.
Body määrittelee kattavan väriskeeman käyttämällä CSS:n mukautettuja ominaisuuksia teksteille, taustoille, viivoille, painikkeille, korostuksille ja erityisille brändiväreille. Koko sivun tausta on asetettu mukautetulla muuttujalla.
Artikkelien ylätunnisteilla ja rungoilla on läpinäkyvä tausta. Interaktiivisen sisällön pääsarakkeen leveys säätyy ja oletusmarginaalit poistetaan. Ensimmäisellä kuvalla ja ensimmäisellä atom-elementillä on väritetty alareunus.
Pääinteraktiivisen artikkelin kontti ulottuu koko näkymän leveydelle ilman vaakasuuntaista vieritystä ja käyttää tiettyä ruudukkoaluetta. Suuremmilla näytöillä asettelu käyttää monisarakkeista ruudukkoa. Artikkelin runko vie koko ruudukon ja piilottaa ylivuodon.
Reunuselementti on piilotettu, ja pääsisällön alueella ei ole ylämarginia. Erittäin leveillä näytöillä ruudukko määrittelee 1300 pikselin keskiöön, jossa on vasen marginaali ei-rungon elementeille. Tämä keskiö ja marginaali säätyvät eri katkaisupisteissä eri näytönleveyksille.
Ei-rungon elementeillä interaktiivisessa ruudukossa on korkeampi pinotaso ja ne saavat sivuttaistä täytettä suuremmilla näytöillä. Androidilla ja iOS:lla artikkelin rungolla ei ole täytettä, ja ylätunniste on asetettu absoluuttisesti läpinäkyvällä taustalla. Kirjoittajan rivin teksti ja linkit metatieto-osassa säilyttävät läpinäkyvyyden myös näillä mobiilialustoilla.
Kirjoittajan rivi, kirjoittajalinkit ja otsikkotunnisteet on asetettu käyttämään toissijaista korostusväriä. Meta-kirjoittajan komponentilla on vasen marginaali 10 pikseliä. Kirjoittajalinkeillä on ala-marginaali 13 pikseliä. Otsikko- ja otsikko-osilla on ylä-täyte 5 vh, ja otsikolla on myös ala-täyte 4 pikseliä. Viiva-elementti ja metatieto-osan reunat piilotetaan Androidilla ja iOS:lla.
Androidilla ja iOS:lla julkaisupäivämäärällä on ylä-täyte 4 pikseliä. Sosiaalisen median painikkeet metatieto-osassa käyttävät toissijaista korostusväriä tekstille ja reunoille, ja niiden kuvakkeet täytetään samalla värillä. Sisältömetatietojen kontin kuvakkeet piilotetaan. Kaikilla ei-rungon elementeillä interaktiivisessa ruudukossa on vasen ja oikea täyte 10 pikseliä. Sosiaalisen median osiolla metatieto-alueella ei ole yläreunaa, ja kommenttiosa on piilotettu. Jaa-painike muuttuu toissijaiseksi korostusväriksi valkoisella kuvakkeella, kun sitä vie hiiri päälle.
Ensimmäinen atom-elementtikuva ulottuu kaikkiin sarakkeisiin ja sillä on ala-marginaali 12 pikseliä. Immersiiviset elementtikuvat ovat täysleveitä, enintään 1260 pikseliä, ilman sivumarginaaleja, ja ne ulottuvat toiseksi viimeisestä toiseen sarakkeeseen.
Pienillä näytöillä (alle 30 em) kaikilla ei-immersiivisillä elementeillä pääsarakkeessa on 10 pikselin sivumarginaalit. Keskikokoisilla näytöillä (46,25 em ja yli) pääinteraktiivisella sarakkeella on suhteellinen sijainti ja pystysuora viiva vasemmalla. Ei-atom-elementit sijoitetaan rungon ruudukkosarakkeeseen.
Eri näytönkokoille asettelu käyttää tiettyjä ruudukkomalleja:
- 46,25 em:n ja 61,24 em:n välillä: kolmen sarakkeen asettelu.
- 61,25 em:n ja 71,24 em:n välillä: neljän sarakkeen asettelu.
- 71,25 em:n ja 81,24 em:n välillä: viiden sarakkeen asettelu vasemmalla ja oikealla sarakkeella.
- Yli 81,25 em:n: viiden sarakkeen asettelu leveämmillä sarakkeilla.
Otsikko sijoitetaan 20 dvh:n päähän yläreunasta, täysleveys, ilman ylämarginia. Näytöillä, joiden leveys on 20 em:n ja 46,24 em:n välillä, se siirtyy 10 dvh:n päähän. Otsikkotunnisteilla ei ole reunaa.
Otsikko on myös 20 dvh:n korkeudella, täysleveys, tummalla taustalla, täytteellä ja yläreunalla. Keskikokoisilla näytöillä se siirtyy 10 dvh:n korkeudelle.
Johdanto sijoitetaan 20 dvh:n korkeudelle, täysleveys, tummalla taustalla ja täytteellä. Keskikokoisilla näytöillä se siirtyy 10 dvh:n korkeudelle.
Interaktiivinen ruudukko määrittelee alueet otsikolle, johdannolle, medialle, viivoille, metatiedoille ja rungolle.
Metatieto-osa on täysleveys, sijoitettuna 20 dvh:n korkeudelle tummalla taustalla ja z-indeksillä 5. Keskikokoisilla näytöillä se siirtyy 10 dvh:n korkeudelle. Päivämäärälinjalla on vasen marginaali 10 pikseliä.
Svelte-scroller-outer näytetään lohkona suhteellisella sijainnilla.
CSS-koodi määrittelee tyylejä vierityskomponentille ja sisältää font-face-säännöt Guardian Headline Full -fonttiperheelle. Vierittimellä on lohkonäyttö, suhteellinen sijainti ja täysleveys. Sen etuala on asetettu korkeammalle z-indeksille ja se tyhjentää kelluvat, kun taas taustakontti on absoluuttisesti sijoitettu ilman osoitintapahtumia ja optimoitu muutoksille. Font-face-säännöt lataavat eri paksuuksia ja tyylejä Guardian Headline Full -fontista Guardianin palvelimilta, määrittäen kevyet, normaalit, keskiraskaat ja puoliraskaat variantit sekä normaalina että kursiivisina tyyleinä, tuen WOFF2-, WOFF- ja TTF-muodoille.
Guardian käyttää mukautettuja fonteja otsikoihinsa ja otsikkopalasiinsa. Nämä fontit ladataan heidän palvelimiltaan useissa muodoissa, kuten WOFF2, WOFF ja TTF, varmistaakseen laajan selainyhteensopivuuden. Jokainen fonttivariaatio, kuten lihavoitu tai kursivoitu, määritellään tietyillä paksuuksilla ja tyyleillä.
Sivu sisältää latauksen peittokerroksen pyörivällä animaatiolla, joka ilmestyy tietojen noutamisen aikana. Pääsisältöalue sisältää koko näytön kartan ja vierittävän kertomusosion. Tekstilaatikot tässä osassa on tyylitelty taustalla, reunuksella ja typografialla, joka käyttää Guardianin Egyptian Web -fonttia tekstin runkoon. Tietyt tekstin osat korostetaan värillisellä taustalla.
CSS määrittelee 12 pikselin reunuksen säteen ja lataa Guardian Headline Full -fonttiperheen. Tämä sisältää useita fonttitiedostoja eri paksuuksina ja tyyleinä (kevyt, normaali, keskiraskas, puoliraskas ja niiden kursiiviset versiot) Guardianin palvelimilta. Tiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa varmistaakseen laajan selainyhteensopivuuden.
Joka päivä vuonna 2024 metsäpalot polttivat yli 360 neliökilometriä metsää – alue, joka on suurempi kuin Malta. Vuoden loppuun mennessä yli 134 000 neliökilometriä oli tuhoutunut liekeissä, yhteensä enemmän kuin Englannin koko alue. Viimeisten 24 vuoden
