Tämä CSS-koodi määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full", jossa on useita fontin paksuuksia ja tyylejä. Se määrittää fonttitiedostot eri muodoissa (WOFF2, WOFF ja TrueType) sekä niiden verkko-osoitteet, jotta selain voi ladata ja käyttää niitä. Fontti sisältää kevyen (300), normaalin (400), keskiraskaan (500) ja puoliraskaan (600) paksuudet, joista kullakin on normaali ja kursiivi tyylit.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}
Interaktiivisen pääsarakkeen sisällön eteen lisätään vasen reunus, joka on sijoitettu 11 pikseliä vasemmalle. Tämän sarakkeen elementeissä ei ole ylä- tai alamarginaalia, mutta niihin sisältyy 12 pikselin täyttö sekä ylä- että alapuolella. Kun kappaleen jälkeen tulee elementti, täyttö poistetaan ja sen sijaan käytetään 12 pikselin marginaaleja. Inline-elementit rajoitetaan enintään 620 pikselin leveyteen, mikä koskee myös inline-kuvia näytöillä, joiden leveys on yli 61.25em.
Mukautetut ominaisuudet määrittelevät värit eri elementeille, kuten päivämääräriville, otsikon reunukselle, kuvatekstille ja taustalle, ja korostusväriksi on asetettu punainen sekä uusi pilariväri, joka oletusarvoisesti on ensisijainen tai korostusväri. Atom-luokan elementeissä ei ole täyttöä.
Tietyiden elementtien tai vaakaviivan jälkeiselle ensimmäiselle kappaleelle eri sisältöalueilla lisätään 14 pikselin yläreunustus. Näiden kappaleiden ensimmäinen kirjain on tyylitelty suureksi, lihavoiduksi, isoilla kirjaimiksi ja tietyllä värillä, kelluu vasemmalle marginaalilla ja pystysuuntaisella tasauksella.
Lisäksi näillä alueilla heti vaakaviivan jälkeisillä kappaleilla ei ole yläreunustusta. Tietyissä sisältöalueissa olevien lainausten enimmäisleveys on 620 pikseliä.
Pääsisällön ja artikkelisäkköiden esittelyelementtien kuvatekstit sijoitetaan staattisesti täyteen leveyteen, ja myös niiden enimmäisleveys on 620 pikseliä.
Upottavat elementit ulottuvat koko näkymän leveyteen miinus vierityspalkin leveys. Näytöillä, joiden leveys on enintään 71.24em, nämä elementit rajoitetaan 978 pikseliin, ja kuvatekstien täyttö on 10px pienemmillä näytöillä ja 20px keskikokoisilla näytöillä. Välillä 46.25em - 61.24em enimmäisleveys on 738 pikseliä. Alle 46.24em upottavat elementit kohdistuvat vasempaan reunaan säädetyillä marginaaleilla ja 20px kuvatekstien täytöllä keskikokoisilla näytöillä.
Suuremmilla näytöillä (61.25em ja yli) huonekalukääreille käytetään ruudukkolayoutia määritellyillä sarakkeilla ja riveillä. Otsikoissa on yläreunus, metatiedoissa yläreunustus ja johdantoteksteissä on tyyliteltyjä linkkejä, joiden alleviivaukset vaihtavat väriä kohdattaessa. Aluksi johdantoteksti ensimmäisessä kappaleessa on yläreunus, joka poistetaan leveämmillä näytöillä (71.25em ja yli). Kääreen kuvissa ei ole alamarginaalia ja niissä on vasen siirros, ja inline-elementit rajoitetaan 630 pikseliin. Suurimmilla näytöillä ruudukko säätää sarakerakennettaan paremman asettelun saavuttamiseksi.
Layout käyttää ruudukkoa, jossa on tietyt sarakkeet ja rivet eri näytönkooille. Suuremmilla näytöillä ruudukko säätää otsikon, pääotsikon ja metatietojen osuudet kolmeen yhtä suureen sarakkeeseen, jota seuraa viisi johdantotekstiä ja kahdeksan muotokuvaa, ja rivien korkeudet on asetettu murtolukuina. Metatietojen osion yläpuolella on ohut viiva, ja johdantoteksti sisältää pystysuoran viivan vasemmalla puolella.
Pääotsikot ovat lihavoituja ja muuttuvat koossa ja leveydessä näytön mukaan: enintään 620px leveitä ja 32px fonttikokoa pienemmillä näytöillä sekä 540px leveitä ja 50px fonttikokoa suuremmilla näytöillä. Jotkut koristeelliset viivat piilotetaan suuremmilla näytöillä, ja sosiaalisen median jakamis- ja kommenttielementeissä on reunukset, jotka vastaavat otsikon väriä.
Johdantoteksti on normaalia paksuutta, 20px kokoinen, ja siinä on täyttöä alhaalta, ja se on siirretty hieman vasemmalle vasemmalla täytöllä. Päämedian kuvat täyttävät leveyden ja säätelevät marginaaleja eri näytönkooille, ja kuvatekstit sijoitetaan alareunaan taustavärillä ja mukautetulla tekstivärillä. Erittäin pienillä näytöillä media ulottuu koko näkymän leveyteen miinus vierityspalkin leveys.
Huonekalukääre asettaa tumman taustan ja säätää marginaaleja ja täyttöä eri näytönkooille. Suuremmilla näytöillä se lisää koristeellisia sivupalkkeja. Pääotsikot on tyylitelty lihavoiduksi, vaaleanharmaaksi tekstiksi, ja metatiedot käyttävät samanlaisia värejä. Sosiaalisen median painikkeet sisältävät erottuvan värin, joka vaihtuu kohdattaessa, vaihtaen tekstin ja taustan värejä kontrastin saavuttamiseksi. Kuvatekstit ovat oletusarvoisesti piilotettuja, mutta niitä voi kytkeä päälle painikkeella, ja monet elementit mukauttavat näkyvyyttään ja asetteluaan näytön leveyden ja muiden ehtojen perusteella.
Elementeillä, joilla on luokka "furniture-wrapper" ja niiden lapsilla, on tietyt tyylisäännöt:
- Metatietojen osion linkit väritetään käyttämällä mukautettua ominaisuutta pilarin väriin tai tumman tilan korostusväriin, ja sama väri käytetään kohdattaessa sekä tekstille että alleviivaukselle.
- Johdantoteksti linkeissä ei ole reunusta, ne käyttävät pilarin väriä tai tumman tilan korostusväriä tekstille, poistavat taustakuvat ja sisältävät alleviivaukset 6px siirroksella ja otsikon reunusväriä. Kohdattaessa alleviivauksen väri muuttuu pilarin väriin tai tumman tilan korostusväriin.
- Johdantoteksti kappaleet ja listakohteet väritetään vaaleanharmaiksi (#dcdcdc).
- Suuremmilla näytöillä (min-width: 61.25em) johdantoteksti ensimmäisessä kappaleessa on yläreunus, joka poistetaan vielä suuremmilla katkaisukohdilla (min-width: 71.25em).
- Pseudo-elementtejä (:before ja :after) käytetään sivupalkkien luomiseen tummilla taustoilla ja reunuksilla, säätäen niiden leveyttä ja sijaintia näkymän koon ja vierityspalkin leveyden perusteella eri näytönkooille.
- Avainviivat ja sosiaalisen median/kommenttielementit metatietojen osiossa käyttävät otsikon reunusväriä viivoihin ja tyylittelyyn.
Kommenttiosiossa on reunusväri, joka vastaa otsikon reunusväriä.
Artikkeleissa toisen tason otsikoissa on kevyt fontin paksuus 200. Kuitenkin, jos toisen tason otsikko sisältää lihavoitu elementti, se käyttää raskaampaa fontin paksuutta 700.
Lisäksi Guardian Headline Full -fonttiperhe määritellään eri tyyleillä ja paksuuksilla, mukaan lukien kevyt, normaali, keskiraskas ja puoliraskas, joista kukin on saatavilla normaaleina ja kursiiviversioina. Nämä fontit on haettu tietyistä URL-osoitteista WOFF2-, WOFF- ja TrueType-muodoissa.
Tämä CSS-koodi määrittelee useita fonttiperheitä ja niiden muunnelmia Guardian-verkkosivustolle. Se määrittää eri fontin paksuuksia ja tyylejä (kuten lihavoitu, kursiivi, puoliraskas, musta) "Guardian Headline Full" -fontille, joista kullakin on useita tiedostomuotoja (WOFF2, WOFF, TTF) yhteensopivuuden varmistamiseksi eri selaimille. Lisäksi se sisältää "Guardian Titlepiece" -fontin lihavoidussa muodossa.
Koodi asettaa myös CSS-mukautetut ominaisuudet (muuttujat) värejä varten, säätäen niitä tummalle tilalle iOS- ja Android-laitteilla. Se sisältää media-kyselyt käsitelläkseen tumman tilan asetuksia ja soveltaa erityistä tyylittelyä artikkelisäkköjen kappaleiden ensimmäiseen kirjaimeen iOS- ja Android-alustoilla, erityisesti kun ne seuraavat tiettyjä elementtejä, kuten atomeja tai kirj
