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 normaali ja kursiivimuunnelmat. 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://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 seuraavilla kappaleilla on ylimääräinen yläpadding, ja näiden kappaleiden ensimmäinen kirjain on tyylitelty suureksi, väritetyksi tikkukirjaimeksi. Inline-elementit ja kuvat rajoittuvat enimmäisleveyteen 620px suuremmilla näytöillä. Eri värimuuttujat on määritelty yhtenäistä teemoitusta varten.
Tiettyjen kontainerien sisällä olevilla lainauslohkoilla tulee olla enimmäisleveys 620 pikseliä.
Pääsisällön ja artikkelikontainerien esittelyelementtien kuvatekstit tulee olla staattisesti sijoitettuja, ja niiden leveys on enintään 620 pikseliä.
Upottavien elementtien tulee ulottua koko näkymän leveyteen miinus vierityspalkki. Suuremmilla näytöillä niiden enimmäisleveys on 978 pikseliä, ja kuvatekstien padding on säädetty keskikokoisille näytöille. Keskikokoisilla näytöillä enimmäisleveys on 738 pikseliä. Pienemmillä näytöillä upottavat elementit kohdistetaan vasempaan reunaan säädetyin marginaalein ja kuvatekstien paddingein.
Suuremmilla näytöillä huonekalupakkauksille käytetään ruudukkolayoutia määritellyillä sarakkeilla ja riveillä. Otsikoilla on yläreunaviiva, metatiedot-osiot sijoitetaan suhteellisesti, ja johdantotekstisisältö sisältää tiettyjä tyylejä linkeille ja kappaleille. Pakkauksen sisällä olevilla kuvilla ei ole vasenta marginaalia, ja niiden enimmäisleveys on 630 pikseliä, kun ne ovat inline-muodossa. Erittäin suurilla näytöillä ruudukon sarakemallia säädetään.
CSS määrittelee ruudukkolayoutin artikkelin otsikolle tietyillä alueilla otsikolle, pääotsikolle, johdantotekstille, metatiedoille ja muotokuvalle. Se asettaa tyylejä reunoille, typografialle ja väleille, säätäen näitä ominaisuuksia eri näytönkokojen mukaan media-kyselyillä. Esimerkiksi pääotsikon fonttikoko kasvaa suuremmilla näytöillä, ja tietyt elementit piilotetaan tai sijoitetaan uudelleen näkymän muuttuessa. Päämediassa on määritelty olevan koko leveys mobiililaitteilla.
CSS-koodi määrittelee tyylejä verkkosivun asettelulle, keskittyen huonekalupakkauselementtiin. Se asettaa taustavärejä, marginaaleja, paddingia ja responsiivista käyttäytymistä eri näytönkoille. Tyylit sisältävät mukautettuja ominaisuuksia väreille, kuten tumman tilan ominaisuudet ja otsikon reunaviivat. Tietyt säännöt hallitsevat kuvatekstien, painikkeiden, otsikoiden ja metatietojen ulkonäköä, mukautuksin hover-vaikutuksille ja sosiaalisen median kuvakkeille. Media-kyselyt varmistavat, että asettelu mukautuu mobiili- ja työpöytänäkymien välillä, mukaan lukien leveämmät näytöt, joille lisätään sivutaustoja.
Tämä CSS-koodi määrittelee tyylejä verkkosivun komponentille, todennäköisesti sivupalkille tai sisältöpakkaukselle. Se asettaa värejä, reunoja ja asettelusäätöjä eri elementeille, kuten linkeille, tekstille ja sosiaalisen median kuvakkeille. Tyylit mukautuvat eri näytönkokojen mukaan media-kyselyillä, muuttaen leveyksiä ja reunoja sopimaan suuremmille näytöille. Värit hallitaan CSS-muuttujilla teemoja varten, kuten tumma tila.
CSS-koodi määrittelee tyylejä artikkelelementeille ja lataa mukautettuja fontteja. Se asettaa kommenttien reunavärin vastaamaan otsikon reunaväriä. Artikkelien otsikoissa käytetään kevyttä fontin paksuutta, mutta vahvalla tekstillä varustetut otsikot tehdään lihavoiduiksi. Koodi tuo myös Guardian Headline -fonttiperheen eri paksuuksina ja tyyleinä, mukaan lukien kevyt, normaali, keskiraskas ja puoliraskas, sekä normaaleina että kursiivimuunnelmina.
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.
Lisäksi fontti "Guardian Titlepiece" määritellään lihavoidulla tyylillään (paksuus 700), myös WOFF2-, WOFF- ja TrueType-tiedostoilla.
iOS- ja Android-laitteille asetetaan tumma taustaväri (#1a1a1a) ja tietyt ominaisuusvärit. Tummassa tilassa ominaisuusväri säätyy vastaavasti.
iOS- ja Android-laitteilla sovelletaan erityistä tyyliä artikkelikontainerin ensimmäisen kappaleen ensimmäiseen kirjaimeen, joka seuraa tiettyjä elementtejä kuten `.element-atom` tai kirjautumisporteista.
Android-laitteissa artikkelikontainerin ensimmäisen kappaleen ensimmäinen kirjain tyylitellään toissijaisella pilarivärillä. Sekä iOS- että Android-laitteilla artikkelien otsikot piilotetaan, ja huonekalupakkaukselle on määritelty tietty padding. Huonekalupakkauksen sisällä olevat leimat käyttävät lihavoitua, isoilla kirjaimilla kirjoitettua fonttia uudella pilarivärillä. Pääotsikot asetetaan 32px, lihavoiduksi, alapuolelle paddingilla ja tummalla värillä. Kuvat sijoitetaan suhteellisesti, koko leveyden marginaaleilla ja automaattisella korkeudella.
Android-laitteissa artikkelikontainerin kuvien tulee olla läpinäkyvällä taustalla, ulottua koko näkymän leveyteen (ottaen huomioon vierityspalkit) ja säätää korkeutensa automaattisesti.
Sekä iOS- että Android-laitteissa artikkelien johdantotekstin tulee olla tietyin välein: 4 pikseliä paddingia yläreunassa, 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ä olevien linkkien tulee olla tyyliteltyjä tietyllä värillä, alleviivauksella, joka sijaitsee 6 pikseliä tekstin alapuolella, ja vaaleanharmaan alleviivausväri. Niillä ei saa olla taustakuvaa tai alareunaviivaa. Kun niitä osoitetaan, alleviivauksen tulee muuttua vastaamaan linkin tekstin väriä.
Lisäksi artikkelin metatietojen osuuden tulee olla tyylitelty yhtenäisesti molemmille käyttöjärjestelmille.
Tämä CSS-koodi asettaa tyylejä artikkelikontainereille Android- ja iOS-laitteilla. Se säätää marginaaleja, värejä, paddingia ja painikkeiden näkyvyyttä eri artikkelityypeille ja niiden komponenteille.
iOS- ja Android-laitteilla, ominaisuus-, normaali- ja kommenttiartikkelikontainereissa, kuvilla, jotka eivät ole pienoiskuvia tai upottavia, on marginaali nolla, leveys laskettuna näkymästä miinus 24 pikseliä ja vierityspalkin leveys, sekä automaattinen korkeus. Niiden kuvateksteissä ei ole paddingia.
Näissä kontainereissa olevilla upottavilla kuvilla on leveys laskettuna näkymästä miinus vierityspalkin leveys.
Artikkelirungon proosan sisällä lainatut lohkolainaukset käyttävät uutta pilariväriä koristeelliseen elementtiinsä. Linkit on tyylitelty ensisijaisella pilarivärillä, alleviivaus etäisyydellä 6px, ja alleviivausväri reunaviivan alla, joka vaihtuu uudeksi pilariväriksi osoitettaessa.
Tummassa tilassa huonekalupakkauksen taustaväriksi asetetaan #1a1a1a.
iOS- ja Android-laitteilla ominaisuus-, normaali- ja kommenttiartikkelien sisältöleimat käyttävät uutta pilariväriä.
Sekä iOS- että Android-laitteilla näiden artikkelityyppien pääotsikolla ei ole taustaa, ja se käyttää otsikon reunaviivan väriä tekstilleen.
Näiden
