Tämä CSS-koodi määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full", jossa on useita fontin paksuuksia ja tyylejä. Se sisältää kevyen, normaalin, keskiraskaan ja puoliraskaan paksuudet, joista kullakin on normaali ja kursivoitu muunnelma. Fontit ladataan Guardianin palvelimilta kolmessa eri tiedostomuodossa: WOFF2, WOFF ja 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 {
/ Alkuperäinen teksti päättyy tähän äkillisesti. /
}Tämä CSS-koodi määrittelee tyylejä artikkelin asettelulle, keskittyen typografiaan ja responsiiviseen suunnitteluun. Otsikot käyttävät tiettyä fonttia ja niiden koko sopeutuu 36px:stä 50px:iin suuremmilla näytöillä. Tunnisteet ja linkit on tyylitelty erottuvilla väreillä ja hover-vaikutuksilla. Johdantoteksti ja kirjoittajatieto on määritelty tietyillä fonttikooilla ja väreillä, jotka myös sopeutuvat eri näytönleveyksiin.
Mediasektioissa asettelu muuttuu merkittävästi eri katkaisupisteissä. Mobiilissa se vie koko leveyden taustavärin ja koko näkymäkorkeuden alueen kanssa. Suuremmilla näytöillä se vaihtuu kaksisarakkeiseen ruudukkoon, jossa on tietty sijoitus otsikoille, haastateltavan tiedoille ja mediasäiliöille. Taustareunukset ja leveydet säädetään luomaan keskitetty, kehystetty ulkonäkö keskikokoisilla ja suurilla laitteilla.
Lisätyylit käsittelevät kuvatekstejä, lainauksia erityisellä typografialla ja koristeellisia elementtejä kuten tikkukirjaimia. Suunnittelu käyttää CSS-mukautettuja ominaisuuksia väreille, mikä mahdollistaa teemojen yhtenäisyyden.@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";
}
}Tämä CSS-koodi määrittelee tyylejä responsiiviselle artikkelin asettelulle. Kun skriptaus on poistettu käytöstä ja näytön leveys on vähintään 81.25em, artikkelin sisältöruudukko on rakennettu tietyillä alueilla otsikolle, medialle, otsakkeelle, reunalle, johdantotekstille, metatiedoille ja tekstirungolle.
Elementit, joilla on luokka "screen-reader-only", on sijoitettu näytön ulkopuolelle, jotta ne ovat saatavilla vain ruudunlukijoille. Tukikuvat pääinteraktiivisessa sarakkeessa ovat 75 % leveitä, ja niiden tyylittely sopeutuu eri näytönkokoihin, kuvateksteistä tulee staattisia ja leveydet poistetaan suuremmilla näytöillä.
Immersiivisille elementeille keskikokoisilla näytöillä sovelletaan negatiivista oikeaa marginaalia. Otsikkokuvateksteillä on yläpadding ja säädetyt marginaalit, kun niitä seuraa videon tekstitys. Otsikkosäiliöillä ja haastateltavaosioilla staattisissa ja video-otsikoissa on vaakasuuntaista paddingia, joka kasvaa suuremmilla näytöillä.
Mediasäiliöt näissä otsikoissa vievät koko ruudukkoalueen, ja niissä on liimautuvat kuvakääreet mobiililaitteilla, jotka muuttuvat suhteellisiksi suuremmilla näytöillä. Kuvat asetetaan peittämään säiliönsä, ja tietyt vierekkäiset elementit piilotetaan. Toinen kuvakerros on absoluuttisesti sijoitettu.
Mobiilikalustokääre on liimautunut alareunaan pienillä näytöillä, joustavalla sarakkeiden asettelulla ja taustavärillä, ja se muuttuu osaksi normaalia sisällön virtaa suuremmilla näytöillä. Se sisältää gradienttiverhouksen visuaalista vaikutusta varten pienemmillä laitteilla.Näytöille, joiden leveys on enintään 46.24em, staattiset ja video-otsikot vievät koko korke
