Kuvatekstipainike on tyylitelty pyöreäksi elementiksi, jonka korkeus ja leveys ovat 40 pikseliä. Se sijaitsee näytön oikeassa alareunassa 10 pikselin marginaalilla. Siinä on puoliläpinäkyvä tumma tausta ja korkea z-indeksi varmistamaan, että se pysyy muun sisällön päällä. Erilaisilla näytön koilla sen oikea sijainti säätyy keskittämään se suhteessa vaihtelevaan sisällön leveyteen ottaen huomioon mahdollisen vierityspalkin.
Lisäksi Guardian Headline Full -fonttiperhe on määritelty useilla painoarvoilla ja tyyleillä (kevyt, normaali, medium, puolilihavoitu, kukin normaalina ja kursiivina). Fontit on lähdetty Guardianin resursseista WOFF2-, WOFF- ja TTF-muodoissa laajan selainyhteensopivuuden varmistamiseksi.@font-face {
font-family: 'Guardian Headline Full';
src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf') format('truetype');
font-weight: 600;
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-SemiboldItalic.woff2') format('woff2'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff') format('woff'),
url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf') format('truetype');
font-weight: 600;
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-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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
.Scrolly-header.svelte-ok2wri {
grid-area: header;
height: 100vh;
width: 100vw;
overflow: clip;
position: relative;
background-color: #121212;
margin-bottom: 20px;
margin-left: -10px;
padding: 0;
}
@media (min-width: 30em) {
.Scrolly-header.svelte-ok2wri {
margin-left: -20px;
}
}
@media (min-width: 46.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
padding: 0 calc((100vw - 740px - var(--scrollbar-width, 0px)) / 2);
}
}
@media (min-width: 61.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 980px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 71.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1140px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}
@media (min-width: 81.25em) {
.Scrolly-header.svelte-ok2wri {
margin-left: calc((100vw - 1300px - var(--scrollbar-width, 0px)) / 2 * -1 - 21px);
}
}Scrolly-header-elementillä on täytteet, jotka säätyvät näkymän leveyden mukaan alkaen nollasta ja kasvaen keskittämään sisältöä enimmäisleveyksien 980px, 1140px tai 1300px sisällä suurilla näytöillä, huomioiden vierityspalkin leveyden.
Keskikokoisilla näytöillä ja sitä suuremmilla otsikon korkeus on asetettu 90% näkymän korkeudesta, ja pystysuorat viivat lisätään vasemmalle ja oikealle puolelle asemoituen sisältöalueen reunoihin, jotka vaihtelevat näytön koon mukaan.
Kuvakääre on kiinnitetty, peittäen aluksi koko näkymän ja skaalautuen pienempiin kiinteisiin leveyksiin (740px, 980px, 1140px tai 1300px) suurilla näytöillä, alentuneella läpinäkyvyydellä käyttäjille, jotka suosivat vähempää liikettä.
Kuvakääreen sisällä oleva kuva on oletusarvoisesti hieman suurennettu ja keskittää taustan, palautuen skaalaamattomaan tilaan vähemmän liikettä suosivilla asetuksilla, ja sen leveys sopeutuu responsiivisesti.
Tekstikontti on absoluuttisesti asemoitu, kattaa koko näkymän korkeuden ja keskittää sisältönsä responsiivisilla täytteillä, jotka vastaavat otsikon asettelua, ja sopeutuu myös 90% näkymän korkeuteen keskikokoisilla näytöillä ja sitä suuremmilla.Näytöillä, joiden leveys on yli 71.25em, Scrolly-headerin sisällä oleva tekstikontti säätää täytteitään keskittämään sisältöä enimmäisleveydellä 800px huomioiden vierityspalkin.
Otsikon tekstikääre alkaa läpinäkyvänä, kattaa koko näkymän leveyden ja keskittää sisältönsä 80px ala-täytteellä. Aluksi se on piilotettu ja siirretty 30% alaspäin, mutta se häivytetään näkyviin ja liikkuu ylöspäin puolessa sekunnissa. Jos liikkeen vähentämistä suositaan, se ilmestyy välittömästi ilman animaatiota.
Keskikokoisilla näytöillä (46.25em ja yli) kääreen leveys on 740px, ja suurilla näytöillä (61.25em ja yli) se kapenee 640px:ään.
Sekä otsikko että johdantoteksti käyttävät tiettyä fonttiperhettä, ovat valkoisia varjolla luettavuuden parantamiseksi ja sisältävät tasapainoisen tekstityksen. Niissä on sumuinen tumma taustavaikutelma kontrastin lisäämiseksi. Otsikko on isompi ja lihavoitu, kun taas johdantoteksti on vaaleampi ja näkyy sen alapuolella ylä-marginaalilla.
Keskikokoisilla näytöillä tekstikoot kasvavat ja marginaalit säätyvät paremman asettelun vuoksi. Suurilla näytöillä marginaalit pienenevät hieman.
Animoinnin aikana kuvakääreestä tulee läpinäkyvämpi ja tekstikääreestä täysin näkyvä ja keskitetty. iOS:llä ja Androidilla otsikko kohdistuu vasempaan reunaan ilman marginaalia.
Guardian Headline Full -fonttityypit on määritelty kevyessä, kevyessä kursiivissa ja normaalipainoisina, lähdettynä tietyistä URL-osoitteista woff2-, woff- ja ttf-muodoissa.Guardian-sivusto käyttää mukautettua fonttia nimeltä "Guardian Headline Full" otsikoihinsa. Tämä fontti on saatavilla useissa tyyleissä ja painoarvoissa, kuten normaali, kursiivi, medium, puolilihavoitu, lihavoitu ja musta, kukin useissa tiedostomuodoissa kuten WOFF2, WOFF ja TrueType eri selainten yhteensopivuuden varmistamiseksi.@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2') format('woff2'),
url('https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff') format('woff'),
url('https://interactive.guim.co.uk/fonts/garnett/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 {
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 (scripting: enabled) {
:root .content--interactive,
:root #article-header > div,
:root #feature-header > div,
:root #article-header > h1,
:root #feature-header > h1 {
opacity: 0;
}
:root.interactive-loaded .content--interactive,
:root.interactive-loaded #article-header > div,
:root
