A Guardian Headline Full betűtípuscsalá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 regular 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 sajátos stílusa van az elemekhez. Az ezen oszlopon belüli elemeknek nincs felső vagy alsó margójuk, de tartalmaznak belső térközt. Amikor egy bekezdés követ egy elemet, a térköz ennek megfelelően módosul. A soron belüli elemek maximális szélessége 620 pixel.
Nagyobb képernyőkön a soron belüli ábrák szintén 620 pixelre korlátozódnak. Speciális stílus vonatkozik a videóhurkokra, beleértve a gombok elhelyezését és a feliratok pozicionálását. A saját szerveren tárolt videók maximális szélessége 620 pixel, középre igazított margókkal, míg az immerzív videók teljes szélességűre bővülnek, nagyobb képernyőkön módosított margókkal.
A színváltozók határozzák meg a témát, például a dátumvonal, fejlécszegélyek és feliratszínek. Sötét módban ezek a színek sötétebb palettára váltanak. Az egyes elemeket követő első bekezdés további felső belső térközt kap, és az első bekezdés első betűje elkülönülten stílusos lehet.A CSS kód stílusokat határoz meg a betűdíszekhez, idézetekhez és különféle elrendezési elemekhez egy weboldal különböző részein, például cikkekben, hozzászólásokban és riportokban. Meghatározza a bekezdések első betűjének konkrét betűtípusait, méreteit és színeit, módosítja az immerzív és bemutató elemek szélességét és pozícióját, és létrehoz egy reszponzív rács elrendezést nagyobb képernyőkön. A stílusok média lekérdezéseket is tartalmaznak a különböző képernyőméretekhez való alkalmazkodáshoz.A bútorburkoló a bevezető tartalom relatív pozícióját állítja be 2 pixel felső belső térközzel és jobb margó nélkül. A bevezetőn belül a listaelemek betűmérete 20 pixel, a hivatkozásoknak nincs szegélyük, nincs háttérképe, 6 pixel eltolású aláhúzásuk van, és a színük a `--headerBorder` egyéni tulajdonságból származik (alapértelmezés szerint `#dcdcdc`). Rámutatáskor a hivatkozás aláhúzása a `--new-pillar-colour` által meghatározott színre változik.
Nagyobb képernyőkön (61.25em és afölött) az ábráknak nincs bal margójuk, és a specifikus szerepkörrel rendelkező soron belüli elemek maximális szélessége 630 pixel. 71.25em és afölött az elrendezés egy rácsot használ meghatározott oszlopokkal és sorokkal. Egy díszítő vonal jelenik meg a meta szakasz előtt, és egy függőleges vonal kerül hozzáadásra a bevezető előtt. A bekezdések szegélyei ezen a törésponton eltűnnek.
81.25em-nél a rács több oszlopot tartalmazóra módosul, és a díszítő vonalak áthelyeződnek.
A főcímek betűvastagsága 600 és maximális szélességük 620 pixel, betűméretük 32 pixel. Nagyobb képernyőkön (71.25em és afölött) a főcím betűmérete 50 pixelre nő, és a maximális szélesség 540 pixelre csökken.
Közepes képernyőkön (46.25em és afölött) a `keyline-4` osztállyal vagy a `data-gu-name=lines` attribútummal rendelkező elemeknek nincs jobb margójuk. Nagyobb képernyőkön (61.25em és afölött) ezek az elemek elrejtve vannak. SVG vonalaik a `--headerBorder` színt használják.Ez a CSS kód stílusokat határoz meg egy weboldal elrendezéséhez, különösen egy bútor témájú burkolóhoz. 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, belső térközök, színek és pozícionálás módosításait, konkrét 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, például sötét mód funkciókhoz és háttérárnyalatokhoz, és biztosítja a reszponzív viselkedést eszközök között.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 szakaszban lévő szöveg és összefoglalók világosszürkék. A közösségi média gomboknak színes szegélyük és ikonjuk van, az ikon és a szöveg színe rámutatáskor változik.
A meta szakaszban lévő hivatkozások egy témaszínt használnak, és ezt a színt tartják meg rámutatáskor, aláhúzással ugyanabban a színben. A bevezető szakaszban a hivatkozások világosszürke vonallal vannak aláhúzva, amely rámutatáskor a témaszínre változik. A bevezetőben lévő bekezdések és listaelemek világosszürkék.
61.25em-nél szélesebb képernyőkön a bevezető első bekezdésének felső szegélye van, amely 71.25em-nél szélesebb képernyőkön eltűnik. Ezen nagyobb képernyőkön egy színes vonal is megjelenik a bevezető előtt.
46.25em-nél szélesebb képernyőkön a furniture-wrapper sötét háttérszínt és jobb szegélyt kap.A CSS egy `.furniture-wrapper`-t definiál pszeudo-elemekkel, amelyek oldalsávokat hoznak létre. Ezek a szélesség és pozíció módosításával alkalmazkodnak a nézetmérethez, hogy egy középre igazított, rögzített szélességű tartalomterületet (738px, 978px, 1138px, 1298px) tartsanak fenn különböző töréspontokon, figyelembe véve a görgetősáv szélességét. Szegélyek és háttérszínek kerülnek alkalmazásra CSS egyéni tulajdonságok használatával.
A cikkeken belüli címsorokhoz a `h2` elemek könnyű betűvastagságot (200) használnak, de vastagra (700) váltanak, ha `strong` elemet tartalmaznak.
A `@font-face` szabályok betöltik a "Guardian Headline Full" betűtípuscsaládot több vastagságban és stílusban (Light, Light Italic, Regular, Regular Italic) 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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src
