Tento CSS kód definuje vlastní rodinu písem s názvem "Guardian Headline Full" s více váhami a styly písma. Zahrnuje váhy light, regular, medium a semibold, každou v normální i kurzívní verzi. Písma jsou načítána ze serverů Guardianu ve třech různých formátech souborů: WOFF2, WOFF a TrueType.
@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 dostávají 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 omezeny na maximální šířku. Pro konzistentní tematiku jsou definovány různé barevné proměnné.
Výňatky (pullquotes) v rámci specifických kontejnerů by měly mít maximální šířku 620 pixelů.
Popisky pro showcase prvky v hlavních článcích, feature článcích, standardních článcích a komentářích by měly být pozicovány staticky, zabírat celou šířku a také mít maximální šířku 620 pixelů.
Imersivní prvky by měly zabírat celou šířku viewportu mínus posuvník. Na větších obrazovkách (nad 71.24em) je jejich maximální šířka 978px, s úpravou paddingu popisků na různých breakpointech. Na středních obrazovkách (mezi 46.25em a 61.24em) je maximální šířka 738px. Na menších obrazovkách (pod 46.24em) by tyto prvky neměly mít žádný levý margin a měly by být zarovnány k levému okraji, s upravenými okraji a paddingem popisků pro velmi malé obrazovky.
Pro furniture wrapper na velkých obrazovkách (nad 61.25em) je použit grid layout s definovanými sloupci a řádky. Nadpisy dostávají horní okraj, meta informace jsou pozicovány relativně a standfirst text má specifické stylování pro odkazy a rozestupy. Obrázky v rámci tohoto wrapperu mají upravené okraje a maximální šířku 630px pro inline prvky. Na extra velkých obrazovkách (nad 71.25em) je grid template upraven tak, aby zahrnoval více sloupců.
CSS definuje grid layout pro hlavičku stránky s oblastmi pro titul, nadpis, standfirst, meta informace a portrét. Nastavuje specifické rozměry a pozice pro tyto prvky v různých velikostech obrazovky. Stylování zahrnuje okraje, písma a barvy, s úpravami pro ikony sociálních sítí, popisky a responzivní chování na mobilních a desktopových zobrazeních.
CSS kód definuje styly pro rozložení webové stránky, zaměřuje se na komponentu nazvanou "furniture-wrapper." Tato komponenta má tmavé pozadí a upravuje své okraje a padding na základě velikosti obrazovky. Pro větší obrazovky přidává dekorativní postranní lišty.
Uvnitř tohoto wrapperu jsou stylizovány prvky jako hlavičky článků, nadpisy a meta informace (jako tlačítka pro sdílení na sociálních sítích). Nadpisy používají světle šedou barvu a tučné písmo. Sociální tlačítka mají barevné okraje odpovídající tematické barvě a při najetí myší se změní na plnou barvu.
Kód také spravuje viditelnost popisků a tlačítka pro přepínání popisků u mediálních prvků. Celkově styly zajišťují, že rozložení je responzivní a vizuálně konzistentní na různých zařízeních.
Tento CSS kód definuje styly pro webovou komponentu, pravděpodobně postranní panel nebo obal obsahu. Nastavuje barvy textu, vzhled odkazů a úpravy rozložení pro různé velikosti obrazovky. Odkazy jsou stylizovány specifickými barvami a podtržením a rozložení zahrnuje pozadí prvků, které se upravují na základě šířky viewportu. Kód také řeší okraje a rozestupy pro různé prvky uvnitř komponenty.
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á ve výchozím nastavení světlou váhu písma, ale přepíná na tučnou, když nadpis obsahuje strong tag.
Dále importuje rodinu písem Guardian Headline Full v různých váhách a stylech (light, regular, medium, semibold, každý s normální a kurzívní verzí) ze serverů Guardianu, přičemž specifikuje více formátů souborů pro kompatibilitu s prohlížeči.
Písmo "Guardian Headline Full" je definováno s několika styly: semibold kurzíva (váha 600), tučné (váha 700), tučné kurzíva (váha 700), black (váha 900) a black kurzíva (váha 900). Každý styl zahrnuje soubory písem ve formátech WOFF2, WOFF a TrueType, hostované na serverech Guardianu.
Dále je definováno písmo "Guardian Titlepiece" ve svém tučném stylu (váha 700), také se soubory WOFF2, WOFF a TrueType.
Pro zařízení iOS a Android je nastavena tmavá barva pozadí a specifické feature barvy. V tmavém režimu se feature barva odpovídajícím způsobem upravuje.
Na iOS a Android jsou aplikována specifická CSS pravidla pro stylizaci prvního písmena prvního odstavce v určitých kontejnerech článků, následujících po specifický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 stylizováno sekundární pillar barvou. 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 pillar barvou. Nadpisy jsou nastaveny na 32px, tučné, s dolním paddingem a tmavou barvou. Obrázkové figury 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 a 24 pixelů dole, s negativním marginem 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 stylizovány specifickou barvou, podtržením umístěným 6 pixelů pod textem a světle šedou barvou podtržení, bez obrázku na pozadí nebo okraje. Při najetí myší by se podtržení mělo změnit tak, aby odpovídalo barvě textu odkazu.
Dále by sekce metadat v článcích na iOS i Android měla dostat specifické stylování.
Tento CSS kód nastavuje styly pro kontejnery článků na zařízeních iOS a Android. 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, standardních a komentářových článků, jsou obrázky, které nejsou miniatury nebo imerzivní, stylizovány tak, aby neměly žádný okraj, šířku vypočítanou z viewportu mínus 24 pixelů a šířku posuvníku, a automatickou výšku. Jejich popisky nemají žádný padding.
Imerzivní obrázky v těchto kontejnerech jsou nastaveny na šířku, která je šířka viewportu mínus šířka posuvníku.
Uvnitř prosa těla článku zobrazené citované blockquotes zobrazují barevný marker pomocí vlastní CSS proměnné. Odkazy jsou stylizovány specifickou barvou, podtržením odsazeným o 6 pixelů a barvou dekorace z proměnné. Při najetí myší se barva podtržení změní na jinou proměnnou.
V tmavém režimu je barva pozadí furniture wrapperu v těchto kontejnerech nastavena na tmavě šedou (#1a1a1a).
Pro zařízení iOS a Android používají obsahové štítky ve feature, standardních a komentářových článcích novou pillar barvu. Nadpisy v těchto článcích nemají pozadí a používají barvu okraje hlavičky. Text standfirst a odkazy spolu s autorstvími také přebírají novou pillar barvu. Ikony v meta sekci jsou stylizovány stejnou barvou. Popisky pro showcase obrázky používají barvu dateline a citovaný text uvnitř těla článku následuje stejné stylování.
Pro zařízení iOS a Android je barva textu citovaných bloků uvnitř těl článků nastavena na specifickou pillar barvu. Dále je barva pozadí pro různé kontejnery těla článku vynucena na tmavé pozadí. Na iOS je první písmeno následující po určitých prvcích v těchto kontejnerech stylizováno efektem iniciálu.
Toto se jeví jako CSS selektor cílící na první písmeno odstavců v specifických kontejnerech článků
