Ez a CSS kód egy "Guardian Headline Full" nevű egyedi betűkészlet-családot határoz meg 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 URL-címeit a böngésző betöltéséhez. A betűvastagságok a világos (300) és a félig félkövér (600) között mozognak, mindegyik normál és dőlt stílusban.
Ez a CSS kód több betűkészlet-családot és stílust határoz meg a Guardian weboldal számára. Meghatározza a különböző betűfájlok forrásait WOFF2, WOFF és TrueType formátumokban, valamint azok vastagságait és stílusait. Például a Guardian Headline Full betűkészlet tartalmaz félkövér, félkövér dőlt, fekete és fekete dőlt változatokat, míg a Guardian Titlepiece félkövér stílust használ.
A kód tartalmaz média lekérdezéseket is, amelyek a fő tartalom átlátszóságát szabályozzák, elhalványulva jelenik meg, ha a szkriptelés engedélyezett és a csökkentett mozgás nem preferált. Ezenkívül különféle CSS egyéni tulajdonságokat (változókat) állít be a webhelyen használt színekhez és stílusokhoz, például átfedő elhalványulások, feliratok és szövegszínek.
A cikkelemekhez stílusokat határoz meg a címsorokhoz, meghatározva a betűkészlet-családot, a vastagságot, a méretet és a sor magasságot, nagyobb képernyők esetén módosításokkal. Egyes elemek, például a címben lévő konkrét span-ok, rejtve vannak a megjelenítésből.
A cikkcímeknél a link vagy a sorozatnév beágyazottan jelenik meg egy meghatározott színnel, a Guardian Headline betűkészlet 20px méretben és félkövér vastagsággal, egyéni aláhúzással és 115%-os sor magassággal. A cím link fölé húzva aláhúzódik.
Az interjúalanyok nevei világos, dőlt, 28px-es betűméretben jelennek meg ugyanazzal a sor magassággal.
A cikk összefoglalója és annak linkjei közepes színt, 17px-es, 500 vastagságú betűt használnak, ami szélesebb képernyőkön 20px-re nő. Az összefoglaló linkjei alsó szegélyt kapnak fölé húzva.
A feliratok és videó átirat linkek kisebb, sans-serif betűkészletben, 12px méretben, 130%-os sor magassággal jelennek meg.
A szerzői linkek a Guardian Headline betűkészletet használják 17px-en és félkövérrel, míg a szerzői gombok közepes vastagságú sans-serif betűkészlettel rendelkeznek. A publikációs dátum felirat színt használ.
A görgethető idézetek világos színű, 32px-es címsor betűkészlettel rendelkeznek (ami nagy képernyőkön 42px-re nő) speciális számstílussal, és felirataik 14px-es sans-serif betűkészletben jelennek meg. Közepes képernyőkön ezek a média szövegszíneit veszik fel.
A fő tartalom első betűje egy nagy, színes iniciálé, amely a címsor betűkészletét használja.
A média szakaszok teljes nézeti magasságú hátteret kapnak, kissé túlnyúlnak a tárolón negatív margókkal, és rács elrendezést használnak. Mobilon a cím a bútor területre kerül, míg asztali gépen két oszlopos rácsba vált, ahol a média tároló a legtöbb helyet foglalja el.
Szélesebb képernyőkön a média szakasz fix szélességű, és színes oldalsávokat ad hozzá szegélyekkel, hogy kitöltse a nézeti területet, keretes megjelenést adva.
A média elem tömör szegéllyel rendelkezik és jobbra pozicionálva van, szélessége a nézeti terület és a test szélessége alapján számítva. Nagyobb képernyőkön a test szélesség meghatározott töréspontoknál módosul: 978px 61.25em-nél, 1138px 71.25em-nél és 1298px 81.25em-nél.
A cikk tartalom rács elrendezése változik a képernyő méretével. Kisebb képernyőkön a média, meta, standfirst és test függőlegesen egymásra rendeződik. Közepes képernyőkön (61.25em és afölött) két oszlopos elrendezést használ, ahol a média mindkét oszlopot átfogja, és a többi elem ennek megfelelően rendeződik. Nagyobb képernyőkön (71.25em és 81.25em) több oszlopot ad hozzá és finomítja a rács területeket a jobb szervezés érdekében.
A standfirst felső margóval rendelkezik, és a sorok rejtve vannak. A fejlécek és videók feliratai ikonokat tartalmaznak meghatározott stílussal és térközzel. A "Cikk hallgatása" gomb függőleges margókkal rendelkezik.
A fejléc relatívan pozicionálva van, magas z-indexszel. iOS-en a média fejlécek bizonyos pszeudo elemei rejtve vannak. Ha a szkriptelés ki van kapcsolva, az elrendezés egyszerűbb, egymásra rendezett struktúrára adaptálódik különböző képernyőméreteknél.
Egy screen-reader-only osztály vizuálisan rejti el a tartalmat, de hozzáférhetővé teszi a segédtechnológiák számára.
A fő oszlop interaktív tartalmához a támogató ábrák 75%-os szélességre vannak állítva, és nem törlik az előző elemeket.
Közepes képernyőkön (46.25em és szélesebb) ezek az ábrák 75%-os szélességet tartanak, statikusan pozicionálva, lebegés nélkül, és szabványos sor magassággal rendelkeznek felső margó nélkül.
Nagyobb képernyőkön (71.25em és afölött) az ábráknak nincs bal margójuk, és felirataik statikusan pozicionálva vannak, fix szélesség nélkül.
Extra nagy képernyőkön (81.25em és afölött) az ábrák megtartják 75%-os szélességüket bal margó nélkül, és a feliratoknál nincs maximális szélesség korlátozás.
Közepes és nagy képernyőkön (46.25em-től 61.24em-ig) a fő oszlopba ágyazott immerzív elemeknek 20px negatív jobb margójuk van.
Statikus és videó fejléceknél a címsor tárolók és interjúalany szakaszok 10px oldalsó térközzel rendelkeznek kis képernyőkön, ami 20px-re nő 30em és szélesebb képernyőkön.
Ezen fejlécek média tárolója kitölti a rács terület teljes szélességét és magasságát. 61.25em és nagyobb képernyőkön 4:5 képarányt tart fenn.
A média tárolón belüli kép burkolók a tetejéhez tapadnak és kitöltik a rendelkezésre álló területet rejtett túlcsordulással. Nagyobb képernyőkön (61.25em+) relatív pozícióra váltanak.
Ezen burkolókban lévő összes kép és kép teljesen lefedi a tárolóikat anélkül, hogy torzítanák a képarányt.
A képeket követő további elemek, például span-ok és linkek rejtve vannak.
Egy másodlagos kép réteg (img-2) abszolút pozícióban van a bal felső sarokban.
A mobil bútor burkolók az aljához tapadnak és rugalmas oszlop elrendezéssel rendelkeznek háttérszínnel. Nagyobb képernyőkön (61.25em+) a normál tartalom folyásába kerülnek.
Ezen burkolókon belül a címek másodikként, az interjúalany információk harmadikként jelennek meg a sorrendben.
Kisebb képernyőkön (61.24em-ig) egy átmenetes átfedés elhalványulási hatást hoz létre a mobil bútor felett.
A statikus és videó fejlécekben a címsor tárolók alul pozicionálva vannak térközzel, háttérszínnel és 2-es z-indexszel. Rács elrendezést használnak a címsorokhoz.
Mind az elsődleges, mind a másodlagos címsorok ugyanazon a rács területen helyezkednek el a tárolón belül.
61.25em-nél szélesebb képernyőkön állítsd be a statikus és videó fejlécek címsor tárolóját a felső margó eltávolításával, 540px maximális szélesség beállításával és felső szegély hozzáadásával.
61.24em-ig terjedő kisebb képernyőkön igazítsd az első címsort az elejére. A második címsornak 620px maximális szélességgel kell rendelkeznie, első betűje nagybetűvel. Legalább 30em széles képernyőkön toljd 20px-rel balra, és 61.25em vagy szélesebb képernyőkön pozícionáld 4px-re a tetejétől.
Ha a csökkentett mozgás preferált, jelenítsd meg a címsor tárolót blokkként és távolítsd el a címsorok felső margóit 46.24em szélességű képernyőkön. Ezenkívül adj 10px térközöt a második címsor tetejéhez.
Az interjúalany szakaszt az 'interjúalany' rács területre kell helyezni 20px alsó térközzel. A videó vezérlők alul rögzítettek.
46.24em széles képernyőkön állítsd a fejléc magasságát 100%-ra. iOS eszközökön módosítsd a rács sorokat és az interjúalany térközt az alsó eszköztár miatt. Androidon módosítsd a rács sorokat és a térközt a felső sáv miatt.
Fekvő tájolásban 700px széles képernyőkön add meg a fejléc magasságát a tartalomhoz igazítva, és módosítsd a média tárolót és burkolót ennek megfelelően.
Alkalmazásoknál rejtsd el a címkéket a kép burkolókban.
A videó tárolóknak ki kell tölteniük a területüket, a videóknak lefedniük a területet és elhalványulva megjelenniük aktiváláskor. A vezérlők jobb alul pozicionálva vannak kör alakú gombokkal.
Szélesebb képernyőkön a média elemekhez állítsd a videó tároló képarányát 4/5-re.
A görgethető idézetek teljes nézeti magasságot foglalnak el egy ragadós média tárolóval, amely abszolút pozíciójú elemeket tartalmaz.
A görgethető-idézet szakasz képe teljesen lefedi a tárolóját, megtartva a képarányt. Az idézet tároló a nézeti terület tetejéhez ragadva pozicionálva van és teljes szélességet foglal el, elemei félig átlátszó háttérrel és rugalmas elrendezéssel rendelkeznek az idézetek és feliratok számára. Nagyobb képernyőkön a háttér átlátszóvá válik, és az elrendezés két oszlopos rácsra vált.
A görgethető-idézet komponens válaszolóan módosítja szélességét és margóit, közepes képernyőkön kitágulva, és nagyobb kijelzőkön középre igazítva oldalsó háttérekkel. Magassága nézeti egységek és tartalom hossza alapján számítódik, csökkentett mozgás preferenciáknál lerövidítve. iOS eszközökön specifikus nézeti egységek használatával biztosítja a megfelelő méretezést.
A fő oszlop interaktív elemei, például ábrák és idézet blokkok sima belépési animációkkal rendelkeznek, elhalványulva és becsúszva a nézetbe. Sötét módban a színváltozók módosulnak a jobb kontraszt és olvashatóság érdekében, megváltoztatva az árnyalatokat a médiához, szerzői adatokhoz és idézetekhez a téma megfelelően.
A szöveg keveréke a CSS kódnak és egy Anthony Hopkinsről szóló cikknek. Íme a cikk rész újraírva folyékony, természetes magyarra:
---
Kép megtekintése teljes képernyőn
Anthony Hopkins 2017-ben. Fotó: Sebastien Micke/Paris Match/Contour/Getty Images
"Milyen az időjárás nálatok?" – kérdezi Anthony Hopkins, amint videóhívásunk elkezdődik. Bár Kaliforniában él évtizedek óta, walesi gyökereiből megmaradtak – különleges, dallamos hangjában, amely most talán egy kicsit rekedtebb, és az időjárás iránti érdeklődésében. Sötét este van Londonban, de derült, napos reggel Los Angelesben. Hopkins illeszkedik a hangulathoz, vidámnak tűnik és türkiz-zöld inget visel.
"Ötven éve jöttem ide" – mondja. "Valaki megkérdezte: 'Eladod magad?' Azt válaszoltam: 'Nem, csak szeretem az éghajlatot és leszolizni.' De tényleg szeretem Los Angelest. Nagyszerű életem volt itt."
Mégis, a dolgok nem voltak teljesen nagyszerűek mostanában. Januárban erdőtüzek elpusztították Hopkins házát Pacific Palisades-ben. "Egy kicsit katasztrófa volt" – jegyezi meg vidám understatementtel. "Hálásak vagyunk, hogy senki sem sérült meg, és a macskáinkat és kis családunkat biztonságba helyeztük." Ő és felesége, Stella akkor Szaúd-Arábiában voltak, ahol
