Tämä CSS-koodi määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full", jossa on useita tyylejä ja painoja. Se sisältää kevyen, normaalin, keskiraskaan ja puoliraskaan version, joista jokainen on saatavilla sekä normaalina että kursiivisena. Fonttitiedostot sijaitsevat verkossa ja ne on toimitettu kolmessa muodossa: WOFF2, WOFF ja TrueType (TTF).
@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) {
}
Interaktiivisille sisältösarakkeille lisätään vasen reunus tietyllä sijainnilla ja z-indeksillä. Suuremmilla näytöillä reunuksen vasen sijainti säätyy hieman. Näiden sarakkeiden sisällä atomin elementeillä ei ole ylä- tai alamarginaaleja, mutta ne sisältävät täytön. Kun kappaleita edeltää atomin elementtejä, täyttö poistetaan ja sen sijaan lisätään marginaalit. Inline-elementit rajoitetaan maksimileveyteen 620px.
Kuvioille, joilla on loop-rooli, kuvatekstit asetetaan korkeampaan z-indeksiin, ja loop-painikkeet tyylitellään tietyillä mitoilla ja tasauksilla. Itse isännöidyille videoelementeille asetetaan täysi leveys, rajoitettu 620px:iin, ja ne sisältävät ylä- ja alamarginaalit. Immersiivisille videolayouteille leveysrajoitukset poistetaan ja marginaaleja säädetään. Leveämmillä näytöillä immersiiviset videot laajenevat leveyttä ja siirtyvät vasemmalle.
Värimuuttujat määrittelevät tyylit päivämääräriveille, reunoille, kuvateksteille ja feature-elementeille. Tumman tilan asetuksissa tekstin ja kuvakkeiden värit mukautuvat tummaan teemaan. Sisältösarakkeiden sisällä olevilla atomin elementeillä ei ole täyttöä. Tietyt säännöt varmistavat, että ensimmäinen kappale tiettyjen elementtien tai vaakaviivojen jälkeen muotoillaan asianmukaisesti eri sisältöosioissa, kuten artikkeleissa, kommenteissa ja feature-osioissa. Ensimmäiselle kappaleelle kirjautumisportin tai vaakaviivan (paitsi viimeisen) jälkeen on ylätäyttöä 14 pikseliä.
Ensimmäisen elementin, kirjautumisportin tai vaakaviivan (paitsi viimeisen) jälkeisen ensimmäisen kappaleen ensimmäiselle kirjaimelle eri sisältöjen sisällä sovelletaan tiettyä korostetun alkukirjaimen tyyliä. Tämä käyttää Guardian-otsikkofonttia, on lihavoitu, 111 pikseliä korkea ja 92 pikseliä rivikorkeudeltaan. Se kelluu vasemmalle, on isoilla kirjaimilla, käyttää border-box-kokoa, sillä on 8 pikselin oikea marginaali, kohdistuu yläreunaan ja käyttää mukautettua värimuuttujaa.
Vaakaviivan välittömästi seuraavilla kappaleilla näiden sisältöjen sisällä ei ole ylätäyttöä.
Näiden sisältöjen sisällä olevilla lainauksilla on enimmäisleveys 620 pikseliä.
Pääsisällön ja artikkelisäkkäiden esittelyelementtien kuvatekstit sijoitetaan staattisesti, ottavat täyden leveyden enintään 620 pikseliin asti.
Immersiiviset elementit ulottuvat koko näkymän leveyteen, huomioiden vierityspalkin. Suuremmilla näytöillä (enintään 71.24em) ne rajoitetaan 978 pikseliin, ja kuvatekstien täyttöä säädetään eri katkaisupisteissä. Keskikokoisilla näytöillä (46.25em - 61.24em) enimmäisleveys on 738 pikseliä. Pienemmillä näytöillä (alle 46.24em) ne kohdistuvat vasempaan reunaan säädetyin marginaalein ja kuvatekstien täytöin.
Huonekalupakkauksille suurilla näytöillä (61.25em ja yli) käytetään ruudukkolayoutia määritellyillä sarakkeilla ja riveillä otsikkokomponenttien sijoittelua varten. CSS-tyylit määrittelevät verkkosivun ylätunnisteen, jota kutsutaan "furniture-wrapperiksi", asettelun ja ulkoasun. Ne asettavat reunukset, välistyksen, typografian ja ruudukkorakenteet, jotka mukautuvat eri näytönkokoihin.
Suuremmille näytöille (yli 71.25em) luodaan monimutkainen ruudukkolayout tietyillä sarakkeilla ja riveillä elementeille kuten otsikolle, pääotsikolle, metatiedoille, ingressille (alaotsikko) ja muotokuvalle. Visuaaliset elementit kuten reunukset ja viivat säädetään tai poistetaan tietyissä katkaisupisteissä. Pääotsikon fonttikoko kasvaa ja sen enimmäisleveys muuttuu suuremmilla näytöillä. Ingressin sisällä olevat linkit tyylitellään alleviivauksilla, joiden väri muuttuu kursorin ollessa päällä. Näytöille, joiden leveys on yli 740 pikseliä, piilota elementit, joilla on luokka `.keyline-4` tai attribuutti `[data-gu-name="lines"]`. `.furniture-wrapper`-sisällä tyylitä näiden elementtien SVG-viivat käyttämään `--headerBorder`-värimuuttujaa.
Näytöillä, joiden leveys on yli 740 pikseliä, poista oikea marginaali elementeistä, joilla on ID `#meta` tai attribuutti `[data-gu-name="meta"]` `.furniture-wrapper`-sisällä. Näille meta-elementeille aseta sosiaalisten linkkien, kommenttiosioiden ja niiden lapsispanien reunuksen väriksi `--headerBorder`. Piilota myös kaikki `gu-island`-komponentit `.content__meta-container_dcr`-sisällä.
Ingressiosiolle (valittu luokalla, ID:llä tai `data-gu-name`-attribuutilla) sovelleta negatiivista vasenta marginaalia ja vastaavaa täyttöä, ja aseta sen sijainti suhteelliseksi. Leveämmillä näytöillä (yli 740px) lisää pieni ylätäyttö. Tyylitä ingressin sisällä olevat kappaleet fontin painoksi 400, koooksi 20 pikseliä ja ala-täytöksi 14 pikseliä.
Päämedian alueelle (valittu ID:llä tai `data-gu-name`-attribuutilla) asetetaan suhteellinen sijainti, ei ylämarginaalia, pieni alamarginaali, ja se sijoitetaan "portrait"-ruudukkoalueelle. Varmista, että sen sisäiset divit ottavat täyden leveyden eivätkä sisällä vaakasuuntaisia marginaaleja. Erittäin leveillä näytöillä (yli 980px) poista alamarginaali. Pienemmillä näytöillä (alle 740px) aseta sen leveys täydeksi näkymän leveydeksi miinus mahdollinen vierityspalkki, ja sovella negatiivista vasenta marginaalia. Näytöillä, joiden leveys on 480px - 740px, lisää tätä negatiivista vasenta marginaalia -20px:iin.
Tyylitä kuvatekstit sijoitettavaksi absoluuttisesti alareunaan tietyin täytöin ja tausta-/tekstivärein CSS-muuttujista. Aseta niiden leveys 100%:ksi ilman enimmäisleveyttä, poista alamarginaali ja aseta minimikorkeus. Väritä kuvatekstin sisällä olevat span-elementit käyttäen `--headerBorder`-väriä ja täytä niiden SVG:t samalla värillä. Piilota ensimmäinen span ja näytä toinen span lohkoelementtinä, rajoittaen sen leveyttä 90%:iin. Näytöillä, joiden leveys on yli 480px, lisää kuvatekstin vaakasuuntaista täyttöä. Luokka `.hidden` kuvatekstissä asettaa sen läpinäkyvyyden 0:ksi.
Kuvatekstipainike näytetään lohkona, sijoitettuna absoluuttisesti lähellä oikeaa alanurkkaa, korkealla z-indeksillä. Sillä on pyöreä tausta, ei reunusta ja tietyt täytöt. Pienennä sen SVG-kuvaketta hieman. Näytöillä, joiden leveys on yli 480px, säädä sen oikeaa sijaintia. Erittäin leveillä näytöillä (yli 1140px) säädä `.content__main-column--interactive`-pseudoelementin yläosaa ja korkeutta. Lisäksi rajoita tämän sarakkeen sisällä olevien h2-otsikkojen enimmäisleveyttä 620 pikseliin.
Juurielementille, kun bodyssä on `.ios`- tai `.android`-luokka, määrittele joukko tumman tilan värimuuttujia. Kun tumma väriteema on käytössä, päivitä `--new-pillar-colour`-muuttuja vastaavasti.
iOS-laitteissa kohdenna ensimmäinen kappale tiettyjen aloituselementtien jälkeen eri artikkelisäkkäissä ja tyylitä niiden ensimmäinen kirjain. Tämä koskee myös, jos kirjautumisporttielementti esiintyy kyseisen ensimmäisen elementin ja kappaleen välissä. Ensimmäisen kappaleen ensimmäinen kirjain kirjautumisportin jälkeen tai atomin elementin ja kirjautumisportin jälkeen väritetään käyttäen toissijaista pilarimuuttujaa. Tämä koskee feature
