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, joista kummassakin on sekä normaali että kursiiviversio. Fontit ladataan Guardianin palvelimilta kolmessa eri tiedostomuodossa: WOFF2, WOFF ja TrueType.
@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;
}
}
Interaktiivisen sisältösarakkeen vasemmalla puolella on reunaviiva ja elementeille on määritelty tietyt välit. Tietyt elementit seuraavien kappaleiden yläreunassa on lisätilaa, ja näiden kappaleiden ensimmäinen kirjain on muotoiltu suureksi, väritetyksi aloituskirjaimeksi. Rivinsisäisillä elementeillä ja kuvilla on enimmäisleveys. Jatkuvaa teemointia varten on määritelty useita värimuuttujia.
Tiettyjen kontainerien sisällä olevilla lainauslohkoilla tulee olla enimmäisleveys 620 pikseliä.
Pääartikkelien, erikoisartikkelien, tavallisten artikkeleiden ja kommenttien esittelyelementtien kuvatekstit tulee olla staattisesti sijoitettuja, täyttää koko leveyden ja niillä tulee myös olla enimmäisleveys 620 pikseliä.
Upottavat elementit tulee täyttää koko näkymän leveys miinus vierityspalkki. Suuremmilla näytöillä (yli 71.24em) niiden enimmäisleveys on 978px, ja kuvatekstien täytöt säädetään eri katkaisupisteissä. Keskikokoisilla näytöillä (46.25em ja 61.24em välillä) enimmäisleveys on 738px. Pienemmillä näytöillä (alle 46.24em) näiden elementtien vasemmalla puolella ei saa olla marginaalia, ja ne tulee kohdistaa vasempaan reunaan, ja erittäin pienillä näytöillä kuvatekstien täytöt ja marginaalit on säädetty.
Huonekalupakkaukselle suurilla näytöillä (yli 61.25em) käytetään ruudukkolayoutia, jossa on määritellyt sarakkeet ja rivit. Otsikoille tulee yläreunaviiva, metatiedot on sijoitettu suhteellisesti, ja ingressitekstillä on tietyt tyylit linkeille ja väleille. Tämän pakkauksen sisällä olevilla kuvilla on säädetyt marginaalit ja rivinsisäisillä elementeillä enimmäisleveys 630px. Erittäin suurilla näytöillä (yli 71.25em) ruudukkomallia säädetään sisältämään enemmän sarakkeita.
CSS määrittelee ruudukkolayoutin sivun ylätunnisteelle alueilla otsikolle, pääotsikolle, ingressille, metatiedoille ja muotokuvalle. Se asettaa näille elementeille tietyt mitat ja sijainnit eri näytönkokoissa. Tyyleihin kuuluvat reunaviivat, fontit ja värit, ja mukana on säätöjä sosiaalisen median kuvakkeille, kuvateksteille ja responsiiviselle käyttäytymiselle mobiili- ja työpöytänäkymissä.
CSS-koodi määrittelee tyylejä verkkosivun asettelulle, keskittyen komponenttiin nimeltä "furniture-wrapper". Tällä komponentilla on tumma tausta ja se säätää marginaalejaan ja täyttöjään näytön koon perusteella. Suuremmille näytöille se lisää koristeellisia sivupalkkeja.
Tämän pakkauksen sisällä elementtejä kuten artikkelien otsakkeita, pääotsikoita ja metatietoja (kuten sosiaalisen median jakamispainikkeita) muotoillaan. Pääotsikoissa käytetään vaaleanharmaa väriä ja lihavoitua fonttia. Sosiaalisilla painikkeilla on väritetyt reunat, jotka vastaavat teemaväriä, ja ne muuttuvat kiinteäksi väriksi kohdistettaessa.
Koodi hallitsee myös kuvatekstien ja kuvatekstien vaihtopainikkeen näkyvyyttä mediaelementeille. Kaiken kaikkiaan tyylit varmistavat, että asettelu on responsiivinen ja visuaalisesti yhtenäinen eri laitteilla.
Tämä CSS-koodi määrittelee tyylejä verkkosivun komponentille, todennäköisesti sivupalkille tai sisältöpaketille. Se asettaa tekstin värit, linkkien ulkonäön ja asettelusäätöjä eri näytönkokoille. Linkit muotoillaan tietyillä väreillä ja alleviivauksilla, ja asetteluun kuuluu taustaelementtejä, jotka säätyvät näkymän leveyden perusteella. Koodi käsittelee myös reunaviivoja ja välejä komponentin sisällä oleville eri elementeille.
CSS-koodi määrittelee tyylejä artikkelielementeille ja lataa mukautetut fontit. Se asettaa kommenttien reunavärin vastaamaan otsikon reunaväriä. Artikkelien otsikoissa käytetään oletuksena kevyttä fontin paksuutta, mutta vaihdetaan lihavoituun, kun otsikko sisältää strong-tagin.
Lisäksi se tuo Guardian Headline Full -fonttiperheen eri paksuuksina ja tyyleinä (kevyt, normaali, keskiraskas, puoliraskas, kukin normaalina ja kursiiviversiona) Guardianin palvelimilta, määrittäen useita tiedostomuotoja selainyhteensopivuutta varten.
Fontti "Guardian Headline Full" määritellään useilla tyyleillä: puoliraskas kursiivi (paksuus 600), lihavoitu (paksuus 700), lihavoitu kursiivi (paksuus 700), musta (paksuus 900) ja musta kursiivi (paksuus 900). Jokainen tyyli sisältää fonttitiedostot WOFF2-, WOFF- ja TrueType-muodoissa, jotka sijaitsevat Guardianin palvelimilla.
Lisäksi fontti "Guardian Titlepiece" määritellään lihavoidussa tyylissään (paksuus 700), myös WOFF2-, WOFF- ja TrueType-tiedostoilla.
iOS- ja Android-laitteille asetetaan tumma taustaväri ja tietyt teemavärit. Tumman tilan aikana teemaväri säätyy vastaavasti.
iOS- ja Android-laitteilla sovelletaan tiettyjä CSS-sääntöjä muotoillakseen tiettyjen artikkelikontainerien ensimmäisen kappaleen ensimmäistä kirjainta, jotka seuraavat tiettyjä elementtejä kuten `.element-atom` tai kirjautumisporteista.
Android-laitteissa tavallisten ja kommenttien artikkeleiden ensimmäisen kappaleen ensimmäinen kirjain muotoillaan toissijaisella pylväsvärillä. Sekä iOS- että Android-laitteissa artikkelien otsakkeet piilotetaan, ja huonekalupaketilla on tietyt täytöt. Huonekalupaketin sisällä olevat leimat käyttävät lihavoitua, isoilla kirjaimilla kirjoitettua fonttia uudella pylväsvärillä. Pääotsikot asetetaan 32px, lihavoiduksi, alareunatäytöllä ja tummalla värillä. Kuvat sijoitetaan suhteellisesti, täysleveillä marginaaleilla ja automaattisella korkeudella.
Android-laitteissa artikkelikontainerien sisällä olevien kuvien tulee olla läpinäkyvä tausta, täyttää koko näkymän leveys (ottaen huomioon vierityspalkit) ja niiden korkeus säätyy automaattisesti.
Sekä iOS- että Android-laitteissa artikkelien johdantotekstillä tulee olla tietyt välit: 4 pikseliä täyttöä yläreunassa ja 24 pikseliä alareunassa, ja 10 pikselin negatiivinen marginaali oikealla puolella.
Tämän johdantotekstin sisällä olevien kappaleiden tulee käyttää Guardianin otsikkofonttiperhettä.
Tämän tekstin sisällä olevat linkit tulee muotoilla tietyllä värillä, alleviivauksella, joka on sijoitettu 6 pikseliä tekstin alapuolelle, ja vaaleanharmalla alleviivausväriä, ilman taustakuvaa tai reunaa. Kohdistettaessa alleviivausväri muuttuu vastaamaan linkin tekstin väriä.
Lisäksi artikkeleiden metatieto-osioille sekä iOS- että Android-laitteilla tulee antaa tietyt tyylit.
Tämä CSS-koodi asettaa tyylejä iOS- ja Android-laitteiden artikkelikontainereille. Se säätää marginaaleja, värejä, täyttöjä ja painikkeiden näyttöä eri artikkelityypeille ja niiden komponenteille.
iOS- ja Android-laitteilla erikois-, tavallis- ja kommenttien artikkelikontainereissa kuvat, jotka eivät ole pienoiskuvia tai upottavia, muotoillaan siten, että niillä ei ole marginaalia, leveys lasketaan näkymästä miinus 24 pikseliä ja vierityspalkin leveys, ja niiden korkeus on automaattinen. Niiden kuvateksteillä ei ole täyttöjä.
Näissä kontainereissa olevat upottavat kuvat asetetaan leveydeksi, joka on näkymän leveys miinus vierityspalkin leveys.
Artikkelirungon proosan sisällä lainatut lohkolainaukset näyttävät värillisen merkin käyttäen mukautettua CSS-muuttujaa. Link
