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Ă©szlet-csalĂĄdot hatĂĄroz meg a Guardian weboldal szĂĄmĂĄra. MeghatĂĄrozza a "Guardian Headline Full" betƱtĂpust kĂŒlönbözĆ vastagsĂĄgokban Ă©s stĂlusokban, beleĂ©rtve a fĂ©lkövĂ©rt, feketĂ©t, vilĂĄgosat Ă©s normĂĄlt, mindegyikhez normĂĄl Ă©s dĆlt vĂĄltozatokat, ahol alkalmazhatĂł. EzenkĂvĂŒl definiĂĄlja a "Guardian Titlepiece" betƱtĂpust fĂ©lkövĂ©r vastagsĂĄggal. Minden betƱtĂpushoz több fĂĄjlformĂĄtumot (WOFF2, WOFF Ă©s TrueType) biztosĂt a Guardian szerverĂ©n, hogy szĂ©les böngĂ©szĆkompatibilitĂĄst biztosĂtson. A font-weight Ă©s font-style tulajdonsĂĄgok minden definĂciĂłhoz ennek megfelelĆen vannak beĂĄllĂtva.
Ez a CSS kĂłd több betƱstĂlust hatĂĄroz meg a "Guardian Headline Full" betƱkĂ©szlet-csalĂĄd szĂĄmĂĄra. KĂŒlönbözĆ vastagsĂĄgokat Ă©s stĂlusokat (normĂĄl Ă©s dĆlt) tartalmaz, forrĂĄsfĂĄjlokat megadva kĂŒlönbözĆ formĂĄtumokban (WOFF2, WOFF Ă©s TrueType) a Guardian szerverĂ©rĆl. Minden bejegyzĂ©s beĂĄllĂtja a betƱvastagsĂĄgot (400-tĂłl 900-ig) Ă©s stĂlust (dĆlt vagy normĂĄl) a webes tipogrĂĄfiĂĄban valĂł hasznĂĄlatra.
Ez a szöveg CSS kĂłdnak tƱnik, amely betƱstĂlusokat Ă©s elrendezĂ©si rĂĄcsokat hatĂĄroz meg egy weboldal szĂĄmĂĄra, valĂłszĂnƱleg a GuardianĂ©. 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 beĂĄllĂtja az elemek pozicionĂĄlĂĄsĂĄt, belsĆ margĂłjĂĄt Ă©s oszlopstruktĂșrĂĄit az optimĂĄlis megjelenĂtĂ©s Ă©rdekĂ©ben a mobiltĂłl az asztaliig terjedĆ eszközökön.
Az interaktĂv rĂĄcsĂĄbrĂĄkhoz, melyek merĂŒlĆ feliratokkal rendelkeznek bizonyos tartalmi terĂŒleteken, a felirat belsĆ margĂłja 4 kĂ©ppont felĂŒl Ă©s 0 mĂĄshol.
KĂŒlönbözĆ tartalmi szakaszokban a vonalakra Ă©s metaadatokra vonatkozĂł adatattribĂștumokkal rendelkezĆ elemek a rĂĄcs 2-tĆl 5-ig terjedĆ sorĂĄban Ă©s 1-tĆl 2-ig terjedĆ oszlopĂĄban helyezkednek el. A vonalak elemek magassĂĄga a tartalmukhoz igazodik, Ă©s 5 kĂ©ppontos felsĆ margĂłval rendelkeznek, mĂg a meta elemek 18 kĂ©ppontos felsĆ margĂłval.
Nagyobb kĂ©pernyĆkon, legalĂĄbb 81.25em szĂ©lessĂ©gnĂ©l, ezeknek a tartalmi terĂŒleteknek a rĂĄcs elrendezĂ©se meghatĂĄrozott oszlopszĂ©lessĂ©geket hasznĂĄl: 219px, 1px, 620px, 80px Ă©s 300px.
iOS és Android eszközökön a cikkfejlécek testreszabott tipogråfiåval rendelkeznek:
- A bevezetĆ bekezdĂ©sek a Guardian Headline betƱkĂ©szlet-csalĂĄdot hasznĂĄljĂĄk közepes vastagsĂĄggal.
- A szekciĂłjelzĆk blokkkĂ©nt jelennek meg, az elsĆ betƱ nagybetƱvel.
- A vĂĄlasztĂłvonalak 12 kĂ©ppontos felsĆ belsĆ margĂłval rendelkeznek.
- A szerzĆi alĂĄĂrĂĄsok a Guardian Headline betƱtĂpust hasznĂĄljĂĄk fĂ©lkövĂ©rben.
- A képåbråk magassåga automatikus.
- Az atomi elemeket követĆ bekezdĂ©seknek nincs felsĆ margĂłjuk.
A Guardian Headline Full betƱkĂ©p vĂĄltozatai közĂ© tartoznak a vilĂĄgos Ă©s vilĂĄgos dĆlt vĂĄltozatok, amelyek forrĂĄsai konkrĂ©t URL-ek woff2, woff Ă©s truetype formĂĄtumban, a hozzĂĄjuk tartozĂł vastagsĂĄgokkal Ă©s stĂlusokkal.
Ez a szöveg egy "Guardian Headline Full" nevƱ egyĂ©ni betƱkĂ©szlet-csalĂĄdot hatĂĄroz meg kĂŒlönbözĆ stĂlusokkal Ă©s vastagsĂĄgokkal. Tartalmaz normĂĄl, közepes, fĂ©lig fĂ©lkövĂ©r Ă©s fĂ©lkövĂ©r vĂĄltozatokat, mindegyik normĂĄl Ă©s dĆlt stĂlusban. A betƱfĂĄjlok WOFF2, WOFF Ă©s TrueType formĂĄtumban Ă©rhetĆk el a Guardian weboldalĂĄrĂłl.
Ez a CSS kĂłd betƱstĂlusokat Ă©s elrendezĂ©si mĂłdosĂtĂĄsokat hatĂĄroz meg egy weboldal szĂĄmĂĄra. MeghatĂĄroz egyĂ©ni betƱtĂpusokat a Guardian erĆforrĂĄsaibĂłl, beleĂ©rtve kĂŒlönbözĆ vastagsĂĄgokat Ă©s stĂlusokat, Ă©s beĂĄllĂtja a reszponzĂv tervezĂ©si szabĂĄlyokat kĂŒlönbözĆ kĂ©pernyĆmĂ©retekhez. Az elrendezĂ©si szabĂĄlyok szabĂĄlyozzĂĄk az elemek margĂłit, szĂ©lessĂ©gĂ©t Ă©s pozicionĂĄlĂĄsĂĄt, mint a cikkek, kĂ©pek Ă©s interaktĂv komponensek, biztosĂtva, hogy megfelelĆen jelenjenek meg az eszközökön a mobiltĂłl az asztaliig. Tartalmaz szĂnvĂĄltozĂłkat a konzisztens tĂ©mĂĄhoz Ă©s kezeli a speciĂĄlis formĂĄzĂĄst olyan elemekhez, mint a feliratok Ă©s kiemelt tartalmak.
A kĂŒlönbözĆ tartalmi szakaszok, mint a cikktestek, interaktĂv tartalmak, hozzĂĄszĂłlĂĄsok Ă©s funkciĂłk elsĆ bekezdĂ©se 14 kĂ©ppontos felsĆ belsĆ margĂłt kap. EzenkĂvĂŒl e bekezdĂ©sek elsĆ betƱje egy adott betƱtĂpussal, mĂ©rettel Ă©s szĂnnel van stĂlusozva, Ă©s nagybetƱssĂ© van tĂ©ve iniciĂĄlĂ© hatĂĄssal.
A vĂzszintes vonalat követĆ bekezdĂ©seknĂ©l a felsĆ belsĆ margĂł eltĂĄvolĂtĂĄsra kerĂŒl. Ezekben a szakaszokban a idĂ©zetek maximĂĄlis szĂ©lessĂ©ge 620 kĂ©ppont.
A kiemelĆ elemekben a feliratok statikusan pozicionĂĄltak Ă©s szintĂ©n 620 kĂ©ppontos szĂ©lessĂ©gre korlĂĄtozottak. A merĂŒlĆ elemek a teljes nĂ©zeti szĂ©lessĂ©get lefedik, mĂnusz a görgetĆsĂĄv, Ă©s 71.24em-nĂ©l kisebb kĂ©pernyĆkon 978 kĂ©ppont szĂ©lesre korlĂĄtozĂłdnak megfelelĆ felirat belsĆ margĂłval.
Ez Ășgy tƱnik, reszponzĂv webdesign CSS kĂłd, amely kĂŒlönbözĆ elrendezĂ©seket Ă©s stĂlusokat ĂĄllĂt be kĂŒlönbözĆ kĂ©pernyĆmĂ©retekhez. MeghatĂĄrozza, hogy az elemek, mint a feliratok, kĂ©pek Ă©s szövegblokkok hogyan mĂłdosĂtjĂĄk megjelenĂ©sĂŒket, belsĆ margĂłikat, margĂłikat Ă©s rĂĄcsstruktĂșrĂĄikat a mobiltĂłl az asztaliig terjedĆ eszközökön. A kĂłd biztosĂtja, hogy a tartalom olvashatĂł Ă©s vizuĂĄlisan vonzĂł maradjon a kĂŒlönbözĆ nĂ©zeti terĂŒleteken, mĂłdosĂtva a tulajdonsĂĄgokat, mint a szegĂ©lyek, szövegdekorĂĄciĂł Ă©s rĂĄcssablonok a mĂ©dia lekĂ©rdezĂ©sek alapjĂĄn.
A rĂĄcs elrendezĂ©s öt 1fr oszlopot hasznĂĄl a cĂm, fĆcĂm Ă©s bevezetĆ szakaszokhoz, majd nyolc 1fr oszlopot a portrĂ© szakaszhoz. A sorok meghatĂĄrozott törtekkel vannak definiĂĄlva minden terĂŒlethez.
A meta Ă©s bevezetĆ elemeknĂ©l a szĂ©lessĂ©g 620px-re van ĂĄllĂtva, a bevezetĆnĂ©l enyhe bal eltolĂĄssal. A cĂm Ă©s cikkfejlĂ©c cĂmkĂ©inek kis felsĆ belsĆ margĂłja van.
A fĆcĂmek fĂ©lkövĂ©rek, maximĂĄlis szĂ©lessĂ©ge 620px Ă©s betƱmĂ©retĂŒk 32px, ami nagyobb kĂ©pernyĆkon 50px-re Ă©s keskenyebb szĂ©lessĂ©gre nĆ. NĂ©hĂĄny sor rejtve van közepes Ă©s nagy kĂ©pernyĆkon, Ă©s szĂnĂŒket egy CSS vĂĄltozĂł hatĂĄrozza meg.
A meta elemeknek nincs jobb margĂłjuk közepes kĂ©pernyĆkon, Ă©s a közössĂ©gi Ă©s hozzĂĄszĂłlĂĄs szegĂ©lyek ugyanazt a vĂĄltozĂłt hasznĂĄljĂĄk. Bizonyos szigetek a metĂĄn belĂŒl rejtettek.
A bevezetĆ szakaszoknak negatĂv bal margĂłja Ă©s relatĂv pozicionĂĄlĂĄsa van, belsĆ margĂł-beĂĄllĂtĂĄssal közepes kĂ©pernyĆkon. A belĂŒl lĂ©vĆ bekezdĂ©sek normĂĄl vastagsĂĄgĂșak, 20px mĂ©retƱek Ă©s alsĂł belsĆ margĂłval rendelkeznek.
A fĆ mĂ©dia a portrĂ© rĂĄcs terĂŒleten pozicionĂĄlva, teljes szĂ©lessĂ©gƱ, oldalsĂł margĂłk nĂ©lkĂŒl, Ă©s az alsĂł margĂł vĂĄltozik nagyobb kĂ©pernyĆkon. Kis kĂ©pernyĆkon a teljes nĂ©zeti szĂ©lessĂ©get foglalja el mĂnusz a görgetĆsĂĄv, bal margĂł-beĂĄllĂtĂĄssal.
A feliratok abszolĂșt pozicionĂĄltak alul, hĂĄttĂ©rszĂnnel Ă©s szövegszĂnnel vĂĄltozĂłkbĂłl, elrejtve az elsĆ spant Ă©s megjelenĂtve a mĂĄsodikat maximĂĄlis szĂ©lessĂ©ggel. ĂttetszĆvĂ© vĂĄlnak, Ă©s egy felirat gomb pozicionĂĄlva van jobb alul kör alakĂș hĂĄttĂ©rrel, kissĂ© nagyĂtva az ikonjĂĄt.
Extra nagy kĂ©pernyĆkon a fĆ oszlopnak van egy pszeudo-eleme, amely mĂłdosĂtja a felsĆ pozĂciĂłjĂĄt Ă©s magassĂĄgĂĄt.
A fĆ oszlop interaktĂv cĂmeinek maximĂĄlis szĂ©lessĂ©ge 620 kĂ©ppont. iOS Ă©s Android eszközökön a szĂnsĂ©ma tartalmaz sötĂ©t hĂĄtteret, egy szabvĂĄnyos szĂnƱ szĂnt Ă©s egy sötĂ©t mĂłd variĂĄnst. SötĂ©t mĂłdban a pillĂ©r szĂn a sötĂ©t mĂłd verziĂłra mĂłdosul, ha elĂ©rhetĆ.
iOS-en Ă©s Androidon a kĂŒlönbözĆ cikktĂpusok elsĆ bekezdĂ©sĂ©nek elsĆ betƱje egy mĂĄsodlagos pillĂ©r szĂnt hasznĂĄl. A cikkfejlĂ©cek rejtve vannak nulla magassĂĄggal, mĂg a bĂștor burkolĂłknak minimĂĄlis belsĆ margĂłja van. Ezekben a burkolĂłkban a cĂmkĂ©k fĂ©lkövĂ©rek, specifikus betƱtĂpusokat hasznĂĄlnak, ĂĄtveszik a pillĂ©r szĂnĂ©t Ă©s nagybetƱsek. A fĆcĂmek nagyok, fĂ©lkövĂ©rek, sötĂ©t szĂnƱek Ă©s alsĂł belsĆ margĂłval rendelkeznek.
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ĂĄltak, 14px felsĆ margĂłval, -10px bal margĂłval, Ă©s szĂ©lessĂ©ge a teljes nĂ©zeti szĂ©lessĂ©g mĂnusz a görgetĆsĂĄv szĂ©lessĂ©ge. MagassĂĄguk automatikusan igazodik.
- Ezekben a kĂ©p kontĂ©nerekben a belsĆ ĂĄbra elemek, kĂ©pek Ă©s linkek ĂĄtlĂĄtszĂł hĂĄttĂ©rrel rendelkeznek, megegyezve a teljes nĂ©zeti szĂ©lessĂ©ggel mĂnusz a görgetĆsĂĄv szĂ©lessĂ©gĂ©vel, Ă©s automatikusan igazodĂł magassĂĄggal.
- A bevezetĆ szakaszoknak 4px felsĆ, 24px alsĂł belsĆ margĂłja Ă©s -10px jobb margĂłja van.
- A bevezetĆ belsĆ kontĂ©neren belĂŒli bekezdĂ©sek a következĆ betƱkĂ©szletet hasznĂĄljĂĄk: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif.
- A bevezetĆ belsĆ kontĂ©neren belĂŒli linkek Ă©s listaelem linkek megtartjĂĄk ezeket a stĂlusozĂĄsi szabĂĄlyokat.
HozzĂĄszĂłlĂĄs cikkekben a bevezetĆben lĂ©vĆ linkek egy adott szĂnnel, alĂĄhĂșzĂĄssal Ă©s hĂĄttĂ©rkĂ©p nĂ©lkĂŒl vannak stĂlusozva. iOS-en Ă©s Androidon a funkciĂł, szabvĂĄnyos vagy hozzĂĄszĂłlĂĄs cikkekben a linkek fölĂ© hĂșzva az alĂĄhĂșzĂĄs szĂne a cikk tĂ©mĂĄjĂĄhoz igazodik. Ezekben a cikkekben a meta szakasznak nincs margĂłja, Ă©s az elemek, mint a szerzĆi alĂĄĂrĂĄs Ă©s szerzĆ linkek a tĂ©ma szĂnĂ©t hasznĂĄljĂĄk. EzenkĂvĂŒl a meta egyĂ©b szakasznak nincs belsĆ margĂłja.
iOS Ă©s Android eszközökön a következĆ CSS szabĂĄlyok vonatkoznak a funkciĂł, szabvĂĄnyos Ă©s hozzĂĄszĂłlĂĄs cikk kontĂ©nerekre:
- A bĂștor burkolĂł meta egyĂ©b szakaszĂĄban lĂ©vĆ SVG elemek vonalszĂne az Ășj pillĂ©r szĂnre lesz ĂĄllĂtva.
- A kiemelĆ elemek felirat gombja flex kontĂ©nerkĂ©nt jelenik meg, közĂ©pre igazĂtva 5px belsĆ margĂłval, 28px szĂ©lessĂ©ggel Ă©s magassĂĄggal, Ă©s 14px-re jobbrĂłl pozicionĂĄlva.
- A cikktestnek 12px bal Ă©s jobb oldali belsĆ margĂłja van.
- A cikktestben lĂ©vĆ nem bĂ©lyegkĂ©p, nem merĂŒlĆ kĂ©pĂĄbrĂĄknak nincs margĂłjuk, szĂ©lessĂ©ge a nĂ©zeti szĂ©lessĂ©g mĂnusz 24px Ă©s a görgetĆsĂĄv szĂ©lessĂ©ge, Ă©s automatikus magassĂĄguk. Felirataiknak nincs belsĆ margĂłjuk.
- A merĂŒlĆ kĂ©pĂĄbrĂĄk a teljes nĂ©zeti szĂ©lessĂ©get foglaljĂĄk el mĂnusz a görgetĆsĂĄv szĂ©lessĂ©ge.
- A cikktest prĂłzai szakaszĂĄban lĂ©vĆ idĂ©zett idĂ©zĆjelek elĆtt pszeudo-elem van ennek megfelelĆen stĂlusozva.
iOS Ă©s Android eszközökön a cikktestben lĂ©vĆ idĂ©zett szöveg Ă©s linkek stĂlusa mĂłdosul. Az idĂ©zett szöveg egy, az Ășj pillĂ©r tĂ©mĂĄnak megfelelĆ szĂnnel van jelölve. A linkek az elsĆdleges pillĂ©r szĂnĂ©ben jelennek meg, alĂĄhĂșzva egy specifikus eltolĂĄssal Ă©s szĂnnel, amely az Ășj pillĂ©r szĂnĂ©re vĂĄltozik fölĂ© hĂșzĂĄsra.
SötĂ©t mĂłdban a cikkfejlĂ©cek hĂĄttere sötĂ©tszĂŒrke lesz. A cĂmkĂ©k Ă©s fĆcĂmek a tĂ©ma szĂneit veszik fel a jobb kontraszt Ă©s olvashatĂłsĂĄg Ă©rdekĂ©ben. A bevezetĆ szöveg Ă©s szerzĆi alĂĄĂrĂĄsok is stĂlusozva vannak, hogy lĂĄthatĂłak Ă©s konzisztensek legyenek a teljes designnal.
Ez a CSS kĂłd stĂlusokat hatĂĄroz meg kĂŒlönbözĆ cikk kontĂ©nerekhez Android Ă©s iOS eszközökön. BeĂĄllĂtja a szerzĆi alĂĄĂrĂĄsok Ă©s idĂ©zett szöveg szĂnĂ©t egy Ășj pillĂ©r szĂnre, alkalmazza ugyanezt a szĂnt az SVG vonalakra, Ă©s egy specifikus szĂnt hasznĂĄl a kĂ©p