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. Tartalmazza a könnyű, normál, közepes és félig félkövér vastagságokat, mindegyiket normál és dőlt változatban. Minden stílushoz a kód három különböző betűfájl-formátumot (woff2, woff és ttf) határoz meg, amelyek a Guardian szerverein találhatók, biztosítva ezzel a széles böngészőkompatibilitást.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
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;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-cAz interaktív tartalom oszlopaihoz bal oldali szegély kerül, meghatározott pozicionálással és z-indexszel. Nagyobb képernyőkön a szegély pozíciója kissé módosul. Ezeken belül az atom elemeknek nincs felső vagy alsó margójuk, de tartalmaznak belső térközt. Ha egy bekezdés egy atom elemet követ, a belső térköz eltávolításra kerül, és helyette margók kerülnek hozzáadásra. A soron belüli elemek maximális szélessége korlátozott.
A beágyazott szerepkörű ábrák közepes méretű képernyőkön és afölött szintén maximális szélességgel rendelkeznek.
Egyéni tulajdonságok határozzák meg a különböző elemek színeit, mint például a dátumvonalak, fejlécek, feliratok és szolgáltatások. Az elsődleges pillér szín alapértelmezés szerint a szolgáltatás színe, ha nincs beállítva.
Az interaktív oszlopokon belüli vagy általában atom elemeknek nincs belső térközük. A különböző tartalomtestekben lévő specifikus elemek vagy vízszintes vonalak utáni első bekezdés extra felső belső térközt kap.
Ezen felül ezen bekezdések első betűje cseppkapitálaként van stílusozva, meghatározott betűtípussal, mérettel, vastagsággal és színnel, a színezéshez egyéni tulajdonságokat használva.Az adott tartalomterületeken lévő vízszintes vonalak utáni bekezdések esetében távolítsuk el a felső belső térközt.
Korlátozzuk a pullquote szélességét 620px-re cikk, interaktív, komment és szolgáltatás testekben.
A fő tartalomban és cikk konténerekben lévő bemutató elem feliratokhoz állítsuk a pozíciót statikusra, a szélességet 100%-ra, a maximális szélességet pedig 620px-re.
Az átfogó elemeknek a teljes nézeti szélességet kell kitölteniük mínusz a görgetősáv. 71.24em-ig terjedő képernyőkön szélességüket 978px-re kell korlátozni. Ezeken a képernyőkön a feliratokhoz adjunk 10px vízszintes belső térközt, ami 30em és 71.24em közötti képernyőkön 20px-re nő.
Közepes méretű képernyőkön (46.25em-től 61.24em-ig) korlátozzuk az átfogó elemeket 738px-re. Kisebb képernyőkön (46.24em-ig) távolítsuk el a bal margót, igazítsuk a bal széléhez, és adjunk hozzá 10px negatív bal margót (30em és szélesebb képernyőkön 20px). Ezeken a kisebb képernyőkön a feliratok 20px vízszintes belső térközt kapnak.
A nagy képernyőkön (61.25em és afölött) a bútor burkolóhoz CSS grid kerül használatra meghatározott oszlopokkal és sorokkal. Stílusozzuk a címsorok első gyermekét felső szegéllyel. Pozícionáljuk a meta szakaszt relatívan felső belső térközzel és jobb margó nélkül. A bevezető szakaszokban állítsuk be az alsó margókat, a lista elem betűméretét 20px-re, és stílusozzuk a linkeket aláhúzással (az aláhúzás színéhez egyéni színt használva, amely hover állapotban változik). A bevezető első bekezdése felső szegélyt kap és nincs alsó belső térköze, bár ez a szegély nagyon nagy képernyőkön (71.25em és afölött) eltávolításra kerül.
Továbbá a burkolón belüli ábrákhoz távolítsuk el a bal margót, és állítsunk be 630px maximális szélességet a beágyazott elemeknek. A legnagyobb képernyőkön (71.25em és afölött) a grid sablon oszlopok a cím, címsor és meta szakaszoktól kezdődően vannak definiálva.A kialakítás egy rácsot használ, amelyben az oszlopok és sorok különböző képernyőméretekhez vannak definiálva. Nagyobb képernyőkön a rács három oszlopos a cím, címsor és meta szakaszokhoz, öt oszlopos a bevezetőhöz, és nyolc oszlopos a portréhoz, arányosan méretezett sorokkal. Közepes képernyőkön a rács két, öt, illetve hét oszlopra módosul, meghatározott sor magasságokkal.
A stílusozás tartalmaz felső szegélyt a meta szakaszhoz és bal szegélyt a bevezetőhöz, mindkettő egyéni színváltozót használva. A címsoroknak van maximális szélességük és betűméretük, amely a képernyőmérettel változik, szélesebb képernyőkön nagyobbá válva. Egyes elemeknek, mint a közösségi megosztás és a komment szakaszoknak, a fejléc színével megegyező szegélyük van, míg mások bizonyos eszközökön el vannak rejtve.
A bevezető szövegének meghatározott belső térköze és betűtulajdonságai vannak, és a fő média terület a rácsban van pozícionálva, szélessége kisebb képernyőkön a görgetősávok és margók figyelembevételével módosul. A feliratok abszolút pozícióban vannak.A bútor burkoló ábra felirata abszolút pozícióban van alul, alsó margó nélkül, belső térközzel, háttérszínnel és szövegszínnel. Szélessége 100%-ra van állítva, minimális magassága 46 pixel. A feliraton belül az első span el van rejtve, míg a második megjelenik és a maximális szélesség 90%-ára van korlátozva. A felirat szövege és SVG ikonjai egy specifikus színváltozót használnak.
30em-nél szélesebb képernyőkön a felirat vízszintes belső térköze növekszik. Egy dedikált felirat gomb abszolút pozícióban van jobb alul, kör alakú háttérrel és skálázott SVG ikonnal, jobb oldali pozíciója nagyobb képernyőkön módosul.
A nagyon széles képernyőkön az interaktív fő oszlopokhoz egy pszeudo-elem módosítja a tetejét és magasságát. Ezeken belüli címsoroknak van maximális szélességük.
iOS-en és Androidon sötét mód színváltozók vannak definiálva, beleértve egy szolgáltatás színét, amely sötét módban változik. Ezen platformokon specifikus cikk konténerek stílusozzák a bizonyos elemek utáni első bekezdés első betűjét másodlagos színnel, a cikk fejléc magasságát nullára állítják, a bútor burkoló belső térközét módosítják, és elrejtik a benne lévő tartalom címkéket.iOS és Android eszközökön a következő stílusok vonatkoznak a szolgáltatás, standard és komment cikk konténerekre:
- **Címkék**: A Guardian címsor vagy serif betűtípusban félkövér, nagybetűs betűtípust használnak, az új pillér színváltozóval színezve.
- **Címsorok**: 32px-re, félkövérre, 12px alsó belső térközzel és sötét szürke színnel (#121212) vannak beállítva.
- **Képek**: Relatívan pozícionálva, 14px felső margóval és negatív 10px bal margóval. Szélessége kitölti a teljes nézeti területet (a görgetősáv figyelembevételével), magassága automatikusan igazodik. A figura belsejében lévő elemek, képek és linkek átlátszó háttérrel rendelkeznek, megegyezve a teljes nézeti szélességgel automatikus magassággal.
- **Bevezető (cikk összefoglaló)**: Tartalmaz 4px felső belső térközt, 24px alsó belső térközt és negatív 10px jobb margót. A bevezetőn belüli bekezdések öröklik ezeket a konténer stílusokat.A CSS kód meghatározott stílusokat állít be a cikk bevezetőihez és metaadatokhoz iOS és Android es
