Ez a CSS kód definiálja a "Guardian Headline Full" betűtípus-családot különböző vastagságokkal és stílusokkal, beleértve a light, regular, medium és semibold változatokat, mindegyiket normál és dőlt verzióban. Meghatározza a betűfájlokat WOFF2, WOFF és TrueType formátumokban, amelyek a Guardian szerverein találhatók.
Ez a CSS kód több betűtípus-családot definiál a Guardian Headline és Guardian Titlepiece betűtípusokhoz, megadva forrásaikat különböző formátumokban (WOFF2, WOFF, TTF) a betűtípus-vastagságaikkal és stílusaikkal együtt. Tartalmaz reszponzív tervezési 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 a elemeket teljes szélességűre teszi és középre igazítja. A stílusok biztosítják a megfelelő formázást különböző eszközökön, maximális szélességekkel különböző tartalomtípusokhoz, mint atomok, vitrinbeállítások és immerzív elemek.
Az interaktív tartalom oszlopokhoz bal oldali szegély kerül az elem elé, 11 képpxellel balra pozicionálva. Ezeken belül az atomoknak (elemeknek) nincs sem felső, sem alsó margójuk, de 12 képpxeles térköz van felül és alul. Amikor egy bekezdés követ egy atomot, a térköz eltávolításra kerül, és helyette 12 képpxeles margók kerülnek alkalmazásra. Inline elemek maximális szélessége 620 képpxel, és szélesebb képernyőkön (61.25em felett) a specifikus szerepkörű inline ábrák is betartják ezt a szélességkorlátot.
Színváltozók vannak definiálva különböző elemekhez, mint dátumvonalak, fejlécek, feliratok és funkciók, az alapértelmezett funkció szín pirosra állítva. Az atomoknak a fő oszlopban és máshol nincs térközük.
Specifikus szabályok vonatkoznak a bizonyos elemek vagy vízszintes vonalak utáni első bekezdésekre különböző tartalomterületeken (cikktest, interaktív tartalom, hozzászólások, funkciók), 14 képpxeles felső térközzel. Ezenkívül e bekezdések első betűje egy nagy, félkövér, nagybetűs betűtípussal van stílusozva egy specifikus betűtípuscsaládban, egy változó szerinti színnel, és balra lebegtetve margóval.
A vízszintes vonalak, amelyeket bekezdések követnek ezekben a szakaszokban, nem kapnak felső térközt.
A specifikus tartalomterületeken belüli idézetek maximális szélessége 620 képpxel.
A különböző cikk tárolókban lévő vitrinelemeknél a feliratok statikusan pozicionálva vannak teljes szélességgel, maximum 620 képpxelig.
Az immerzív elemek a teljes nézeti szélességet lefedik mínusz a görgetősáv szélessége. 71.24em szélességig ezek az elemek 978px szélességre korlátozódnak 10px felirattérközzel. 30em és 71.24em között a felirattérköz 20px-re nő. 46.25em és 61.24em között a maximális szélesség 738px lesz. 46.24em alatt az immerzív elemek a bal széléhez igazodnak, módosított margókkal, és 20px felirattérközt tartanak fenn 30em és 46.24em között.
A furniture wrapper reszponzív rács elrendezést használ 61.25em és annál szélesebb képernyőkön, szervezve a címet, címsort, meta információkat, bevezetőt és portré szakaszokat. A címsorok felső szegéllyel rendelkeznek, a meta szakaszoknak felső térközük van, és a bevezető szöveg specifikus stílusozást tartalmaz listákra és linkekre egyedi aláhúzásokkal, amelyek színt váltanak rámutatáskor. A bevezető első bekezdése nagyobb képernyőkön felső szegéllyel rendelkezik, de azt eltávolítja 71.25em felett.
A furniture wrapperen belüli ábráknak balra igazított margóik vannak, és az inline elemek maximális szélessége 630px. 71.25em felett a rács elrendezés módosul, hogy több oszlopot tudjon befogadni a portré tartalomhoz.
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 van és automatikusan igazodó sorai, 80px rögzített magassággal a cím és portré területeknél. Vékony vonal jelenik meg a meta szakasz felett, és a bevezető szakasznak függőleges vonala van a bal oldalán.
Nagyobb képernyőkön a rács több oszlopra és sorra bővül tört egységekkel a rugalmasság érdekében. A meta szakasz felső vonala szélesebb lesz, és a bevezető függőleges vonala enyhén elmozdul. A címsorok maximális szélességgel és betűmérettel rendelkeznek, amelyek nagyobb képernyőkön nőnek, míg bizonyos elemek, mint vonalak, elrejtve vannak vagy módosulnak margóikban különböző töréspontokon.
A meta szakaszban lévő közösségi és hozzászólás elemek ugyanazzal a szegély színnel rendelkeznek, és néhány komponens nem jelenik meg. A bevezető szöveg specifikus stílusozással rendelkezik csökkentett bal margóval és térközzel, és betűtulajdonságokkal. A fő média elemek relatívan pozicionálva vannak, teljes szélességgel és módosított margókkal különböző eszközökön, és a feliratok abszolút pozícióban vannak alul egyedi háttér- és szövegszínekkel.
Ez a CSS kód stílusokat definiál 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 módosítja a margókat, térközöket és pozicionálást nagyobb képernyőkön, és tartalmaz szabályokat elemek, mint feliratok és gombok elrejtésére vagy megjelenítésére. A címsorok és meta információk specifikus betűtípusokkal és színekkel vannak stílusozva, és a közösségi média gombok rámutatási hatással rendelkeznek, amelyek megváltoztatják a megjelenésüket. Média lekérdezések biztosítják, hogy a design különböző eszközökhöz igazodjon.
Ez a CSS kód stílusokat definiál egy weboldal furniture-wrapper osztályához, olyan elemekre összpontosítva, mint a meta információk és bevezető szakaszok. A szövegszínt világos szürkére (#dcdcdc) állítja, és a link színeket egy változó alapú árnyalatra, rámutatási hatásokkal, amelyek megváltoztatják a szöveg díszítés színét. A bevezető területekben lévő linkek aláhúzásokkal rendelkeznek specifikus eltolásokkal és nincsenek szegélyeik, míg a bekezdések és listaelemek szintén a világos szürke színt veszik fel.
Nagyobb képernyőkön (min-width: 61.25em) a bevezető első bekezdése felső szegélyt kap, amelyet még nagyobb képernyőkön (71.25em) eltávolítanak. A kód dekoratív oldalsávokat is létrehoz pszeudo-elemekkel (:before és :after), amelyek szélességüket a nézeti méret alapján igazítják, sötét hátterekkel és szegélyes élekkel. Ezenkívül stílusozza az SVG elemeket vonalszínekkel és a meta szakaszokon belüli közösségi média vagy hozzászólás ikonokat.
A hozzászólás szakasznak olyan szegélyszíne van, amely megegyezik a fejléc szegély színével.
A cikkekben, a főtesten belüli második szintű címsoroknak (h2) 200-as világos betűvastagságuk van. Azonban, ha egy h2 erős elemet tartalmaz, akkor 700-as félkövér betűvastagságot használ.
A Guardian Headline Full betűtípus-család különböző stílusokat és vastagságokat tartalmaz, mindegyik specifikus fájlforrással WOFF2, WOFF és TrueType formátumokban:
- Light (300-as vastagság, normál stílus)
- Light Italic (300-as vastagság, dőlt stílus)
- Regular (400-as vastagság, normál stílus)
- Regular Italic (400-as vastagság, dőlt stílus)
- Medium (500-as vastagság, normál stílus)
- Medium Italic (500-as vastagság, dőlt stílus)
- Semibold (600-as vastagság, normál stílus)
- Semibold Italic (600-as vastagság, dőlt stílus)
Ez a CSS kód több betűtípus-formátumot definiál a "Guardian Headline Full" betűtípus-családhoz különböző vastagságokkal és stílusokkal (normál és dőlt), a semibold (600) és a black (900) között. Minden betűtípus-formátum forrásfájlokat határoz meg WOFF2, WOFF és TrueType formátumokban a Guardian erőforrás szervereiről.
Definiálja a "Guardian Titlepiece" betűtípust is egy félkövér vastagsággal (700) és normál stílussal, hasonló fájlformátumokat használva egy másik aldomainről.
A kód tartalmaz CSS egyéni tulajdonságokat (változókat) színsémákhoz, különösen sötét módhoz iOS és Android eszközökön. Beállít egy sötét háttérszínt, funkció színeket világos és sötét módhoz, és média lekérdezéseket használ a pillér szín beállításához a felhasználó preferált színsémája alapján.
Ezenkívül vannak specifikus stílusozási szabályok a bekezdések első betűjére iOS és Android eszközökön lévő cikk tárolókban, amelyek akkor alkalmazódnak, amikor bizonyos elemeket követnek, mint atomok, bejelentkezési kapuk vagy specifikus kapu elemek.
Android eszközökön a standard é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 Android-on a cikk fejlécek el vannak rejtve, és a furniture wrappereknek specifikus térközük van. A wrapperen belüli címkék félkövér, nagybetűs betűtípust használnak egy címsor stílusban 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 pozicionálva vannak, a nézeti szélességet fedik le mínusz a görgetősáv, és automatikusan igazítják magasságukat.
Android eszközökön a cikk tárolókban 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 automatikusan igazítják magasságukat.
Mind iOS-en, mind Android-on a cikkekben lévő bevezető szakasznak 4px felső és 24px alsó térköze van, -10px jobb margó eltolással. A belül lévő szöveg a Guardian Headline betűtípus-családot vagy tartalék serif betűtípusokat használ.
A bevezetőn belüli linkek mindkét platformon egy specifikus színnel vannak stílusozva, aláhúzva 6px eltolással, és egy kijelölt színt használnak az aláhúzáshoz, amely rámutatáskor változik. A háttérkép és az alsó szegély eltávolításra kerül.
Ezenkívül a cikkekben lévő meta szakasz konzisztensen van stílusozva iOS-en és Android-on funkció, standard és hozzászólás tárolókhoz.
Android eszközökön távolítsa el a margókat a meta elemekből standard és hozzászólás cikk tárolókban.
iOS eszközökön állítsa a szerző és szerzői elemek színét az új pillér színre funkció, standard és hozzászólás cikk tárolókban. Távolítsa el a térközt a meta egyéb elemekből és állítsa a bennük lévő SVG ikonok vonalát az új pillér színre. Ezenkívül stílusozza a vitrinelemekben lévő felirat gombot specifikus megjelenéssel, térközzel, igazítással és méretekkel.
Mind iOS-en, mind Android-on állítsa a cikktest térközét 0-ra oldalanként és 12px-re felül és alul funkció, standard és hozzászólás cikk tárolókban.
iOS és Android eszközökön, funkció, standard és hozzászólás cikk tárolókban, a nem bélyegkép és nem immerzív képek a cikktesten belül nem kapnak margót, szélességük a teljes nézeti szélesség mínusz 24 képpxel és a görgetősáv szélessége, magasságuk automatikus. Felirataiknak nincs térközük.
Ezekben a tárolókban az immerzív képek a teljes nézeti szélességet fedik le mínusz a görgetősáv szélessége.
A cikktesten belüli idézett blok idézetek egy színes jelzőt j
