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 mají také 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. Prvky uvnitř tohoto sloupce nemají horní ani dolní okraje, ale obsahují odsazení. Když za prvkem následuje odstavec, mezera se odpovídajícím způsobem upraví. Řádkové prvky jsou omezeny na maximální šířku 620 pixelů.
Pro větší obrazovky jsou také vložené obrázky omezeny na 620 pixelů. Speciální styly platí pro video smyčky, včetně umístění tlačítek a pozic popisků. Vlastně hostovaná videa jsou nastavena na maximální šířku 620 pixelů se středovými okraji, zatímco ponořující videa se rozšiřují na plnou šířku s upravenými okraji na větších obrazovkách.
Proměnné barev definují motiv, jako je barva datové řádky, okraje záhlaví a barvy popisků. V tmavém režimu se tyto barvy přizpůsobují tmavší paletě. První odstavec za určitými prvky dostává dodatečné horní odsazení a první písmeno prvního odstavce může být stylizováno odlišně.
CSS kód definuje styly pro iniciály, výňatky a různé layoutové prvky napříč různými sekcemi webu, jako jsou články, komentáře a speciální příspěvky. Nastavuje specifická písma, velikosti a barvy pro první písmeno odstavců, upravuje šířku a pozicování ponořujících a výstavních prvků a vytváří responzivní mřížkový layout pro větší obrazovky. Styly také zahrnují mediální dotazy pro přizpůsobení layoutu různým velikostem obrazovky.
Obal nábytku nastavuje obsah perexu na relativní pozici s horním odsazením 2 pixelů a bez pravého okraje. Uvnitř perexu mají položky seznamu velikost písma 20 pixelů a odkazy nemají okraj, žádný obrázek na pozadí, podtržení s odsazením 6 pixelů a barvu z vlastní vlastnosti `--headerBorder` (výchozí `#dcdcdc`). Při najetí myši se barva podtržení odkazu změní na barvu definovanou `--new-pillar-colour`.
Pro větší obrazovky (61.25em a výše) nemají obrázky levý okraj a řádkové prvky s konkrétní rolí jsou omezeny na maximální šířku 630 pixelů. Při 71.25em a výše používá layout mřížku s definovanými sloupci a řádky. Před meta sekcí se objeví dekorativní čára a před perexem je přidána svislá čára. Okraje odstavců jsou v tomto bodě zlomu odstraněny.
Při 81.25em se mřížka upraví tak, aby zahrnovala více sloupců, a dekorativní čáry jsou přemístěny.
Nadpisy mají tloušťku písma 600 a maximální šířku 620 pixelů, s velikostí písma 32 pixelů. Na větších obrazovkách (71.25em a výše) se velikost písma nadpisu zvětší na 50 pixelů a maximální šířka se sníží na 540 pixelů.
Pro střední obrazovky (46.25em a výše) nemají prvky s třídou `keyline-4` nebo atributem `data-gu-name=lines` pravý okraj. Na větších obrazovkách (61.25em a výše) jsou tyto prvky skryty. Jejich SVG tahy používají barvu `--headerBorder`.
Tento CSS kód definuje styly pro layout webové stránky, zejména pro obal s motivem nábytku. Nastavuje různé vlastnosti pro prvky jako meta informace, text perexu, hlavní média a popisky. Styly zahrnují úpravy okrajů, odsazení, barev a pozicování, s konkrétními pravidly pro různé velikosti obrazovky pomocí mediálních dotazů. Design používá vlastní CSS proměnné pro barvy, jako jsou funkce tmavého režimu a odstíny pozadí, a zajišťuje responzivní chování napříč zařízeními.
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 meta sekcí objeví barevná čára. Text a shrnutí v meta sekci jsou světle šedé. Tlačítka sociálních médií mají barevný okraj a ikonu, přičemž ikona a text při najetí myši mění barvu.
Odkazy v meta sekci používají barvu motivu a při najetí myši si tuto barvu zachovávají, s podtržením ve stejné barvě. V sekci perexu jsou odkazy podtrženy světle šedou čárou, která se při najetí myši změní na barvu motivu. Odstavce a položky seznamu v perexu jsou světle šedé.
Na obrazovkách širších než 61.25em má první odstavec v perexu horní okraj, který je na obrazovkách širších než 71.25em odstraněn. Na těchto větších obrazovkách se také před perexem objeví barevná čára.
Pro obrazovky širší než 46.25em získá furniture-wrapper tmavé pozadí a pravý okraj.
CSS definuje `.furniture-wrapper` s pseudoprvky, které vytvářejí postranní panely. Ty upravují šířku a pozici na základě velikosti zobrazení, aby udržely středový obsahový prostor pevných šířek (738px, 978px, 1138px, 1298px) napříč různými body zlomu, s ohledem na šířku posuvníku. Okraje a barvy pozadí jsou aplikovány pomocí vlastních CSS vlastností.
Pro nadpisy uvnitř článků používají prvky `h2` světlou tloušťku písma (200), ale přepnou na tučné (700), pokud obsahují prvek `strong`.
Pravidla `@font-face` načítají rodinu písma "Guardian Headline Full" v několika tloušťkách a stylech (Light, Light Italic, Regular, Regular Italic) 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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/f
