Ez a CSS kĂłd egy "Guardian Headline Full" nevű egyĂ©ni betűkĂ©szlet-családot definiál több betűvastagsággal Ă©s stĂlussal. Meghatározza a betűfájlokat kĂĽlönbözĹ‘ formátumokban (WOFF2, WOFF Ă©s TrueType) Ă©s azok helyĂ©t a szerveren. A betűvastagságok a világos (300) Ă©s a fĂ©lig fĂ©lkövĂ©r (600) között mozognak, mindegyik elĂ©rhetĹ‘ normál Ă©s dĹ‘lt stĂlusban is.
Ez a CSS kĂłd több betűkĂ©szlet-családot definiál a Guardian Headline Ă©s 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. Tartalmaz reszponzĂv tervezĂ©si szabályokat is a fĹ‘ tartalom oszlopához, igazĂtva a margĂłkat Ă©s szĂ©lessĂ©geket kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez, hogy biztosĂtsa a megfelelĹ‘ elrendezĂ©st kĂĽlönbözĹ‘ eszközökön.
Ăšgy tűnik, ez CSS kĂłd egy weboldal elrendezĂ©sĂ©nek Ă©s tipográfiájának stĂlusozásához. Meghatároz stĂlusokat interaktĂv tartalom oszlopokhoz, beleĂ©rtve a szegĂ©lyeket, tĂ©rközöket, szĂneket Ă©s speciális formázásokat a cikkekben lĂ©vĹ‘ inicialĂ©khoz. A kĂłd konkrĂ©t szabályokat állĂt be kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez Ă©s tartalomtĂpusokhoz, biztosĂtva az egysĂ©ges megjelenĂ©st a webhely kĂĽlönbözĹ‘ rĂ©szein, mint a cikkek, hozzászĂłlások Ă©s kiemelt tartalmak.
Az olyan konkrĂ©t elemeknĂ©l, mint a cikkekben, hozzászĂłlásokban Ă©s kiemelt tartalmakban lĂ©vĹ‘ vĂzszintes vonalak utáni bekezdĂ©sek, távolĂtsuk el a felsĹ‘ tĂ©rközĂ©st.
A cikkek törzsĂ©ben, interaktĂv tartalmakban, hozzászĂłlásokban Ă©s kiemelt tartalmakban lĂ©vĹ‘ idĂ©zetek szĂ©lessĂ©gĂ©t korlátozzuk 620 kĂ©ppontra.
A fĹ‘ tartalomban Ă©s cikk tárolĂłkban biztosĂtsuk, hogy a vitrint elemek kĂ©paláĂrásai normálisan pozĂcionálva legyenek, a teljes szĂ©lessĂ©get lefedjĂ©k Ă©s ne haladják meg a 620 kĂ©ppont szĂ©lessĂ©get.
A merĂĽlĹ‘ elemeket a teljes nĂ©zeti szĂ©lessĂ©gre állĂtsuk, figyelembe vĂ©ve a görgetĹ‘sávokat.
71.24em szĂ©les vagy annál kisebb kĂ©pernyĹ‘kön a merĂĽlĹ‘ elemek maximális szĂ©lessĂ©gĂ©t állĂtsuk 978 kĂ©ppontra, Ă©s adjunk hozzá 10 kĂ©ppont vĂzszintes tĂ©rközĂ©st a kĂ©paláĂrásaikhoz. 30em Ă©s 71.24em közötti kĂ©pernyĹ‘kön ezt a tĂ©rközöt növeljĂĽk 20 kĂ©ppontra.
46.25em és 61.24em között a merülő elemek szélességét korlátozzuk 738 képpontra.
46.24em-nĂ©l kisebb kĂ©pernyĹ‘kön távolĂtsuk el a bal margĂłt Ă©s állĂtsuk a jobb margĂłt nullára a merĂĽlĹ‘ elemeknĂ©l, bal szĂ©lĂ©hez igazĂtva Ĺ‘ket. 30em-tĹ‘l 46.24em-ig terjedĹ‘ kĂ©pernyĹ‘kön alkalmazzunk 20 kĂ©ppont negatĂv bal margĂłt Ă©s tartsuk meg a 20 kĂ©ppont vĂzszintes tĂ©rközĂ©st a kĂ©paláĂrásoknál.
A bĂştor burkolĂłelemnĂ©l 61.25em Ă©s annál szĂ©lesebb kĂ©pernyĹ‘kön használjunk rácsos elrendezĂ©st meghatározott oszlopokkal Ă©s sorokkal. StĂlusozzuk a fĹ‘cĂmeket felsĹ‘ szegĂ©llyel, igazĂtsuk a meta informáciĂłk pozĂciĂłját Ă©s tĂ©rközĂ©t, Ă©s formázzuk a bevezetĹ‘ szöveget meghatározott margĂłkkal, betűmĂ©retekkel Ă©s linkstĂlusokkal, beleĂ©rtve az aláhĂşzásokat Ă©s rámutatási hatásokat. Kezdetben adjunk hozzá felsĹ‘ szegĂ©lyt a bevezetĹ‘ szöveg elsĹ‘ bekezdĂ©sĂ©hez, de távolĂtsuk el 71.25em Ă©s annál szĂ©lesebb kĂ©pernyĹ‘kön.
A bĂştor burkolĂłelemen belĂĽli ábrákat pozĂcionáljuk felĂĽl Ă©s alul margĂł nĂ©lkĂĽl, negatĂv bal margĂłval, korlátozva a soron belĂĽli elemek szĂ©lessĂ©gĂ©t 630 kĂ©ppontra.
71.25em Ă©s annál szĂ©lesebb kĂ©pernyĹ‘kön igazĂtsuk a bĂştor burkolĂłelem rács sablon oszlopait.
Az elrendezĂ©s rácsrendszert használ, oszlopokkal Ă©s sorokkal, amelyek kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez vannak meghatározva. Közepes kĂ©pernyĹ‘kön három oszlopa van a cĂm, fĹ‘cĂm Ă©s meta szakaszoknak, öt a bevezetĹ‘ szövegnek Ă©s hĂ©t a portrĂ©nak, a sorok 80px Ă©s automatikus magassággal vannak beállĂtva. VĂ©kony vonal jelenik meg a meta szakasz felett, Ă©s a bevezetĹ‘ szövegnek fĂĽggĹ‘leges vonala van a bal oldalán.
Nagyobb kĂ©pernyĹ‘kön a rács három oszlopra állĂtĂłdik a cĂm, fĹ‘cĂm Ă©s meta rĂ©sznĂ©l, ötre a bevezetĹ‘ szövegnĂ©l Ă©s nyolcra a portrĂ©nál, a sorok magassága törtrĂ©szekben van. A meta vonal szĂ©lesebb lesz, Ă©s a bevezetĹ‘ vonal kissĂ© elmozdul.
A fĹ‘cĂmek fĂ©lkövĂ©rek Ă©s átmĂ©retezĹ‘dnek 32px-rĹ‘l 50px-re, ahogy a kĂ©pernyĹ‘ szĂ©lesedik, maximális szĂ©lessĂ©gekkel beállĂtva. A cĂmkĂ©knek kis felsĹ‘ tĂ©rközĂĽk van, Ă©s bizonyos vonalak vagy elemek elrejtve vagy mĂłdosĂtva vannak kĂĽlönbözĹ‘ eszközökön.
A bevezetĹ‘ szöveg normál vastagságĂş, 20px mĂ©retű, alsĂł tĂ©rközzel, bal margĂłval Ă©s tĂ©rközzel pozĂcionálva. A fĹ‘ mĂ©dia a portrĂ© terĂĽletet foglalja el, teljes szĂ©lessĂ©ggel, oldalsĂł margĂłk nĂ©lkĂĽl, Ă©s az alsĂł margĂłját vagy bal pozĂciĂłját a kĂ©pernyĹ‘mĂ©ret alapján igazĂtja. A kĂ©paláĂrások abszolĂşt pozĂciĂłban vannak.
A bĂştor burkolĂłelemen belĂĽli kĂ©pek kĂ©paláĂrása alul pozĂcionálva, margĂł nĂ©lkĂĽl, teljes szĂ©lessĂ©ggel Ă©s minimum 46 kĂ©ppont magassággal rendelkezik. TĂ©rközzel, háttĂ©rszĂnnel Ă©s szövegszĂnnel van megadva, amelyet CSS változĂłk határoznak meg. A kĂ©paláĂrás elsĹ‘ span eleme rejtett, mĂg a második megjelenik Ă©s 90%-os szĂ©lessĂ©gre korlátozĂłdik. Nagyobb kĂ©pernyĹ‘kön a kĂ©paláĂrás tĂ©rköze növekszik.
A kĂ©paláĂrás gombja abszolĂşt pozĂciĂłban van jobb alul, kör alakĂş háttĂ©rrel Ă©s mĂ©retezett ikonnal. Közepes kĂ©pernyĹ‘kön a jobb pozĂciĂłja mĂłdosul.
Nagy kĂ©pernyĹ‘kön az interaktĂv fĹ‘ oszlopoknál egy pszeudo-elem kiterjed a tartalom fölĂ© Ă©s alá, Ă©s a h2 cĂmsorok maximális szĂ©lessĂ©ggel rendelkeznek.
iOS-en Ă©s Androidon a sötĂ©t mĂłd Ă©s szĂnsĂ©ma preferenciák megváltoztatják bizonyos elemek megjelenĂ©sĂ©t, pĂ©ldául a bekezdĂ©sek elsĹ‘ betűjĂ©t Ă©s a cikkfejlĂ©ceket, amelyeknek nincs magasságuk. A bĂştor burkolĂłelem tĂ©rközĂ©se csökken, Ă©s a tartalomcĂmkĂ©k ennek megfelelĹ‘en stĂlusozĂłdnak.
iOS Ă©s Android eszközökre a következĹ‘ stĂlusok Ă©rvĂ©nyesek a kiemelt, szabványos Ă©s hozzászĂłlás cikkekre:
- A tartalomcĂmkĂ©k fĂ©lkövĂ©r, nagybetűs betűtĂpust használnak a Guardian Headline vagy serif betűkĂ©szletbĹ‘l, az Ăşj pillĂ©r szĂnĂ©vel szĂnezve.
- A fĹ‘cĂmek 32px-re, fĂ©lkövĂ©rek, 12px alsĂł tĂ©rközzel Ă©s sötĂ©t szĂĽrke szĂnnel (#121212) vannak beállĂtva.
- A kĂ©pek relatĂvan pozĂcionálva, -10px bal margĂłval Ă©s 14px felsĹ‘ margĂłval rendelkeznek, Ă©s a teljes nĂ©zeti szĂ©lessĂ©get lefedik mĂnusz a görgetĹ‘sáv, automatikus magassággal.
- A kép elemek és belső komponenseik átlátszó háttérrel rendelkeznek, megfelelve a kép teljes nézeti szélességének és automatikus magasságának.
- A bevezető szöveg szakaszok 4px felső térközzel, 24px alsó térközzel és -10px jobb margóval rendelkeznek.
- A bevezetĹ‘ szöveg szakaszokon belĂĽli bekezdĂ©sek öröklik ezeket a stĂlusokat.
A bevezető szöveghez használja a Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia vagy serif betűkészletet.
iOS Ă©s Android eszközökön a kiemelt, szabványos Ă©s hozzászĂłlás cikkek bevezetĹ‘ szöveg szakaszában lĂ©vĹ‘ linkek az Ăşj pillĂ©r szĂnĂ©ben jelenjenek meg, háttĂ©rkĂ©p nĂ©lkĂĽl, aláhĂşzott stĂlusban 6 kĂ©ppont eltolással Ă©s világosszĂĽrke aláhĂşzĂł szĂnnel. Ne jelenjen meg szegĂ©ly e linkek alatt.
Ha ezekre a linkekre mutatunk iOS-en Ă©s Androidon, az aláhĂşzĂł szĂn változzon az Ăşj pillĂ©r szĂnĂ©re.
Továbbá, a kiemelt, szabványos Ă©s hozzászĂłlás cikkek meta informáciĂłinál mind iOS-en, mind Androidon állĂtsuk a margĂłt nullára. Ez vonatkozik a szerzĹ‘i sorokra, szerzĹ‘nevekre Ă©s kapcsolĂłdĂł span elemekre, biztosĂtva az egysĂ©ges stĂlusozást minden elemnĂ©l.
Android Ă©s iOS eszközökön a szerzĹ‘ neve Ă©s szerzĹ‘i sor a cikk meta szakaszaiban az Ăşj pillĂ©r szĂnĂ©vel jelenik meg.
Mind Androidon, mind iOS-en a kiemelt, szabványos Ă©s hozzászĂłlás cikkek meta egyĂ©b terĂĽlete nincs kitöltve, Ă©s bármely benne lĂ©vĹ‘ SVG ikon stroke tulajdonsága az Ăşj pillĂ©r szĂnĂ©t használja.
A vitrint elemek kĂ©paláĂrás gombja flex kontĂ©nerkĂ©nt van stĂlusozva, közĂ©pre igazĂtva 5px tĂ©rközzel, 28px mindkĂ©t dimenziĂłban, Ă©s 14px-re pozĂcionálva a jobb szĂ©ltĹ‘l.
Minden tĂpusĂş cikk törzse mindkĂ©t platformon 12px bal Ă©s jobb tĂ©rközzel rendelkezik, felĂĽl Ă©s alul tĂ©rköz nĂ©lkĂĽl.
A nem bĂ©lyegkĂ©p, nem merĂĽlĹ‘ kĂ©pek a cikkek törzsĂ©ben a teljes nĂ©zeti szĂ©lessĂ©get fedik le mĂnusz 24px Ă©s a görgetĹ‘sáv szĂ©lessĂ©ge, ha van, megtartva a kĂ©parányukat. KĂ©paláĂrásaik ennek megfelelĹ‘en stĂlusozĂłdnak.
iOS és Android eszközökre a kiemelt, szabványos és hozzászólás cikkekben lévő merülő képek a teljes nézeti szélességet fedik le, figyelembe véve a görgetősávokat.
Ezekben a cikkekben az idĂ©zett szöveg egy szĂnes jelzĹ‘t jelenĂt meg a webhely pillĂ©r szĂnĂ©vel.
A cikk szövegĂ©n belĂĽli linkek az elsĹ‘dleges pillĂ©r szĂnĂ©vel lesznek stĂlusozva, aláhĂşzva specifikus eltolással Ă©s szĂnnel, amely az Ăşj pillĂ©r szĂnĂ©re változik rámutatáskor.
SötĂ©t mĂłdban a cikkfejlĂ©cek sötĂ©t szĂĽrke háttĂ©rrel rendelkeznek. A cĂmkĂ©k az Ăşj pillĂ©r szĂnĂ©t veszik fel, a fĹ‘cĂmek a fejlĂ©c szegĂ©ly szĂnĂ©t használják, a bevezetĹ‘ szöveg Ă©s linkek szintĂ©n a fejlĂ©c szegĂ©ly szĂnĂ©t használják a jobb láthatĂłság Ă©rdekĂ©ben.
iOS Ă©s Android eszközökre a következĹ‘ stĂlusozási szabályok Ă©rvĂ©nyesek a kiemelt, szabványos Ă©s hozzászĂłlás cikk tárolĂłkon:
- A bevezetĹ‘ szöveg szakaszban Ă©s a szerzĹ‘i sorokban lĂ©vĹ‘ linkek az Ăşj pillĂ©r szĂnĂ©t használják.
- A meta szakasz ikonjainak stroke tulajdonsága az Ăşj pillĂ©r szĂnre van állĂtva.
- A vitrint kĂ©pek kĂ©paláĂrásai a dátumvonal szĂnĂ©ben jelennek meg.
- A cikk törzsĂ©n belĂĽli idĂ©zett szöveg az Ăşj pillĂ©r szĂnĂ©t veszi fel.
- A cikk törzsĂ©ben lĂ©vĹ‘ kĂĽlönbözĹ‘ tartalomtárolĂłk egysĂ©ges stĂlusozást tartanak fenn.
Ez a CSS kĂłd sötĂ©t hátteret állĂt be bizonyos elemekhez Android eszközökön, Ă©s stĂlusozza a bekezdĂ©sek elsĹ‘ betűjĂ©t bizonyos elemek után iOS eszközökön. Androidra sötĂ©t hátteret alkalmaz kĂĽlönbözĹ‘ tárolĂłkra Ă©s tartalmi terĂĽletekre a cikkoldalakon. iOS-re a bekezdĂ©sek elsĹ‘ betűjĂ©t cĂ©lozza meg, amelyek atomok, bejelentkezĂ©si kapuk vagy hasonlĂł komponensek után következnek, kĂĽlönbözĹ‘ cikk tárolĂłkban Ă©s törzsszakaszokban.
Ăšgy tűnik, ez egy CSS szelektor, amely a bekezdĂ©sek elsĹ‘ betűjĂ©t cĂ©lozza meg specifikus elemek után kĂĽlönbözĹ‘ cikk tárolĂłkban Ă©s platformokon (iOS Ă©s Android). Lefedi a kĂĽlönbözĹ‘ tartalmi szakaszokat, mint a cikk törzsei, hozzászĂłlási rĂ©szek Ă©s interaktĂv tartalmi terĂĽletek, stĂlusokat alkalmazva azokra a bekezdĂ©sekre, amelyek olyan elemek után következnek, amelyeknek 'element-atom', 'sign-in-gate' osztálya vagy specifikus azonosĂtĂłi vannak.
Minden hĂ©ten a helyi mozimban vetĂtenek egy Ăşj horrorfilmet. Legyen az Ăşjrafeldolgozás, mint az I Know What You Did Last Summer, folytatás, mint a Final Destination Bloodlines, elĹ‘zmĂ©nytörtĂ©net, mint The First Omen vagy A Quiet Place: Day One, egy klasszikus gĂłtikus figura visszatĂ©rĂ©se Luc Besson Drakulája: Egy Szerelmi TörtĂ©net vagy Guillermo del Toro Frankensteinje cĂmű filmjĂ©ben, vagy egy slasher film, mint a Dangerous Animals, ahol a cápák helyettesĂtik a kĂ©st a gyilkos eszközekĂ©nt. Vagy lehet egy izgalmas, vadonatĂşj alkotás a feltörekvĹ‘ horrorrendezĹ‘ktĹ‘l, akik hullámokat vernek