Tämä CSS-koodi määrittelee "Guardian Headline Full" -fonttiperheen eri painoilla ja tyyleillä, kuten kevyt, normaali, medium ja puolilihavoitu, kukin normaalissa ja kursiiviversioissa. Se määrittää fonttitiedostot WOFF2-, WOFF- ja TrueType-muodoissa, jotka sijaitsevat Guardianin palvelimilla.
Tämä CSS-koodi määrittelee useita fonttimuotoja "Guardian Headline Full" ja "Guardian Titlepiece" -fonttiperheille. Jokainen fonttimuoto määrittää eri painot ja tyylit (normaali tai kursiivi) ja tarjoaa useita tiedostomuotoja (WOFF2, WOFF ja TrueType) yhteensopivuutta varten eri selaimille. Painot vaihtelevat kevyestä (300) mustaan (900) vastaavine kursiiviversioineen.
Tämä CSS-koodi määrittelee useita fonttityylejä "Guardian Headline Full" -fonttiperheelle. Se sisältää eri painot ja tyylit, kuten normaalin, mediumin, puolilihavoidun, lihavoidun ja mustan, kukin normaalissa ja kursiiviversiossa. Jokaiselle tyylille se määrittää fonttitiedostot WOFF2-, WOFF- ja TrueType-muodoissa Guardianin resurssipalvelimelta sekä vastaavat fontin paino- ja tyyliominaisuudet.
Tämä teksti näyttää olevan CSS-koodia, joka määrittelee fonttityylejä ja asettelurivejä verkkosivustolle, luultavasti The Guardianille. Se määrittää fonttitiedostot eri painoille ja tyyleille ja asettaa responsiiviset asettelurivit, jotka muuttuvat eri näytön ko'oissa. Koodi käsittelee sitä, miten sisältöalueet kuten otsikot, pääotsikot, media ja tekstiosa järjestetään eri laitteiden leveysalueilla mobiilinäkymästä työpöytänäkymään.
Interaktiivisissa asettelukuviossa, joissa on immersiivisiä kuvatekstejä tietyillä sisältöalueilla, kuvatekstin tyhjätilat asetetaan 4 pikseliä yläreunassa ja 0 muissa kohdissa.
Eri sisältöosioissa elementit, joilla on data-attribuutteja riveille ja metatiedoille, sijoitetaan asetteluun riviltä 2 riville 5 ja sarakkeesta 1 sarakkeeseen 2. Rivi-elementeillä on korkeus, joka sopii niiden sisältöön, ja ylämargin 5 pikseliä, kun taas meta-elementeillä on ylämargin 18 pikseliä.
Suuremmilla näytöillä, joiden vähimmäisleveys on 81.25em, näiden sisältöalueiden asettelurivi käyttää sarakkeita, joiden leveydet ovat 219px, 1px, 620px, 80px ja 300px.
iOS- ja Android-laitteissa artikkelien otsikkokäyttävät tiettyjä fontteja ja tyylejä: johdantoteksti käyttää Guardian Headlinea tai vastaavaa serif-fonttia medium-painolla, osio-otsikot näkyvät lohkoina ensimmäisellä kirjaimella isolla, erottelulinjoilla on 12 pikseliä ylätyhjätilaa ja tekijänoikeustiedoissa käytetään lihavoitua serif-fonttia. Artikkeleiden kuvat säätävät korkeutensa automaattisesti, ja atomelementtien jälkeisillä kappaleilla ei ole ylämarginia.
Fonttimuodot määritellään Guardian Headline Fullille kevyellä ja kevyellä kursiivipainolla, lähteinä woff2-, woff- ja ttf-tiedostot.
Tämä teksti määrittelee mukautetun fonttiperheen nimeltä "Guardian Headline Full" eri tyyleillä ja painoilla. Se sisältää normaalit, mediumit, puolilihavoidut ja lihavoit versiot, kukin sekä normaalissa että kursiivityylissä. Fonttitiedostot tarjotaan WOFF2-, WOFF- ja TrueType-muodoissa Guardianin verkkosivustolta.
Tämä CSS-koodi määrittelee fonttityylejä ja asettelusäätöjä verkkosivustolle. Se määrittää mukautetut fontit Guardianin resursseista, mukaan lukien niiden painot ja tyylit, ja asettaa responsiivisen suunnittelun säännöt eri näytön ko'oille. Asettelusäännöt hallitsevat eri elementtien, kuten sarakkeiden, atomien, esittelyosioiden ja immersiivisten osien marginaaleja, leveyksiä ja sijaintia varmistaakseen oikean näyttämisen eri laitteilla. Se sisältää myös värimuuttujia ja tyhjätilojen säätöjä yhtenäiseen visuaaliseen ulkonäköön.
Ensimmäisellä kappaleella eri sisältöosioissa, kuten artikkelirungoissa, interaktiivisessa sisällössä, kommenteissa ja erikoisosioissa, tulisi olla 14 pikseliä ylätyhjätilaa. Lisäksi näiden kappaleiden ensimmäistä kirjainta tulisi muotoilla tietyllä fontilla, lihavalla painolla, suurella koolla, isolla kirjaimella ja värillä, joka voi vaihdella, kelluen vasemmalle marginaalilla.
Kappaleille, jotka seuraavat vaakaviivaa, ei käytetä ylätyhjätilaa. Näiden osien sisällä olevat lainaukset rajoitetaan enintään 620 pikselin leveyteen.
Esittelyelementeissä kuvatekstit sijoitetaan staattisesti ja niillä on myös enintään 620 pikselin leveys. Immersiiviset elementit ulottuvat koko näkymän leveyteen, säädettynä vierityspalkkeja varten, ja näytöillä, joiden koko on alle 71.24em, ne rajoitetaan 978 pikselin leveyteen sopivine kuvatekstin tyhjätiloineen.
Tämä näyttää olevan CSS-koodia responsiivista verkkosuunnittelua varten, asettaen eri tyylejä eri näytön ko'oille. Se määrittelee, miten sivuelementit kuten otsikot, kuvat ja kuvatekstit tulisi näyttää ja mukautua eri laitteilla mobiilista työpöytään. Koodi käyttää media-kyselyitä soveltaakseen tiettyjä asetteluja, välistyksiä, reunuksia ja asettelurakenteita, kun näkymä täyttää tietyt leveyden ehdot.
Asettelurivi käyttää viittä yhtä leveää saraketta otsikon, pääotsikon ja johdantoteksti-osioille, joita seuraa kahdeksan yhtä leveyttä saraketta muotokuvaosiossa. Rivit määritellään tietyillä korkeuksilla otsikon, pääotsikon, johdantoteksti- ja metasisältöalueille.
Meta-elementeille asetetaan kiinteä leveys 620px, kun taas johdantoteksti on hieman siirretty vasemmalle. Otsikkoalueen tunnisteilla on pieni ylätyhjätila.
Pääotsikot ovat lihavoituja enintään 620px leveydellä ja 32px fontin koolla, kasvien 50px:ään kapeammalla leveydellä suuremmilla näytöillä. Keskikokoisilla näytöillä rivien oikeat marginaalit poistetaan, ja rivit piilotetaan leveämmillä näytöillä niiden värin vastaavan otsikon reunuksen väriä.
Meta-osiot menettävät myös oikean marginaalinsa keskikokoisilla näytöillä, ja sosiaaliset ja kommenttielementit jakavat otsikon reunuksen värin. Jotkut metakomponentit piilotetaan.
Johdantoteksti on sisennetty ja suhteellisesti sijoitettu, ja keskikokoisilla näytöillä lisätään ylätyhjätilaa. Sen sisällä olevat kappaleet ovat normaalia painoa, 20px kokoinen ja niillä on alatyhjätila.
Päämedia sijoitetaan muotokuva-asettelualueelle, ulottuu täyteen leveyteen ilman sivumarginaaleja, eikä sillä ole alamarginia suuremmilla näytöillä. Pienemmillä näytöillä se säätää leveyttään ja vasenta marginiaan.
Kuvatekstit sijoitetaan alareunaan taustavärillä ja tekstivärillä, täysillä leveys ja vähimmäiskorkeus. Ensimmäinen span piilotetaan, kun taas toinen on näkyvissä ja rajoitettu 90% leveyteen, tyhjätilojen kasvaen suuremmilla näytöillä. Piilotetut kuvatekstit ovat läpinäkyviä.
Kuvatekstipainike ilmestyy oikeaan alareunaan pyöreällä taustalla, ilman reunusta ja skaalatulla kuvakkeella, sijoitettuna kauemmaksi oikealle suuremmilla näytöillä.
Interaktiivisessa sisällössä pseudoelementtiä säädetään sijainnissa ja korkeudessa suurimmilla näytöillä.
Pääsarakkeen interaktiivisilla otsikoilla on enimmäisleveys 620 pikseliä. iOS- ja Android-laitteissa väriteema käyttää tummia taustoja ja tiettyjä korostusvärejä, jotka sopeutuvat tummatilassa. Näillä mobiilialustoilla artikkelikonttien tiettyjen elementtien jälkeisen ensimmäisen kappaleen ensimmäinen kirjain muotoillaan toissijaisella värillä, ja artikkelien otsikot piilotetaan. Kalustekääreet saavat vähäisen tyhjätilan, tunnisteet lihavoiduilla, isoilla kirjaimilla varustetuilla fonteilla käyttäen määritettyä pilariväriä, ja pääotsikot ovat suuria, lihavoituja ja tummia korostuksen vuoksi.
iOS- ja Android-laitteille seuraavat tyylit koskevat artikkelikontteja (erikois-, normaali- ja kommenttiversioita):
- Kalustekääreen sisällä olevat kuvaelementit sijoitetaan suhteellisesti, ylämarginilla 14px, vasemmalla marginilla -10px ja leveydellä, joka ulottuu koko näkymän leveyteen miinus vierityspalkin leveys. Niiden korkeus säätää automaattisesti.
- Sisäinen figure, kuva ja linkkielementit ovat läpinäkyvää taustaa, vastaavat koko näkymän leveyttä miinus vierityspalkki ja ylläpitävät automaattisen korkeuden.
- Johdantoteksti-osioilla on ylätyhjätila 4px, alatyhjätila 24px ja oikea marginaali -10px.
- Johdantoteksti sisällä olevat kappaleet käyttävät Guardian Headlinea tai vastaavaa serif-fonttiperhettä.
- Johdantoteksti sisällä olevat linkit, mukaan lukien listaelementeissä, muotoillaan vastaavasti.
Kommenttiartikkelikonteissa johdantoteksti linkit muotoillaan tietyllä värillä, alleviivattuina offsetillä, ilman taustakuvaa tai reunusta. iOS- ja Android-laitteissa näiden linkkien päällä leijuminen erikois-, normaali- tai kommenttiartikkeleissa muuttaa alleviivauksen värin vastaamaan pilariväriä. Lisäksi näiden artikkeleiden meta-osalla ei ole marginaalia, ja elementit kuten tekijänoikeustiedot ja kirjoittajalinkit käyttävät pilariväriä tekstille. Meta-satunnaisosalla ei ole tyhjätilaa.
iOS- ja Android-laitteille seuraavat tyylit koskevat erikois-, normaali- ja kommenttiartikkelikontteja:
- Meta-satunnaisosion SVG-kuvakkeet käyttävät uutta pilariväriä ääriviivoilleen.
- Esittelyelementtien kuvatekstipainike näytetään flex-säiliönä, keskitettynä 5px tyhjätilalla, 28px kokoinen ja sijoitettuna 14px oikealta.
- Artikkelirungolla on 12px vaakasuoraa tyhjätilaa.
- Ei-pienoiskuva, ei-immersiiviset kuvat artikkelirungossa eivät sisällä marginaalia, leveys laskettuna näkymän leveys miinus 24px ja vierityspalkin leveys, automaattinen korkeus, ilman tyhjätilaa niiden kuvateksteissä.
- Immersiiviset kuvat ulottuvat koko näkymän leveyteen miinus vierityspalkin leveys.
- Proosa-osassa lainatut lohkolainaukset sisältävät ennen pseudoelementin, joka on muotoiltu vastaavasti.
iOS- ja Android-laitteissa artikkelien lainattujen tekstien ja linkkien muotoilua säädetään. Lainattu teksti käyttää tiettyä väriä, kun taas linkit alleviivataan tietyllä värillä ja muuttuvat päällä leijuttaessa.
Tummatilassa artikkelien otsikoiden tausta muuttuu tummanharmaaksi, ja teksti-elementit kuten tunnisteet, pääotsikot ja johdantoteksti-kappaleet ottavat käyttöön kontrastivärejä paremman luettavuuden vuoksi. Näiden osioiden linkit ja kirjoittajien nimet noudattavat myös tätä värimallia yhdenmukaisuuden säilyttämiseksi.
Tämä CSS-koodi määrittelee tyylejä eri artikkelikonteille Android- ja iOS-laitteilla. Se asettaa tekijänoikeustietojen ja lainatun tekstin värin tiettyyn pilariväriin, soveltaa samaa väriä SVG-ääriviivoihin ja käyttää päivämääräväriä kuvateksteissä. Lisäksi se varmistaa, että eri rungonelementtien tausta on asetettu tummaan taustaan korkealla tärkeydellä.
Tämä näyttää olevan CSS-valitsin, joka kohdistuu kappaleiden ensimmäiseen kirjaimeen, jotka seuraavat tiettyjä elementtejä eri artikkelikonttien sisällä iOS- ja Android-laitteilla. Valitsin koskee eri osioita kuten erikoisartikkeleita, normaaleja artikkeleita ja kommenttiosioita, keskittyen kappaleisiin, jotka tulevat elementtien jälkeen, joilla on luokkia kuten "element-atom" tai ID:t kuten "sign-in-gate."
Android- ja iOS-laitteilla eri artikkelikonttien tiettyjen elementtien jälkeisten kappaleiden ensimmäinen kirjain muotoillaan mukautetulla värimuuttujalla, oletuksena valkoinen.
Kommenttiartikkeleille sekä Androidilla että iOS:lla johdantoteksti-osalla on ylätyhjätila 24 pikseliä eikä ylämarginia. Proosan tason 2 otsikot asetetaan 24 pikselin kokoiseksi.
Erikois-, normaali- ja kommenttiartikkeleiden kuvatekstipainikkeilla on eri tyhjätilat iOS:lla (6px ylä, 5px sivut, 0 ala) ja Androidilla (4px ylä ja sivut, 0 ala).
Tummatilassa tietyt värit sovelletaan seuraustekstiin, kuvakkeisiin, johdantotekstiin, linkkeihin ja tekijänoikeustietoihin paremman näkyvy
