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
