Tämä CSS-koodi määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full", joka sisältää useita fontin painoja ja tyylejä. Se sisältää light-, regular-, medium- ja semibold-painot, joista jokainen on sekä normaalissa että kursiivisessa tyylissä. Fonttitiedostot on toimitettu WOFF2-, WOFF- ja TrueType-muodoissa, ja ne sijaitsevat Guardianin asset-palvelimella.
Guardian Headline Full -fonttiperhe sisältää useita tyylejä, joista jokainen on saatavilla useassa muodossa (WOFF2, WOFF ja TTF). Tyylit ovat:
- Bold (paino 700, normaali tyyli)
- Bold Italic (paino 700, kursiivinen tyyli)
- Black (paino 900, normaali tyyli)
- Black Italic (paino 900, kursiivinen tyyli)
- Light (paino 300, normaali tyyli)
- Light Italic (paino 300, kursiivinen tyyli)
- Regular (paino 400, normaali tyyli)
- Regular Italic (paino 400, kursiivinen tyyli)
Lisäksi Guardian Titlepiece -fontti on saatavilla Bold-tyylisenä (paino 700, normaali tyyli).
Fonttiperhe "Guardian Headline Full" sisältää useita fonttitiedostoja eri painoissa ja tyyleissä. Jokainen fontti on saatavilla WOFF2-, WOFF- ja TrueType-muodoissa määritetyillä URL-osoitteilla. Painot vaihtelevat 400 (regular) - 900 (black), ja jokaisesta painosta on saatavilla sekä normaali että kursiivinen tyyli.
@font-face {
font-family: Guardian Headline;
src: 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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ Kuvatekstin tyylittely jatkuu tässä /
}
}
Immersiivisten kuvien kuvateksteille ja interaktiivisen grid-sisällön täytteeksi on asetettu 4 pikseliä yläreunaan ja 0 muualle. Interaktiivisissa grideissä olevat "lines" ja "meta" -nimiset elementit on sijoitettu tiettyyn grid-alueeseen. "Lines" -elementeille on asetettu korkeus sisällön mukaiseksi ja ylämarginiksi 5 pikseliä, kun taas "meta" -elementeillä on ylämargin 18 pikseliä.
Yli 81,25 em leveillä näytöillä interaktiiviset gridit käyttävät viisisarakkeista asettelua kiinteillä ja joustavilla leveysarvoilla.
iOS- ja Android-laitteissa artikkelien otsikoissa käytetään tiettyjä fontteja ja painoja johdantoteksteille, osiomerkinnöille ja tekijätiedoille. Osiomerkinnät on kirjoitettu isoilla kirjaimilla, ja avainviivojen täytteitä on säädetty. Kuvien taustat ovat läpinäkyviä, ja kuvat on siirretty hieman oikealle. Otsikoilla on läpinäkyvät taustat, säädetyt täytteet, ja niissä käytetään 24 pikselin fonttikokoa 115 % rivivälillä.
Androidille päätason ja alatason otsikot on asetettu näytettäviksi lohkoina. Sekä iOS- että Android-laitteissa alatason otsikot on tyylitelty kevyellä fontin painolla, vasemmalle tasattuun asetteluun ja tasapainoiseksi tekstinkääntöön.
Artikkelien johdanto-osioilla ei ole täytteitä, ja niiden kopio on piilotettu.
Tekijätieto- ja julkaisupäivämääräelementit käyttävät 17px fonttikokoa normaalipainoisena 130 % rivivälillä. Tekijätiedon teksti ja tekijälinkit ovat väriä #707070.
Johdantokappaleet on asetettu 20px, normaalityylisiä, kevyttä painoa ja 115 % riviväli. Johdantokappaleiden linkit ovat lihavoituja, väriä #707070, alareunussa on reunus eikä taustakuvaa.
Otsikkoteksti on väriä #dcdcdc.
Kuvat ja niiden säiliöt on asetettu leveydelle 100vw miinus 20px, automaattisella korkeudella ja enimmäisleveydellä 620px. Sisäkuva-elementeillä korkeus on asetettu pois käytöstä. Esittelykuvilla on enimmäisleveys 280px.
Tietyt osiot ja sivupalkit navigoinnin jälkeen on piilotettu. Atom-elementeillä ei ole marginaalia eikä täytettä.
Esittelyelementeillä ja niiden sisällöillä on enimmäisleveys 210px, joka kasvaa 260px:ään yli 61,25 em näytöillä. Inline- ja esittelyelementtien kuvatekstien jänteet on myös tyylitelty vastaavasti.
Vartalon kuvateksteissä jänteteksti on asetettu 14px, vaaleanharmaa väri (#707070) ja inline-näyttöön. Inline- ja esittelyelementtien kuvatekstien ensimmäinen jänne on asetettu inline-blockiksi.
Yli 71,25 em näytöillä inline- ja esittelyelementtien kuvatekstit on sijoitettu suhteellisesti ja niiden leveys on nollattu.
Interaktiivisissa sisältöartikkeleissa asettelu käyttää grid-alueita nimeltä "header", "headline", "standfirst", "lines", "meta" ja "body". Suurilla näytöillä (71,25 em ja yli) grid-asettelu muuttuu kolmeen sarakkeeseen alueilla "header", "meta", "border", "standfirst" ja "body". Pääsarakkeen marginaali poistetaan, vasen reunus piilotetaan ja kappaleen leveys asetetaan 620px.
Otsikkoelementeillä on tietyt fonttiasetukset: Guardian Headline tai vastaavat fontit, 24px koko, kevyt paino (300) ja vaaleanharmaa väri (#dcdcdc). Täytteet ovat 0–10px pienillä näytöillä, 0–20px keskikokoisilla näytöillä (30 em ja yli) ja poistettu suurilla näytöillä (71,25 em ja yli).
Avainviivat ja viivat on piilotettu. Suurilla näytöillä artikkelin otsikko on sijoitettu absoluuttisesti 20px vasemmalta.
Artikkelin otsikkolinkit käyttävät 17px fonttikokoa ja normaalia tyyliä. Otsikon ylätäyte on 2px, ja merkinnöillä on yläreuna ja täyte (0–10px pienillä näytöillä, 0–20px keskikokoisilla näytöillä). Suurimmilla näytöillä (71,25 em ja yli) yläreuna poistetaan ja täyte asetetaan 0.
Tämä CSS-koodi tyylittelee interaktiivisen artikkelin elementtejä.
Artikkelien otsikoille ja linkeille se asettaa riviväliksi 115 % ja tekstin väriksi #ff5943. Kun osoitetaan otsikkolinkkejä, alleviivauksen väri muuttuu #dcdcdc:ksi.
Johdanto (artikkelin yhteenveto) käyttää tiettyjä fontteja, harmaata väriä (#606060), 24px fonttikokoa, normaalia tyyliä, 400 painoa ja 115 % riviväliä. Siinä on täytteet, jotka sopeutuvat näytön leveyteen: 2px 10px pienemmillä näytöillä, 2px 20px 30 em ja leveämmillä näytöillä, eikä täytteitä 71,25 em ja yli näytöillä. Johdannon linkit ovat #707070 ja saavat 2px alareunan hover-tilassa.
Meta-osion sosiaalisen median painikkeilla ei ole siirtymävaikutusta. Hover-tilassa niiden tausta muuttuu #121212, reuna #121212, teksti #dcdcdc ja mahdolliset SVG-kuvakkeet myös muuttuvat täytöltään #dcdcdc taustalla #121212.
Jaa-painikkeet on piilotettu. Pieni 4px inline-välielementti on määritelty. Artikkelirungolle nimeä käyttävä grid-säiliö käyttää kaksisarakkeista asettelua enimmäisleveydellä 620px.
Yli 46,25 em näytöillä nimeä käyttävä grid-säiliö käyttää kahta saraketta, kumpikin 310px leveä. Parittomilla grid-kohteilla on 5px oikea täyte (10px leveämmillä näytöillä), kun taas parillisilla kohteilla on 5px vasen täyte (10px leveämmillä näytöillä).
Gridin otsikot (h2) käyttävät 17px fonttikokoa, yläreunaa, 2px ylätäytettä ja enimmäisleveyttä 620px. Näitä otsikoita seuraavilla listakohteilla ei ole täytettä eikä marginaalia, ja ensimmäinen kohta käyttää eri tekstiväriä. Listakohtien merkit on piilotettu, ja kappaleteksti käyttää tiettyä fonttiperhettä, 14px kokoa ja 130 % riviväliä.
Immersiivisillä kuvilla on tumma tausta, ja niiden sisällä olevat kuvat alkavat täysin läpinäkyvinä. Kun "fade-in" -luokkaa käytetään, kuvista tulee täysin peittäviä sulavalla 1 sekunnin siirtymällä.
Muistomerkin otsikko kattaa koko näkymän leveyden (miinus vierityspalkin leveys), sillä on tumma tausta, valkoinen teksti ja negatiiviset vasemman marginaalin säätö näytön koon mukaan. Keskikokoisilla ja suuremmilla näytöillä se sisältää keskitetyn täytteen ja reunan. Nimet-osiolla on vähimmäiskorkeus 200px eikä ylä- tai alareunaa, kun kaluste-osa on kiinnitetty alareunaan lisätäytteellä ja vasemman tasauksen säätöillä suuremmilla näytöillä. Kalusteen sisäosassa on vasen täyte ja reuna leveämmillä näytöillä.
/
* Serif-fonttipino
*/
/
* Otsikkofonttipino
*/
/
* Sans-serif -tekstifonttipino
*/
/
* Sans-serif -otsikkofonttipino
*/
/
* Oletusfonttiasetukset
* Katso font-scale.html ja font-scale.png visuaalisia esimerkkejä varten
*/
/
* Hae kaikki fonttiaste
