Tento CSS kód definuje vlastní fontovou rodinu s názvem "Guardian Headline Full" s více řezy a styly písma. Zahrnuje lehkou, normální, střední a polotučnou tloušťku, každou v normálním i kurzívním stylu. Soubory fontů jsou poskytovány ve formátech WOFF2, WOFF a TrueType a jsou hostovány na asset serveru 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://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));
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 {
left: -10px;
}
}Toto se zdá být blok CSS kódu, pravděpodobně ze stylopisu webové stránky. Definuje různé styly pro prvky jako sloupce, interaktivní obsah a typografii, včetně barev, rozestupů a pravidel rozvržení pro různé velikosti obrazovky. Kód obsahuje mediální dotazy pro responzivní design a používá vlastní vlastnosti CSS (proměnné) pro konzistentní tematizaci.Následující CSS pravidla upravují rozvržení a stylování různých prvků:
- Odstavce následující po vodorovných čarách v konkrétních kontejnerech nemají horní odsazení.
- Popisky pro prvky showcase jsou pozicovány staticky, s plnou šířkou a maximální šířkou 620px.
- Imersivní prvky sahají na celou šířku viewportu mínus šířka posuvníku.
- Pro obrazovky široké až 71.24em jsou imersivní prvky omezeny na 978px a jejich popisky mají 10px vodorovné odsazení.
- Mezi 30em a 71.24em mají popisky pro imersivní prvky 20px vodorovné odsazení.
- Pro obrazovky mezi 46.25em a 61.24em jsou imersivní prvky omezeny na 738px.
- Pod 46.24em jsou imersivní prvky zarovnány doleva s upravenými okraji.
- Mezi 30em a 46.24em mají imersivní prvky levý okraj -20px a popisky s 20px vodorovným odsazením.
- Pro obrazovky 61.25em a širší je aplikováno mřížkové rozvržení s konkrétními definicemi sloupců a řádků.
- Titulky v této mřížce mají horní ohraničení.
- Meta informace jsou pozicovány relativně s horním odsazením a bez pravého okraje.
- Prvky standfirst mají upravené okraje, velikosti písma a styly odkazů, včetně podtržených odkazů s konkrétními barvami a efekty při najetí.
- První odstavec v prvcích standfirst má horní ohraničení a žádné spodní odsazení, které je odstraněno při 71.25em a výše.
- Obrázky v mřížce mají levé okraje a maximální šířku 630px pro inline prvky.
- Při 71.25em a výše je šablona mřížky upravena s různými definicemi sloupců a řádků.Poskytnutý text se zdá být CSS kódem pro stylování rozvržení webové stránky, konkrétně pro třídu furniture-wrapper. Definuje mřížkové struktury, mediální dotazy pro responzivní design a různá pravidla stylování pro prvky jako titulky, meta informace, text standfirst a popisky médií. Kód upravuje vlastnosti jako šířky, fonty, ohraničení a barvy na základě zlomových bodů velikosti obrazovky.Druhý prvek svého typu by měl být zobrazen jako blok s maximální šířkou 90%.
Na obrazovkách širokých alespoň 30em by měly mít popisky uvnitř furniture wrapperu odsazení 4px nahoře, 20px po stranách a 12px dole. Popisky s třídou "hidden" by měly být neviditelné.
Tlačítko popisku uvnitř furniture wrapperu je zobrazeno jako blok, absolutně pozicováno 10px odspodu a 8px zprava, s vysokým pořadím ve vrstvách. Má barvu pozadí definovanou proměnnou --captionBackground, žádné ohraničení, kruhový tvar a odsazení 6px nahoře, 5px po stranách a 5px dole. SVG uvnitř je škálováno na 85 % své původní velikosti. Na obrazovkách širokých alespoň 30em je tlačítko pozicováno 10px zprava.
Pro hlavní interaktivní sloupec na obrazovkách širokých alespoň 71.25em je horní pozice upravena o -12px a výška zvýšena o 24px. Nadpisy (h2) v tomto sloupci mají maximální šířku 620px.
Na zařízeních iOS a Android jsou barevné proměnné nastaveny následovně: --darkBackground na #1a1a1a, --feature na #c70000, --darkmodeFeature na #ff5943 a --new-pillar-colour na hodnotu --primary-pillar nebo --feature, pokud není definována. V tmavém režimu --new-pillar-colour používá --darkmode-pillar nebo --darkmodeFeature.
Pro první písmeno prvního odstavce následujícího po konkrétních prvcích v kontejnerech článků na iOS a Android je barva nastavena na hodnotu --secondary-pillar nebo černá, pokud není definována.
Hlavičky v kontejnerech článků na iOS a Android nemají výšku. Furniture wrapper v těchto kontejnerech má odsazení 4px nahoře, 10px po stranách a 0 dole. Štítky uvnitř furniture wrapperu používají tučné písmo o tloušťce 700 z fontových rodin Guardian Headline nebo Guardian Egyptian Web.Titulkový font je nastaven na Guardian Headline, Georgia nebo serif, s konkrétní barvou a velkými písmeny. Na zařízeních iOS a Android používá titulek v kontejnerech článků tučné písmo o velikosti 32px, má spodní odsazení 12px a je zbarven tmavě šedě.
Obrázky v těchto kontejnerech jsou pozicovány relativně, s horním okrajem 14px a levým okrajem -10px. Jejich šířka se přizpůsobuje viewportu mínus posuvník a jejich výška je nastavena na auto. Vnitřní prvky, obrázky a odkazy uvnitř těchto obrázků mají průhledné pozadí, stejnou responzivní šířku a automatickou výšku.
Sekce standfirst má odsazení 4px nahoře, 24px dole a pravý okraj -10px. Odstavce uvnitř standfirst používají fontovou rodinu Guardian Headline nebo Georgia. Odkazy uvnitř standfirst a jeho položek seznamu jsou odpovídajícím způsobem stylovány.Pro zařízení iOS a Android jsou odkazy uvnitř sekce standfirst feature, standardních a komentářových článků stylovány konkrétní barvou, podtržením 6px pod textem a bez obrázku na pozadí nebo spodního ohraničení. Při najetí se barva podtržení změní tak, aby odpovídala barvě textu.
Meta sekce v těchto kontejnerech nemá okraj a prvky jako podpisy, autoři a související odkazy jsou stylovány konzistentně.Pro zařízení iOS a Android platí pro kontejnery článků následující stylování:
- Odkazy na autorské podpisy používají novou barvu pilíře.
- Prvky meta sekce misc nemají odsazení.
- Ikony SVG v meta misc sekci používají pro tahy novou barvu pilíře.
- Tlačítka popisků v prvcích showcase jsou vycentrovaná, 28x28px, s odsazením 5px, pozicována 14px zprava.
- Tělo článku má vodorovné odsazení 12px.
- Obrázky, které nejsou miniatury ani imersivní, sahají na šířku viewportu mínus 24px a šířka posuvníku, bez okraje a automatické výšky. Jejich popisky nemají odsazení.
- Prvky imersivních obrázků jsou stylovány podobně.Pro imersivní obrázky ve standardních a komentářových článcích na Androidu nastavte šířku na plnou šířku viewportu mínus šířka posuvníku.
Na iOS a Android pro feature, standardní a komentářové články stylujte citované blockquoty barvou založenou na nové barvě pilíře. Také stylujte odkazy v próze primární barvou pilíře, podtržením posunutým o 6px a barvou podtržení odpovídající ohraničení hlavičky. Při najetí změňte barvu podtržení na novou barvu pilíře.
V tmavém režimu nastavte barvu pozadí furniture wrapperů na #1a1a1a. Stylujte štítky obsahu novou barvou pilíře, titulky barvou ohraničení hlavičky a odstavce standfirst barvou ohraničení hlavičky. Také stylujte odkazy standfirst a autory podpisů stejnou barvou ohraničení hlavičky.Tento CSS kód nastavuje barvu autorských podpisů na konkrétní barvu definovanou proměnnou na zařízeních iOS a Android pro různé typy článků. Také aplikuje stejnou barvu na tahy SVG v meta sekci a na citovaný text uvnitř článků. Dále definuje barvu pro popisky obrázků pomocí jiné proměnné. Kód cílí na více kontejnerů a prvků, aby zajistil konzistentní stylování napříč různými rozvrženími a platformami.Na zařízeních iOS je první písmeno odstavců následujících po konkrétních prvcích v sekcích článků a komentářů stylováno vlastním iniciálovým písmem
