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 kursiivimuunnelmat. Fonttitiedostot on saatavilla WOFF2-, WOFF- ja TrueType-muodoissa, ja ne sijaitsevat Guardianin palvelimilla.
@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) {
}.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme="light"]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme="light"]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#article-body > div hr:not(.last-horizontal-rule) + p,
.content--interactive > div .element-atom:first-of-type + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
.content--interactive > div hr:not(.last-horizontal-rule) + p,
#comment-body .element-atom:first-of-type + p:first-of-type,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#comment-body hr:not(.last-horizontal-rule) + p,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p,
#feature-body .element-atom:first-of-type + p:first-of-type,
#feature-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type,
#feature-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type,
#feature-body hr:not(.last-horizontal-rule) + p {
padding-top: 14px;
}
#article-body > div .element-atom:first-of-type + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#article-body > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#article-body > div hr:not(.last-horizontal-rule) + p:first-letter,
.content--interactive > div .element-atom:first-of-type + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
.content--interactive > div hr:not(.last-horizontal-rule) + p:first-letter,
#comment-body .element-atom:first-of-type + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule) + p:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + .sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] .element-atom:first-of-type + #sign-in-gate + p:first-of-type:first-letter,
[data-gu-name="body"] hr:not(.last-horizontal-rule) + p:first-letter,
#feature-body .element-atom:first-of-type + p:first-of-type:first-letter,
Ensimmäinen artikkelitekstin ensimmäisen kappaleen ensimmäinen kirjain käyttää tiettyä otsikkofonttia, on lihavoitu, suuri, kelluva vasemmalle, isoilla kirjaimilla ja värillinen. Vaakaviivan jälkeisillä kappaleilla ei ole yläpaddingia. Vedossitaatit on rajoitettu 620 pikselin leveyteen.
Esittelyelementtien kuvatekstit sijoitetaan normaalisti, ja niiden täysi leveys on enintään 620 pikseliä. Upottavat elementit ulottuvat koko näkymän leveyteen, ja niiden maksimileveyttä ja kuvatekstien paddingia säädetään eri näyttökokoihin. Erittäin pienillä näytöillä ne kohdistetaan vasempaan reunaan.
Suuremmilla näytöillä artikkelin otsikko käyttää ruudukkolayoutia. Otsikolla on yläreunus, metatiedot sijoitetaan suhteellisesti, ja ingressitekstin marginaaleja ja linkkityyliä säädetään, jossa alleviivatut linkit vaihtavat väriä kursorin ollessa päällä. Näytöillä, joiden vähimmäisleveys on 61.25em, ingressielementin ensimmäisellä kappaleella on yläreunus eikä alapaddingia. Jos näyttö on myös vähintään 71.25em leveä, tämä yläreunus poistetaan.
Näytöillä, joiden leveys on vähintään 61.25em, huonekalosäiliön kuvilla ei ole vasenta marginaalia, ja tiettyä roolia omaavilla sisäkuvilla on enimmäisleveys 630px.
Näytöillä, joiden leveys on vähintään 71.25em, huonekalosäiliö käyttää yksityiskohtaista ruudukkolayoutia sarakkeille ja riveille. Koristeellinen viiva ilmestyy meta-elementin eteen, ja ingressikappaleet menettävät yläreunuksensa. Pystyviiva lisätään ingressisisällön eteen.
Leveämmillä näytöillä, vähintään 81.25em, ruudukkomallia säädetään erilaisilla sarake- ja rivijaoilla. Meta-elementin edessä oleva koristeellinen viiva levenee, ja ingressin edessä oleva pystyviiva siirtyy hieman.
Otsikoilla on enimmäisleveys ja fonttikoko, jotka kasvavat suuremmilla näytöillä. Tietyt avainviivat piilotetaan keskikokoisilla näytöillä, ja metan osion sosiaaliset ja kommenttielementit käyttävät määriteltyä reunusväriä. Jotkut metasäiliöelementit eivät näytetä.
Ingressiosiolla on negatiivinen vasen marginaali ja suhteellinen sijainti, ja paddingia säädetään suuremmilla näytöillä. Sisällä olevat kappaleet käyttävät tiettyä fontin paksuutta ja kokoa.
Päämedian alue sijoitetaan suhteellisesti, sillä ei ole ylämarginaalia, on pieni alamarginaali, ja se sijoitetaan 'portrait'-ruudukkoalueelle. CSS-koodi asettaa tyylejä eri elementeille. Se tekee media-elementeistä täysleveitä ilman sivumarginaaleja. Suuremmilla näytöillä se poistaa median alamarginaalit, kun taas pienemmillä näytöillä se säätää leveyttä ja vasenta marginaalia. Kuvatekstit sijoitetaan alareunaan tietyllä paddingilla, väreillä ja näkyvyyssätoiminnoilla. Kuvatekstipainike sijoitetaan oikeaan alakulmaan. Interaktiiviselle sisällölle otsikot rajoitetaan leveyteen. iOS- ja Android-laitteissa sovelletaan tiettyjä värejä tummalle tilalle, ja kappaleiden ensimmäistä kirjainta muotoillaan eri tavalla. Artikkelien otsikoille annetaan myös erityistyylejä näillä laitteilla. Android-laitteissa aseta kommenttiartikkelien artikkeliosion k
