Guardian Headline Full -fonttiperheeseen kuuluu useita tyylejä, joilla on eri painoarvot ja kursiivit. Kevyt versio (paino 300) on saatavilla sekä normaalina että kursiivina, kuten myös tavallinen versio (paino 400). Keskikokoinen (paino 500) ja puolilihavoitu (paino 600) -tyylit ovat myös saatavilla normaalina ja kursiivina. Jokainen fonttitiedosto on saatavilla WOFF2-, WOFF- ja TrueType-muodoissa Guardianin palvelimilta.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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 {
border-left: 1px solid #dcdcdc;
}
}Pääasiallisella interaktiivisen sisällön sarakkeella on erityisiä tyylejä elementeille. Esimerkiksi atomeilla ei ole ylä- eikä alamarginaaleja, mutta niillä on 12px täyttöä. Kun kappale seuraa atomia, atomilta poistetaan täyttö ja marginaalit asetetaan 12px. Inline-elementit on rajoitettu 620px leveyteen.
Kuville, joilla on loop-rooli, kuvateksti sijoitetaan z-index-arvolla 6. Loop-painike on tyylitelty 32px leveäksi, kohdistettuna oikeaan alareunaan tietyillä marginaaleilla. Kuvatekstipainikkeen z-indeksi on 100.
Itse isännöidyillä videoelementeillä on asetettu 100% leveys, rajoitettu 620px:ään, ja ne näytetään lohkona, jolla on 12px marginaalit. Video ja sen säiliö vievät myös täyden leveyden enintään 620px:ään ja ovat keskitettyjä. Jos video on immersiivinen, se poistaa leveysrajoituksen ja marginaalit, laajeten täysin. Suuremmilla näytöillä immersiiviset videot laajenevat 1140px leveiksi negatiivisella vasemmalla marginaalilla, ja vielä suuremmilla kooilla ne ovat 1300px leveitä suuremmalla negatiivisella marginaalilla.
Värimuuttujat määrittelevät erilaisia teemavärejä, kuten päivämääräviivan harmaan, otsikon reunan, kuvatekstin ja feature-punaisen. Tumman tilan asetuksissa jotkin värit sopeutuvat tummaan teemapalettiin.
Artikkelin tekstissä ensimmäisellä kappaleella atomin tai vaakaviivan jälkeen on ylimääräistä yläreunan täyttöä. Lisäksi ensimmäisen kappaleen ensimmäinen kirjain atomin jälkeen on tyylitelty, vaikka tarkkaa tyyliä ei täällä täysin yksityiskohdista.CSS-koodi määrittelee tyylejä alkukirjaimille, lainauksille ja erilaisille asetteluelementeille verkkosivuston eri osissa. Alkukirjaimet on tyylitelty tietyllä fontilla, koolla ja värillä, ja ne on kellutettu vasemmalle. Lainauksille annetaan enimmäisleveys. Showcase-elementeissä kuvatekstit asetetaan staattiseen asentoon täydellä leveydellä ja enimmäisleveydellä 620px.
Immersiiviset elementit asetetaan vievään koko näkymän leveyden miinus vierityspalkki. Näytöillä, joiden koko on alle 71.24em, niiden enimmäisleveyttä säädetään 978px:ään, ja kuvatekstin täyttö vaihtelee näytön koon mukaan. Keskikokoisilla näytöillä (46.25em - 61.24em) enimmäisleveys on 738px. Pienillä näytöillä (alle 46.24em) immersiivisille elementeille annetaan negatiivisia vasemman marginaaleja ulottuakseen näkymän reunaan, ja kuvatekstin täyttöä säädetään vastaavasti.
Suuremmilla näytöillä (yli 61.25em) furniture-wrapperille käytetään grid-asettelua, luoden kaksisarakkeisen rakenteen määritellyillä riveillä otsikkoa, pääotsikkoa, ingressiä, metatietoja ja muotokuvia varten. Pääotsikkoelementtien ensimmäiselle lapselle lisätään yläreuna, ja metatietojen osan sijainti asetetaan absoluuttiseksi.Furniture-wrapper asettaa ingressisisällön suhteelliseen asentoon 2 pikselin yläreunan täytöllä ja ilman oikeaa marginaalia. Ingressin sisällä pääsisällön alueella on 4 pikselin alamarginaali. Ingressin sisällä olevat listakohdat käyttävät 20 pikselin fonttikokoa. Ingressin linkit, mukaan lukien listakohtien sisällä olevat, eivät ole reunuksia, eivät taustakuvaa, ja ne alleviivataan 6 pikselin offsetilla käyttäen mukautettua väriä alleviivaukselle. Kun hiiri on päällä, alleviivauksen väri vaihtuu uuteen pylväsväriin.
Ingressin ensimmäisellä kappaleella on yläreuna ja ei alareunan täyttöä. Suuremmilla näytöillä (61.25em ja yli), jos näyttö on myös vähintään 71.25em leveä, yläreuna poistetaan. Näytöillä, joiden leveys on vähintään 61.25em, kuvilla ei ole vasenta marginaalia ja enimmäisleveys on 630 pikseliä, kun ne ovat inline.
Näytöillä, joiden leveys on 71.25em ja leveämmät, furniture-wrapper käyttää grid-asettelua tietyillä sarakkeilla ja riveillä. Koristeellinen viiva ilmestyy ennen metatietojen osaa, 540 pikseliä leveä. Ingressin kappaleilla ei ole yläreunaa, ja ennen ingressisisältöä lisätään pystyviiva. Vielä suuremmilla näytöillä (81.25em ja yli) grid sopeutuu enemmän sarakkeita ja rivejä, metatietojen edessä oleva koristeellinen viiva ulottuu 620 pikseliin, ja ingressin edessä oleva pystyviiva siirtyy hieman.
Artikkelin otsikon tai otsikko-osan tunnuksilla on 2 pikselin yläreunan täyttö. Pääotsikko käyttää lihavoitua fontin painoarvoa, enimmäisleveyttä 620 pikseliä ja fonttikokoa 32 pikseliä. Suuremmilla näytöillä (71.25em ja yli) pääotsikko sopeutuu enimmäisleveyteen 540 pikseliä ja fonttikokoon 50 pikseliä.
Keskikokoisilla näytöillä (46.25em ja yli) avainviivoilla tai viivaelementeillä ei ole oikeaa marginaalia. Suuremmilla näytöillä (61.25em ja yli) nämä viivat piilotetaan. Viivat käyttävät mukautettua väriä vedokselle.Tämä CSS-koodi määrittelee tyylejä verkkosivun asettelulle, erityisesti furniture-teemaiselle wrapperille. Se asettaa erilaisia ominaisuuksia elementeille kuten metatiedot, ingressiteksti, päämedia ja kuvatekstit. Tyylit sisältävät säädöksiä marginaaleihin, täyttöön, väreihin ja sijaintiin, tietyillä säännöillä eri näytön koille media-kyselyiden avulla. Suunnittelu käyttää mukautettuja CSS-muuttujia väreille, kuten `--darkBackground` ja `--headerBorderColor`, ja varmistaa, että elementit piilotetaan tai näytetään näkymän leveyden perusteella. Wrapperilla on tumma tausta ja se sisältää responsiivista käyttäytymistä laitteille mobiilista työpöytään.CSS-koodi tyylittelee elementtejä furniture-wrapper-luokan sisällä. Pääotsikot (h1) ovat lihavoituja ja vaaleanharmaita (#dcdcdc). Pääotsikoissa olevilla kuvilla ei ole ylämarginaalia ja on pieni alamarginaali.
Näytöillä, joiden leveys on yli 71.25em, värikäs viiva ilmestyy ennen metatietojen osaa. Metatietojen osan teksti ja yhteenvedot ovat vaaleanharmaita. Sosiaalisen median linkit ja painikkeet ovat värikäs reuna ja käyttävät tiettyä väriä tekstille ja kuvakkeille, joka vaihtuu tummaksi taustaksi hiiren ollessa päällä.
Metatietojen osan linkit käyttävät tiettyä väriä ja säilyttävät sen hiiren ollessa päällä vastaavilla alleviivauksilla. Ingressiosassa linkit alleviivataan vaaleanharmaalla värillä, joka vaihtuu hiiren ollessa päällä, ja kappaleiden teksti on vaaleanharmaa. Leveämmillä näytöillä ensimmäisellä kappaleella voi olla tai ei ole yläreunaa. Ingressin listakohdat ovat myös vaaleanharmaita.
Näytöillä, joiden leveys on yli 71.25em, viiva ilmestyy ennen ingressiä. Näytöillä, joiden leveys on yli 46.25em, wrapper saa tumman taustan ja oikean reunan.Furniture-wrapper käyttää pseudoelementtejä luodakseen sivureunat. `:before`-elementti sijoitetaan vasemmalle tummalla taustalla ja vasemmalla reunalla, kun taas sen leveys ja vasen sijainti lasketaan näkymän leveyden, vierityspalkin leveyden ja kiinteän perusleveyden 738px perusteella. `:after`-elementti peilaa tämän oikealla puolella oikealla reunalla.
Suuremmilla näytöillä (vähintään 61.25em) laskelmat sopeutuvat perusleveyteen 978px. Tämä malli jatkuu vielä suuremmille
