Tämä CSS-koodi määrittelee "Guardian Headline Full" -fonttiperheen eri painoilla ja tyyleillä, kuten kevyt, normaali, medium ja puolilihavoitu, kukin normaalina ja kursiiviversioina. Se määrittää fonttitiedostot WOFF2-, WOFF- ja TrueType-muodoissa, jotka sijaitsevat Guardianin palvelimilla.
Tämä CSS-koodi määrittelee useita fonttiperheitä Guardian Headline ja Guardian Titlepiece - fonteille, määritellen niiden lähteet eri muodoissa (WOFF2, WOFF, TTF) fonttien painojen ja tyylien kera. Se sisältää myös responsiivisen suunnittelun säännöt pääsisältösarakkeelle interaktiivisissa asetteluissa, säätäen marginaaleja, leveyksiä ja sijaintia näkymän koon mukaan. Esimerkiksi laajemmillanäytöillä se lisää vasemman marginaalin ja reunuksen, kun taas pienemmillä näytöillä se laajentaa elementtejä täydeksi leveydeksi ja keskittää ne. Tyylit varmistavat oikean muotoilun laitteiden välillä, enimmäisleveyksien ollessa asetettuina erilaisille sisältötyypeille kuten atomeille, esittelyille ja immersiivisille elementeille.
Interaktiivisissa sisältösarakkeissa vasen reuna lisätään ennen elementtiä, sijoitettuna 11 pikseliä vasemmalle. Näiden sarakkeiden sisällä atomeilla (elementeillä) ei ole ylä- tai alamarginaaleja, mutta niihin sisältyy 12 pikselin täyttö sekä ylä- että alaosassa. Kun kappale seuraa atomia, täyttö poistetaan ja sen sijaan käytetään 12 pikselin marginaaleja. Inline-elementit rajoitetaan enimmäisleveyteen 620 pikseliä, ja laajemmillanäytöillä (yli 61.25em) inline-kuvat tietyllä roolilla noudattavat myös tätä leveysrajaa.
Värimuuttujat on määritelty eri elementeille, kuten päivämääräriveille, otsikoille, kuvateksteille ja erikoissisällöille, oletuserikoissisällön väriksi asetettuna punaiseksi. Atomeilla pääsarakkeessa ja muualla ei ole täyttöä.
Tietyt säännöt koskevat ensimmäistä kappaletta tiettyjen elementtien tai vaakaviivojen jälkeen eri sisältöalueilla (artikkelin runko, interaktiivinen sisältö, kommentit, erikoissisällöt), lisäten 14 pikselin ylätäyden. Lisäksi näiden kappaleiden ensimmäinen kirjain muotoillaan suureksi, lihavoiduksi, isoilla kirjaimiksi tietyllä fonttityypillä, värillään muuttujan mukaan, ja kelluu vasemmalle marginaalin kanssa.
Vaakaviivoja seuraavilla kappaleilla näissä osioissa ei ole ylätäyttöä.
Tietyissä sisältöalueissa olevat lainaukset rajoitetaan enimmäisleveyteen 620 pikseliä.
Eri artikkelisäiliöiden esittelyelementeissä kuvatekstit sijoitetaan staattisesti täysillä leveys 620 pikseliin saakka.
Immersiiviset elementit ulottuvat koko näkymän leveyteen miinus vierityspalkin leveys. Näytöillä, joiden leveys on enintään 71.24em, nämä elementit rajoitetaan 978px leveyteen kuvatekstien täytön ollessa 10px. Välillä 30em - 71.24em kuvatekstien täyttö kasvaa 20px:ään. Näytöillä välillä 46.25em - 61.24em enimmäisleveys on 738px. Alle 46.24em immersiiviset elementit kohdistuvat vasempaan reunaan säädetyin marginaalein ja ylläpitävät 20px kuvatekstitäyttöä välillä 30em - 46.24em.
Huonekalupakkaus käyttää responsiivista ruudukkoasettelua näytöillä, joiden koko on 61.25em ja suurempi, organisoiden otsikon, pääotsikon, metatiedot, johdantotekstin ja profiiliosion. Pääotsikoissa on yläreunus, metaosioissa on ylätäyttö, ja johdantoteksti sisältää erityisiä tyylejä luetteloille ja linkeille mukautetuilla alleviivauksilla, jotka vaihtavat väriä kursorin ollessa päällä. Johdantoteksti
