Ez a CSS kĂłd definiálja a "Guardian Headline Full" betűkĂ©szlet-családot kĂĽlönbözĹ‘ vastagságokkal Ă©s stĂlusokkal, számos fájlformátumot (WOFF2, WOFF, TTF) biztosĂtva minden variánshoz a kĂĽlönbözĹ‘ böngĂ©szĹ‘k közötti kompatibilitás Ă©rdekĂ©ben.
Ez a CSS kĂłd több betűkĂ©pstĂlust határoz meg a "Guardian Headline Full" Ă©s "Guardian Titlepiece" betűkĂ©szlet-családokhoz. Minden betűkĂ©p kĂĽlönbözĹ‘ vastagságokat (mint 300 a világos, 400 a normál, 700 a fĂ©lkövĂ©r Ă©s 900 a fekete) Ă©s stĂlusokat (normál vagy dĹ‘lt) határoz meg. Ezek a Guardian eszközdomainjĂ©n találhatĂł kĂĽlönbözĹ‘ URL-ekrĹ‘l származnak WOFF2, WOFF Ă©s TrueType formátumokban.
Ez a CSS kĂłd több betűstĂlust definiál a "Guardian Headline Full" betűkĂ©szlet-családhoz. Tartalmaz normál, közepes, fĂ©lig fĂ©lkövĂ©r, fĂ©lkövĂ©r Ă©s fekete vastagságokat, mindegyik normál Ă©s dĹ‘lt variánssal. Minden stĂlushoz megadja a betűfájlokat WOFF2, WOFF Ă©s TrueType formátumokban, a hozzájuk tartozĂł betűvastagsággal Ă©s stĂlustulajdonságokkal. A betűfájlok a Guardian eszközszerverĂ©n hosztolva vannak.
Ez a szöveg CSS kĂłdnak tűnik, amely betűstĂlusokat Ă©s elrendezĂ©si rácsokat határoz meg egy weboldalhoz, valĂłszĂnűleg a The Guardian számára. Meghatározza a betűfájlokat kĂĽlönbözĹ‘ vastagságokhoz Ă©s stĂlusokhoz, Ă©s beállĂtja a reszponzĂv rács elrendezĂ©seket, amelyek kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©reteknĂ©l változnak. A kĂłd szabályozza, hogy a tartalmi terĂĽletek, mint a cĂmek, cĂmsorok, mĂ©dia Ă©s törzsszöveg hogyan helyezkednek el a kĂĽlönbözĹ‘ eszközmĂ©reteknĂ©l.
Az interaktĂv rácsábrákhoz, melyek merĂĽlĹ‘ feliratokkal rendelkeznek meghatározott tartalmi terĂĽleteken, a felirat felsĹ‘ belsĹ‘ margĂłja 4 kĂ©ppont, máshol 0.
KĂĽlönbözĹ‘ tartalmi szakaszokban az interaktĂv rácsokon belĂĽli "lines" Ă©s "meta" nevű elemek a 2-tĹ‘l 5-ig sorokban Ă©s 1-tĹ‘l 2-ig oszlopokban helyezkednek el a rácsban. A "lines" elemek magassága a tartalmukhoz igazodik, Ă©s 5 kĂ©ppontos felsĹ‘ kĂĽlsĹ‘ margĂłval rendelkeznek, mĂg a "meta" elemek 18 kĂ©ppontos felsĹ‘ kĂĽlsĹ‘ margĂłval.
Nagyobb kĂ©pernyĹ‘kön (81,25 em Ă©s felette) ezekben a szakaszokban az interaktĂv rácsok ötoszlopos elrendezĂ©st használnak meghatározott szĂ©lessĂ©gekkel: 219px, 1px, 620px, 80px Ă©s 300px.
iOS Ă©s Android eszközökön a cikkfejlĂ©cek testreszabott stĂlusokkal rendelkeznek:
- A bevezetĹ‘ bekezdĂ©sek meghatározott serif betűtĂpusokat használnak közepes vastagsággal.
- A szekciĂł bevezetĹ‘i blokkkĂ©nt jelennek meg Ă©s nagybetűvel Ărják az elsĹ‘ betűjĂĽket.
- A elválasztóvonalak felső belső margója 12 képpont.
- A szerzĹ‘i aláĂrások fĂ©lkövĂ©r serif betűtĂpusokat használnak, a linkek szintĂ©n fĂ©lkövĂ©rek.
- A képábrák magassága automatikus.
- Az atomi ábrákat követő bekezdéseknek nincs felső külső margójuk.
Ezen kĂvĂĽl egyĂ©ni betűkĂ©pek vannak definiálva a "Guardian Headline Full" számára világos Ă©s világos dĹ‘lt vastagságokkal, amelyek meghatározott URL-ekrĹ‘l származnak woff2, woff Ă©s truetype formátumokban.
Ez a szöveg több betűstĂlust definiál a "Guardian Headline Full" betűkĂ©szlet-családhoz, meghatározva kĂĽlönbözĹ‘ vastagságokat Ă©s stĂlusokat (normál Ă©s dĹ‘lt) a forrásfájljaikkal egyĂĽtt kĂĽlönbözĹ‘ formátumokban (WOFF2, WOFF Ă©s TrueType). Minden bejegyzĂ©s tartalmazza a betű vastagságát Ă©s stĂlusát, Ă©s megmutatja, hol találhatĂłk a betűfájlok online.
Ez a CSS kĂłd betűstĂlusokat Ă©s elrendezĂ©si beállĂtásokat határoz meg egy weboldalhoz, valĂłszĂnűleg a The Guardian számára. Meghatároz egyĂ©ni betűtĂpusokat kĂĽlönbözĹ‘ vastagságokkal Ă©s stĂlusokkal, beleĂ©rtve a normál Ă©s dĹ‘lt változatokat, Ă©s beállĂtja a reszponzĂv tervezĂ©si szabályokat kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez. Az elrendezĂ©s mĂłdosĂtja a kĂĽlsĹ‘ margĂłkat, szĂ©lessĂ©geket Ă©s pozicionálást olyan elemeknĂ©l, mint az oszlopok, atomok, kiemelĂ©sek Ă©s merĂĽlĹ‘ szakaszok, hogy biztosĂtsa a megfelelĹ‘ megjelenĂtĂ©st az eszközökön. Tartalmaz mĂ©dia lekĂ©rdezĂ©seket is a kĂĽlönbözĹ‘ nĂ©zeti szĂ©lessĂ©gek kezelĂ©sĂ©re, biztosĂtva, hogy az elemek átmĂ©retezĹ‘djenek Ă©s áthelyezĹ‘djenek mobilos, tabletes Ă©s asztali kĂ©pernyĹ‘k számára. Ezen kĂvĂĽl beállĂtja a szĂneket a dátumvonalakhoz, fejlĂ©cekhez, feliratokhoz Ă©s funkciĂłkhoz, Ă©s meghatározza a belsĹ‘ margĂłkat Ă©s kĂĽlsĹ‘ margĂłkat a tartalmi elemekhez a konzisztens Ă©s olvashatĂł elrendezĂ©s fenntartása Ă©rdekĂ©ben.
Az elsĹ‘ bekezdĂ©s meghatározott elemek, pĂ©ldául bejelentkezĂ©si kapuk, vĂzszintes vonalak vagy kezdeti atomok után kĂĽlönbözĹ‘ tartalmi terĂĽleteken (mint a cikktestek, interaktĂv tartalom, hozzászĂłlások, funkciĂłk Ă©s data-gu elnevezĂ©sű szakaszok) 14 kĂ©ppontos felsĹ‘ belsĹ‘ margĂłt kap.
E bekezdĂ©sek elsĹ‘ betűje a Guardian Headline vagy hasonlĂł serif betűtĂpusokat használja fĂ©lkövĂ©rben, nagy 111 kĂ©ppontos betűmĂ©rettel Ă©s 92 kĂ©ppontos soremagassággal. A stĂlusa Ăşgy van beállĂtva, hogy balra lebegjen, nagybetűs legyen, 8 kĂ©ppontos jobb kĂĽlsĹ‘ margĂłval rendelkezzen, felĂĽlre igazodjon, Ă©s egy CSS változĂłbĂłl vegye a szĂnĂ©t a lombikbetűkhöz.
A vĂzszintes vonalakat követĹ‘ bekezdĂ©seknek nincs felsĹ‘ belsĹ‘ margĂłjuk.
A pullquote adatattribútummal rendelkező elemek maximális szélessége 620 képpont.
A fő tartalomban, funkciócikkekben, szabványos cikkekben és hozzászólási szakaszokban található kiemelő elemekben a feliratok statikusan pozicionálva vannak, a teljes szélességet lefedve 620 képpontig.
A merĂĽlĹ‘ elemek a teljes nĂ©zeti szĂ©lessĂ©gig nyĂşlnak mĂnusz a görgetĹ‘sáv. 71,24 em-nĂ©l kisebb kĂ©pernyĹ‘kön maximum 978 kĂ©ppontra korlátozĂłdnak, Ă©s felirataik belsĹ‘ margĂłval rendelkeznek.
Ez Ăşgy tűnik, reszponzĂv webdesign CSS kĂłd, amely kĂĽlönbözĹ‘ stĂlusokat állĂt be kĂĽlönbözĹ‘ kĂ©pernyĹ‘mĂ©retekhez. Meghatározza, hogy az oldalelemek, mint a cĂmsorok, kĂ©pek Ă©s feliratok hogyan jelenjenek meg Ă©s állĂtsanak be az eszközökön a mobiltĂłl az asztaliig. A kĂłd mĂ©dia lekĂ©rdezĂ©seket használ, hogy meghatározott elrendezĂ©seket, tĂ©rközöket, szegĂ©lyeket Ă©s rácsstruktĂşrákat alkalmazzon, amikor a nĂ©zeti terĂĽlet bizonyos szĂ©lessĂ©gi feltĂ©teleknek felel meg.
A rács elrendezĂ©s öt egyenlĹ‘ szĂ©lessĂ©gű oszlopot használ a cĂm, cĂmsor Ă©s bevezetĹ‘ szakaszokhoz, majd nyolc egyenlĹ‘ szĂ©lessĂ©gű oszlopot a portrĂ© szakaszhoz. A sorok meghatározott magasságokkal vannak definiálva a cĂm, cĂmsor, bevezetĹ‘ Ă©s meta terĂĽletekhez.
A meta elemekhez 620px rögzĂtett szĂ©lessĂ©g van beállĂtva, mĂg a bevezetĹ‘ tartalom kissĂ© balra van eltolva. A cĂmben Ă©s cĂmsorban találhatĂł cĂmkĂ©k minimális felsĹ‘ belsĹ‘ margĂłval rendelkeznek.
A cĂmsorok fĂ©lkövĂ©rek, maximum 620px szĂ©lessĂ©ggel Ă©s 32px betűmĂ©rettel, ami 50px-re nĹ‘ keskenyebb szĂ©lessĂ©ggel nagyobb kĂ©pernyĹ‘kön. Közepes kĂ©pernyĹ‘kön a sorok jobb kĂĽlsĹ‘ margĂłja eltávolĂtásra kerĂĽl, Ă©s a sorok elrejtĂ©sre kerĂĽlnek szĂ©lesebb kijelzĹ‘kön, szĂnĂĽk pedig megegyezik a fejlĂ©c szegĂ©lyĂ©vel.
A meta szakaszok szintĂ©n elveszĂtik jobb kĂĽlsĹ‘ margĂłjukat közepes kĂ©pernyĹ‘kön, Ă©s a közössĂ©gi Ă©s hozzászĂłlĂł elemek megosztják a fejlĂ©c szegĂ©ly szĂnĂ©t. NĂ©hány meta komponens elrejtĂ©sre kerĂĽl.
A bevezetĹ‘ szöveg be van hĂşzva Ă©s relatĂvan pozicionálva, normál vastagsággal, 20px betűmĂ©rettel Ă©s alsĂł belsĹ‘ margĂłval. Közepes kĂ©pernyĹ‘kön felsĹ‘ belsĹ‘ margĂłt kap.
A fĹ‘ mĂ©dia a portrĂ© rács terĂĽletĂ©re kerĂĽl, kezdetben felsĹ‘ kĂĽlsĹ‘ margĂł nĂ©lkĂĽl Ă©s kis alsĂł kĂĽlsĹ‘ margĂłval, teljes szĂ©lessĂ©gre bĹ‘vĂĽlve mĂłdosĂtott kĂĽlsĹ‘ margĂłkkal kisebb kĂ©pernyĹ‘kön. A feliratok alul pozicionálva vannak háttĂ©rszĂnnel Ă©s szövegszĂnnel, elrejtve az elsĹ‘ spant Ă©s megjelenĂtve a másodikat. Egy felirat váltĂłgomb a jobb alsĂł sarokban pozicionálva kör alakĂş háttĂ©rrel.
Extra nagy kĂ©pernyĹ‘kön a fĹ‘ tartalom oszlopa mĂłdosĂtott felsĹ‘ pozĂciĂłval Ă©s magassággal van beállĂtva.
A fĹ‘ oszlop interaktĂv cĂmsorainak maximális szĂ©lessĂ©ge 620 kĂ©ppont. iOS Ă©s Android eszközökön a szĂnsĂ©ma sötĂ©t háttereket Ă©s meghatározott kiemelĹ‘ szĂneket használ, amelyek sötĂ©t mĂłdban mĂłdosulnak.
Ezeken a mobil platformokon a kĂĽlönbözĹ‘ cikktĂpusok elsĹ‘ bekezdĂ©sĂ©nek elsĹ‘ betűje másodlagos szĂnnel van stĂlusozva. A cikkfejlĂ©cek elrejtĂ©sre kerĂĽlnek, mĂg a bĂştor burkolĂłknak minimális belsĹ‘ margĂłja van. Ezeken belĂĽli cĂmkĂ©k fĂ©lkövĂ©rek, meghatározott betűkĂ©szlet-családot használnak, Ă©s az aktuális tĂ©ma szerint szĂnezettek, a cĂmsorok sötĂ©t szĂĽrke szĂnre Ă©s nagy, fĂ©lkövĂ©r betűmĂ©retre vannak beállĂtva.
iOS Ă©s Android eszközökön a következĹ‘ stĂlusok vonatkoznak a cikk kontĂ©nerekre (funkciĂł, szabványos Ă©s hozzászĂłlás):
- A bĂştor burkolĂłn belĂĽli kĂ©p elemek relatĂvan pozicionálva vannak, 14px felsĹ‘ kĂĽlsĹ‘ margĂłval, -10px bal kĂĽlsĹ‘ margĂłval, Ă©s olyan szĂ©lessĂ©ggel, amely a teljes nĂ©zeti szĂ©lessĂ©get fedezi mĂnusz a görgetĹ‘sáv szĂ©lessĂ©ge. Magasságuk automatikusan igazodik.
- A belsĹ‘ ábra, kĂ©p Ă©s link elemek átlátszĂł háttĂ©rrel rendelkeznek, megfelelnek a teljes nĂ©zeti szĂ©lessĂ©gnek mĂnusz a görgetĹ‘sáv, Ă©s automatikus magasságot tartanak.
- A bevezető szakaszoknak 4px felső belső margója, 24px alsó belső margója és -10px jobb külső margója van.
- A bevezetĹ‘n belĂĽli bekezdĂ©sek a Guardian Headline betűkĂ©szlet-családot vagy tartalĂ©k serif betűtĂpusokat használják.
- A bevezetĹ‘n belĂĽli linkek, beleĂ©rtve a listaelemekben lĂ©vĹ‘ket, öröklik ezeket a stĂlusokat.
HozzászĂłlási cikk kontĂ©nerekben a bevezetĹ‘ben lĂ©vĹ‘ linkek meghatározott szĂnnel vannak stĂlusozva, aláhĂşzva eltolással, Ă©s nincs háttĂ©rkĂ©pĂĽk vagy szegĂ©lyĂĽk. iOS Ă©s Android eszközökön a funkciĂł, szabványos vagy hozzászĂłlási cikkekben lĂ©vĹ‘ linkek fölĂ© hajtva az aláhĂşzás szĂne a pillĂ©r szĂnĂ©re változik. Ezen kĂvĂĽl e cikkek meta szakaszában nincs kĂĽlsĹ‘ margĂł, Ă©s az olyan elemek, mint a szerzĹ‘i aláĂrások Ă©s szerzĹ‘ linkek a pillĂ©r szĂnĂ©t használják a szöveghez. A meta egyĂ©b terĂĽletĂ©n nincs belsĹ‘ margĂł.
iOS Ă©s Android eszközökön a következĹ‘ stĂlusok vonatkoznak a funkciĂł, szabványos Ă©s hozzászĂłlási cikk kontĂ©nerekre:
- A meta egyĂ©b szakasz SVG ikonjai az Ăşj pillĂ©r szĂnĂ©t használják a vonalakhoz.
- A kiemelĹ‘ elemekben a felirat gomb flex kontĂ©nerkĂ©nt jelenik meg, közĂ©pre igazĂtva 5px belsĹ‘ margĂłval, 28px mĂ©retekkel Ă©s 14px-re jobbrĂłl pozicionálva.
- A cikktestnek 12px vĂzszintes belsĹ‘ margĂłja van.
- A cikktestben lĂ©vĹ‘ nem bĂ©lyegkĂ©p, nem merĂĽlĹ‘ kĂ©peknek nincs kĂĽlsĹ‘ margĂłjuk, szĂ©lessĂ©gĂĽk a nĂ©zeti szĂ©lessĂ©g mĂnusz 24px Ă©s görgetĹ‘sáv szĂ©lessĂ©g, Ă©s automatikus magasság, felirataikban nincs belsĹ‘ margĂł.
- A merĂĽlĹ‘ kĂ©pek a teljes nĂ©zeti szĂ©lessĂ©get fedik le mĂnusz a görgetĹ‘sáv szĂ©lessĂ©g.
- A prĂłza szakaszban idĂ©zett idĂ©zĹ‘blokkok elĹ‘tti ál-eleme ennek megfelelĹ‘en van stĂlusozva.
iOS Ă©s Android eszközökön a cikkekben lĂ©vĹ‘ idĂ©zett szöveg Ă©s linkek stĂlusa mĂłdosul. Az idĂ©zett szöveg meghatározott szĂnt használ, mĂg a linkek meghatározott szĂnnel Ă©s eltolással vannak aláhĂşzva. Amikor fölĂ© hajtanak, a link aláhĂşzása más szĂnre változik.
SötĂ©t mĂłdban a cikkfejlĂ©cek háttĂ©rszĂne sötĂ©t szĂĽrke lesz. A