Tento text definuje vlastní rodinu písem nazvanou "Guardian Headline Full" s různými řezy a styly. Určuje soubory písem v různých formátech (WOFF2, WOFF a TrueType) a jejich online umístění, aby je prohlížeč mohl v případě potřeby načíst. Definice zahrnují řezy light, regular, medium a semibold, každý s normálním a kurzívním stylem.
Tento kód CSS definuje několik rodin písem pro fonty Guardian Headline a Guardian Titlepiece, specifikuje jejich zdroje v různých formátech (WOFF2, WOFF a TrueType) spolu s jejich řezy a styly. Zahrnuje také pravidla responzivního designu pro hlavní obsahový sloupec v interaktivních rozloženích, která upravují okraje, šířky a pozicování na základě velikosti viewportu. Například na širších obrazovkách přidává levý okraj a ohraničení, zatímco na menších obrazovkách upravuje šířky a pozice prvků, aby se přizpůsobily zobrazení. Styly zajišťují, že se prvky jako odstavce, seznamy a imerzivní obsah přizpůsobí vhodně na různých zařízeních.
Pro hlavní sloupec interaktivního obsahu je přidáno levé ohraničení před prvkem, umístěné 11 pixelů vlevo. Uvnitř tohoto sloupce mají atomy žádný horní nebo dolní okraj, ale 12 pixelů vnitřního odsazení na obou koncích. Když za atomem následuje odstavec, vnitřní odsazení je odstraněno a místo toho jsou aplikovány okraje 12 pixelů. Řádkové prvky jsou omezeny na maximální šířku 620 pixelů a pro obrazovky širší než 61,25em se na tento limit šířky řídí i řádkové obrázky s konkrétní rolí.
Jsou definovány proměnné barev pro různé prvky, jako je datum, ohraničení záhlaví, text popisku a pozadí, s feature barvou nastavenou na červenou a výchozí novou barvou pilíře nastavenou na feature barvu. Atomy v hlavním sloupci nebo jinde nemají žádné vnitřní odsazení.
Pro první odstavec následující po specifických prvcích, jako jsou atomy, brány pro přihlášení nebo vodorovné čáry v různých obsahových oblastech (tělo článku, interaktivní obsah, komentáře, feature články), je přidáno horní vnitřní odsazení 14 pixelů. Navíc je první písmeno těchto odstavců stylováno specifickou rodinou písem, tučným řezem, velkou velikostí písma, velkými písmeny, je vyplaveno doleva a obarveno pomocí proměnné pro iniciály nebo nové barvy pilíře.
Pokud odstavec následuje po vodorovné čáře v těchto obsahových oblastech, je horní vnitřní odsazení nastaveno na nulu.
Citace v konkrétních obsahových oblastech by neměly přesáhnout šířku 620 pixelů.
U prvků showcase v hlavních článcích, feature článcích, standardních článcích a komentářích by popisky měly zůstat na své normální pozici, zabírat celou šířku a být omezeny na 620 pixelů.
Imerzivní prvky by měly zabírat celou šířku viewportu s ohledem na posuvníky. Na obrazovkách menších než 71,24em jsou tyto prvky omezeny na šířku 978 pixelů s 10px bočním vnitřním odsazením pro popisky. Mezi 30em a 71,24em se vnitřní odsazení popisků zvyšuje na 20px.
Mezi 46,25em a 61,24em mají imerzivní prvky maximálně 738 pixelů. Pod 46,24em jsou zarovnány k levému okraji bez pravého okraje a s 10px levým vnitřním odsazením, které se mezi 30em a 46,24em zvyšuje na 20px, kde popisky také dostávají 20px vnitřního odsazení.
Pro větší obrazovky (61,25em a výše) používá furniture wrapper rozložení mřížky s definovanými sloupci a řádky. Nadpisy dostávají horní ohraničení, meta informace jsou pozicovány relativně s horním vnitřním odsazením a perex má specifické styly: položky seznamu s velikostí písma 20px, odkazy podtržené bez ohraničení nebo pozadí, měnící barvu při najetí, a první odstavce s horním ohraničením kromě velmi velkých obrazovek (71,25em+).
Obrázky uvnitř wrapperu nemají dolní okraj a mají 10px levé vnitřní odsazení, s řádkovými prvky omezenými na 630 pixelů. Na největších obrazovkách se mřížka přizpůsobuje struktuře sloupců.
Rozložení používá mřížku s konkrétními sloupci a řádky pro různé velikosti obrazovek. Pro menší obrazovky má mřížka tři sloupce a řádky s pevnými a automatickými výškami, zatímco větší obrazovky upravují výšky řádků proporcionálně.
Prvky jako meta sekce mají horní ohraničující čáru a perex sekce má svislou čáru vlevo. Nadpisy jsou stylovány s maximální šířkou a velikostí písma, která se na větších obrazovkách zvětšuje, a některé prvky jsou skryty nebo upraveny v okrajích a vnitřním odsazení na základě viewportu.
Hlavní mediální oblast je umístěna v rámci mřížky a na mobilních zařízeních zabírá celou šířku, s popisky stylovanými tak, aby se zobrazovaly dole s barvou pozadí. Sociální a komentářové prvky v meta sekci mají ohraničení odpovídající barvě záhlaví a některé komponenty se nezobrazují.
Furniture wrapper nastavuje tmavé pozadí a upravuje okraje a vnitřní odsazení pro různé velikosti obrazovek. Na větších obrazovkách přidává postranní panely s odpovídajícími pozadími a ohraničeními.
Nadpisy používají tučný, světle šedý text, zatímco názvy článků a sociální tlačítka přebírají vlastní barvu (jako feature barva pro tmavý režim). Sociální tlačítka mají ohraničení a mění barvu při najetí, přičemž se prohodí barva pozadí a ikony.
Popisky jsou stylovány specifickými barvami a ovládacími prvky viditelnosti, včetně přepínacího tlačítka, které se zobrazuje jako malý kroužek vpravo dole. Mediální dotazy upravují vnitřní odsazení a pozicování prvků pro tablety a počítače, zajišťující správné rozestupy a zarovnání napříč zařízeními.
Tento kód CSS styluje prvky uvnitř třídy furniture-wrapper, nastavuje barvy, ohraničení a rozložení pro různé velikosti obrazovek. Definuje barvy odkazů a efekty při najetí pomocí CSS proměnných pro meta a perex sekce, s textovými dekoracemi a odsazením. Mediální dotazy upravují rozložení pro různé šířky viewportu, vytvářejí postranní panely s ohraničením a barvami pozadí, které se podle toho škálují. Sociální a komentářové prvky v meta sekci jsou také stylovány, s tahy SVG odpovídajícími barvě ohraničení záhlaví.
Komentářová sekce má barvu ohraničení, která odpovídá barvě ohraničení záhlaví.
Pro nadpisy článků (h2) v hlavním těle nebo interaktivním obsahu je řez písma nastaven na light (200). Pokud však nadpis h2 obsahuje strong prvek, použije se tučný řez písma (700).
Dále je rodina písem Guardian Headline Full definována s různými řezy a styly, včetně light, regular, medium a semibold, v normální i kurzívní podobě. Každý soubor písma je získáván z konkrétních URL ve formátech WOFF2, WOFF a TrueType.
Tento kód CSS definuje několik rodin písem a jejich variant pro web Guardian. Specifikuje různé řezy a styly písma (jako tučné, kurzíva) pro písmo "Guardian Headline Full" a poskytuje více formátů souborů (WOFF2, WOFF, TTF) pro kompatibilitu napříč prohlížeči. Dále zahrnuje písmo "Guardian Titlepiece" v tučném řezu.
Kód také nastavuje vlastní vlastnosti CSS (proměnné) pro barvy, upravuje je pro preference tmavého režimu na zařízeních iOS a Android. Zahrnuje specifické styly pro první písmeno odstavců v kontejnerech článků na těchto mobilních platformách, zajišťující konzistentní typografické zpracování v různých kontextech.
Pro zařízení Android je první písmeno prvního odstavce ve standardních a komentářových článcích stylováno sekundární barvou pilíře. Na iOS i Androidu jsou záhlaví článků skryta a furniture wrappery mají specifické vnitřní odsazení. Štítky uvnitř těchto wrapperů používají tučné, velkými písmeny psané písmo v nadpisovém stylu s novou barvou pilíře. Nadpisy jsou nastaveny na 32px, tučné, s dolním vnitřním odsazením a tmavou barvou. Obrázky ve furniture wrapperech jsou pozicovány relativně, rozšiřují se na šířku viewportu minus šířka posuvníku a mají automatickou výšku, s vnitřními prvky a odkazy stylovanými podle toho.
Pro zařízení Android jsou obrázky uvnitř kontejnerů článků nastaveny na průhledné pozadí, zabírají celou šířku viewportu minus šířka posuvníku a jejich výška se přizpůsobuje automaticky.
Na iOS i Androidu má perex sekce v článcích horní a dolní vnitřní odsazení 4px a 24px, s pravým odsazením -10px. Text uvnitř používá rodinu písem Guardian Headline nebo záložní písma serif.
Odkazy uvnitř perexu na obou platformách jsou stylovány specifickou barvou, podtržené s odsazením 6px, a používají světle šedé podtržení, které se při najetí změní na barvu pilíře. Nemají obrázkové pozadí ani ohraničení.
Dále se meta sekce v kontejnerech článků vztahuje na zařízení iOS i Android.
Pro zařízení Android odstranit okraje z meta prvků v kontejnerech standardních a komentářových článků.
Pro zařízení iOS nastavit barvu prvků byline a autor v kontejnerech feature, standardních a komentářových článků na novou barvu pilíře. Také odstranit vnitřní odsazení z meta různých prvků a nastavit tah jejich SVG ikon na novou barvu pilíře. Dále stylovat tlačítko popisku v prvcích showcase s konkrétním zobrazením, vnitřním odsazením, zarovnáním a rozměry.
Pro iOS i Android nastavit vnitřní odsazení těla článku na 0 po stranách a 12px nahoře a dole v kontejnerech feature, standardních a komentářových článků.
Pro zařízení iOS a Android, v kontejnerech feature, standardních a komentářových článků, budou obrázky, které nejsou miniatury nebo imerzivní, mít žádný okraj, šířku celého viewportu minus 24 pixelů a šířku posuvníku, a automatickou výšku. Jejich popisky budou mít žádné vnitřní odsazení.
Imerzivní obrázky v těchto kontejnerech budou zabírat celou šířku viewportu minus šířka posuvníku.
Citované blockquotes v těle článku zobrazí barevný značkovač pomocí nové barvy pilíře.
Odkazy uvnitř těla článku budou stylovány primární barvou pilíře, podtržené s odsazením, a použijí barvu ohraničení záhlaví pro podtržení. Při najetí se barva podtržení změní na novou barvu pilíře.
V tmavém režimu bude pozadí furniture wrapperu nastaveno na tmavě šedou (#1a1a1a).
Pro zařízení iOS a Android aplikovat následující styly na kontejnery feature, standardních a komentářových článků:
- Nastavit barvu textu obsahových štítků na novou barvu pilíře.
- Odebrat barvu pozadí z nadpisů a nastavit jejich barvu textu na barvu ohraničení záhlaví, s prioritou.
- Nastavit text v odstavcích perexu tak, aby odpovídal barvě ohraničení záhlaví.
- Použít novou barvu pilíře pro odkazy v sekcích perexu a pro autorství (včetně odkazovaných jmen autorů).
- Aplikovat novou barvu pilíře na tah ikon různých metadat.
- Nastavit barvu popisků pro obrázky showcase na barvu datové linky.
- Pro citovaný text uvnitř těla článku použít příslušné styly.
Pro zařízení iOS a Android je barva textu citovaných bloků v tělech článků nastavena na specifickou barvu pilíře.
Dále je barva pozadí pro různé sekce těla článku na iOS i Android změněna na tmavé pozadí, s prioritou před ostatními styly.
Dále, pro první písmeno následující po určitých prvcích v tělech článků na iOS, je aplikován speciální styl, ačkoli přesný styl zde není specifikován.
Tento kód CSS cílí na první písmeno odstavců, které následují po specifických prvcích uvnitř různých kontejnerů článků na zařízeních iOS a Android. Vztahuje se na různé sekce jako těla článků, těla feature článků, komentářové sekce a interaktivní obsah, zajišťující konzistentní stylování iniciál nebo formátování počátečního písmene napříč platformou.
Tento kód CSS definuje styly pro specifické prvky na zařízeních Android a iOS. Nastavuje barvu prvního písmene v odstavcích následujících po určitých prvcích na bílou nebo barvu vlastní proměnné. Také upravuje vnitřní odsazení a okraje pro perex prvky v komentářových článcích, nastavuje velikosti písma pro nadpisy h2 a upravuje vnitřní odsazení tlačítek popisků rozdílně na iOS a Android.
Pro preference tmavého režimu mění různé barevné proměnné na světlejší odstíny a definuje tmavou barvu pozadí. Dále činí záhlaví článků neviditelnými nastavením jejich opacity na nulu a aplikuje
