Tento CSS kód definuje rodinu písma "Guardian Headline Full" s různými řezy a styly, včetně lehkého, běžného, středního a polotučného, každé v normální a kurzivní verzi. Určuje soubory písem ve formátech WOFF2, WOFF a TrueType hostované na serverech Guardianu.
Tento CSS kód definuje několik řezů písma pro rodiny písem "Guardian Headline Full" a "Guardian Titlepiece". Každý řez písma specifikuje různé řezy a styly (normální nebo kurzíva) a poskytuje více formátů souborů (WOFF2, WOFF a TrueType) pro kompatibilitu mezi prohlížeči. Řezy sahají od lehkého (300) po černé (900), s odpovídajícími kurzivními verzemi, kde je to možné.
Tento CSS kód definuje několik stylů písma pro rodinu písem "Guardian Headline Full". Zahrnuje různé řezy a styly, jako jsou běžné, střední, polotučné, tučné a černé, každé v normální a kurzivní verzi. Pro každý styl určuje soubory písem ve formátech WOFF2, WOFF a TrueType ze serveru assetů Guardianu, spolu s odpovídajícími vlastnostmi řezu a stylu písma.
Tento text se jeví jako CSS kód definující styly písem a rozvržení mřížek pro web, pravděpodobně The Guardian. Specifikuje soubory písem pro různé řezy a styly a nastavuje responzivní rozvržení mřížek, které se mění při různých velikostech obrazovky. Kód řeší, jak jsou obsahové oblasti jako titulky, nadpisy, média a hlavní text uspořádány napříč různými šířkami zařízení, od mobilního zobrazení po desktopové.
Pro interaktivní obrázky v mřížce s poutavými popisky v konkrétních obsahových oblastech je nastaveno vnitřní odsazení popisku na 4 pixely nahoře a 0 jinde.
V různých obsahových sekcích jsou prvky s datovými atributy pro řádky a meta informace umístěny v mřížce od řádku 2 do 5 a sloupce 1 do 2. Prvky lines mají výšku, která se přizpůsobí jejich obsahu, a horní okraj 5 pixelů, zatímco prvky meta mají horní okraj 18 pixelů.
Na větších obrazovkách s minimální šířkou 81,25 em používá rozvržení mřížky pro tyto obsahové oblasti sloupce o šířkách 219px, 1px, 620px, 80px a 300px.
Pro zařízení iOS a Android používají záhlaví článků specifická písma a styly: úvodní text používá Guardian Headline nebo podobná písma s patkami se střední tloušťkou, sekční kickery se zobrazují jako bloky s velkým počátečním písmenem, oddělovací čáry mají horní vnitřní odsazení 12 pixelů a jména autorů používají tučné písmo s patkami. Obrázky v článcích automaticky upravují svou výšku a odstavce následující po atomických prvcích nemají horní okraj.
Jsou definovány řezy písma pro Guardian Headline Full v lehkém a lehkém kurzivním řezu, načítané ze souborů woff2, woff a ttf.
Tento text definuje vlastní rodinu písem nazvanou "Guardian Headline Full" s různými styly a řezy. Zahrnuje verze běžné, střední, polotučné a tučné, každé v normálním i kurzivním stylu. Soubory písem jsou poskytovány ve formátech WOFF2, WOFF a TrueType z webu Guardianu.
Tento CSS kód definuje styly písem a úpravy rozvržení pro web. Specifikuje vlastní písma z assetů Guardianu, včetně jejich řezů a stylů, a nastavuje pravidla responzivního designu pro různé velikosti obrazovky. Pravidla rozvržení ovládají okraje, šířky a umístění různých prvků, jako jsou sloupce, atomy, prezentace a poutavé sekce, aby zajistila správné zobrazení na všech zařízeních. Také zahrnuje proměnné barev a úpravy vnitřního odsazení pro konzistentní vizuální vzhled.
První odstavec v různých obsahových sekcích, jako jsou těla článků, interaktivní obsah, komentáře a feature články, by měl mít horní vnitřní odsazení 14 pixelů. Navíc by první písmeno těchto odstavců mělo být stylováno specifickým písmem, tučnou tloušťkou, velkou velikostí, velkými písmeny a barvou, která se může měnit, přičemž plave vlevo s okrajem.
Pro odstavce následující po vodorovné čáře se nepoužije horní vnitřní odsazení. Citace v těchto sekcích jsou omezeny na maximální šířku 620 pixelů.
V prvcích showcase jsou popisky umístěny staticky a také mají maximální šířku 620 pixelů. Poutavé prvky se rozprostírají na celou šířku viewportu, upravenou o posuvníky, a na obrazovkách menších než 71,24 em jsou omezeny na šířku 978 pixelů s odpovídajícím vnitřním odsazením popisku.
Tento text se jeví jako CSS kód pro responzivní webdesign, nastavující různé styly pro různé velikosti obrazovky. Definuje, jak by se měly prvky stránky jako nadpisy, obrázky a popisky zobrazovat a přizpůsobovat napříč zařízeními od mobilů po desktopy. Kód používá media queries k aplikaci specifických rozvržení, mezer, ohraničení a struktur mřížky, když viewport splňuje určité podmínky šířky.
Rozvržení mřížky používá pět sloupců stejné šířky pro sekce titulku, nadpisu a úvodního textu, následovaných osmi sloupci stejné šířky pro portrétní sekci. Řádky jsou definovány s konkrétními výškami pro oblasti obsahu titulku, nadpisu, úvodního textu a meta informací.
Pro meta prvky je nastavena pevná šířka 620px, zatímco obsah úvodního textu je mírně posunut doleva. Štítky v oblasti titulku mají malé horní vnitřní odsazení.
Nadpisy jsou tučné s maximální šířkou 620px a velikostí písma 32px, která se na větších obrazovkách zvyšuje na 50px s užší šířkou. Na středních obrazovkách jsou pro řádky odstraněny pravý okraj a na širších displejích jsou řádky skryty, přičemž jejich barva odpovídá ohraničení záhlaví.
Meta sekce také ztrácejí pravý okraj na středních obrazovkách a sociální a komentářové prvky sdílejí barvu ohraničení záhlaví. Některé meta komponenty jsou skryty.
Obsah úvodního textu je odsazen a relativně pozicován, s přidaným horním vnitřním odsazením na středních obrazovkách. Odstavce uvnitř mají normální tloušťku, velikost 20px a spodní vnitřní odsazení.
Hlavní média jsou umístěna v oblasti portrétní mřížky, rozprostírají se na celou šířku bez bočních okrajů a na větších obrazovkách nemají spodní okraj. Na menších obrazovkách upravují svou šířku a levý okraj.
Popisky jsou umístěny dole s barvou pozadí a barvou textu, plnou šířkou a minimální výškou. První span je skryt, zatímco druhý je viditelný a omezen na 90% šířky, s vnitřním odsazením, které se zvyšuje na větších obrazovkách. Skryté popisky jsou průhledné.
Tlačítko popisku se objevuje vpravo dole s kruhovým pozadím, bez ohraničení a škálovanou ikonou, umístěné více vpravo na větších obrazovkách.
Pro interaktivní obsah je pseudo-element upraven v pozici a výšce na největších obrazovkách.
Interaktivní nadpisy v hlavním sloupci mají maximální šířku 620 pixelů. Pro zařízení iOS a Android používá barevné schéma tmavá pozadí a specifické akcentní barvy, které se upravují v tmavém režimu. Na těchto mobilních platformách je první písmeno prvního odstavce po určitých prvcích v kontejnerech článků stylováno sekundární barvou a záhlaví článků jsou skryta. Obaly furniture dostávají minimální vnitřní odsazení, se štítky v tučném, velkými písmeny psaném písmu používajícím určenou barvu pilíře, a nadpisy jsou velké, tučné a tmavé pro důraz.
Pro zařízení iOS a Android platí pro kontejnery článků (feature, standard a comment) následující styly:
- Obrazové prvky uvnitř furniture wrapperu jsou relativně pozicovány, s horním okrajem 14px, levým okrajem -10px a šířkou, která pokrývá celý viewport minus šířka posuvníku. Jejich výška se automaticky přizpůsobuje.
- Vnitřní figure, image a link prvky mají průhledné pozadí, odpovídají celé šířce viewportu minus posuvník a zachovávají si automatickou výšku.
- Sekce standfirst mají horní vnitřní odsazení 4px, spodní vnitřní odsazení 24px a pravý okraj -10px.
- Odstavce uvnitř standfirst používají rodinu písem Guardian Headline nebo podobnou patkovou.
- Odkazy uvnitř standfirst, včetně těch v položkách seznamu, jsou stylovány odpovídajícím způsobem.
Pro kontejnery komentářových článků jsou odkazy v standfirst stylovány specifickou barvou, podtrženy s offsetem a bez obrázku na pozadí nebo ohraničení. Na zařízeních iOS a Android při najetí myši na tyto odkazy ve feature, standardních nebo komentářových článcích se barva podtržení změní na barvu pilíře. Navíc meta sekce v těchto článcích nemá okraj a prvky jako bylines a author links používají pro text barvu pilíře. Meta miscellaneous sekce nemá vnitřní odsazení.
Pro zařízení iOS a Android platí pro kontejnery feature, standard a comment článků následující styly:
- SVG ikony v meta miscellaneous sekci používají pro tahy novou barvu pilíře.
- Tlačítko popisku v prvcích showcase je zobrazeno jako flex kontejner, vycentrovaný s vnitřním odsazením 5px, rozměry 28px a umístěný 14px zprava.
- Tělo článku má horizontální vnitřní odsazení 12px.
- Obrázky v těle článku, které nejsou miniaturami ani poutavými, nemají okraj, šířku vypočítanou jako šířka viewportu minus 24px a šířka posuvníku, a automatickou výšku, s žádným vnitřním odsazením v jejich popiscích.
- Poutavé obrázky pokrývají celou šířku viewportu minus šířka posuvníku.
- Citované blockquotes v sekci prose mají před pseudo-element stylovaný odpovídajícím způsobem.
Pro zařízení iOS a Android je upraveno stylování citovaného textu a odkazů v článcích. Citovaný text používá specifickou barvu, zatímco odkazy jsou podtrženy konkrétní barvou a mění se při najetí myši.
V tmavém režimu se pozadí záhlaví článků stává tmavě šedým a textové prvky jako štítky, nadpisy a odstavce standfirst přijímají kontrastní barvy pro lepší čitelnost. Odkazy a jména autorů v těchto sekcích také následují toto barevné schéma pro zachování konzistence.
Tento CSS kód definuje styly pro různé kontejnery článků na zařízeních Android a iOS. Nastavuje barvu autorských bylines a citovaného textu na specifickou barvu pilíře, aplikuje stejnou barvu na tahy SVG a používá barvu dateline pro popisky obrázků. Dále zajišťuje, že pozadí různých prvků těla je nastaveno na tmavé pozadí s vysokou důležitostí.
Tento text se jeví jako CSS selektor cílicí 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. Selektor se vztahuje na různé sekce jako feature články, standardní články a komentářové sekce, zaměřující se na odstavce, které přicházejí po prvcích s třídami jako "element-atom" nebo ID jako "sign-in-gate."
Pro zařízení Android a iOS bude první písmeno odstavců následujících po specifických prvcích v různých kontejnerech článků stylováno s vlastní barevnou proměnnou, s výchozí hodnotou bílé.
Pro komentářové články na obou Androidu a iOS má sekce standfirst horní vnitřní odsazení 24 pixelů a žádný horní okraj. Nadpisy úrovně 2 v prose jsou nastaveny na velikost 24 pixelů.
Tlačítka popisků ve feature, standardních a komentářových článcích mají různá vnitřní odsazení na iOS (6px nahoře, 5px po stranách, 0 dole) a Androidu (4px nahoře a po stranách, 0 dole).
V tmavém režimu jsou aplikovány specifické barvy na text sledování, ikony, text standfirst, odkazy a bylines pro lepší viditelnost.
Když furniture wrapper obsahuje logo organizace Guardian, je branding element vždy zobrazen. Štítky obsahu a nadpisy v různých typech článků na iOS a Androidu, stejně jako odstavce standfirst, používají střední tloušťku písma.
Pozadí stránky pro víkendové eseje je světlý růžový odstín (#fff4f2), který se také vztahuje na sekce článků a pozadí sub-meta. Řádky jsou ve výchozím nastavení skryty.
Furniture wrapper je relativně pozicován a na větších obrazovkách používá rozvržení mřížky s definovanými řádky pro sekce titulku, nadpisu, standfirst a meta.
Záhlaví článku nebo oblast titulku má pevnou výšku 70 pixelů a obsahuje štítky obsahu, které pokrývají celou výšku. Dekorační GIF knihy (70x70 pixelů) se objevuje v pravém dolním rohu, zvětšující se na 110x110 pixelů na širších obrazovkách. Vodorovná čára se táhne podél spodku štítků obsahu, rozprostírající se na šířku viewportu minus posuvník na malých obrazovk
