Tento CSS kód definuje vlastní písmo nazvané "Guardian Headline Full" s více styly a váhami. Určuje soubory písem v různých formátech (WOFF2, WOFF a TTF) a jejich online umístění. Písmo zahrnuje váhy light, regular, medium a semibold, každé s normálním i kurzivním stylem.
@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. Řádkové prvky a obrázky jsou omezeny na maximální šířku. Pro konzistentní tematiku jsou definovány různé barevné proměnné.
Výroky v určitých kontejnerech by měly mít maximální šířku 620 pixelů.
Popisky pro prezentační prvky v hlavním obsahu a kontejnerech článků by měly být staticky pozicovány 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 je jejich maximální šířka 978 pixelů, s úpravou paddingu popisků na různých zlomových bodech. Na středních obrazovkách je maximální šířka 738 pixelů. Na menších obrazovkách by se imersivní prvky měly zarovnat k levému okraji s upravenými okraji a paddingem popisků.
Pro obaly nábytku na velkých obrazovkách se používá mřížkové rozložení s definovanými sloupci a řádky. Nadpisy mají horní okraj, meta sekce jsou relativně pozicovány a úvodní text má specifické styly pro odkazy a odstavce. Obrázky uvnitř obalu nemají levý okraj a maximální šířku 630 pixelů, když jsou řádkové. Na velmi velkých obrazovkách jsou sloupce mřížky upraveny.
CSS definuje mřížkové rozložení pro hlavičku článku s konkrétními oblastmi pro titul, nadpis, úvodní text, meta informace a portrét (hlavní médium). Nastavuje styly pro tyto prvky, včetně písem, okrajů a rozestupů. Rozložení se upravuje při různých šířkách obrazovky: pro širší obrazovky (nad 81.25em) používá podrobnější mřížku a upravuje šířky prvků; pro střední obrazovky (nad 71.25em) se zvětšuje velikost písma nadpisu; a pro menší obrazovky (pod 46.24em) se hlavní médium přizpůsobí na plnou šířku viewportu. Okraje a čáry používají vlastní barevnou proměnnou a některé prvky jsou na určitých zlomových bodech skryty nebo přemístěny.
CSS kód definuje styly pro rozložení webové stránky se zaměřením na komponentu nazvanou "furniture-wrapper." Tato komponenta má tmavé pozadí a upravuje své okraje a padding podle velikosti obrazovky. Pro větší obrazovky přidává dekorativní postranní lišty.
Uvnitř tohoto obalu 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í lištu nebo obal obsahu. Nastavuje barvy textu, chování 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í podle šířky viewportu. Media queries zajišťují přizpůsobení designu různým zařízením, od tabletů po velké desktopové obrazovky.
CSS kód definuje styly pro prvky článků a načítá vlastní písma. Nastavuje světlou barvu okraje pro komentáře a upravuje styly nadpisů: nadpisy h2 v článcích mají standardně světlou váhu písma, ale stanou se tučnými, pokud obsahují tag strong. 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 kurzivní verzí) z konkrétních webových adres.
Text se jeví jako fragment CSS kódu definujícího font face a stylovací pravidla, pravděpodobně pro webové stránky. Zde je přepsaná verze v plynulé, přirozené angličtině:
Tento CSS kód definuje několik vlastních rodin písem pro použití na webové stránce. Určuje různé soubory písem (ve formátech WOFF2, WOFF a TrueType) pro písmo "Guardian Headline Full" v různých váhách a stylech, jako je semibold kurzíva, tučné, tučné kurzíva, black a black kurzíva. Každá definice zahrnuje váhu a styl písma.
Také definuje písmo "Guardian Titlepiece" v tučné váze.
Dále kód nastavuje vlastní vlastnosti CSS (CSS proměnné) pro barevná schémata, zejména pro tmavý režim na zařízeních iOS a Android. Definuje barvy pro tmavá pozadí a prvky feature, s konkrétními barvami pro běžný a tmavý režim.
Existují také media queries a specifická stylovací pravidla pro první písmeno prvního odstavce v kontejnerech článků na zařízeních iOS a Android, která se aplikují, když jsou přítomny určité HTML struktury.
Pro zařízení Android je první písmeno prvního odstavce ve standardních nebo komentářových článcích stylizováno sekundární barvou pilíře. Na iOS i Android jsou hlavičky článků skryty a obal nábytku má specifický padding. Štítky uvnitř tohoto obalu 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ázkové figury jsou relativně pozicovány 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 ohledem na posuvníky) 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 stylizová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 žádnou obrázkovou pozadí ani dolní okraj. Při najetí myší by se podtržení mělo změnit tak, aby odpovídalo barvě textu odkazu.
Dále by meta sekce v článcích na iOS a Android měla také dostat tato stylovací pravidla.
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 článků typu feature, standard a comment, jsou obrázky, které nejsou miniatury nebo imersivní, stylizovány tak, aby neměly okraj, šíř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 jsou nastaveny na šířku vypočítanou z viewportu mínus šířka posuvníku.
Uvnitř textu těla článku zobrazené citované blockquoty zobrazují barevný značkovač pomocí vlastní CSS proměnné. Odkazy jsou stylizovány podtržením, s použitím specifických barev pro odkaz a podtržení, které se při najetí myší mění.
V tmavém režimu je barva pozadí obalu nábytku nastavena na tmavě šedou (#1a1a1a).
Pro zařízení iOS a Android používají obsahové štítky ve feature, standard a comment článcích novou barvu pilíře. Nadpisy v těchto článcích nemají pozadí a používají barvu okraje hlavičky. Úvodní text také používá barvu okraje hlavičky, zatímco odkazy uvnitř něj a autorství používají novou barvu pilíře. Ikony v meta sekci jsou stylizovány novou barvou pilíře. Popisky pro prezentační obrázky používají barvu datové linie. Dále jsou citované bloky uvnitř těla článku pro zařízení iOS odpovídajícím způsobem stylizovány.
Pro zařízení iOS a Android by blockquoty uvnitř těl článků měly používat novou barvu pilíře.
Na iOS
