Tento CSS kód definuje rodinu písma "Guardian Headline Full" s různými styly a řezy. Zahrnuje varianty light (300), regular (400), medium (500) a semibold (600), každou v normální i kurzivní verzi. Pro každý styl poskytuje soubory písem ve formátech WOFF2, WOFF a TrueType z asset serveru Guardian.
Tento CSS kód 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. Dále zahrnuje pravidla responzivního designu pro hlavní obsahový sloupec v interaktivních layoutech, upravující 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 vešly na displej. Kód zajišťuje, že prvky jako odstavce a seznamy zachovávají maximální šířku pro čitelnost, a řeší imerzivní prvky jejich roztažením na plnou šířku na mobilních zařízeních a úpravou jejich rozložení na větších obrazovkách.
Pro interaktivní obsahové sloupce je přidáno levé ohraničení ve světle šedé barvě a posunuté mírně doleva. Prvky uvnitř těchto sloupců nemají horní ani dolní okraje, ale obsahují vnitřní odsazení 12px. Když za prvkem následuje odstavec, vnitřní odsazení je odstraněno a okraje jsou nastaveny na 12px. Řádkové prvky jsou omezeny na maximální šířku 620px a na širších obrazovkách se tohoto omezení drží i obrázky s konkrétní rolí.
Jsou definovány proměnné pro barvy různých textových a pozadových prvků, včetně datové linky, ohraničení hlavičky, popisků a feature barev, s výchozí feature barvou nastavenou na červenou.
Prvky stylované jako atomy nemají vnitřní odsazení. Konkrétní pravidla platí pro první odstavec následující za určitými prvky nebo vodorovnými čarami v různých obsahových oblastech, přidávající horní vnitřní odsazení 14px. Dále je první písmeno těchto odstavců stylováno velkým, tučným verzálkovým písmem ve stylu nadpisu, obarveným podle definované feature barvy, a je posunuto doleva s okrajem.
Vodorovné čáry následované odstavci v různých obsahových sekcích nemají horní vnitřní odsazení. Pullquoty v konkrétních obsahových oblastech mají maximální šířku 620 pixelů.
Pro showcase prvky v různých kontejnerech článků jsou popisky pozicovány staticky s plnou šířkou a maximální šířkou 620 pixelů.
Imerzivní prvky se rozprostírají na plnou šířku viewportu mínus šířka posuvníku. Na obrazovkách širokých až 71.24em jsou tyto prvky omezeny na 978 pixelů, s vnitřním odsazením popisků 10 pixelů. Mezi 30em a 71.24em se vnitřní odsazení popisků zvyšuje na 20 pixelů. Pro obrazovky mezi 46.25em a 61.24em je maximální šířka 738 pixelů. Pod 46.24em se imerzivní prvky zarovnávají doleva s upravenými okraji a vnitřním odsazením popisků 20 pixelů mezi 30em a 46.24em.
Furniture wrapper používá grid layout na obrazovkách 61.25em a širších, s definovanými sloupci a řádky pro organizaci obsahu. Nadpisy mají horní ohraničení, meta sekce mají horní vnitřní odsazení a standfirst prvky obsahují stylované odkazy s podtržením, které při najetí mění barvu. Původně má první odstavec v standfirst horní ohraničení a žádné dolní vnitřní odsazení, které je odstraněno na obrazovkách 71.25em a výše.
Obrázky uvnitř furniture wrapperu mají levé okraje a maximální šířku 630 pixelů pro řádkové prvky. Na větších obrazovkách (71.25em a výše) jsou grid sloupce přeorganizovány pro jiné umístění obsahu. Rozložení používá grid s konkrétními sloupci a řádky pro různé velikosti obrazovek. Pro menší obrazovky grid definuje oblasti pro titul, nadpis, standfirst, meta informace a portrét, s řádky nastavenými na pevné a automatické výšky. Tenká čára se objevuje nad meta sekcí a standfirst má svislou čáru na levé straně.
Na větších obrazovkách se grid upravuje pro použití zlomkových jednotek pro řádky a rozšiřuje rozpětí sloupců. Velikost písma nadpisu se zvětšuje a jeho maximální šířka se mění, zatímco některé prvky jako čáry jsou skryty. Text standfirst je stylován konkrétní tloušťkou a velikostí písma a hlavní mediální oblast je pozicována uvnitř gridu, s úpravami šířky a okrajů na menších zařízeních. Popisky jsou absolutně pozicovány dole s barvou pozadí a vnitřním odsazením.
CSS kód definuje styly pro komponentu furniture wrapper, včetně jejího rozložení, barev a responzivního chování napříč různými velikostmi obrazovek. Nastavuje barvy pozadí, textu a styly ohraničení pomocí CSS vlastních vlastností pro témata jako tmavý režim. Wrapper upravuje okraje, vnitřní odsazení a pozicování na větších obrazovkách a zahrnuje skryté prvky a interaktivní tlačítka s efekty při najetí pro sdílení na sociálních sítích. Nadpisy a meta informace jsou stylovány specifickými písmy a barvami, zajišťující konzistenci designu.
Tento CSS kód definuje styly pro prvky uvnitř třídy "furniture-wrapper", zaměřující se na meta informace a standfirst sekce. Nastavuje barvu textu na světle šedou (#dcdcdc) a barvu odkazů na odstín založený na proměnné, s efekty při najetí, které mění barvu dekorace textu. Odkazy v standfirst jsou podtrženy s konkrétním odsazením a barvou a stavy při najetí upravují barvu podtržení odpovídajícím způsobem.
Pro větší obrazovky (min-width: 61.25em) získává první odstavec v standfirst horní ohraničení, které je odstraněno na ještě větších obrazovkách (min-width: 71.25em). Položky seznamu v standfirst také přebírají světle šedou barvu textu.
Kód zahrnuje responzivní prvky pomocí media queries pro různé šířky obrazovky (46.25em, 61.25em, 71.25em a 81.25em). Ty upravují šířku a pozicování pseudoprvků (:before a :after) pro vytvoření oblastí pozadí s ohraničením, vypočítávající rozměry na základě šířky viewportu a úprav posuvníku.
Dále styluje SVG prvky uvnitř keylines a sociálních médií nebo komentářových prvků v meta sekci, nastavující jejich barvu čáry a textu tak, aby odpovídala tématu pomocí CSS proměnných.
Sekce komentářů má barvu ohraničení, která odpovídá barvě ohraničení hlavičky. V článcích mají nadpisy druhé úrovně světlou tloušťku písma 200, ale pokud obsahují strong prvek, používají tučnou tloušťku 700.
Dále je definována rodina písem Guardian Headline Full s různými styly a řezy, včetně light, regular, medium a semibold, každá v normální a kurzivní verzi. Tato písma jsou získávána z konkrétních URL ve formátech WOFF2, WOFF a TrueType.
Tento CSS kód definuje několik font face pro rodinu písem "Guardian Headline Full", každou s různými řezy a styly (normální a kurzivní), v rozsahu od semibold (600) po black (900). Zahrnuje také font face pro "Guardian Titlepiece" v tučném řezu. Písma jsou získávána z konkrétních URL ve formátech WOFF2, WOFF a TrueType.
Dále kód nastavuje CSS vlastní vlastnosti (proměnné) pro pozadí tmavého režimu a feature barvy, upravující je na základě preference uživatelského barevného schématu nebo když je stránka prohlížena na zařízeních iOS nebo Android. Zahrnuje také stylování prvního písmene odstavců v kontejnerech článků na těchto mobilních platformách, s konkrétními selektory pro zpracování sign-in bran.
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í pillar barvou. Na iOS i Android jsou hlavičky článků skryty a furniture wrappery mají specifické vnitřní odsazení. Štítky uvnitř těchto wrapperů používají tučné, verzálkové písmo ve stylu nadpisu s novou pillar barvou. Nadpisy jsou nastaveny na 32px, tučné, s dolním vnitřním odsazením a tmavou barvou. Obrázky ve furniture wrapperech jsou relativně pozicovány, rozprostírají se na šířku viewportu mínus posuvník a automaticky upravují svou výšku.
Pro zařízení Android mají obrázky uvnitř kontejnerů článků nastaveno průhledné pozadí, rozprostírají se na plnou šířku viewportu mínus posuvník a automaticky upravují svou výšku.
Na iOS i Android mají sekce shrnutí článků horní a dolní vnitřní odsazení 4px a 24px, s pravým záporným okrajem -10px.
Text v těchto shrnutích používá rodinu písem Guardian Headline nebo podobná patková písma.
Odkazy uvnitř shrnutí jsou stylovány specifickou barvou, podtrženy s odsazením 6px a používají určenou barvu pro podtržení, která se při najetí změní na barvu odkazu.
Dále mají meta sekce v článcích na obou operačních systémech konzistentní stylování.
Pro zařízení Android je okraj meta prvků ve standardních a komentářových kontejnerech článků nastaven na nulu.
Na zařízeních iOS se informace o autorovi a byline v feature, standardních a komentářových kontejnerech článků objeví v určené pillar barvě. Podobně na zařízeních Android budou stejné prvky v feature, standardních a komentářových kontejnerech článků také používat pillar barvu.
Pro iOS i Android nemají různé meta informace v feature, standardních a komentářových kontejnerech článků žádné vnitřní odsazení a jakékoli SVG ikony uvnitř nich jsou stylovány pillar barvou jako jejich čára.
Tlačítko popisku v showcase prvcích pro feature, standardní a komentářové články na iOS i Android je zobrazeno jako flex kontejner. Je vycentrováno, měří 28 x 28 pixelů a je pozicováno 14 pixelů zprava s vnitřním odsazením 5 pixelů.
Tělo článku v feature, standardních a komentářových kontejnerech pro iOS a Android má vodorovné vnitřní odsazení 12 pixelů a svislé vnitřní odsazení žádné.
Pro zařízení iOS a Android, v feature, standardních a komentářových kontejnerech článků, nebudou mít obrázky v těle článku, které nejsou miniaturami ani imerzivní, žádný okraj, šířku vypočítanou jako plná šířka viewportu mínus 24 pixelů a šířka posuvníku, a automatickou výšku. Jejich popisky nebudou mít vnitřní odsazení.
Imerzivní obrázky v těchto kontejnerech se rozprostřou na plnou šířku viewportu mínus šířka posuvníku.
V prozu těla článku budou citované blockquoty zobrazovat barevný značkovač pomocí nové pillar barvy. Odkazy budou stylovány primární pillar barvou, podtrženy s odsazením a použijí barvu ohraničení hlavičky pro podtržení. Při najetí se barva podtržení změní na novou pillar barvu.
V tmavém režimu bude pozadí furniture wrapperu nastaveno na tmavě šedou (#1a1a1a).
Pro zařízení iOS a Android aplikujte následující styly na feature, standardní a komentářové kontejnery článků:
- Nastavte obsahové štítky na použití nové pillar barvy.
- Odstraňte barvu pozadí z nadpisů a nastavte jejich barvu textu na barvu ohraničení hlavičky, zajistěte, aby to mělo prioritu.
- Přimějte odstavce a odkazy standfirst převzít barvu ohraničení hlavičky.
- Použijte novou pillar barvu pro autory byline a jejich odkazy.
- Aplikujte novou pillar barvu na čáru různých meta ikon.
- Nastavte barvu popisků showcase obrázků na barvu datové linky.
- Stylujte citované blockquoty v prozu těla článku odpovídajícím způsobem.
Pro zařízení iOS a Android je barva textu citovaných bloků v tělech článků nastavena na specifickou pillar barvu.
Dále je barva pozadí pro různé sekce těla článku na obou operačních systémech vynucena na tmavé pozadí.
Na iOS je první písmeno následující za určitými prvky v tělech článků stylováno s efektem iniciály.
Toto se jeví jako CSS selektor cílící na první písmeno odstavců, které následují za specifickými prvky v různých kontejnerech článků na platformách iOS a Android. Selektor se aplikuje na různé typy článků (standard, feature, comment) a zohledňuje sign-in brány, které se mohou objevit mezi prvky.
Tento CSS kód definuje styly pro specifické prvky na zařízeních Android a iOS. Nastavuje barvu prvního písmene v určitých odstavcích na bílou nebo barvu z vlastní proměnné. Také upravuje vnitřní odsazení a okraje pro standfirst prvky v komentářových článcích, nastavuje velikosti písma pro nadpisy h2 a upravuje vnitřní odsazení pro tlačítka popisků.
Pro tmavý režim mění barvy textu a ikon na světlejší odstíny a definuje tmavou barvu pozadí. Dále skrývá hlavičky článků jejich nastavením na plně průhledné a aplikuje styly na furniture wrappery, ačkoli poslední pravidlo se jeví neúplné.
Pro zařízení iOS a Android nemá furniture
