Seuraavat elementit ovat aluksi piilossa (läpinäkyvyys 0): .content--interactive, .content--interactive-grid, .furniture-wrapper sekä tietyt header-div-elementit ja h1-elementit. Kun juurielementtiin lisätään luokka "interactive-loaded", nämä elementit tulevat näkyviksi (läpinäkyvyys 1) sujuvan 0,3 sekunnin häivytyssiirtymän kera.
Lisäksi Guardian Headline Full -fonttiperhe on määritelty useilla painoarvoilla ja tyyleillä (light, regular, medium, semibold, kukin normaaleina ja kursiivisina muunnelmina). Jokainen muunnelma sisältää linkit woff2-, woff- ja ttf-fonttitiedostoihin, jotka sijaitsevat Guardianin palvelimella.
Guardian käyttää otsikoissaan räätälöityä "Guardian Headline Full" -fonttia. Tämä fontti on saatavilla useissa tyyleissä ja painoarvoissa, kuten light, semibold, bold ja black, kukin sekä tavallisena että kursiivisena versiona. Fonttitiedostot ovat saatavilla useissa muodoissa (WOFF2, WOFF ja TTF), ja ne isännöidään Guardianin omilla palvelimilla. Lisäksi on olemassa erillinen "Guardian Titlepiece" -fontti lihavoituna tietyissä käyttötarkoituksissa.
Guardian Headline Full -fonttiperhe sisältää useita tyylejä, jotka ovat saatavilla useissa muodoissa (WOFF2, WOFF ja TTF). Tyylit ovat:
- Regular (paino 400, normaali tyyli)
- Regular Italic (paino 400, kursiivi tyyli)
- Medium (paino 500, normaali tyyli)
- Medium Italic (paino 500, kursiivi tyyli)
- Semibold (paino 600, normaali tyyli)
- Semibold Italic (paino 600, kursiivi tyyli)
- Bold (paino 700, normaali tyyli)
- Bold Italic (paino 700, kursiivi tyyli)
- Black (paino 900, normaali tyyli)
Jokainen fonttitiedosto isännöidään määritetyllä URL-osoitteella.
Tämä näyttää olevan CSS-koodia verkkosivun tyylittelyyn, todennäköisesti Guardianin verkkosivustoa varten. Se sisältää sääntöjä asettelulle, fonteille ja responsiiviselle suunnittelulle eri näytön kooille ja laitteille. Koodi määrittelee tyylejä elementeille, kuten artikkelien runkoihin, kuvateksteihin, hiloihin ja typografialle, mukaan lukien tietyt fonttiperheet ja painoarvot. Se sisältää myös media-kyselyitä asettelun säätämiseksi suuremmille näytöille sekä mukautettuja tyylejä iOS- ja Android-laitteille.
Guardianin verkkosivusto käyttää räätälöityjä fontteja otsikoihinsa ja otsikoihinsa. Nämä fontit ladataan tietyistä URL-osoitteista eri muodoissa (WOFF2, WOFF, TTF), ja niillä on määritellyt painoarvot ja tyylit.
Asettelu mukautuu näytön koon mukaan:
- Laajemmillanäytöilläpääsisältösarakkeellavasemmalla on marginaali ja pystysuuntainen reunus.
- Elementeillä, kuten atomeilla, esittelyillä ja immersiivisellä sisällöllä, on enimmäisleveyksiä, jotka muuttuvat näytön koon mukaan.
- Pienemmillä näytöillä immersiiviset elementit ulottuvat näkymän leveyden verran.
- Kappaleet ja luettelot on rajoitettu enimmäisleveyteen luettavuuden parantamiseksi.
- Välistystä ja täyttöä käytetään siistin ja järjestäytyneen ulkoasun ylläpitämiseen.
Interaktiivisen sisällön pääsarakkeessa inline-elementit rajoitetaan enimmäisleveyteen 620 pikseliä. Näytöillä, joiden leveys on yli 61,25 em, inline-kuvat rajoitetaan myös 620 pikseliin.
Useita värimuuttujia on määritelty elementtien, kuten päivämäärien, otsikoiden, kuvatekstien ja esillä olevan sisällön, tyylittelyyn. Interaktiivisilla sisältöalueilla ei ole täyttöä oletusarvoisesti.
Ensimmäiselle kappaleelle tietyiden elementtien tai vaakaviivan jälkeen asetetaan yläreunan täyttöä 14 px. Näiden kappaleiden ensimmäinen kirjain on tyylitelty suureksi, lihavoiduksi, isokirjaimiseksi pudotusalkukirjaimeksi tietyllä fontilla ja värillä, joka on kelluva vasemmalle oikealla marginaalilla.
Kappaleilla, jotka tulevat välittömästi vaakaviivan jälkeen, ei ole yläreunan täyttöä. Esittelyelementtien kuvatekstit määritellyissä säiliöissä noudattavat tiettyjä tyylisääntöjä.
Elementillä on staattinen sijainti ja leveys 100 %, enimmäisleveydellä 620 px. Immersiivisillä elementeillä leveys säätyy näkymän täyteen leveyteen miinus vierityspalkin leveys.
Näytöillä, joiden leveys on enintään 71,24 em, immersiivisillä elementeillä on enimmäisleveys 978 px, ja niiden kuvateksteissä on 10 px vaakasuuntaista täyttöä. Näytöillä, joiden leveys on 30 em - 71,24 em, kuvateksteissä on 20 px vaakasuuntaista täyttöä. Välillä 46,25 em - 61,24 em immersiiviset elementit enintään 738 px leveitä.
Alle 46,24 em immersiiviset elementit siirtyvät vasemmalle 10 px ja menettävät oikean marginaalin. Välillä 30 em - 46,24 em vasen marginaali kasvaa 20 px:ään, ja kuvateksteissä on 20 px vaakasuuntaista täyttöä.
Näytöillä, joiden leveys on 61,25 em tai enemmän, käytetään hilasettelua määriteltyine sarakkeineen ja riveineen. Otsikoille asetetaan yläreunan reunus, meta-osioille yläreunan täyttö, ja johdantotekstin marginaaleja ja tyyliä säädetään. Johdannossa olevat linkit alleviivataan tietyllä värillä, joka muuttuu kohdistuksen yhteydessä. Johdannon ensimmäiselle kappaleelle asetetaan yläreunan reunus ja alareunan täyttö, joka poistetaan näytöillä, joiden leveys on 71,25 em tai enemmän.
Hilan kuvissa on vasen marginaali -10 px, ja inline-elementit enintään 630 px leveitä. Näytöillä, joiden leveys on 71,25 em tai enemmän, hilasarakkeita ja -rivejä säädetään, meta-osioille asetetaan yläreunan reunus pseudoelementin kautta, ja johdannon kappaleet menettävät yläreunan reunuksensa.
CSS-koodi määrittelee tyylejä asettelukääreelle, säädellen hilarakennetta, typografiaa, välistystä ja responsiivista käyttäytymistä eri näytön koilla. Se sisältää sääntöjä elementeille, kuten otsikoille, metatiedoille, kuvateksteille ja kuville, tietyin ominaisuuksin sijainnille, väreille ja näkyvyydelle. Media-kyselyt muuttavat näitä tyylejä eri katkaisupisteissä, varmistaen, että asettelu mukautuu laitteisien mobiililaitteista työpöytälaitteisiin.
Tämä CSS-koodi asettaa tyylejä mobiiliartikkeleille. Se säätää värejä, välistystä ja typografiaa iOS- ja Android-laitteille, mukaan lukien tumman tilan tuki. Otsikot piilotetaan, tunnisteet tyylitellään tietyillä fonteilla ja väreillä, ja otsikot asetetaan 32 px kooksi lihavalla painolla ja tummalla tekstillä.
iOS- ja Android-laitteilla artikkelisäiliöiden kuvat sijoitetaan suhteellisesti, yläreunan marginaalilla 14 px ja vasemmalla siirrolla -10 px. Niiden leveys säätyy näkymän täyteen leveyteen miinus vierityspalkin leveys, ja niiden korkeus skaalautuu automaattisesti.
Näissä kuvissa sisäelementeillä, kuvilla ja linkeillä on läpinäkyvä tausta. Niiden leveys vastaa myös näkymän leveyttä miinus vierityspalkki, ja korkeus säätyy automaattisesti.
Näissä säiliöissä olevan johdannon osiolla on ylä- ja alareunan täyttöä 4 px ja 24 px, ja oikea marginaali -10 px.
Johdannon sisällä oleva teksti käyttää Guardian Headline - tai vastaavaa serif-fonttiperhettä.
Johdannon sisällä olevat linkit ja listakohtaisten linkkien tyylit periytyvät näistä.
Android-laitteilla kommentt
