A Guardian Headline Full betűcsalád számos stílust tartalmaz, különböző vastagságokkal és dőlt változatokkal. A light változat (vastagság 300) elérhető normál és dőlt stílusban, ahogy a normál változat (vastagság 400) is. A medium (vastagság 500) és semibold (vastagság 600) stílusok szintén rendelkeznek normál és dőlt opciókkal. Minden betűtípusfájl elérhető WOFF2, WOFF és TrueType formátumban a Guardian szervereiről.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}A fő interaktív tartalom oszlopnak meghatározott stílusa van az elemekhez. Például az atom elemeknek nincs felső vagy alsó margójuk, de 12px paddingjuk van. Amikor egy bekezdés követ egy atom elemet, az atom paddingja eltűnik és a margók 12px-re állnak be. Az inline elemek szélessége 620px-re korlátozódik.
A loop szerepkörrel rendelkező ábráknál a felirat pozíciója 6-os z-index-szel van beállítva. Egy loop gomb stílusa 32px széles, jobb alsó sarkhoz igazított, meghatározott margókkal. A felirat gomb z-indexe 100.
A saját szerveren tárolt video elemek szélessége 100%, maximum 620px, block megjelenítéssel és 12px margóval vannak beállítva. A videó és annak tárolója is teljes szélességet vesz fel 620px-ig, és középre igazított. Ha a videó immersive, akkor megszűnik a szélességkorlát és a margók, teljesen kiterjed. Nagyobb képernyőkön az immersive videók 1140px szélesre tágulnak negatív bal margóval, és még nagyobb méreteknél 1300px szélesek lesznek még nagyobb negatív margóval.
A színváltozók különböző témaszíneket határoznak meg, mint például a dátumvonal szürke, fejléc szegély, felirat szöveg és a feature piros. Sötét módban néhány szín sötét téma palettára áll át.
A cikktörzsön belül az atom vagy vízszintes vonal utáni első bekezdésnek extra felső paddingje van. Ezenkívül az atom utáni első bekezdés első betűje stílusos, bár a konkrét stílus itt nincs teljesen részletezve.A CSS kód stílusokat határoz meg betűkapcsokhoz, idézetekhez és különféle elrendezési elemekhez egy weboldal különböző részein. A betűkapcsok meghatározott betűtípussal, mérettel és színnel vannak stílusozva, és balra lebegnek. Az idézetek maximális szélességet kapnak. A showcase elemeknél a feliratok statikus pozícióba kerülnek, teljes szélességgel és 620px maximális szélességgel.
Az immersive elemek a teljes nézeti szélességet veszik fel, mínusz a görgetősáv. 71.24em-nél kisebb képernyőkön a maximális szélességük 978px-re módosul, és a felirat paddingje a képernyőmérettől függően változik. Közepes képernyőkön (46.25em-től 61.24em-ig) a maximális szélesség 738px. Kis képernyőkön (46.24em alatt) az immersive elemek negatív bal margót kapnak, hogy a nézeti széléig terjedjenek, a felirat paddingje ennek megfelelően módosul.
Nagyobb képernyőkön (61.25em felett) a furniture wrapper grid elrendezést használ, kétoszlopos struktúrát hozva létre meghatározott sorokkal a cím, főcím, bevezető, meta és portré szakaszokhoz. A főcím elemek első gyermekéhez felső szegély kerül, és a meta szakasz pozíciója abszolút értékre áll.A furniture wrapper beállítja a bevezető tartalom relatív pozícióját 2 képpont felső paddinggel és jobb margó nélkül. A bevezetőn belül a fő tartalomterület alsó margója 4 képpont. A bevezetőn belüli listaelemek 20 képpontos betűméretet használnak. A bevezetőn belüli linkek, beleértve a listaelemekben lévőket, nincsenek szegéllyel, nincs háttérképük, és 6 képpontos eltolással vannak aláhúzva, egyéni színt használva az aláhúzáshoz. Rámutatáskor az aláhúzás színe új pillérszínre változik.
A bevezető első bekezdésének felső szegélye van és nincs alsó paddingje. Nagyobb képernyőkön (61.25em és felett), ha a képernyő legalább 71.25em széles, a felső szegély eltűnik. Legalább 61.25em széles képernyőkön az ábráknak nincs bal margójuk és 630 képpont maximális szélességük van, ha inline.
71.25em és szélesebb képernyőkön a furniture wrapper grid elrendezést használ meghatározott oszlopokkal és sorokkal. Egy díszítő vonal jelenik meg a meta szakasz előtt, 540 képpont szélességgel. A bevezető bekezdéseinek nincs felső szegélyük, és függőleges vonal kerül a bevezető tartalom elé. Még nagyobb képernyőkön (81.25em és felett) a grid több oszloppal és sorral módosul, a meta előtti díszítő vonal 620 képpontra terjed ki, és a bevezető előtti függőleges vonal kissé eltolódik.
A cikkfejléc vagy cím szakasz címkéinek felső paddingje 2 képpont. A főcím vastag betűvastagságot, 620 képpont maximális szélességet és 32 képpontos betűméretet használ. Nagyobb képernyőkön (71.25em és felett) a főcím 540 képpont maximális szélességre és 50 képpontos betűméretre módosul.
Közepes képernyőkön (46.25em és felett) a kulcsszegélyeknek vagy vonalelemeknek nincs jobb margójuk. Nagyobb képernyőkön (61.25em és felett) ezek a vonalak elrejtve vannak. A vonalak egyéni színt használnak a vonalhoz.Ez a CSS kód stílusokat határoz meg egy weboldal elrendezéséhez, különösen egy furniture témájú wrapperhez. Különféle tulajdonságokat állít be olyan elemekhez, mint a meta információk, bevezető szöveg, fő média és feliratok. A stílusok magukban foglalják a margók, padding, színek és pozícionálás módosításait, meghatározott szabályokkal különböző képernyőméretekhez média lekérdezések segítségével. A design egyéni CSS változókat használ a színekhez, mint például `--darkBackground` és `--headerBorderColor`, és biztosítja, hogy az elemek el legyenek rejtve vagy megjelenjenek a nézeti szélességtől függően. A wrappernek sötét háttere van és tartalmaz reszponzív viselkedést a mobiltól az asztali számítógépekig terjedő eszközökhöz.A CSS kód stílusozza a furniture-wrapper osztályon belüli elemeket. A főcímek (h1) vastagok és világosszürkék (#dcdcdc). A főcímekben lévő ábráknak nincs felső margójuk és kis alsó margójuk van.
71.25em-nél szélesebb képernyőkön egy színes vonal jelenik meg a meta szakasz előtt. A meta szakasz szövegei és összefoglalói világosszürkék. A közösségi média linkek és gombok színes szegéllyel rendelkeznek, és meghatározott színt használnak a szöveghez és ikonokhoz, ami sötét háttérre változik rámutatáskor.
A meta szakasz linkjei meghatározott színt használnak, és ezt tartják meg rámutatáskor egyező aláhúzásokkal. A bevezető szakaszban a linkek világosszürke színnel vannak aláhúzva, ami rámutatáskor változik, és a bekezdés szövege világosszürke. Szélesebb képernyőkön az első bekezdésnek lehet vagy elveszítheti a felső szegélyét. A bevezető listaelemei szintén világosszürkék.
71.25em-nél szélesebb képernyőkön egy vonal jelenik meg a bevezető előtt. 46.25em-nél szélesebb képernyőkön a wrapper sötét háttérszínt és jobb szegélyt kap.A furniture wrapper pszeudo-elemeket használ oldalsó szegélyek létrehozásához. A `:before` elem bal oldalon pozícionálva van sötét háttérrel és bal szegéllyel, míg szélessége és bal pozíciója a nézeti szélesség, görgetősáv szélesség és egy 738px-es fix alap szélesség
