Tento CSS kód definuje vlastní fontovou rodinu s názvem "Guardian Headline Full" s více řezy a styly písma. Zahrnuje lehkou, normální, střední a polotučnou tloušťku, každou v normálním i kurzívním stylu. Soubory fontů jsou poskytovány ve formátech WOFF2, WOFF a TrueType a jsou hostovány na asset serveru Guardianu.
Fontová rodina Guardian Headline Full zahrnuje několik stylů, každý dostupný v několika formátech (WOFF2, WOFF a TTF). Styly jsou:
- Tučné (tloušťka 700, normální styl)
- Tučné kurzíva (tloušťka 700, kurzívní styl)
- Černé (tloušťka 900, normální styl)
- Černé kurzíva (tloušťka 900, kurzívní styl)
- Lehké (tloušťka 300, normální styl)
- Lehké kurzíva (tloušťka 300, kurzívní styl)
- Normální (tloušťka 400, normální styl)
- Normální kurzíva (tloušťka 400, kurzívní styl)
Dále je k dispozici font Guardian Titlepiece v tučném stylu (tloušťka 700, normální styl).
Fontová rodina "Guardian Headline Full" zahrnuje více souborů fontů v různých tloušťkách a stylech. Každý font je dostupný ve formátech WOFF2, WOFF a TrueType, hostovaných na specifikovaných URL. Tloušťky se pohybují od 400 (normální) do 900 (černé), přičemž pro každou tloušťku jsou poskytnuty normální i kurzívní styly.
@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 {
/ Stylování popisku pokračuje zde /
}
}
Pro popisky ponořených obrázků a interaktivního obsahu mřížky je nastaveno vnitřní odsazení 4 pixely nahoře a 0 na ostatních stranách. Prvky s názvy "lines" a "meta" v interaktivních mřížkách jsou umístěny v konkrétní oblasti mřížky. Prvky "lines" mají výšku nastavenou tak, aby odpovídala jejich obsahu, a horní okraj 5 pixelů, zatímco prvky "meta" mají horní okraj 18 pixelů.
Na obrazovkách širších než 81,25 em používají interaktivní mřížky pětisloupcové rozložení s pevnými a flexibilními šířkami.
Na zařízeních iOS a Android používají hlavičky článků specifické fonty a tloušťky pro úvodní texty, štítky sekcí a jména autorů. Štítky sekcí jsou psány velkými písmeny a oddělovací čáry mají upravené vnitřní odsazení. Obrázky na obrázcích mají průhledná pozadí a obrázky jsou mírně posunuty doprava. Nadpisy mají průhledná pozadí, upravené vnitřní odsazení a používají velikost písma 24 pixelů s výškou řádku 115 %.
Pro Android jsou hlavní a vedlejší nadpisy nastaveny na zobrazení jako bloky. Na iOS i Android jsou vedlejší nadpisy stylovány s lehkou tloušťkou písma, zarovnáním vlevo a vyváženým zalomením textu.
Úvodní texty článků nemají vnitřní odsazení a jejich kopie je skryta.
Prvky jména autora a data publikace používají písmo o velikosti 17px s normální tloušťkou a výškou řádku 130 %. Text jména autora a odkazy na autora mají barvu #707070.
Odstavce úvodního textu jsou nastaveny na 20px, normální styl, lehkou tloušťku a výšku řádku 115 %. Odkazy v odstavcích úvodního textu jsou tučné, mají barvu #707070, spodní ohraničení a žádný obrázek na pozadí.
Text nadpisu má barvu #dcdcdc.
Obrázky a jejich kontejnery jsou nastaveny na šířku 100vw mínus 20px, s automatickou výškou a maximální šířkou 620px. Vnitřní prvky obrázků mají výšku nastavenou na nedefinovanou. Prezentační obrázky mají maximální šířku 280px.
Některé sekce a postranní panely následující po navigaci jsou skryty. Atomové prvky nemají žádný okraj ani vnitřní odsazení.
Prezentační prvky a jejich obsah mají maximální šířku 210px, která se zvyšuje na 260px pro zobrazení širší než 61,25em. Rozpětí popisků v inline a prezentačních prvcích jsou také odpovídajícím způsobem stylována.
Pro popisky v těle je text rozpětí nastaven na 14px, světle šedou barvu (#707070) a zobrazení inline. První rozpětí v popiscích pro inline a prezentační prvky je nastaveno na inline-block.
Na obrazovkách širších než 71,25em jsou popisky pro inline a prezentační prvky umístěny relativně a jejich šířka je resetována.
Pro články s interaktivním obsahem používá rozložení oblasti mřížky s názvy "header", "headline", "standfirst", "lines", "meta" a "body". Na větších obrazovkách (71,25em a více) se rozložení mřížky mění na tři sloupce s oblastmi pro "header", "meta", "border", "standfirst" a "body". Odsazení hlavního sloupce je odstraněno, levé ohraničení je skryto a šířka odstavce je nastavena na 620px.
Prvky nadpisu mají specifická nastavení písma: Guardian Headline nebo podobné fonty, velikost 24px, lehká tloušťka (300) a světle šedá barva (#dcdcdc). Vnitřní odsazení je 0–10px na malých obrazovkách, 0–20px na středních obrazovkách (30em a více) a odstraněno na velkých obrazovkách (71,25em a více).
Oddělovací čáry a čáry jsou skryty. Na velkých obrazovkách je hlavička článku umístěna absolutně 20px zleva.
Odkazy v hlavičce článku používají velikost písma 17px a normální styl. Horní vnitřní odsazení hlavičky je 2px a štítky mají horní ohraničení a vnitřní odsazení (0–10px na malých obrazovkách, 0–20px na středních obrazovkách). Na větších obrazovkách (46,25em a více) je horní ohraničení odstraněno a vnitřní odsazení je nastaveno na 0 na největších obrazovkách (71,25em a více).
Tento CSS kód styluje prvky v interaktivním článku.
Pro názvy článků a odkazy nastavuje výšku řádku na 115 % a barvu textu na #ff5943. Při najetí myši na odkazy názvů se barva podtržení změní na #dcdcdc.
Úvodní text (shrnutí článku) používá specifické fonty, šedou barvu (#606060), velikost písma 24px, normální styl, tloušťku 400 a výšku řádku 115 %. Má vnitřní odsazení, které se přizpůsobuje podle šířky obrazovky: 2px 10px pro menší obrazovky, 2px 20px pro obrazovky 30em a širší a žádné vnitřní odsazení pro obrazovky 71,25em a více. Odkazy v úvodním textu jsou #707070 a při najetí myši získají spodní ohraničení 2px.
Tlačítka sociálních médií v sekci meta nemají přechodový efekt. Při najetí myši se jejich pozadí změní na #121212, ohraničení na #121212, text na #dcdcdc a případné ikony SVG se také změní na výplň #dcdcdc s pozadím #121212.
Tlačítka sdílení jsou skryta. Je definován malý inline prostorový prvek o velikosti 4px. Pro tělo článku používá pojmenovaný kontejner mřížky dvousloupcové rozložení s maximální šířkou 620px.
Pro obrazovky širší než 46,25em používá pojmenovaný kontejner mřížky dva sloupce, každý o šířce 310px. Liché položky v mřížce mají vnitřní odsazení vpravo 5px (10px na širších obrazovkách), zatímco sudé položky mají vnitřní odsazení vlevo 5px (10px na širších obrazovkách).
Nadpisy (h2) v mřížce mají velikost písma 17px, horní ohraničení, vnitřní odsazení nahoře 2px a maximální šířku 620px. Následující položky seznamu nemají žádné vnitřní odsazení ani okraj, přičemž první položka používá jinou barvu textu. Značky položek seznamu jsou skryty a text odstavce používá specifickou fontovou rodinu, velikost 14px a výšku řádku 130 %.
Ponořené obrázky mají tmavé pozadí a obrázky uvnitř nich začínají zcela průhledné. Při aplikaci třídy "fade-in" se obrázky stanou zcela neprůhlednými s plynulým přechodem trvajícím 1 sekundu.
Pamětní hlavička zabírá celou šířku viewportu (mínus šířka posuvníku), má tmavé pozadí, bílý text a záporné levé okraje, které se přizpůsobují podle velikosti obrazovky. Na středních a větších obrazovkách zahrnuje centrované vnitřní odsazení a ohraničení. Sekce jmen má minimální výšku 200px a žádné horní nebo spodní ohraničení, zatímco sekce vybavení je přilepená dole s dodatečným vnitřním odsazením a úpravami zarovnání vlevo na větších obrazovkách. Vnitřní sekce vybavení zahrnuje vnitřní odsazení vlevo a ohraničení na širších obrazovkách.
/
* Sada serifových fontů
*/
/
* Sada font
