Ez a CSS kód definiálja a "Guardian Headline Full" betűtípiscsaládot több stílussal és vastagsággal. Tartalmazza a light (300), regular (400), medium (500) és semibold (600) változatokat, mindegyiket normál és dőlt stílusban. Minden stílushoz biztosít betűfájlokat WOFF2, WOFF és TrueType formátumban a Guardian szerveréről.
Ez a CSS kód több betűtípiscsaládot határoz meg a Guardian Headline és Guardian Titlepiece betűtípusokhoz, megadva forrásaikat különböző formátumokban (WOFF2, WOFF és TrueType) a betűtípus-vastagságaikkal és stílusaikkal együtt. Tartalmaz reszponzív design szabályokat is az interaktív elrendezések fő tartalom oszlopához, igazítva a margókat, szélességeket és pozicionálást 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 kód biztosítja, hogy a bekezdések és listák maximális szélességet tartsanak az olvashatóság érdekében, valamint kezeli az immerzív elemeket azáltal, hogy teljes szélességűre teszi őket mobileszközökön és igazítja elrendezésüket nagyobb képernyőkön.
Az interaktív tartalom oszlopokhoz világosszürke színű bal szegélyt adnak, amely kissé balra pozícionált. Az ezen oszlopokon belüli elemeknek nincs felső vagy alsó margójuk, de 12px térközük van. Amikor egy bekezdés egy elemet követ, a térköz eltávolításra kerül és a margók 12px-re állnak. Az inline elemek maximális szélessége 620px, és szélesebb képernyőkön az adott szerepkörű ábrák is betartják ezt a szélességkorlátot.
Színváltozók vannak definiálva különböző szöveg- és háttérelemekhez, beleértve a dátumvonalat, fejléc szegélyeket, feliratokat és feature színeket, az alapértelmezett feature szín pirosra állítva.
Az atomként stílusos elemeknek nincs térközük. Speciális szabályok vonatkoznak a bizonyos elemeket vagy vízszintes vonalakat követő első bekezdésekre különböző tartományokban, 14px felső térközzel. Ezenkívül ezen bekezdések első betűje nagy, félkövér, nagybetűs, címsor stílusú, a definiált feature színnel színezett, balra lebegtetve margóval.
A különböző tartalmi szakaszokban lévő bekezdéseket követő vízszintes vonalaknak nincs felső térközük.
A specifikus tartalmi területeken belüli pullquote-ok maximális szélessége 620 pixel.
A különböző cikk konténerekben lévő showcase elemekhez a feliratok statikusan pozícionáltak, teljes szélességűek és 620 pixel maximális szélességgel.
Az immerzív elemek a teljes nézeti szélességet lefedik mínusz a görgetősáv. 71.24em szélességű képernyőkig ezek az elemek 978 pixelre korlátozódnak, 10 pixel felirat térközzel. 30em és 71.24em között a felirat térköz 20 pixelre nő. 46.25em és 61.24em közötti képernyőkre a maximális szélesség 738 pixel. 46.24em alatt az immerzív elemek balra igazodnak, módosított margókkal és 20 pixel felirat térközzel 30em és 46.24em között.
A furniture wrapper grid elrendezést használ 61.25em és annál szélesebb képernyőkön, meghatározott oszlopokkal és sorokkal a tartalom szervezéséhez. A címsorok felső szegéllyel rendelkeznek, a meta szakaszoknak felső térközük van, a standfirst elemek pedig stílusos linkeket tartalmaznak aláhúzással, amelyek színe hover állapotban változik. Kezdetben a standfirst első bekezdésének felső szegélye van és nincs alsó térköze, amely eltávolításra kerül 71.25em és afölötti képernyőkön.
A furniture wrapperen belüli ábráknak bal margójuk van és az inline elemek maximális szélessége 630 pixel. Nagyobb képernyőkön (71.25em és afölött) a grid oszlopai újrakonfigurálódnak a különböző tartalom elhelyezéséhez.
Az elrendezés grid-et használ specifikus oszlopokkal és sorokkal különböző képernyőméretekhez. Kisebb képernyőkön a grid területeket határoz meg a cím, címsor, standfirst, meta információ és portré számára, a sorok fix és automatikus magasságra állítva. Vékony vonal jelenik meg a meta szakasz felett, és a standfirstnak függőleges vonala van a bal oldalán.
Nagyobb képernyőkön a grid tört egységeket használ a sorokhoz és kiterjeszti az oszlopok átfogását. A címsor betűmérete nő és maximális szélessége változik, míg néhány elem, mint a vonalak elrejtésre kerül. A standfirst szövege specifikus betűvastagsággal és mérettel van stílusosítva, és a fő média terület a grid-en belül pozícionált, módosított szélességgel és margókkal kisebb eszközökön. A feliratok abszolút pozícionáltak alul, háttérszínnel és térközzel.
A CSS kód stílusokat határoz meg egy furniture wrapper komponenshez, beleértve annak elrendezését, színeit és reszponzív viselkedését különböző képernyőméretek között. Háttérszíneket, szövegszíneket és szegélystílusokat állít be CSS egyéni tulajdonságokkal olyan témákhoz, mint a sötét mód. A wrapper igazítja a margókat, térközöket és pozicionálást nagyobb képernyőkön, és tartalmaz rejtett elemeket és interaktív gombokat hover hatásokkal a közösségi megosztáshoz. A címsorok és meta információk specifikus betűtípusokkal és színekkel vannak stílusosítva, biztosítva a design konzisztenciáját.
Ez a CSS kód stílusokat határoz meg a "furniture-wrapper" osztályon belüli elemekhez, a meta információkra és standfirst szakaszokra összpontosítva. A szövegszínt világosszürkére (#dcdcdc) állítja és a link színeket egy változó alapú árnyalatra, hover hatásokkal, amelyek megváltoztatják a szöveg dekoráció színét. A standfirstban lévő linkek aláhúzottak specifikus eltolással és színnel, és a hover állapotok ennek megfelelően igazítják az aláhúzás színét.
Nagyobb képernyőkön (min-width: 61.25em) a standfirst első bekezdése felső szegélyt kap, amely eltávolításra kerül még nagyobb képernyőkön (min-width: 71.25em). A standfirst listaelemei szintén átveszik a világosszürke szövegszínt.
A kód tartalmaz reszponzív design elemeket media query-k használatával különböző képernyőszélességekhez (46.25em, 61.25em, 71.25em és 81.25em). Ezek igazítják a pszeudo-elemek (:before és :after) szélességét és pozicionálását, hogy háttérterületeket hozzanak létre szegélyekkel, kiszámítva a méreteket a nézeti szélesség és görgetősáv beállítások alapján.
Ezenkívül stílusosítja az SVG elemeket a keyline-okon belül és a közösségi média vagy komment elemeket a meta szakaszban, beállítva stroke és szövegszínüket, hogy illeszkedjenek a témához CSS változók használatával.
A komment szakasznak olyan szegélyszíne van, amely megegyezik a fejléc szegélyszínével. A cikkekben a második szintű címsorok 200-as világos betűvastagsággal rendelkeznek, de ha tartalmaznak strong elemet, akkor 700-as félkövér vastagságot használnak.
Ezenkívül a Guardian Headline Full betűtípiscsalád különböző stílusokkal és vastagságokkal van definiálva, beleértve a light, regular, medium és semibold változatokat, mindegyiket normál és dőlt verziókban. Ezek a betűtípusok specifikus URL-ekről származnak WOFF2, WOFF és TrueType formátumban.
Ez a CSS kód több @font-face szabályt határoz meg a "Guardian Headline Full" betűtípiscsaládhoz, mindegyik különböző vastagsággal és stílussal (normál és dőlt), a semibold (600)-tól a black (900)-ig. Tartalmaz egy @font-face szabályt a "Guardian Titlepiece" betűtípushoz félkövér vastagságban. A betűtípusok specifikus URL-ekről származnak WOFF2, WOFF és TrueType formátumban.
Ezenkívül a kód beállít CSS egyéni tulajdonságokat (változókat) a sötét mód háttérszíneihez és feature színekhez, igazítva őket a felhasználó színséma preferenciája vagy az iOS/Android eszközökön való megjelenés alapján. Tartalmaz stílusosítást is a cikk konténerekben lévő bekezdések első betűjéhez ezen mobil platformokon, specifikus szelektorokkal a belépési kapuk kezelésére.
Android eszközökön a standard és komment cikkek első bekezdésének első betűje egy másodlagos pillér színnel van stílusosítva. Mind iOS-en, mind Android-on a cikk fejlécek elrejtettek, és a furniture wrappereknek specifikus térközük van. Az ezen wrapperekben lévő címkék félkövér, nagybetűs, címsor stílusú betűtípust használnak egy új pillér színnel. A címsorok 32px-re, félkövérek, alsó térközzel és sötét színnel vannak beállítva. A furniture wrapperben lévő képek relatívan pozícionáltak, a nézeti szélességet fedik le mínusz a görgetősáv, és magasságuk automatikusan igazodik.
Android eszközökön a cikk konténerekben lévő képek átlátszó háttérrel rendelkeznek, a teljes nézeti szélességet fedik le mínusz a görgetősáv, és magasságuk automatikusan igazodik.
Mind iOS-en, mind Android-on a cikk összefoglaló szakaszoknak 4px felső és 24px alsó térközük van, -10px jobb margó eltolással.
Ezen összefoglalók szövege a Guardian Headline betűtípiscsaládot vagy hasonló serif betűtípusokat használ.
Az összefoglalókon belüli linkek specifikus színnel vannak stílusosítva, 6px eltolással aláhúzva, és egy megadott színt használnak az aláhúzáshoz, amely hover állapotban a link színére változik.
Ezenkívül a metaadatok szakaszai a cikkekben mindkét operációs rendszeren konzisztens stílusosítással rendelkeznek.
Android eszközökön a standard és komment cikk konténerekben lévő meta elemek margója nulla.
iOS eszközökön a feature, standard és komment cikk konténerekben lévő szerzői és szerzői információk a kijelölt pillér színben jelennek meg. Hasonlóképpen, Android eszközökön ugyanezen elemek a feature, standard és komment cikk konténerekben szintén a pillér színt használják.
Mind iOS-en, mind Android-on a feature, standard és komment cikk konténerekben lévő egyéb meta információknak nincs térközük, és bármely bennük lévő SVG ikon stroke-ja a pillér színnel van stílusosítva.
A feature, standard és komment cikkekben lévő showcase elemek felirat gombja mind iOS-en, mind Android-on flex konténerként jelenik meg. Középre igazított, 28x28 pixel méretű, 14 pixelre jobbra pozícionált és 5 pixel térközzel rendelkezik.
A feature, standard és komment konténerek cikk törzse iOS-en és Android-on 12 pixel vízszintes térközzel és nulla függőleges térközzel rendelkezik.
iOS és Android eszközökön, feature, standard és komment cikk konténerekben, a cikk törzsében lévő nem bélyegkép és nem immerzív képeknek nincs margójuk, szélességük a teljes nézeti szélesség mínusz 24 pixel és a görgetősáv szélesség alapján számított, és magasságuk automatikus. Felirataiknak nincs térközük.
Ezen konténerekben lévő immerzív képek a teljes nézeti szélességet fedik le mínusz a görgetősáv szélesség.
A cikk törzsében lévő prózaban idézett blockquote-ok színes jelzővel jelennek meg az új pillér szín használatával. A linkek az elsődleges pillér színnel vannak stílusosítva, eltolással aláhúzva, és a fejléc szegély színét használják az aláhúzáshoz. Hover állapotban az aláhúzás színe az új pillér színre változik.
Sötét módban a furniture wrapper háttérszíne sötétszürkére (#1a1a1a) van állítva.
iOS és Android eszközökön alkalmazza a következő stílusokat a feature, standard és komment cikk konténerekhez:
- Állítsa a tartalom címkéit az új pillér szín használatára.
- Távolítsa el a háttérszínt a címsorokból és állítsa szövegszínüket a fejléc szegély színére, biztosítva ennek prioritását.
- Tegye, hogy a standfirst bekezdések és linkek átvegyék a fejléc szegély színét.
- Használja az új pillér színt a szerzők
