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, kukin sekä normaalina että kursiiviversioina. Fontit ladataan Guardianin palvelimilta WOFF2-, WOFF- ja TrueType-muodoissa varmistamaan yhteensopivuus eri selaimissa.
@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) {
}
Interaktiivisten sisältösarakkeiden vasemmalle puolelle lisätään reunus tietyllä sijainnilla ja z-indeksillä. Suuremmilla näytöillä reunuksen vasen sijainti säätyy hieman. Näiden sarakkeiden sisällä atomielementeillä ei ole ylä- tai alamarginaaleja, mutta niihin sisältyy täyte. Kun kappaleita edeltää atomielementtejä, täyte poistetaan ja sen sijaan lisätään marginaalit. Inline-elementtien enimmäisleveys on rajoitettu.
Keskikokoisilla näytöillä ja sitä suuremmilla inline-kuviille asetetaan enimmäisleveys. Mediasisällöissä, jotka sisältävät silmukkakuvia, kuvatekstit asetetaan päällekkäin, ja silmukkapainikkeet muotoillaan tietyillä mitoilla ja tasauksella. Kuvatekstipainikkeet sijoitetaan päälle.
Vartalon osassa omapalveliset videosaaret vievät koko leveyden enintään tiettyyn maksimiin, ja niiden marginaalit keskitetään. Näiden saarten sisällä olevat silmukkakuvat ja videot vievät myös koko leveyden. Immersiivisille videoelementeille leveysrajoitukset poistetaan ja marginaaleja säädetään. Suuremmilla näytöillä immersiiviset videot laajenevat leveyttä ja siirtyvät vasemmalle, ja niiden kuvatekstit sisennetään vastaavasti.
Värimuuttujat määrittelevät erilaisia käyttöliittymän elementtejä, kuten päivämäärärivit, reunukset, kuvatekstit ja ominaisvärit, ja pilarivärit vaikuttavat alaotsikoihin, lainauksiin ja lohkolainauksiin. Tumman teeman tilassa nämä värit mukautuvat tummaan teemaan.
Sisältösarakkeiden sisällä olevilla atomielementeillä ei ole täytettä. Tietyt säännöt säätelevät ensimmäisten kappaleiden sijaintia tiettyjen elementtien tai vaakaviivojen jälkeen eri sisältöalueilla, kuten artikkeleissa, interaktiivisessa sisällössä, kommenteissa ja erikoissisällöissä, varmistaen oikean välistyksen ja asettelun.Ensimmäiselle kappaleelle kirjautumisportin tai vaakaviivan jälkeen (paitsi viimeisen) asetetaan yläreunan täyte 14 pikseliä.
Ensimmäisen kappaleen ensimmäiselle kirjaimelle, joka seuraa tiettyjä elementtejä (kuten atomia, kirjautumisporttia tai vaakaviivaa, joka ei ole viimeinen) eri sisältöalueilla (artikkelin vartalo, interaktiivinen sisältö, kommentit, erikoissisällöt tai elementit, joilla on `data-gu-name`-attribuutti "body"), sovelletaan erityistä alkukirjaintyyliä. Tämä tyyli käyttää tiettyjä otsikkofontteja, asettaa fonttikooksi 111px rivikorkeudella 92px, kelluttaa sen vasemmalle, muuttaa suuraakkosiksi, lisää 8px oikean marginaalin, tasaa sen tekstin yläreunaan ja värittää sen alkukirjainvärimuuttujalla.
Kappaleille, jotka seuraavat välittömästi vaakaviivaa näillä sisältöalueilla, ei aseteta yläreunan täytettä.
Näiden sisältöalueiden sisällä olevien lainausten enimmäisleveys on 620 pikseliä.
Pääsisällön, erikoisartikkeleiden, tavallisten artikkeleiden ja kommenttiosioiden esittelykuvien kuvatekstit sijoitetaan staattisesti, ja ne vievät koko leveyden enintään 620 pikseliin.
Immersiiviset elementit ulottuvat koko näkymän leveyteen huomioiden vierityspalkin. Suuremmilla näytöillä (enintään 71.24em) niiden enimmäisleveys on 978px, ja kuvatekstien täytettä säädetään eri katkaisupisteissä. Keskikokoisilla näytöillä (46.25em ja 61.24em välillä) enimmäisleveys on 738px. Pienemmillä näytöillä (alle 46.24em) immersiiviset elementit kohdistetaan vasempaan reunaan säädetyillä marginaaleilla ja kuvatekstitäytteellä.
Leveämmillä näytöillä (yli 61.25em) huonekalupakkaus käyttää CSS Grid -asettelua määritellyillä sarakkeilla ja riveillä elementtien, kuten otsikon, pääotsikon, metatiedon, johdannon ja muotokuvan, sijoittamiseksi.CSS-tyylit määrittelevät asettelupakkauksen artikkelikomponenteille. Pääotsikoilla on yläreunan reunus, ja niiden koko säätyy 32px:stä 50px:iin suuremmilla näytöillä, ja niiden enimmäisleveys myös muuttuu. Metatiedot sisältävät koristeellisen yläreunan viivan leveillä näytöillä. Johdanto-osassa on alleviivattuja linkkejä mukautetulla värillä, joka vaihtuu kohdattaessa, ja sen ensimmäisellä kappaleella on yläreunan reunus pienemmillä näytöillä, joka poistetaan suuremmilla. Pystysuora erotinviiva ilmestyy johdantoon leveillä näytöillä.
Asetteluristikot määritellään näytöille, joiden leveys on vähintään 71.25em, ja uudelleen vähintään 81.25em, määrittäen sarake- ja rivipohjat elementtien, kuten otsikon, pääotsikon, metatiedon, johdannon ja muotokuva-alueiden, sijoittamiseksi. Kuvilla on tietyt marginaalit ja enimmäisleveydet. Kaiken kaikkiaan tyylit hallitsevat artikkelien otsikoiden ja johdantosisällön responsiivista esitystä.Näytöille, joiden leveys on yli 740px, piilota elementit, joilla on luokka `.keyline-4` tai attribuutti `[data-gu-name="lines"]`. `.furniture-wrapper`-elementin sisällä muotoile näiden elementtien sisällä olevien SVG-viivojen väri mukautetulla värimuuttujalla.
Keskikokoisilla näytöillä ja sitä suuremmilla poista oikea marginaali elementeistä, joilla on ID `#meta` tai attribuutti `[data-gu-name="meta"]`.
Metatieto-osan sisällä aseta sosiaalisten linkkien, kommenttielementtien ja niiden lapsispan-elementtien reunaväri mukautetulle muuttujalle. Piilota myös kaikki `gu-island`-elementit tietyn säilön sisällä.
Johdanto-osalle säädä sen sijaintia ja täytettä lisäämällä vasen siirtymä. Keskikokoisilla näytöillä lisää pieni yläreunan täyte. Muotoile sen sisällä oleva kappale normaalilla fontin paksuudella, koolla 20px ja alareunan täytteellä.
Päämediassa on suhteellinen sijainti, se sijoitetaan 'portrait'-ruudukkoalueelle ja sille annetaan tietyt marginaalit. Varmista, että sen sisäiset div-elementit vievät koko leveyden. Suuremmilla näytöillä poista alareunan marginaali. Pienemmillä näytöillä säädä leveyttä ja vasenta marginaalia, ja tee lisäsäätö keskikokoisille näytöille.
Muotoile kuvatekstit näkymään alareunassa mukautetulla taustalla ja tekstivärillä, ohittaen oletusleveyden ja marginaalit. Piilota ensimmäinen sisällä oleva span-elementti ja näytä toinen, rajoittaen sen leveyttä. Keskikokoisilla näytöillä säädä kuvatekstin täytettä. Läpinäkyvä tila tekee kuvatekstistä läpinäkyvän.
Kuvatekstipainike sijoitetaan oikeaan alareunaan, muotoiltuna pyöreällä taustalla ja skaalatulla kuvakkeella, ja sen sijaintia säädetään keskikokoisilla näytöillä.
Interaktiivisille artikkeleille erittäin suurilla näytöillä säädä pseudoelementin sijaintia ja korkeutta. Rajoita myös toisen tason otsikoiden leveyttä.
iOS- tai Android-laitteille määrittele joukko tumman teeman värimuuttujia. Tumman teeman tilassa säädä ensisijaista värimuuttujaa.
iOS-laitteissa kohdenna ensimmäinen kappale tiettyjen elementtien jälkeen eri artikkelisäiliöissä ja muotoile sen ensimmäinen kirjain.Ensimmäisen kappaleen ensimmäinen kirjain, joka seuraa kirjautumisporttia tai ensimmäinen kappale atomielementin jälkeen eri artikkelisäiliöissä iOS- ja Android-laitteilla, väritetään käyttäen toissijaista pilarimuuttujaa (oletuksena musta).
Sekä iOS- että Android-laitteilla artikkelin otsikon korkeus erikois-, tavallis- ja kommenttia
