Tento CSS kód definuje vlastní rodinu písem s názvem "Guardian Headline Full" s více řezami a styly. Zahrnuje řezy light, regular, medium a semibold, každý s normální a kurzivní variantou. Soubory písem jsou poskytovány ve formátech WOFF2, WOFF a TrueType a jsou hostovány na serverech Guardianu.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Interaktivní obsahový sloupec má levý okraj a specifické rozestupy pro prvky. Odstavce následující po určitých prvcích mají dodatečný horní padding a první písmeno těchto odstavců je stylizováno jako velký barevný iniciál. Inline prvky a obrázky jsou na větších obrazovkách omezeny maximální šířkou 620px. Jsou definovány různé barevné proměnné pro konzistentní tematizaci.
Výpovědi v rámci specifických kontejnerů by měly mít maximální šířku 620 pixelů.
Popisky pro showcase prvky v hlavním obsahu a kontejnerech článků by měly být pozicovány staticky, s plnou šířkou až 620 pixelů.
Imersivní prvky by měly zabírat celou šířku viewportu mínus posuvník. Na větších obrazovkách jsou omezeny na 978 pixelů, s úpravou paddingu popisků pro střední obrazovky. Na středně velkých obrazovkách je maximální šířka 738 pixelů. Na menších obrazovkách se imersivní prvky zarovnávají k levému okraji s upravenými okraji a paddingu popisků.
Pro furniture wrappery na větších obrazovkách se používá grid layout s definovanými sloupci a řádky. Nadpisy mají horní okraj, meta sekce jsou pozicovány relativně a standfirst obsah zahrnuje specifické styly pro odkazy a odstavce. Obrázky uvnitř wrapperu nemají levý okraj a mají maximální šířku 630 pixelů, když jsou inline. Na velmi velkých obrazovkách jsou upraveny grid template sloupce.
CSS definuje grid layout pro hlavičku článku se specifickými oblastmi pro titul, nadpis, standfirst, meta informace a portrétní obrázek. Nastavuje styly pro okraje, typografii a rozestupy, upravuje tyto vlastnosti napříč různými velikostmi obrazovek pomocí media queries. Například velikost písma nadpisu se zvětšuje na větších obrazovkách a některé prvky jsou skryty nebo přemístěny s měnícím se viewportem. Hlavní mediální oblast je nastavena na plnou šířku na mobilních zařízeních.
CSS kód definuje styly pro rozložení webové stránky, zaměřuje se na prvek furniture wrapper. Nastavuje barvy pozadí, okraje, padding a responzivní chování pro různé velikosti obrazovek. Styly zahrnují vlastní vlastnosti pro barvy, jako jsou funkce tmavého režimu a okraje hlavičky. Specifická pravidla řídí vzhled popisků, tlačítek, nadpisů a meta informací, s úpravami pro hover efekty a ikony sociálních sítí. Media queries zajišťují, že se rozložení přizpůsobuje od mobilního až po desktopové zobrazení, včetně širších obrazovek, kde jsou přidány boční pozadí.
Tento CSS kód definuje styly pro komponentu webové stránky, pravděpodobně postranní panel nebo obal obsahu. Nastavuje barvy, okraje a úpravy rozložení pro různé prvky jako odkazy, text a ikony sociálních sítí. Styly se přizpůsobují různým velikostem obrazovek pomocí media queries, mění šířky a okraje, aby seděly větším obrazovkám. Barvy jsou spravovány pomocí CSS proměnných pro témata, jako je tmavý režim.
CSS kód definuje styly pro prvky článků a načítá vlastní písma. Nastavuje barvu okraje pro komentáře tak, aby odpovídala barvě okraje hlavičky. Pro nadpisy článků používá světlou tloušťku písma, ale nadpisy se silným textem činí tučnými. Kód také importuje rodinu písem Guardian Headline v různých tloušťkách a stylech, včetně light, regular, medium a semibold, v normální i kurzivní verzi.
Písmo "Guardian Headline Full" je definováno s několika styly: semibold kurzíva (tloušťka 600), bold (tloušťka 700), bold kurzíva (tloušťka 700), black (tloušťka 900) a black kurzíva (tloušťka 900). Každý styl zahrnuje soubory písem ve formátech WOFF2, WOFF a TrueType.
Dále je definováno písmo "Guardian Titlepiece" v tučném stylu (tloušťka 700), také se soubory WOFF2, WOFF a TrueType.
Pro zařízení iOS a Android je nastavena tmavá barva pozadí (#1a1a1a) a specifické barvy funkcí. V tmavém režimu se barva funkce odpovídajícím způsobem upravuje.
Na iOS a Android je aplikováno speciální stylování na první písmeno prvního odstavce v kontejnerech článků, následujících po určitých prvcích jako `.element-atom` nebo sign-in gates.
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 hlavičky článků skryty a furniture wrapper má specifický padding. Štítky uvnitř furniture wrapperu používají tučné, velkými písmeny psané písmo s novou barvou pilíře. Nadpisy jsou nastaveny na 32px, tučné, s dolním paddingem a tmavou barvou. Obrázky jsou pozicovány relativně, s okraji na celou šířku a automatickou výškou.
Pro zařízení Android by obrázky uvnitř kontejnerů článků měly mít průhledné pozadí, zabírat celou šířku viewportu (s přihlédnutím k posuvníkům) a automaticky upravovat svou výšku.
Na iOS i Android by úvodní text v článcích měl mít specifické rozestupy: 4 pixely paddingu nahoře, 24 pixelů dole a záporný okraj 10 pixelů vpravo.
Odstavce uvnitř tohoto úvodního textu by měly používat rodinu písem Guardian Headline.
Odkazy uvnitř tohoto textu by měly být stylovány specifickou barvou, podtržením umístěným 6 pixelů pod textem a světle šedou barvou podtržení. Neměly by mít obrázek pozadí ani spodní okraj. Při najetí myší by se podtržení mělo změnit tak, aby odpovídalo barvě textu odkazu.
Dále by sekce metadat článku měla být stylována konzistentně pro oba operační systémy.
Tento CSS kód nastavuje styly pro kontejnery článků na zařízeních Android a iOS. Upravuje okraje, barvy, padding a zobrazení tlačítek pro různé typy článků a jejich komponenty.
Na zařízeních iOS a Android, pro kontejnery feature, standard a comment článků, obrázky, které nejsou miniatury nebo imersivní, mají okraj nula, šířku vypočítanou z viewportu mínus 24 pixelů a šířku posuvníku, a automatickou výšku. Jejich popisky nemají padding.
Imersivní obrázky v těchto kontejnerech mají šířku vypočítanou z viewportu mínus šířka posuvníku.
Uvnitř prosa těla článku používají citované blockquotes novou barvu pilíře pro svůj dekorativní prvek. Odkazy jsou stylovány primární barvou pilíře, podtržením s offsetem 6px a podtržením barvou okraje, které se při najetí myší změní na novou barvu pilíře.
V tmavém režimu je barva pozadí furniture wrapperu nastavena na #1a1a1a.
Pro zařízení iOS a Android používají obsahové štítky ve feature, standard a comment článcích novou barvu pilíře.
Na iOS i Android nemá hlavní nadpis v těchto typech článků pozadí a používá pro text barvu okraje hlavičky.
Standfirst text v těchto článcích také používá barvu okraje hlavičky. Odkazy uvnitř standfirstu, stejně jako autorství a jejich odkazy, jsou stylovány novou barvou pilíře.
Ikony v metadatech článku používají pro své tahy novou barvu pilíře.
Popisky pro showcase obrázky v těchto článcích používají barvu dateline.
Nakonec, citovaný text uvnitř těla článku na iOS používá specifikované stylování.
Pro zařízení iOS a Android je barva textu citovaných bloků uvnitř těl článků nastavena na specifickou proměnnou barvu.
Dále je barva pozadí pro různé kontejnery těla článku na iOS i Android vynucena na tmavé pozadí pomocí deklarace !important.
Dále, pro zařízení iOS, je stylováno první písmeno následující po určitých prvcích jako atomy, sign-in gates nebo specifická ID uvnitř těl článků, ačkoli přesné stylování je v poskytnutém textu přerušeno.
Toto se jeví jako CSS selektor cílící na první písmeno odstavců v specifických kontejnerech článků na zařízeních iOS a Android. Selektor se aplikuje na různé typy článků (standard, feature, comment) a zohledňuje různé struktury stránek a prvky sign-in gate.
Tento CSS kód nastavuje styly pro specifické prvky na zařízeních Android a iOS. Defin
