Tento CSS kód definuje vlastní rodinu písem s názvem "Guardian Headline Full" s více styly a váhami. Zahrnuje světlé, běžné, střední a polotučné verze, každou dostupnou v normálním i kurzívním stylu. Soubory písem jsou hostovány online a poskytovány ve třech formátech: WOFF2, WOFF a TrueType (TTF).
@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 620px.
U obrázků s rolí smyčky jsou popisky nastaveny na vyšší z-index a tlačítka smyčky jsou stylována s konkrétními rozměry a zarovnáním. Samohostované video prvky jsou nastaveny na plnou šířku, omezenou na 620px, a zahrnují horní a dolní okraje. Pro ponořené video rozvržení jsou omezení šířky odstraněna a okraje jsou upraveny. Na širších obrazovkách se ponořená videa rozšiřují na šířku a posouvají se doleva.
Barevné proměnné definují styly pro datové řádky, okraje, popisky a prvky funkcí. V tmavém režimu se barvy textu a ikon přizpůsobují tmavému motivu. Atomické prvky v obsahových sloupcích nemají žádné odsazení. Konkrétní pravidla zajišťují, že první odstavec po určitých prvcích nebo vodorovných čarách je vhodně stylován napříč různými obsahovými sekcemi, jako jsou články, komentáře a funkce. 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 počátečním prvku, přihlašovací bráně nebo vodorovné čáře (kromě poslední) v rámci různých obsahových těles aplikujte konkrétní styl iniciály. Tento styl používá písmo Guardian headline, je tučný, velikost 111 pixelů s výškou řádku 92 pixelů. Plave vlevo, je velkými písmeny, používá box-sizing border-box, má pravý okraj 8 pixelů, zarovnává se nahoru a používá vlastní barevnou proměnnou.
Odstavce bezprostředně následující po vodorovné čáře v těchto obsahových tělesech nemají žádné horní odsazení.
Citáty v těchto obsahových tělesech mají maximální šířku 620 pixelů.
Popisky pro prvky showcase v hlavním obsahu a kontejnerech článků jsou staticky umístěny, zabírají plnou šířku až do 620 pixelů.
Ponořené prvky zabírají celou šířku zobrazení s ohledem na posuvník. Na větších obrazovkách (až do 71.24em) jsou omezeny na 978 pixelů, s odsazením popisků upraveným v různých zlomových bodech. Na středních obrazovkách (46.25em až 61.24em) je maximální šířka 738 pixelů. Na menších obrazovkách (pod 46.24em) se zarovnávají k levému okraji s upravenými okraji a odsazením popisků.
Pro obalové prvky nábytku na velkých obrazovkách (61.25em a výše) se používá mřížkové rozvržení s definovanými sloupci a řádky pro umístění komponent nadpisu. CSS styly definují rozvržení a vzhled záhlaví webové stránky, označovaného jako "furniture-wrapper". Nastavují okraje, mezery, typografii a mřížkové struktury, které se přizpůsobují různým velikostem obrazovky.
Pro větší obrazovky (nad 71.25em) je vytvořeno složité mřížkové rozvržení s konkrétními sloupci a řádky pro prvky jako název, nadpis, meta informace, perex (podnadpis) a portrét. Vizuální prvky jako okraje a čáry jsou upraveny nebo odstraněny v určitých zlomových bodech. Velikost písma nadpisu se zvětšuje a jeho maximální šířka se mění na větších obrazovkách. Odkazy v perexu jsou stylovány s podtržením, které při najetí myší mění barvu. Pro obrazovky širší než 740 pixelů skryjte prvky s třídou `.keyline-4` nebo atributem `[data-gu-name="lines"]`. Uvnitř `.furniture-wrapper` nastavte styl tahů SVG v těchto prvcích tak, aby používaly barevnou proměnnou `--headerBorder`.
Na obrazovkách širších než 740 pixelů odstraňte pravý okraj z prvků s ID `#meta` nebo atributem `[data-gu-name="meta"]` uvnitř `.furniture-wrapper`. Pro tyto meta prvky nastavte barvu okraje sociálních odkazů, sekcí komentářů a jejich podřízených spanů na `--headerBorder`. Také skryjte všechny komponenty `gu-island` uvnitř `.content__meta-container_dcr`.
Pro sekci perexu (vybranou podle třídy, ID nebo `data-gu-name`) aplikujte záporný levý okraj a odpovídající odsazení a nastavte její pozici na relativní. Na širších obrazovkách (nad 740px) přidejte malé horní odsazení. Odstavce uvnitř perexu stylujte s váhou písma 400, velikostí 20 pixelů a spodním odsazením 14 pixelů.
Hlavní mediální oblast (vybraná podle ID nebo `data-gu-name`) je relativně umístěna, nemá horní okraj, má malý spodní okraj a je umístěna v mřížkové oblasti "portrait". Zajistěte, aby její vnitřní divy zabíraly plnou šířku a neměly žádný horizontální okraj. Na velmi širokých obrazovkách (nad 980px) odstraňte spodní okraj. Na menších obrazovkách (pod 740px) nastavte její šířku na plnou šířku zobrazení mínus jakýkoli posuvník a aplikujte záporný levý okraj. Pro obrazovky mezi 480px a 740px zvyšte tento záporný levý okraj na -20px.
Stylujte popisky obrázků tak, aby byly absolutně umístěny dole, s konkrétním odsazením a barvami pozadí/textu z CSS proměnných. Nastavte jejich šířku na 100% bez maximální šířky, odstraňte spodní okraj a nastavte minimální výšku. Span uvnitř popisku obarvěte pomocí `--headerBorder` a jejich SVG vyplňte stejnou barvou. Skryjte první span a zobrazte druhý span jako blokový prvek, omezte jeho šířku na 90%. Na obrazovkách širších než 480px zvyšte horizontální odsazení popisku. Třída `.hidden` na popisku nastaví jeho průhlednost na 0.
Tlačítko popisku je zobrazeno jako blok, absolutně umístěné poblíž pravého dolního rohu, s vysokým z-indexem. Má kruhové pozadí, žádný okraj a konkrétní odsazení. Jeho ikonu SVG mírně zmenšete. Na obrazovkách širších než 480px upravte jeho pravou pozici. Pro velmi široké obrazovky (nad 1140px) upravte horní část a výšku pseudo-prvku `.content__main-column--interactive`. Také omezte maximální šířku nadpisů h2 uvnitř tohoto sloupce na 620 pixelů.
Pro kořenový prvek, když má tělo třídu `.ios` nebo `.android`, definujte sadu tmavých barevných proměnných. V preferenci tmavého barevného schématu aktualizujte proměnnou `--new-pillar-colour` odpovídajícím způsobem.
Na zařízeních iOS cílte na první odstavec po konkrétních počátečních prvcích v různých kontejnerech článků a stylujte jejich první písmeno. To platí také, pokud se mezi tímto prvním prvkem a odstavcem objeví prvek přihlašovací brány. První písmeno prvního odstavce po přihlašovací bráně nebo po atomickém prvku následovaném přihlašovací bránou by mělo být obarveno pomocí sekundární pilířové proměnné. To platí pro kontejnery článků funkcí, standardních a komentářů na iOS i Androidu.
Na iOS a Androidu by měla být výška záhlaví článku nastavena na nulu v kontejnerech článků funkcí, standardních a komentářů.
Obal nábytku v těchto kontejnerech by měl mít horní odsazení 4 pixelů a horizontální odsazení 10 pixelů. Popisky obsahu uvnitř by měly používat tučné písmo s patkami, být obarveny novou pilířovou proměnnou a mít text velkými písmeny.
Nadpisy uvnitř obalu nábytku by měly mít velikost 32 pixelů, být tučné, mít spodní odsazení 12 pixelů a používat barvu #121212.
Obrazové prvky uvnitř obalu nábytku by
