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
