Denne CSS-koden definerer en tilpasset skriftfamilie kalt "Guardian Headline Full" med flere skriftvekter og stiler. Den inkluderer lette, vanlige, mellomtunge og halvfet skriftvekter, hver med normale og kursiv variasjoner. Skriftene lastes fra Guardians servere i tre forskjellige filformater: WOFF2, WOFF og 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 {
/ Den opprinnelige teksten slutter brått her. /
}CSS-koden definerer stiler for en artikkellayout, med fokus på typografi og responsivt design. Overskrifter bruker en spesifikk skrift og justeres i størrelse fra 36px til 50px på større skjermer. Etiketter og lenker er stilsett med distinkte farger og hover-effekter. Innledningsteksten og bylinene har definerte skriftstørrelser og farger som også tilpasser seg forskjellige skjermbredder.
For medieavsnitt endres layouten betydelig på tvers av brytningspunkter. På mobil tar den full bredde med en bakgrunnsfarge og et område med full visningshøyde. På større skjermer bytter den til et to-kolonners rutenett med spesifikke plasseringer for titler, intervjuobjektinformasjon og mediebeholdere. Bakgrunnsrammer og bredder justeres for å skape et sentrert, innrammet utseende på mellomstore og store enheter.
Ytterligere stiler håndterer bildetekster, sitater med spesiell typografi, og dekorative elementer som innledende store bokstaver. Designet bruker CSS-egendefinerte egenskaper for farger, noe som muliggjør tematisk konsistens.@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";
}
}Denne CSS-koden definerer stiler for en responsiv artikkellayout. Når scripting er deaktivert og skjermbredden er minst 81.25em, er artikkelinnholdsrutenettet strukturert med spesifikke områder for overskrift, media, tittel, ramme, innledning, metainformasjon og brødtekst.
Elementer med klassen "screen-reader-only" er plassert utenfor skjermen for å kun være tilgjengelige for skjermlesere. Støttefigurer i hovedkolonnen for interaktivt innhold har en bredde på 75%, og deres stil tilpasses på tvers av forskjellige skjermstørrelser, med bildetekster som blir statiske og bredder som fjernes på større skjermer.
For immersive elementer på mellomstore skjermer brukes en negativ høyre margin. Overskriftsbildetekster har topputfylling og justerte marger når de følges av en videotranskripsjon. Overskriftsbeholdere og intervjuobjektseksjoner i statiske og videooverskrifter har horisontal utfylling som øker på større skjermer.
Mediebeholdere i disse overskriftene opptar et fullt rutenettområde, med klebrige bildewrappere på mobil som blir relative på større skjermer. Bilder inni er satt til å dekke sine beholdere, og visse tilstøtende elementer er skjult. Et andre bildelag er absolutt posisjonert.
En mobil møbel-wrapper er klebrig nederst på små skjermer, med en fleksibel kolonnelayout og bakgrunnsfarge, og blir en del av det normale innholdsfløyet på større skjermer. Den inkluderer en gradientoverlegg for visuell effekt på mindre enheter.For skjermer opp til 46.24em tar de statiske og videooverskriftene full høyde. På iOS-enheter i denne størrelsen bruker layouten en variabel for visningshøyden og legger til ekstra utfylling nederst for intervjuobjektseksjonen for å tilpasse seg iOS-verktøylinjen.
For Android-enheter opp til 61.24em beregnes overskriftshøyden ved å trekke toppverktøylinjens høyde fra full visningshøyde, og den mobile møbel-wrapperen inkluderer utfylling for Android-topplinjen.
I landskapsorientering på skjermer opp til 700px bred, tilpasser overskriftshøyden seg innholdet, og mediebeholderen tilpasser seg også sitt innhold.
Innenfor apper er bildewrapperetiketter skjult.
Videobeholderen opptar full bredde og høyde, med videoer satt til
