Ez a CSS kód egy "Guardian Headline Full" nevű egyéni betűkészlet-családot definiál, amely több betűvastagságot és stílust tartalmaz. Tartalmaz világos, normál, közepes és félig vastag vastagságokat, mindegyiket normál és dőlt stílusban. A betűfájlok WOFF2, WOFF és TrueType formátumban érhetők el, amelyek a Guardian szerverén találhatók.
A Guardian Headline Full betűkészlet-család több stílust is tartalmaz, mindegyik több formátumban (WOFF2, WOFF és TTF) elérhető. A stílusok a következők:
- Félkövér (700-as vastagság, normál stílus)
- Félkövér dőlt (700-as vastagság, dőlt stílus)
- Fekete (900-as vastagság, normál stílus)
- Fekete dőlt (900-as vastagság, dőlt stílus)
- Világos (300-as vastagság, normál stílus)
- Világos dőlt (300-as vastagság, dőlt stílus)
- Normál (400-as vastagság, normál stílus)
- Normál dőlt (400-as vastagság, dőlt stílus)
Ezenkívül elérhető a Guardian Titlepiece betűtípus Félkövér (700-as vastagság, normál stílus) változatban.
A "Guardian Headline Full" betűkészlet-család több betűfájlt tartalmaz különböző vastagságokban és stílusokban. Minden betűtípus WOFF2, WOFF és TrueType formátumban érhető el a megadott URL-eken. A vastagságok 400 (normál) és 900 (fekete) között mozognak, mindegyikhez normál és dőlt stílus is tartozik.
@font-face {
font-family: Guardian Headline;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body>div .content--interactive-grid #maincontent,
.content--interactive>div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body>div .content--interactive-grid,
.content--interactive>div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border . right-column";
}
#article-body>div .content--interactive-grid .content__standfirst,
.content--interactive>div .content--interactive-grid .content__standfirst,
#comment-body .content--interactive-grid .content__standfirst,
[data-gu-name=body] .content--interactive-grid .content__standfirst,
#feature-body .content--interactive-grid .content__standfirst {
padding-bottom: 0;
}
#article-body>div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive>div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
/ A feliratstílus folytatódik itt /
}
}
Az immerzív ábrák feliratai és az interaktív rács tartalma esetén a belső tér 4 képpont felül és 0 máshol. Az interaktív rácsokon belüli "lines" és "meta" nevű elemek egy specifikus rács területen helyezkednek el. A "lines" elemek magassága a tartalmukhoz igazodik, és 5 képpont felső margóval rendelkeznek, míg a "meta" elemeknek 18 képpont a felső margója.
81,25 em-nél szélesebb képernyőkon az interaktív rácsok öt oszlopos elrendezést használnak fix és rugalmas szélességekkel.
iOS és Android eszközökön a cikkfejlécek specifikus betűtípusokat és vastagságokat használnak a bevezető szöveg, a szakcímkék és a szerzői sorok számára. A szakcímkék nagybetűsek, és a kulcssorok belső tere kiigazított. Az ábrák háttere átlátszó, és a képek kissé jobbra vannak eltolva. A főcímek háttere átlátszó, a belső tér kiigazított, és 24 képpontos betűmérettel, 115%-os soremagassággal rendelkeznek.
Android esetén a fő- és alcímek blokkként jelennek meg. iOS-en és Android-on is az alcímek világos betűvastagsággal, balra igazítva és kiegyensúlyozott szövegtördeléssel vannak stílusozva.
A cikkbevezetőknek nincs belső térük, és a másolatuk el van rejtve.
A szerzői sor és a publikációs dátum elemek 17 képpontos betűméretet, normál vastagságot és 130%-os soremagasságot használnak. A szerzői szöveg és a szerzői linkek színe #707070.
A bevezető bekezdések 20 képpontosak, normál stílusúak, világos vastagságúak és 115%-os soremagassággal rendelkeznek. A bevezető bekezdésekben lévő linkek félkövérek, #707070 színűek, alsó szegéllyel és háttérkép nélkül.
A főcím szövegének színe #dcdcdc.
A képek és azok tárolói 100vw mínusz 20 képpont szélességűek, automatikus magassággal és maximum 620 képpontos szélességgel. A belső ábra elemek magassága nincs beállítva. A vitrinke képek maximális szélessége 280 képpont.
A navigációt követő bizonyos szakaszok és oldalsávok el vannak rejtve. Az atom elemeknek nincs margójuk vagy belső térük.
A vitrinke elemek és azok tartalmai maximum 210 képpont szélesek, ami 260 képpontra növekszik 61,25 em-nél szélesebb nézeti tartományok esetén. A szövegközi és vitrinke elemeken belüli felirat span-ok is ennek megfelelően vannak stílusozva.
A testrészen belüli feliratoknál a span szöveg 14 képpontos, világosszürke színű (#707070) és inline megjelenésű. A szövegközi és vitrinke elemek felirataiban az első span inline-block.
71,25 em-nél szélesebb képernyőkon a szövegközi és vitrinke elemek feliratai relatívan pozicionáltak és a szélességük visszaállított.
Az interaktív tartalmú cikkek elrendezése "header", "headline", "standfirst", "lines", "meta" és "body" nevű rács területeket használ. Nagyobb képernyőkon (71,25 em és afölött) a rács elrendezés három oszlopra változik "header", "meta", "border", "standfirst" és "body" területekkel. A fő oszlop margója eltávolított, a bal szegély elrejtett, és a bekezdések szélessége 620 képpontra van állítva.
A főcím elemek specifikus betűbeállításokkal rendelkeznek: Guardian Headline vagy hasonló betűtípusok, 24 képpontos méret, világos vastagság (300) és világosszürke szín (#dcdcdc). A belső tér 0–10 képpont kis képernyőkön, 0–20 képpont közepes képernyőkön (30 em és afölött), és eltávolított nagy képernyőkön (71,25 em és afölött).
A kulcssorok és vonalak elrejtettek. Nagy képernyőkön a cikkfejléc abszolút pozicionált, 20 képpontra balról.
A cikkfejléc linkek 17 képpontos betűméretet és normál stílust használnak. A fejléc felső belső tere 2 képpont, és a címkéknek felső szegélyük és belső térük van (0–10 képpont kis képernyőkön, 0–20 képpont közepes képernyőkön). Nagyobb képernyőkön (46,25 em és afölött) a felső szegély eltávolított, és a belső tér 0 a legnagyobb képernyőkön (71,25 em és afölött).
Ez a CSS kód egy interaktív cikk elemeit stílusozza.
A cikkcímek és linkek esetében a soremagasságot 115%-ra, a szövegszínt #ff5943-ra állítja. Amikor a címlinkek fölé viszik az egeret, az aláhúzás színe #dcdcdc-re változik.
A bevezető (cikkösszefoglaló) specifikus betűtípusokat, szürke színt (#606060), 24 képpontos betűméretet, normál stílust, 400-as vastagságot és 115%-os soremagasságot használ. A belső tér a képernyő szélességétől függően változik: 2px 10px kisebb képernyőkön, 2px 20px 30 em és szélesebb képernyőkön, és nincs belső tér 71,25 em és afölötti képernyőkön. A bevezetőben lévő linkek #707070 színűek, és 2px alsó szegélyt kapnak hover állapotban.
A meta szekcióban lévő közösségi média gomboknak nincs átmeneti hatásuk. Hover állapotban a háttérük #121212, a szegélyük #121212, a szövegük #dcdcdc, és bármely SVG ikon is #dcdcdc kitöltéssé és #121212 háttérrel változik.
A megosztás gombok el vannak rejtve. Egy kis 4px inline tér elem definiált. A cikk testrésze számára egy név szerinti rács tároló két oszlopos elrendezést használ maximum 620 képpontos szélességgel.
46,25 em-nél szélesebb képernyőkön a név szerinti rács tároló két oszlopot használ, mindegyik 310 képpont széles. A rács páratlan számú elemei 5px jobb belső térrel rendelkeznek (10px szélesebb képernyőkön), míg a páros számú elemei 5px bal belső térrel (10px szélesebb képernyőkön).
A rácsban lévő címsoroknak (h2) 17 képpontos betűmérete, felső szegélye, 2px felső belső tere és maximum 620 képpontos szélessége van. Ezeket a címsorokat követő listaelemeknek nincs belső térük vagy margójuk, az első elem más szövegszínt használ. A listaelem jelölői elrejtettek, és a bekezdés szöveg specifikus betűkészlet-családot, 14 képpontos méretet és 130%-os soremagasságot használ.
Az immerzív ábráknak sötét hátterük van, és a bennük lévő képek teljesen átlátszóként kezdenek. Amikor a "fade-in" osztályt alkalmazzák, a képek teljesen átlátszatlanná válnak egy sima 1 másodperces átmenettel.
Az emlékfejléc kitölti a teljes nézeti szélességet (mín
