Ez a szöveg egy "Guardian Headline Full" nevű egyéni betűkészlet-családot határoz meg, amely több betűvastagsággal és stílussal rendelkezik. Meghatározza a betűfájlokat különböző formátumokban (WOFF2, WOFF és TrueType) és azok online helyét, hogy a böngésző betölthesse őket szükség esetén. A definíciók közé tartozik a könnyű, normál, közepes és félig félkövér vastagság, mindegyik normál és dőlt stílusban.
Ez a CSS kód több betűkészlet-családot határoz meg a Guardian Headline és a Guardian Titlepiece betűtípusokhoz, megadva forrásaikat különböző formátumokban (WOFF2, WOFF és TrueType) a betűvastagságaikkal és stílusaikkal együtt. Emellett tartalmaz reszponzív tervezési szabályokat az interaktív elrendezések fő tartalom oszlopához, igazítva a margókat, szélességeket és pozíciókat a nézeti méret alapján. Például szélesebb képernyőkön bal margót és szegélyt ad hozzá, míg kisebb képernyőkön igazítja az elemek szélességét és pozícióját, hogy illeszkedjenek a kijelzőhöz. A stílusok biztosítják, hogy a bekezdések, listák és immerzív tartalmak megfelelően alkalmazkodjanak az eszközökhöz.
A fő interaktív tartalom oszlopához bal oldali szegélyt adnak az elem elé, 11 képpxellel balra pozicionálva. Ezen oszlopon belül az atomoknak nincs felső vagy alsó margójuk, de 12 képpxeles kitöltésük van mindkét végén. Ha egy bekezdés atomot követ, a kitöltést eltávolítják, és helyette 12 képpxeles margót alkalmaznak. A soron belüli elemek maximális szélessége 620 képpxel, és 61,25 em-nél szélesebb képernyőkön a meghatározott szerepkörű soron belüli ábrák is betartják ezt a szélességhatárt.
Színváltozók vannak meghatározva különböző elemekhez, mint a dátumvonal, fejléc szegély, képfelirat szöveg és háttér, a jellegzetes szín pirosra van állítva, és az új pillér szín alapértelmezetten a jellegzetes szín. A fő oszlopban vagy máshol lévő atomoknak nincs kitöltésük.
Az olyan specifikus elemeket követő első bekezdésekhez, mint atomok, bejelentkezési kapuk vagy vízszintes vonalak különböző tartalmi területeken (cikktest, interaktív tartalom, hozzászólások, funkciók), 14 képpxeles felső kitöltést adnak hozzá. Ezenkívül e bekezdések első betűje egy specifikus betűkészlet-családdal, félkövér vastagsággal, nagy betűmérettel, nagybetűs szöveggel, balra lebegtetve van stílusozva, és egy változó színnel a inicialékhoz vagy az új pillér színével.
Ha egy bekezdés vízszintes vonalat követ ezekben a tartalmi területeken, a felső kitöltés nullára van állítva. A kiemelt idézeteknek specifikus tartalmi területeken nem szabad meghaladniuk a 620 képpxeles szélességet.
A főcikkek, funkciók, szabványos cikkek és hozzászólások kiemelő elemeinél a képfeliratoknak a normál pozíciójukban kell maradniuk, teljes szélességet kell átfogniuk, és 620 képpxeles korláttal rendelkezniük.
Az immerzív elemeknek a teljes nézeti szélességet kell átfogniuk, figyelembe véve a görgetősávokat. 71,24 em-nél kisebb képernyőkön ezek az elemek maximum 978 képpxeles szélességűek, 10 képpxeles oldali kitöltéssel a képfeliratoknál. 30 em és 71,24 em között a képfelirat kitöltés 20 képpxelre nő.
46,25 em és 61,24 em között az immerzív elemek maximum 738 képpxelesek. 46,24 em alatt a bal széléhez igazodnak, jobb margó nélkül és 10 képpxeles bal behúzással, ami 20 képpxelre nő 30 em és 46,24 em között, ahol a képfeliratok is 20 képpxeles kitöltést kapnak.
Nagyobb képernyőkön (61,25 em és afölött) a bútor burkoló rácsos elrendezést használ meghatározott oszlopokkal és sorokkal. A címsorok felső szegélyt kapnak, a meta információk relatívan pozicionálva vannak felső kitöltéssel, és a bevezető szöveg specifikus stílusú: listaelemek 20 képpxeles betűmérettel, aláhúzott linkek szegély vagy háttér nélkül, színváltozással rámutatáskor, és első bekezdések felső szegéllyel, kivéve nagyon nagy képernyőkön (71,25 em+).
A burkolón belüli ábráknak nincs alsó margójuk és 10 képpxeles bal behúzásuk, a soron belüli elemek maximum 630 képpxelesek. A legnagyobb képernyőkön a rács igazítja oszlopstruktúráját. Az elrendezés egy rácsot használ specifikus oszlopokkal és sorokkal különböző képernyőméretekhez. Kisebb képernyőkön a rácsnak három oszlopa és sora van fix és automatikus magasságokkal, míg nagyobb képernyőkön arányosan igazítják a sorok magasságát.
Az olyan elemek, mint a meta szekció, felső szegélyvonalat kapnak, és a bevezető szekció bal oldali függőleges vonallal rendelkezik. A címsorok maximum szélességgel és nagyobb képernyőkön növekvő betűmérettel vannak stílusozva, és néhány elem elrejtve vagy margóban és kitöltésben igazítva a nézeti méret alapján.
A fő média terület a rácsban pozicionálva van és mobileszközökön teljes szélességet ölel fel, a képfeliratok alul megjelenő háttérszínnel stílusozva. A meta szekcióban lévő közösségi és hozzászólás elemek a fejléc színével megegyező szegéllyel rendelkeznek, és bizonyos komponensek nem jelennek meg. A bútor burkoló sötét háttérszínt állít be, és igazítja a margókat és kitöltéseket különböző képernyőméretekhez. Nagyobb képernyőkön oldalsávokat ad hozzá egyező háttérekkel és szegélyekkel.
A címsorok félkövér, világosszürke szöveget használnak, míg a cikkcímek és közösségi gombok egyéni színt vesznek fel (mint sötét mód jellegzetes színe). A közösségi gombok szegéllyel rendelkeznek és színváltozással rámutatáskor, a háttér és ikon színek cserélődve. A képfeliratok specifikus színekkel és láthatósági vezérlőkkel vannak stílusozva, beleértve egy kapcsológombot, amely kis körként jelenik meg jobb alul. Média lekérdezések igazítják a kitöltést és elempozíciót táblagépekhez és asztali számítógépekhez, biztosítva a megfelelő térközöket és igazítást az eszközökön. Ez a CSS kód stílusozza a bútor-burkoló osztályon belüli elemeket, beállítva színeket, szegélyeket és elrendezést különböző képernyőméretekhez. Meghatározza a link színeket és rámutatási hatásokat CSS változók használatával a meta és bevezető szekciókhoz, szövegdekorációval és eltolással. Média lekérdezések igazítják az elrendezést különböző nézeti szélességekhez, létrehozva oldalsávokat szegélyekkel és háttérszínekkel, amelyek ennek megfelelően skálázódnak. A meta szekcióban lévő közösségi és hozzászólás elemek is stílusozva vannak, SVG vonalaik egyezve a fejléc szegély színével. A hozzászólás szekció szegély színe egyezik a fejléc szegély színével.
A cikk címsoraihoz (h2) a fő testben vagy interaktív tartalomban a betűvastagság világosra (200) van állítva. Ha azonban egy h2 címsor erős elemet tartalmaz, félkövér betűvastagságot (700) használ.
Ezenkívül a Guardian Headline Full betűkészlet-család különböző vastagságokkal és stílusokkal van definiálva, beleértve a világos, normál, közepes és félig félkövér súlyokat, mind normál, mind dőlt formában. Minden betűfájl specifikus URL-ekről származik WOFF2, WOFF és TrueType formátumokban. Ez a CSS kód több betűkészlet-családot és variációjukat határozza meg a Guardian weboldalhoz. Meghatározza különböző betűvastagságokat és stílusokat (mint félkövér, dőlt) a "Guardian Headline Full" betűtípushoz, több fájlformátumot (WOFF2, WOFF, TTF) biztosítva a böngészőkompatibilitás érdekében. Ezenkívül tartalmazza a "Guardian Titlepiece" betűtípust félkövér vastagságban.
A kód CSS egyéni tulajdonságokat (változókat) is beállít a színekhez, igazítva őket sötét mód preferenciákhoz iOS és Android eszközökön. Tartalmaz specifikus stílusozást a cikk konténerekben lévő bekezdések első betűjéhez ezen mobil platformokon, biztosítva az egységes tipográfiai kezelést különböző kontextusokban. Android eszközökön a szabványos és hozzászólás cikkek első bekezdésének első betűje egy másodlagos pillér színnel van stílusozva. Mind iOS-en, mind Androidon a cikk fejlécek elrejtve vannak, és a bútor burkolók specifikus kitöltéssel rendelkeznek. A burkolókon belüli címkék félkövér, nagybetűs betűtípust használnak címsor stílusban egy új pillér színnel. A címsorok 32 képpxelesek, félkövérek, alsó kitöltéssel és sötét színnel. A bútor burkolókban lévő képek relatívan pozicionálva vannak, kiterjednek a nézeti szélesség mínusz görgetősáv szélességre, és automatikus magassággal rendelkeznek, a belső elemek és linkek ennek megfelelően stílusozva. Android eszközökön a cikk konténerekben lévő képek átlátszó háttérrel rendelkeznek, átfogják a teljes nézeti szélességet mínusz a görgetősáv, és magasságuk automatikusan igazodik.
Mind iOS-en, mind Androidon a cikkek bevezető szekciójának felső és alsó kitöltése 4px, illetve 24px, jobb margó eltolással -10px. A belül lévő szöveg a Guardian Headline betűkészlet-családot vagy tartalék talpas betűtípusokat használ. A bevezetőn belüli linkek mindkét platformon specifikus színnel vannak stílusozva, aláhúzva 6px eltolással, és világosszürke aláhúzást használnak, amely a pillér színére változik rámutatáskor. Nincs háttérképük vagy szegélyük.
Ezenkívül a cikk konténerek meta szekciója mind iOS, mind Android eszközökre vonatkozik. Android eszközökön távolítsuk el a margókat a meta elemekből a szabványos és hozzászólás cikk konténerekben. iOS eszközökön állítsuk a szerző és szerzői elemek színét a funkció, szabványos és hozzászólás cikk konténerekben az új pillér színére. Távolítsuk el a kitöltést a meta egyéb elemektől, és állítsuk SVG ikonjaik vonalát az új pillér színére. Ezenkívül stílusozzuk a kiemelő elemek képfelirat gombját specifikus megjelenéssel, kitöltéssel, igazítással és méretekkel.
Mind iOS, mind Android eszközökre állítsuk a cikk test oldali kitöltését 0-ra, felső és alsó kitöltését 12px-re a funkció, szabványos és hozzászólás cikk konténerekben. iOS és Android eszközökön a funkció, szabványos és hozzászólás cikk konténerekben a miniatűrök vagy immerzív képek nem lesznek, amelyek nem miniatűrök vagy immerzívek, margó nélkül, teljes nézeti szélesség mínusz 24 képpxel és a görgetősáv szélességűek, automatikus magassággal. Képfelirataiknak nincs kitöltésük. Az immerzív képek ezekben a konténerekben a teljes nézeti szélességet mínusz a görgetősáv szélességet ölelik fel. A cikk testében idézett blokkok egy színes jelölőt jelenítenek meg az új pillér színével. A cikk testében lévő linkek az elsődleges pillér színével vannak stílusozva, aláhúzva eltolással, és a fejléc szegély színét használják az aláhúzáshoz. Rámutatáskor az aláhúzás színe az új pillér színére változik. Sötét módban a bútor burkoló háttérszíne sötétszürkére (#1a1a1a) van állítva. iOS és Android eszközökre alkalmazza a következő stílusokat a funkció, szabványos és hozzászólás cikk konténerekhez: Állítsa a tartalom
