Tento CSS kód definuje rodinu písma "Guardian Headline Full" s různými řezy a styly, přičemž pro každou variantu poskytuje více formátů souborů (WOFF2, WOFF, TTF), aby zajistil kompatibilitu napříč různými prohlížeči. Soubory písem jsou hostovány na serveru Guardian assets.
Tento CSS kód definuje několik rodin písem pro písma Guardian Headline a Guardian Titlepiece, přičemž specifikuje jejich zdroje v různých formátech (WOFF2, WOFF, TTF) spolu s jejich řezy a styly. Dále zahrnuje 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 vešly na displej. Kód zajišťuje, že prvky jako odstavce a seznamy zachovávají maximální šířku pro čitelnost, a zachází s imerzivními prvky tak, že je na mobilních zařízeních rozšiřuje na plnou šířku a na větších obrazovkách upravuje jejich rozložení.
Pro interaktivní hlavní sloupec je před obsahem přidáno levé ohraničení, umístěné 11 pixelů vlevo. Prvky uvnitř tohoto sloupce nemají horní ani dolní okraj, ale obsahují 12 pixelů odsazení nahoře i dole. Když za prvkem následuje odstavec, 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 tímto limitem šířky řídí i řádkové obrázky.
Jsou definovány proměnné pro barvy různých prvků, jako je datová linka, ohraničení záhlaví, text popisku a barvy feature, přičemž nová barva pilíře standardně přebírá primární nebo feature barvu. Prvky s třídou atom nemají žádné odsazení.
Pro první odstavec následující po určitých prvcích nebo vodorovných oddělovačích v různých obsahových oblastech platí specifická pravidla, která přidávají 14 pixelů horního odsazení. Dále je první písmeno těchto odstavců stylováno velkým, tučným verzálkovým písmem v konkrétním typu písma, obarveno podle barvy iniciály nebo nové barvy pilíře a je posunuto doleva s okrajem.
Vodorovné oddělovače následované odstavci v těchto oblastech nemají horní odsazení. Citace v určitých obsahových oblastech jsou omezeny na maximální šířku 620 pixelů.
U prezentačních prvků v různých kontejnerech článků jsou popisky umístěny staticky s plnou šířkou a maximální šířkou 620 pixelů.
Imerzivní prvky se rozprostírají na plnou šířku viewportu minus šířka posuvníku. Na obrazovkách širokých do 71,24em jsou tyto prvky omezeny na šířku 978px s odsazením popisku 10px. Mezi 30em a 71,24em se odsazení popisku zvyšuje na 20px. Pro obrazovky mezi 46,25em a 61,24em je maximální šířka 738px. Pod 46,24em se imerzivní prvky zarovnávají k levému okraji s upravenými okraji a zachovávají 20px odsazení popisku mezi 30em a 46,24em.
Obal nábytku používá rozložení mřížky na obrazovkách 61,25em a širších, s definovanými sloupci a řádky pro organizaci sekcí titulku, nadpisu, metainformací, perexu a portrétu. Nadpisy mají horní ohraničení, metasekce mají horní odsazení a text perexu obsahuje specifické styly pro odkazy a položky seznamu, s podtržením místo spodního ohraničení a hover efekty používající novou barvu pilíře. První odstavec v perexu má na větších obrazovkách horní ohraničení, které se však od 71,25em výše odstraní. Obrázky uvnitř obalu mají levě zarovnané okraje a maximální šířku 630px pro řádkové prvky. Při 71,25em a širších se mřížka upravuje ve své struktuře sloupců pro lepší rozložení.
Rozložení používá mřížku se specifickými sloupci a řádky pro různé velikosti obrazovek. Například na větších obrazovkách má mřížka tři stejné sloupce pro sekce titulku, nadpisu a metainformací, následováno pěti pro perex a osmi pro portrét, s řádky přidělenými proporcionálně.
Styly zahrnují horní ohraničení pro metasekci a levé ohraničení pro perex, obě používající vlastní proměnnou barvy. Nadpisy jsou tučné a přizpůsobují se velikosti a šířce na základě viewportu, s většími písmy na větších obrazovkách.
Sociální a komentářové prvky v metasekci sdílejí stejnou barvu ohraničení, zatímco určité komponenty jsou skryty. Text perexu je stylován normální tloušťkou, specifickou velikostí písma a odsazením a je umístěn s levým okrajem a odsazením.
Hlavní mediální prvky jsou umístěny v oblasti mřížky portrétu, s plnou šířkou a upravenými okraji na menších obrazovkách, a popisky jsou absolutně pozicovány dole s barvou pozadí a odsazením. Na středních obrazovkách a větších jsou některé řádky skryty a okraje pro určité prvky jsou resetovány.
CSS kód definuje styly pro komponentu obalu nábytku, včetně jejího rozložení, barev a responzivního chování napříč různými velikostmi obrazovek. Nastavuje barvy pozadí, barvy textu a styly ohraničení pomocí CSS proměnných pro konzistenci. Obal upravuje okraje, odsazení a pozicování na větších obrazovkách, s konkrétními pravidly pro prvky jako popisky, tlačítka a nadpisy. Tlačítka sociálních médií mění barvu při najetí myší a určité prvky jsou skryty nebo zobrazeny na základě podmínek. Design zajišťuje jednotný vzhled při přizpůsobování se různým zařízením.
Tento CSS kód definuje styly pro třídu furniture-wrapper na webové stránce, zaměřující se na sekce metainformací a perexu. Nastavuje barvu textu na světle šedou (#dcdcdc) a barvu odkazů na odstín založený na proměnné, s hover efekty, které zachovávají barvu a přidávají podtržení. Odkazy v perexu mají podtržení s konkrétními posuny a barvami, přičemž odstraňují ohraničení a obrázky na pozadí.
Pro větší obrazovky (min-width: 61.25em) dostává první odstavec v perexu horní ohraničení, které se odstraní na ještě větších obrazovkách (71.25em). Kód také vytváří dekorativní postranní panely pomocí pseudoprvků (:before a :after), které upravují svou šířku a pozici na základě velikosti viewportu, s tmavými pozadími a ohraničenými okraji. Sociální a komentářové prvky uvnitř metasekce přebírají podobné styly pro ikony a text. Sekce komentářů má barvu ohraničení, která odpovídá barvě ohraničení záhlaví.
V článcích používají nadpisy druhé úrovně (h2) v hlavním těle světlou tloušťku písma 200. Pokud však h2 obsahuje strong prvek, přebírá tučnou tloušťku písma 700.
Rodina písma Guardian Headline Full zahrnuje několik variant:
- Light (tloušťka 300) v normálním a kurzívním stylu
- Regular (tloušťka 400) v normálním a kurzívním stylu
- Medium (tloušťka 500) v normálním a kurzívním stylu
- Semibold (tloušťka 600) v normálním a kurzívním stylu
Každý styl je k dispozici ve formátech WOFF2, WOFF a TrueType, hostovaných na serveru Guardian assets.
Tento CSS kód definuje několik @font-face pro rodinu písma "Guardian Headline Full" s různými řezy a styly (normální a kurzíva), v rozsahu od semibold (600) po black (900). Každý @font-face specifikuje zdrojové soubory ve formátech WOFF2, WOFF a TrueType ze serverů Guardian assets.
Dále definuje písmo "Guardian Titlepiece" v tučném řezu se stejnými formáty souborů.
Kód zahrnuje vlastní CSS vlastnosti (proměnné) pro barevná schémata, upravující je pro tmavý režim na zařízeních iOS a Android. Dále obsahuje specifická stylovací pravidla pro první písmeno odstavců v kontejnerech článků na platformách iOS a Android, zejména když následují po určitých prvcích jako atomy nebo sign-in brány.
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 Android jsou záhlaví článků skryta a obaly nábytku mají specifické odsazení. Štítky uvnitř těchto obalů používají tučné, verzálkové písmo v nadpisovém stylu s novou barvou pilíře. Nadpisy jsou nastaveny na 32px, tučné, s dolním odsazením a tmavou barvou. Obrázky v obalech nábytku jsou pozicovány relativně, s upravenými okraji a plnou šířkou viewportu minus šířka posuvníku.
Pro zařízení Android jsou obrázky uvnitř kontejnerů článků nastaveny na průhledné pozadí, rozprostírají se na plnou šířku viewportu minus šířka posuvníku a jejich výška se přizpůsobuje automaticky.
Na iOS i Android má sekce perexu v článcích horní a dolní odsazení 4px a 24px, s pravým okrajem -10px. Text uvnitř používá rodinu písma Guardian Headline nebo podobná písma serif.
Odkazy v perexu na obou operačních systémech jsou stylovány specifickou barvou, podtrženy s posunem a pro podtržení se používá konkrétní barva, která se při najetí myší změní tak, aby odpovídala barvě odkazu.
Dále je metasekce v článcích stylována konzistentně napříč platformami iOS a Android.
Pro zařízení Android odstraňte okraje z meta prvků v kontejnerech standardních a komentářových článků.
Pro zařízení iOS nastavte barvu prvků byline a author v kontejnerech feature, standardních a komentářových článků na novou barvu pilíře. Také odstraňte odsazení z meta misc prvků a nastavte obtah SVG ikon uvnitř nich na novou barvu pilíře. Dále stylujte tlačítko popisku v prezentačních prvcích s konkrétním zobrazením, odsazením, zarovnáním a rozměry.
Pro iOS i Android nastavte 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 v těle článku, které nejsou miniaturami ani imerzivními, mít nulový okraj, šířku plného viewportu minus 24 pixelů a šířku posuvníku a automatickou výšku. Jejich popisky nebudou mít žádné odsazení.
Imerzivní obrázky v těchto kontejnerech se budou rozprostírat na plnou šířku viewportu minus šířka posuvníku.
Citované blockquotes v těle článku zobrazí barevný značkovač pomocí nové barvy pilíře.
Odkazy v těle článku budou stylovány primární barvou pilíře, podtrženy s posunem a pro podtržení bude použita barva ohraničení záhlaví. Při najetí myší se barva podtržení změní na novou barvu pilíře.
V tmavém režimu bude pozadí obalu nábytku nastaveno na tmavě šedou (#1a1a1a).
Pro zařízení iOS a Android platí pro kontejnery feature, standardních a komentářových článků následující styly:
- Obsahové štítky používají novou barvu pilíře.
- Nadpisy nemají pozadí a používají barvu ohraničení záhlaví pro text.
- Odstavce a odkazy perexu používají barvu ohraničení záhlaví.
- Autorové byliny a jejich odkazy používají novou barvu pilíře.
- Různorodé metainformační ikony jsou obtahovány novou barvou pilíře.
- Popisky prezentačních obrázků používají barvu datové linky.
- Citované blockquotes v těle článku jsou stylovány novou barvou pilíře pro text a odpovídajícím ohraničením.
Pro zařízení iOS a Android bude citovaný text v tělech článků používat novou barvu pilíře.
Dále bude barva pozadí pro různé sekce těla článku na iOS i Android nastavena na tmavé pozadí.
Pro první písmeno po určitých prvcích v tělech článků na iOS je aplikováno specifické stylování, ale podrobnosti jsou opakující a následují stejný vzor jako výše.
Zdá se, že se jedná o CSS selektor cílicí na první písmeno odstavců, které následují po specifických prvcích v různých kontejnerech článků na platformách iOS a Android. Selektor se vztahuje na různé sekce jako těla článků, feature těla, komentářové sekce a interaktivní obsahové oblasti, zejména když přicházejí po prvcích s třídami jako 'element-atom' nebo předcházejí sign-in bránám.
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 vlastní proměnné. Také upravuje odsazení a okraje pro prvky perexu v komentářových článcích, velikosti pro nadpisy h2 a odsazení pro tlačítka popisků rozdílně na iOS a Android.
Pro preference tmavého režimu mění barvy pro text sledování, ikony, text perexu, odkazy a byliny na světlejší odstíny a specifické bar
