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 formátech WOFF2, WOFF a TrueType, aby byla zajištěna kompatibilita napříč různými prohlížeči.
@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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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) {
}
Pro interaktivní obsahové sloupce je přidán levý okraj s konkrétním umístěním a z-indexem. Na větších obrazovkách se levá pozice okraje mírně upravuje. Uvnitř těchto sloupců nemají atomické prvky žádné horní ani dolní okraje, ale obsahují odsazení. Když odstavce předcházejí atomickým prvkům, odsazení je odstraněno a místo toho jsou přidány okraje. Řádkové prvky jsou omezeny na maximální šířku.
Pro řádkové obrázky na středních obrazovkách a větších je nastavena maximální šířka. V sekcích médií obsahujících smyčkové obrázky jsou titulky vrstveny nad a tlačítka smyčky jsou stylizována s konkrétními rozměry a zarovnáním. Tlačítka titulků jsou umístěna navrch.
V sekci těla zabírají samo-hostované video ostrovy plnou šířku až do maxima, s vycentrovanými okraji. Smyčkové obrázky a videa uvnitř těchto ostrovů také zabírají plnou šířku. Pro ponořené video prvky jsou omezení šířky odstraněna a okraje jsou upraveny. Na větších obrazovkách se ponořená videa rozšiřují na šířku a posouvají se doleva, s titulky odpovídajícím způsobem odsazenými.
Barevné proměnné definují různé prvky UI, jako jsou datové čáry, okraje, titulky a barvy funkcí, s pilířovými barvami ovlivňujícími podnadpisy, citace a blokové citace. V tmavém režimu se tyto barvy přizpůsobují tmavému motivu.
Atomické prvky uvnitř obsahových sloupců nemají žádné odsazení. Konkrétní pravidla upravují první odstavce po určitých prvcích nebo vodorovných čarách napříč různými obsahovými oblastmi, jako jsou články, interaktivní obsah, komentáře a funkce, zajišťující správné rozestupy a rozložení.
První odstavec po přihlašovací bráně nebo vodorovné čáře (kromě poslední) má horní odsazení 14 pixelů.
Pro první písmeno prvního odstavce následujícího po konkrétních prvcích, jako je atom, přihlašovací brána nebo vodorovná čára (ne poslední) v různých obsahových oblastech (tělo článku, interaktivní obsah, komentáře, funkce nebo prvky s `data-gu-name` "body"), aplikujte speciální styl iniciály. Tento styl používá konkrétní nadpisová písma, nastavuje velikost písma na 111px s výškou řádku 92px, plave vlevo, převádí na velká písmena, přidává pravý okraj 8px, zarovnává k horní části textu a barví pomocí vlastní proměnné pro iniciály.
Odstavce bezprostředně následující po vodorovné čáře v těchto obsahových oblastech by neměly mít žádné horní odsazení.
Citace v těchto obsahových oblastech jsou omezeny na maximální šířku 620 pixelů.
Titulky pro prezentační prvky v hlavním obsahu, funkčních článcích, standardních článcích a sekcích komentářů jsou umístěny staticky, zabírají plnou šířku až do maxima 620 pixelů.
Ponořené prvky zabírají plnou šířku viewportu s ohledem na posuvník. Na větších obrazovkách (až do 71.24em) je jejich maximální šířka 978px, s odsazením titulků upraveným v různých zlomových bodech. 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) se ponořené prvky zarovnávají k levému okraji s upravenými okraji a odsazením titulků.
Pro širší obrazovky (nad 61.25em) používá obal nábytku CSS Grid rozložení s definovanými sloupci a řádky pro umístění prvků, jako je název, nadpis, metadata, perex a portrétní oblast.
CSS styly definují rozložení obalu pro komponenty článku. Nadpisy mají horní okraj a upravují velikost z 32px na 50px na větších obrazovkách, s maximální šířkou, která se také mění. Metainformace zahrnují dekorativní horní čáru na širokých obrazovkách. Sekce perexu obsahuje podtržené odkazy s vlastní barvou, která se mění při najetí, a její první odstavec má na menších obrazovkách horní okraj, který je na větších odstraněn. Ve perexu se na širokých obrazovkách objevuje svislá oddělovací čára.
Rozložení gridů je definováno pro obrazovky 71.25em a širší a znovu pro 81.25em a širší, specifikující šablony sloupců a řádků pro umístění prvků, jako jsou oblasti názvu, nadpisu, metadat, perexu a portrétu. Obrázky mají specifické okraje a maximální šířky. Celkově styly řídí responzivní prezentaci záhlaví článků a úvodního obsahu.
Pro obrazovky širší než 740px skryjte prvky s třídou `.keyline-4` nebo atributem `[data-gu-name="lines"]`. Uvnitř `.furniture-wrapper` nastylujte tahy SVG uvnitř těchto prvků pomocí vlastní barevné proměnné.
Na středních obrazovkách a větších odstraňte pravý okraj z prvků s ID `#meta` nebo atributem `[data-gu-name="meta"]`.
Uvnitř sekce meta nastavte barvu okraje pro sociální odkazy, komentářové prvky a jejich podřízené prvky span na vlastní proměnnou. Také skryjte jakékoli prvky `gu-island` uvnitř konkrétního kontejneru.
Pro sekci perexu upravte její pozicování a odsazení, přidejte levý posun. Na středních obrazovkách přidejte malé horní odsazení. Nastylujte odstavec uvnitř s běžnou váhou písma, velikostí 20px a spodním odsazením.
Hlavní mediální oblast je umístěna relativně, umístěna v grid oblasti 'portrét' a má specifické okraje. Zajistěte, aby její vnitřní divy zabíraly plnou šířku. Na větších obrazovkách odstraňte spodní okraj. Na menších obrazovkách upravte šířku a levý okraj, s dodatečnou úpravou pro středně malé obrazovky.
Nastylujte titulky obrázků tak, aby se zobrazovaly dole s vlastním pozadím a barvou textu, přepisujíce výchozí šířku a okraje. Skryjte první prvek span uvnitř a zobrazte druhý, omezte jeho šířku. Na středních obrazovkách upravte odsazení titulku. Skrytý stav dělá titulek průhledným.
Tlačítko titulku je umístěno vpravo dole, stylizováno s kruhovým pozadím a škálovanou ikonou, s jeho pozicí upravenou na středních obrazovkách.
Pro interaktivní sloupce článků na velmi velkých obrazovkách upravte pozici a výšku pseudo-prvku. Také omezte šířku nadpisů druhé úrovně.
Pro iOS nebo Android definujte sadu barevných proměnných pro tmavý motiv. V tmavém režimu upravte primární barevnou proměnnou.
Pro zařízení iOS cílte na první odstavec po konkrétních prvcích v různých kontejnerech článků a nastylujte jeho první písmeno.
První písmeno prvního odstavce následujícího po přihlašovací bráně nebo prvního odstavce po atomovém prvku v různých kontejnerech článků na iOS a Android by mělo být obarveno pomocí sekundární pilířové proměnné (s výchozí černou).
Na iOS i Android by měla být výška záhlaví článku ve funkčních, standardních a komentářových kontejnerech nastavena na nulu.
Obal nábytku uvnitř těchto kontejnerů článků na obou platformách by měl mít horní odsazení 4 pixelů a horizontální odsazení 10 pixelů.
Štítky uvnitř obalu nábytku by měly být tučné, používat specifikovanou sadu písem, brát svou barvu z nové pilířové proměnné a být psány velkými písmeny.
Nadpisy (h1) uvnitř obalu nábytku by měly mít velikost 32 pixelů, být tučné, mít spodní odsazení 12 pixelů a barvu #121212.
Obrázkové prvky uvnitř obalu nábytku by měly být umístěny relativně, mít horní okraj 14 pixelů, levý okraj -10 pixelů, šířku vypočítanou jako šířka viewportu minus šířka posuvníku a automatickou
