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 s normální a kurzívní variantou. 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://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 (scripting: enabled) {
main {
opacity: 0;
}
main.is-loaded {
opacity: 1;
}
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
main.is-loaded {
transition: opacity .3s ease-in-out;
}
}
:root {
--overlay-fade: rgba(0, 0, 0, .6);
--caption: #707070;
--light-type: #fff;
--dark-bg: #1a1a1a;
}
:root[data-app-os=android] {
--androidTop: 58px;
}
:root[data-app-os=ios] {
--iosBottomToolbar: 50px;
--iosTopToolbar: 20px;
--iosLvh: calc(100vh - var(--iosTopToolbar));
}
@media (min-height: 670px) {
:root[data-app-os=ios] {
--iosBottomToolbar: 84px;
--iosTopToolbar: 44px;
}
}
@media (min-height: 800px) {
:root[data-app-os=ios] {
--iosTopToolbar: 94px;
}
}
:root:root {
--byline: var(--media-200);
--byline-anchor: var(--media-200);
--share-button: var(--media-200);
--article-link-text: var(--media-200);
--article-link-hover: var(--media-200);
--article-link-text-hover: var(--media-200);
--article-link-border-hover: var(--media-200);
--block-quote-fill: var(--media-200);
--block-quote-text: var(--media-200);
--pullquote-icon: var(--media-200);
--pullquote-text: var(--media-200);
--textblock-bullet-background: var(--media-200);
--sub-meta-text: var(--media-200);
--sub-meta-text-hover: var(--media-text);
--design-tag-text: var(--media-text);
--design-tag-background: var(--media-tag);
--follow-icon-fill: var(--media-200);
--follow-icon-background: var(--media-200);
--series-title-text: var(--media-200);
}
:root:root [data-component=series] {
--carousel-active-dot: var(--media-200);
}
:root:root gu-island[name=ListenToArticle] {
--follow-icon-background: var(--media-text);
}
article [data-gu-name=body] h2 {
font-weight: 600;
--subheading-text: var(--media-200);
}
article .first-headline,
article .second-headline,
article .inter {
/ Původní text zde náhle končí. /
}
Tento CSS kód definuje styly pro rozložení článku se zaměřením na typografii a responzivní design. Nadpisy používají specifické písmo a upravují velikost z 36px na 50px na větších obrazovkách. Štítky a odkazy jsou stylovány odlišnými barvami a efekty při najetí myší. Text perexu a podpisy mají definované velikosti písma a barvy, které se také přizpůsobují různým šířkám obrazovky.
Pro mediální sekce se rozložení výrazně mění napříč zlomovými body. Na mobilu zabírá plnou šířku s barvou pozadí a oblastí s výškou celého viewportu. Na větších obrazovkách přechází na dvousloupcovou mřížku s konkrétním umístěním titulků, informací o dotazované osobě a mediálních kontejnerů. Okraje pozadí a šířky jsou upraveny tak, aby vytvořily centrovaný, orámovaný vzhled na středních a velkých zařízeních.
Další styly se zabývají titulky, citacemi se speciální typografií a dekorativními prvky, jako jsou iniciály. Design používá vlastní CSS vlastnosti pro barvy, což umožňuje konzistenci tématu.
@media (min-width: 81.25em) {
[data-gu-name=media] {
--body-width: 1298px;
}
}
[data-gu-name=media] [data-gu-name=title] {
margin: 0 10px 4px;
width: fit-content;
background-color: var(--design-tag-background, var(--media-tag));
padding: 4px 6px;
}
@media (min-width: 30em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 8px 20px;
}
}
[data-gu-name=media] [data-gu-name=title] > div > div {
padding: 0;
background-color: transparent;
}
[data-gu-name=media] [data-gu-name=title] > div > div a:only-of-type {
margin: 0;
}
@media (max-width: 61.24em) {
[data-gu-name=media] [data-gu-name=title] {
grid-area: mobile-furniture-wrapper;
}
}
article .content--interactive-grid {
grid-template-areas:
"media"
"meta"
"standfirst"
"body";
}
@media (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"media media"
"meta ."
"standfirst ."
"meta ."
"body ."
". .";
}
}
@media (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"media media media media"
"meta border standfirst ."
"meta border body ."
". border . .";
}
}
@media (min-width: 81.25em) {
article .content--interactive-grid {
grid-template-columns: 219px 1px 620px 80px 300px;
grid-template-areas:
"media media media media media"
"meta border standfirst . ."
"meta border body . ."
". border body . ."
". border . . .";
}
}
article .content--interactive-grid [data-gu-name=standfirst] {
margin-top: 8px;
}
article .content--interactive-grid [data-gu-name=lines] {
display: none;
}
article .content--interactive-grid .header-caption,
article .content--interactive-grid .video-caption {
margin-bottom: 10px;
}
article .content--interactive-grid .header-caption svg,
article .content--interactive-grid .video-caption svg {
fill: var(--caption);
width: 14px;
float: left;
margin-right: 4px;
}
article .content--interactive-grid .header-caption i,
article .content--interactive-grid .video-caption i {
font-style: italic;
}
article .content--interactive-grid .header-caption {
padding: 4px 0;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) span:has(svg) {
display: none;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) {
display: block;
padding-top: 4px;
}
gu-island[name=ListenToArticle] button {
margin-top: 4px;
margin-bottom: 4px;
}
.pin-spacer {
pointer-events: none;
}
.pin-spacer * {
pointer-events: auto;
}
header {
position: relative;
z-index: 20;
}
[data-rendering-target=apps] article div:has([data-gu-name=dateline]),
[data-rendering-target=apps] article [data-gu-name=dateline] {
margin-bottom: 0;
}
@media (orientation: landscape) and (max-width: 700px) {
[data-gu-name=media] {
grid-template-columns: 5fr 5fr;
grid-template-rows: .1fr .1fr .2fr 1fr .2fr;
gap: 4px;
grid-template-areas:
"title media-container"
"interviewee media-container"
". media-container"
"headline-container media-container"
". media-container";
}
[data-gu-name=media] [data-gu-name=title] {
grid-area: title;
margin: 8px 20px;
}
}
:root[data-app-os=ios] .Static-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Static-header [data-gu-name=media]:after,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:after {
display: none;
}
@media (scripting: none) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 30em) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 61.25em) {
[data-gu-name=media] {
height: unset;
display: block;
}
[data-gu-name=media] > div {
max-width: unset;
}
}
@media (scripting: none) {
article .content--interactive-grid {
grid-template-areas:
"headline"
"title"
"media"
"meta"
"standfirst"
"body";
}
}
@media (scripting: none) and (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline ."
"title ."
"media media"
"meta ."
"standfirst ."
"body .";
}
}
@media (scripting: none) and (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline headline headline headline"
"media media media media";
}
}
Tento CSS kód definuje styly pro responzivní rozložení článku. Když je skriptování vypnuto a šířka obrazovky je alespoň 81.25em, mřížka obsahu článku je strukturována s konkrétními oblastmi pro nadpis, média, titulek, okraj, perex, meta informace a tělo.
Prvky s třídou "screen-reader-only" jsou umístěny mimo obrazovku, aby byly přístupné pouze čtečkám obrazovky. Podpůrné obrázky v hlavním interaktivním sloupci mají šířku 75 % a jejich stylování se přizpůsobuje různým velikostem obrazovky, přičemž titulky se na větších obrazovkách stávají statickými a šířky se ruší.
Pro ponořující prvky na středních obrazovkách je aplikován záporný pravý okraj. Titulky záhlaví mají horní odsazení a upravené okraje, když následuje přepis videa. Nadpisové kontejnery a sekce dotazovaných osob ve statických a video záhlavích mají horizontální odsazení, které se na větších obrazovkách zvětšuje.
Mediální kontejnery v těchto záhlavích zabírají plnou oblast mřížky, s lepivými obalovými prvky obrázků na mobilu, které se na větších obrazovkách stávají relativními. Obrázky uvnitř jsou nastaveny tak, aby pokrývaly své kontejnery, a některé sousední prvky jsou skryty. Druhá vrstva obrázků je absolutně pozicována.
Obal mobilního nábytku je lepivý dole na malých obrazovkách, s flexibilním sloupcovým rozložením a barvou pozadí, a stává se součástí normálního toku obsahu na větších obrazovkách. Obsahuje přechodový překryv pro vizuální efekt na menších zařízeních.
Pro obrazovky až do 46.24em zabírají statická a video záhlaví plnou výšku. Na zařízeních iOS této velikosti rozložení používá proměnnou pro výšku viewportu a přidává další odsazení dole pro sekci dotazované osoby, aby se přizpůsobilo panelu nástrojů iOS.
Pro zařízení Android až do 61.24em se výška záhlaví vypočítá odečtením výšky horního panelu nástrojů od
