Následující prvky jsou zpočátku skryty (průhlednost 0): .content--interactive, .content--interactive-grid, .furniture-wrapper a specifické hlavičkové divy a prvky h1. Když je ke kořenovému prvku přidána třída "interactive-loaded", tyto prvky se stanou viditelnými (průhlednost 1) s plynulým přechodem objevování trvajícím 0,3 sekundy.
Dále je definována rodina písem Guardian Headline Full s více váhami a styly (light, regular, medium, semibold, každá v normální a kurzívní variantě). Každá varianta obsahuje odkazy na soubory písem woff2, woff a ttf hostované na serveru assetů Guardianu.
Guardian používá pro své titulky vlastní písmo s názvem "Guardian Headline Full". Toto písmo je k dispozici v různých stylech a vahách, jako je light, semibold, bold a black, každé s pravidelnou a kurzívní verzí. Soubory písem jsou dostupné ve více formátech (WOFF2, WOFF a TTF) a jsou hostovány na vlastních serverech Guardianu. Kromě toho existuje samostatné písmo s názvem "Guardian Titlepiece" v tučné váze pro specifické použití.
Rodina písem Guardian Headline Full zahrnuje několik stylů, každý dostupný ve více formátech (WOFF2, WOFF a TTF). Styly jsou:
- Regular (váha 400, normální styl)
- Regular Italic (váha 400, kurzívní styl)
- Medium (váha 500, normální styl)
- Medium Italic (váha 500, kurzívní styl)
- Semibold (váha 600, normální styl)
- Semibold Italic (váha 600, kurzívní styl)
- Bold (váha 700, normální styl)
- Bold Italic (váha 700, kurzívní styl)
- Black (váha 900, normální styl)
Každý soubor písma je hostován na uvedené URL.
Toto se zdá být CSS kód pro stylování webové stránky, pravděpodobně pro webové stránky Guardianu. Zahrnuje pravidla pro rozvržení, písma a responzivní design pro různé velikosti obrazovek a zařízení. Kód definuje styly pro prvky jako těla článků, popisky, mřížky a typografii, včetně specifických rodin písem a vah. Obsahuje také mediální dotazy pro úpravu rozvržení pro větší obrazovky a vlastní styly pro zařízení iOS a Android.
Webové stránky Guardianu používají pro své titulky a názvy vlastní písma. Tato písma jsou načítána z konkrétních URL v různých formátech (WOFF2, WOFF, TTF) a mají definované váhy a styly.
Rozvržení se přizpůsobuje na základě velikosti obrazovky:
- Na širších obrazovkách má hlavní obsahový sloupec levý okraj a svislý rámeček.
- Prvky jako atomy, vitríny a imerzivní obsah mají maximální šířky, které se mění s velikostí obrazovky.
- Na menších obrazovkách imerzivní prvky zabírají celou šířku viewportu.
- Odstavce a seznamy jsou omezeny na maximální šířku pro čitelnost.
- Mezery a odsazení jsou aplikovány pro udržení čistého a organizovaného vzhledu.
Hlavní sloupec pro interaktivní obsah omezuje inline prvky na maximální šířku 620 pixelů. Pro obrazovky širší než 61,25em jsou inline obrázky také omezeny na 620 pixelů.
Je definováno několik barevných proměnných pro stylování prvků jako datové řádky, hlavičky, popisky a zvýrazněný obsah. Oblasti interaktivního obsahu nemají ve výchozím nastavení žádné odsazení.
První odstavec následující po určitých prvcích nebo vodorovné čáře dostává horní odsazení 14px. První písmeno těchto odstavců je stylováno velkým, tučným verzálkovým iniciálovým písmenem v konkrétním písmu a barvě, floated doleva s pravým okrajem.
Odstavce bezprostředně po vodorovné čáře nemají horní odsazení. Popisky v prvcích vitríny v určených kontejnerech následují specifická pravidla stylování.
Prvek má statickou pozici a šířku 100%, s maximální šířkou 620px. Pro imerzivní prvky se šířka přizpůsobuje plné šířce viewportu minus šířka posuvníku.
Na obrazovkách širokých až 71,24em mají imerzivní prvky maximální šířku 978px a jejich popisky mají 10px horizontálního odsazení. Pro obrazovky mezi 30em a 71,24em mají popisky 20px horizontálního odsazení. Mezi 46,25em a 61,24em mají imerzivní prvky maximálně 738px na šířku.
Pod 46,24em se imerzivní prvky posunou doleva o 10px a ztratí pravý okraj. Mezi 30em a 46,24em se levý okraj zvýší na 20px a popisky dostanou 20px horizontálního odsazení.
Pro obrazovky 61,25em a širší se používá rozvržení mřížky s definovanými sloupci a řádky. Titulky dostanou horní rámeček, meta sekce mají horní odsazení a úvodní text má upravené okraje a stylování. Odkazy v úvodním textu jsou podtrženy specifickou barvou, která se při najetí myší změní. První odstavec v úvodním textu má horní rámeček a spodní odsazení, které je na obrazovkách 71,25em a větších odstraněno.
Obrázky v mřížce mají levý okraj -10px a inline prvky mají maximálně 630px na šířku. Na obrazovkách 71,25em a větších jsou upraveny sloupce a řádky mřížky, meta sekce dostanou horní rámeček přes pseudoprvek a odstavce úvodního textu ztratí své horní rámečky.
CSS kód definuje styly pro obal rozvržení, upravující strukturu mřížky, typografii, mezery a responzivní chování na různých velikostech obrazovek. Zahrnuje pravidla pro prvky jako titulky, metadata, popisky a obrázky, s konkrétními vlastnostmi pro pozicování, barvy a viditelnost. Mediální dotazy upravují tyto styly pro různé body zlomu, zajišťující, že se rozvržení přizpůsobí zařízením od mobilních po desktopové.
Tento CSS kód nastavuje styly pro mobilní články. Upravuje barvy, mezery a typografii pro zařízení iOS a Android, včetně podpory tmavého režimu. Hlavičky jsou skryty, štítky jsou stylovány specifickými písmy a barvami a titulky jsou nastaveny na 32px s tučnou váhou a tmavým textem.
Na zařízeních iOS a Android jsou obrázky uvnitř kontejnerů článků pozicovány relativně, s horním okrajem 14px a levým posunem -10px. Jejich šířka se přizpůsobuje plné šířce viewportu minus šířka posuvníku a jejich výška se automaticky škáluje.
Pro tyto obrázky mají vnitřní prvky, obrázky a odkazy průhledné pozadí. Jejich šířka také odpovídá šířce viewportu minus posuvník a jejich výška se automaticky přizpůsobuje.
Sekce úvodního textu v těchto kontejnerech má horní a spodní odsazení 4px a 24px, s pravým okrajem -10px.
Text uvnitř úvodního textu používá rodinu písem Guardian Headline nebo podobnou patkovou.
Odkazy a odkazy na položky seznamu uvnitř úvodního textu dědí tyto styly.
Pro zařízení Android jsou odkazy v sekci úvodního textu kontejneru komentářového článku stylovány specifickou barvou, podtržením 6px pod textem a bez obrázku na pozadí nebo spodního rámečku. Při najetí myši se barva podtržení v úvodním textu feature, standardních a komentářových článků na iOS i Android změní tak, aby odpovídala barvě pilíře.
Meta sekce v těchto typech článků na obou platformách nemá žádný okraj. Text a odkazy související s autorem v meta sekci, včetně autorství a jmen autorů, používají barvu pilíře. Různé meta prvky jsou také cíleny, ale v poskytnutém úryvku není definováno žádné konkrétní stylování.
Pro zařízení iOS a Android platí následující pravidla CSS:
- Ikony SVG v meta sekci feature, standardních a komentářových článků používají pro svůj tah novou barvu pilíře.
- Tlačítko popisku v prvcích vitríny je zobrazeno jako flex kontejner, vycentrovaný s odsazením 5px, šířkou a výškou 28px a pozicován 14px zprava.
- Tělo článku má odsazení 12px vlevo a vpravo.
- Obrázky v těle článku, které nejsou miniatury ani imerzivní, nemají žádný okraj, šířku vypočítanou jako šířka viewportu minus 24px a šířka posuvníku a automatickou výšku. Jejich popisky nemají žádné odsazení.
- Imerzivní obrázky zabírají celou šířku viewportu minus šířka posuvníku.
- Blokové citace s třídou "quoted" v prozaické sekci těla článku mají pseudoprvek before.
Pro zařízení iOS a Android je upraveno stylování citovaného textu a odkazů v tělech článků. Barva značek citovaného textu používá novou barvu pilíře. Odkazy jsou stylovány primární barvou pilíře, podtrženy s odsazením 6px a barva podtržení odpovídá rámečku hlavičky. Při najetí myši se barva podtržení změní na novou barvu pilíře.
V tmavém režimu se pozadí prvků výbavy článku stane tmavě šedé (#1a1a1a). Štítky uvnitř těchto prvků používají novou barvu pilíře. Titulky ztratí barvu pozadí a přijmou barvu rámečku hlavičky. Text úvodního textu a odkazy, stejně jako autoři autorství a jejich odkazy, také používají barvu rámečku hlavičky.
Pro zařízení iOS a Android jsou text autorství a odkazy ve standardních a komentářových článcích stylovány novou barvou pilíře. Ikony v meta sekci feature, standardních a komentářových článků používají stejnou barvu pro svůj tah.
Popisky obrázků v prvcích ve stylu vitríny napříč všemi typy článků na obou platformách jsou nastaveny na barvu datové řádky.
Bloky citovaného textu v těle článku pro feature, standardní a komentářové články na iOS a Android také přijímají novou barvu pilíře.
Hlavní obsahové oblasti - včetně těla článku, interaktivního obsahu, těla feature a těla komentáře - ve feature, standardních a komentářových článcích na iOS i Android mají tmavé pozadí aplikované s důležitou prioritou.
Dále pro feature články na iOS dostává první písmeno následující po atomovém prvku nebo bráně přihlášení v těle článku zvláštní stylování.
Tento CSS kód 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. Aplikuje se na různé sekce jako hlavní tělo, komentáře a interaktivní obsah a zohledňuje brány přihlášení, které se mohou objevit mezi prvky.
Na zařízeních Android bude první písmeno odstavce následujícího po specifických prvcích v kontejnerech článků stylováno s vlastní barevnou proměnnou, s výchozí bílou, pokud proměnná není nastavena.
Tento CSS kód definuje styly pro různé typy článků (feature, standardní, komentářové) na zařízeních iOS a Android. Zahrnuje úpravy odsazení, okrajů, velikosti písma a barev, zejména pro tmavý režim. Konkrétní prvky jako titulky, popisky a štítky jsou stylovány s vlastními vahami a pozadími. K hlavičkám článků je přidána dekorativní ikona knihy s responzivním velikostním přizpůsobením pro větší obrazovky. Kód také skrývá určité prvky a nastavuje šablony mřížky pro rozvržení na širokých displejích.
Tento CSS kód definuje styly pro rozvržení webové stránky, upravující prvky jako hlavičky, titulky a meta informace na základě velikosti obrazovky. Například na širších obrazovkách se výška hlavičky zvyšuje, text titulku se zvětšuje a určité dekorativní čáry jsou skryty. Efekty při najetí myši na titulky zahrnují silnější podtržení a vlastnosti textu jako velikost písma a výška řádku jsou specifikovány pro různé komponenty. Kód zajišťuje, že rozvržení zůstane konzistentní a vizuálně přitažlivé napříč různými zařízeními.
Pro hlavní média a prvky s atributem `data-gu-name="media"` uvnitř furniture-wrapper nastavte jejich pozici na relativní.
Na obrazovkách širokých alespoň 61,25em pozicujte tyto prvky v oblasti mřížky s názvem "portrait".
Pro přímé podřízené divy těchto prvků nastavte jejich pozici na relativní.
Pro jakýkoli span, který přímo následuje div uvnitř těchto prvků, zobrazte jej jako blok.
Pro prvky figure uvnitř těchto kontejnerů:
- Nastavte jejich výšku na 100% a odstraňte levý okraj.
- Pro obrázky a popisky uvnitř těchto figur:
- Na menších obrazovkách nastavte jejich šířku na šířku viewportu minus 40px a šířku posuvníku, s levým okrajem 20px a svislým odsazením 10px.
- Přidejte dekorativní rám pomocí obrázku na pozadí, pozicovaný absolutně tak, aby pokrýval figuru, s šířkou viewportu minus 20px a šířkou posuvníku, zarovnaný 10px zleva.
Na středních obrazovkách (alespoň 46,25em širokých):
- Upravte šířku obrázku na 670px, snižte levý okraj na 5px a změňte odsazení na 15px horizontálně a 10px vertikálně.
- Rozšiřte rám na 700px a posuň
