Rodina písma Guardian Headline Full zahrnuje několik stylů, každý s různou tloušťkou a kurzívou. Lehká verze (tloušťka 300) je k dispozici v běžném i kurzívním stylu, stejně jako běžná verze (tloušťka 400). Střední (tloušťka 500) a polotučné (tloušťka 600) styly také mají možnosti běžného a kurzívního provedení. Každý soubor písma je dostupný ve formátech WOFF2, WOFF a TrueType ze serverů Guardianu.
@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;
}
}
Hlavní interaktivní obsahový sloupec má specifické styly pro prvky. Například atomy nemají horní ani dolní okraj, ale mají vnitřní odsazení 12px. Když za atomem následuje odstavec, vnitřní odsazení atomu se odstraní a okraje se nastaví na 12px. Řádkové prvky jsou omezeny na šířku 620px.
U obrázků s rolí loop je popisek umístěn s indexem z 6. Tlačítko loop je stylizováno na šířku 32px, zarovnáno vpravo dole se specifickými okraji. Tlačítko popisku má vysoký index z 100.
Prvky vlastního videa jsou nastaveny na 100% šířku, omezené na 620px, a zobrazeny jako blok s okraji 12px. Video a jeho kontejner také zaujímají plnou šířku až do 620px a jsou vycentrovány. Pokud je video ponořené, odstraní se limit šířky a okraje, takže se rozšíří naplno. Na větších obrazovkách se ponořená videa rozšiřují na šířku 1140px se záporným levým okrajem a při ještě větších velikostech mají šířku 1300px s větším záporným okrajem.
Proměnné barev definují různé barvy motivu, jako je šedá pro datové řádky, okraj záhlaví, text popisku a červená pro funkce. V tmavém režimu se některé barvy přizpůsobí tmavé paletě.
V těle článku má první odstavec za atomem nebo vodorovnou čarou extra horní vnitřní odsazení. Kromě toho je první písmeno prvního odstavce za atomem stylizováno, i když konkrétní stylizace zde není plně podrobně popsána.
CSS kód definuje styly pro iniciály, výňatky a různé layoutové prvky napříč různými sekcemi webu. Iniciály jsou stylizovány specifickým písmem, velikostí a barvou a jsou zarovnány vlevo. Výňatkům je nastavena maximální šířka. U prvků showcase jsou popisky nastaveny na statickou pozici s plnou šířkou a maximální šířkou 620px.
Ponořené prvky jsou nastaveny tak, aby zaujímaly plnou šířku viewportu mínus posuvník. Na obrazovkách menších než 71.24em je jejich maximální šířka upravena na 978px a vnitřní odsazení popisku se liší podle velikosti obrazovky. Na středních obrazovkách (46.25em až 61.24em) je maximální šířka 738px. Na malých obrazovkách (pod 46.24em) mají ponořené prvky záporné levé okraje, aby sahaly k okraji viewportu, s odpovídajícím upravením vnitřního odsazení popisku.
Pro větší obrazovky (nad 61.25em) se pro wrapper nábytku používá mřížkový layout, vytvářející dvousloupcovou strukturu s definovanými řádky pro sekce titulu, nadpisu, perexu, metadat a portrétu. K prvnímu potomkovi prvků nadpisu je přidán horní okraj a pozice sekce metadat je nastavena na absolutní.
Wrapper nábytku nastavuje obsah perexu na relativní pozici s horním vnitřním odsazením 2 pixelů a bez pravého okraje. Uvnitř perexu má hlavní obsahová oblast spodní okraj 4 pixely. Položky seznamu uvnitř perexu používají velikost písma 20 pixelů. Odkazy uvnitř perexu, včetně těch v položkách seznamu, nemají okraj, žádný obrázek na pozadí a jsou podtrženy s odsazením 6 pixelů, přičemž pro podtržení se používá vlastní barva. Při najetí myší se barva podtržení změní na novou barvu pilíře.
První odstavec v perexu má horní okraj a žádné spodní vnitřní odsazení. Pro větší obrazovky (61.25em a výše), pokud je obrazovka také alespoň 71.25em široká, je horní okraj odstraněn. Pro obrazovky široké alespoň 61.25em nemají obrázky levý okraj a maximální šířku 630 pixelů, když jsou řádkové.
Na obrazovkách 71.25em a širších používá wrapper nábytku mřížkový layout se specifickými sloupci a řádky. Před sekcí metadat se objeví dekorativní čára široká 540 pixelů. Odstavce v perexu nemají horní okraj a před obsahem perexu je přidána svislá čára. Pro ještě větší obrazovky (81.25em a výše) se mřížka upraví s více sloupci a řádky, dekorativní čára před metadaty se prodlouží na 620 pixelů a svislá čára před perexem se mírně posune.
Štítky v záhlaví článku nebo sekci titulu mají horní vnitřní odsazení 2 pixely. Nadpis používá tučné písmo, maximální šířku 620 pixelů a velikost písma 32 pixelů. Na větších obrazovkách (71.25em a výše) se nadpis upraví na maximální šířku 540 pixelů a velikost písma 50 pixelů.
Pro střední obrazovky (46.25em a výše) nemají klíčové čáry nebo liniové prvky pravý okraj. Na větších obrazovkách (61.25em a výše) jsou tyto čáry skryty. Čáry používají vlastní barvu pro tah.
Tento CSS kód definuje styly pro layout webové stránky, zejména pro wrapper s motivem nábytku. Nastavuje různé vlastnosti pro prvky jako metainformace, text perexu, hlavní média a popisky. Styly zahrnují úpravy okrajů, vnitřního odsazení, barev a pozic, s konkrétními pravidly pro různé velikosti obrazovek pomocí mediálních dotazů. Design používá vlastní CSS proměnné pro barvy, jako je `--darkBackground` a `--headerBorderColor`, a zajišťuje, že prvky jsou skryty nebo zobrazeny na základě šířky viewportu. Wrapper má tmavé pozadí a zahrnuje responzivní chování pro zařízení od mobilních po desktop.
CSS kód stylizuje prvky uvnitř třídy furniture-wrapper. Nadpisy (h1) jsou tučné a světle šedé (#dcdcdc). Obrázky v nadpisech nemají horní okraj a mají malý spodní okraj.
Pro obrazovky širší než 71.25em se před sekcí metadat objeví barevná čára. Text a shrnutí v sekci metadat jsou světle šedé. Odkazy na sociální média a tlačítka mají barevný okraj a používají specifickou barvu pro text a ikony, která se při najetí myší změní na tmavé pozadí.
Odkazy v sekci metadat používají specifickou barvu a zachovávají ji při najetí myší s odpovídajícími podtrženími. V sekci perexu jsou odkazy podtrženy světle šedou barvou, která se při najetí myší změní, a text odstavců je světle šedý. Na širších obrazovkách může první odstavec získat nebo ztratit horní okraj. Položky seznamu v perexu jsou také světle šedé.
Pro obrazovky širší než 71.25em se před perexem objeví čára. Na obrazovkách širších než 46.25em získá wrapper tmavé pozadí a pravý okraj.
Wrapper nábytku používá pseudoprvky k vytvoření bočních okrajů. Prvek `:before` je umístěn vlevo s tmavým pozadím a levým okrajem, přičemž jeho šířka a levá pozice jsou vypočítány na základě šířky viewportu, šířky posuvníku a pevné základní šířky 738px. Prvek `:after` toto zrcadlí na pravé straně s pravým okrajem.
Pro větší obrazovky (minimální šířka 61.25em) se výpočty upraví na základní šířku 978px. Tento vzorec pokračuje pro ještě větší body zlomu: 71.25em (základ 1138px) a 81.25em (základ 1298px).
Uvnitř wrapperu jsou tahy SVG a okraje některých sociálních/metaprveků nastaveny tak, aby používaly vlastní CSS proměnnou pro barvu, `--headerBorderColor`.
V těle článku mají nadpisy druhé úrovně (`h2`) tloušťku písma 200, ale pokud obsahují prvek `strong`, tloušťka se zvýší na 700.
Nakonec je definováno několik pravidel `@font-face` pro načtení rodiny písma "Guardian Headline Full" v různých tloušťkách a stylech (Light
