Titlul principal Guardian Headline Full include mai multe stiluri, fiecare cu greutăți și italice diferite. Versiunea light (greutatea 300) vine atât în stil regulat, cât și italic, la fel ca și versiunea regulată (greutatea 400). Stilurile medium (greutatea 500) și semibold (greutatea 600) au și ele opțiuni regulate și italice. Fiecare fișier de font este disponibil în formatele WOFF2, WOFF și TrueType de pe serverele Guardian.@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;
}
}Coloana principală de conținut interactiv are stilizări specifice pentru elemente. De exemplu, atomii nu au margini superioare sau inferioare, dar au un padding de 12px. Când un paragraf urmează unui atom, padding-ul atomului este eliminat și marginile sunt setate la 12px. Elementele inline sunt limitate la o lățime de 620px.
Pentru figurile cu rolul de buclă, legenda este poziționată cu un z-index de 6. Un buton de buclă este stilizat să aibă o lățime de 32px, aliniat în dreapta jos cu margini specifice. Butonul de legendă are un z-index ridicat de 100.
Elementele video auto-găzduite sunt setate la o lățime de 100%, limitată la 620px, și afișate ca un bloc cu margini de 12px. Video-ul și containerul său ocupă de asemenea lățimea completă până la 620px și sunt centrate. Dacă video-ul este imersiv, elimină limita de lățime și marginile, extinzându-se complet. Pe ecrane mai mari, videoclipurile imersive se extind la o lățime de 1140px cu o margine stângă negativă, iar la dimensiuni și mai mari, devin de 1300px lățime cu o margine negativă mai mare.
Variabilele de culoare definesc diverse culori tematice, cum ar fi griul pentru dateline, bordura antetului, textul legendei și roșul pentru feature. În modul întunecat, unele culori se ajustează la o paletă de temă întunecată.
În corpul articolului, primul paragraf după un atom sau o linie orizontală are un padding superior suplimentar. În plus, prima literă a primului paragraf după un atom este stilizată, deși stilizarea specifică nu este detaliată pe deplin aici.Codul CSS definește stiluri pentru inițiale mari, citate evidențiate și diverse elemente de layout în diferite secțiuni ale unui site web. Inițialele mari sunt stilizate cu un font, o dimensiune și o culoare specifice și sunt poziționate flotant la stânga. Citatele evidențiate primesc o lățime maximă. Pentru elementele showcase, legendele sunt setate la o poziție statică cu lățime completă și o lățime maximă de 620px.
Elementele imersive sunt setate să ocupe lățimea completă a viewport-ului, minus bara de derulare. Pe ecrane mai mici de 71.24em, lățimea lor maximă este ajustată la 978px, iar padding-ul legendei variază în funcție de dimensiunea ecranului. Pe ecrane medii (46.25em până la 61.24em), lățimea maximă este de 738px. Pe ecrane mici (sub 46.24em), elementele imersive primesc margini stângi negative pentru a se extinde până la marginea viewport-ului, cu padding-ul legendei ajustat corespunzător.
Pentru ecrane mai mari (peste 61.25em), este utilizat un layout de grilă pentru wrapper-ul de mobilier, creând o structură cu două coloane cu rânduri definite pentru titlu, titlu principal, standfirst, meta și secțiuni de portret. O bordură superioară este adăugată primului copil al elementelor de titlu principal, iar poziționarea secțiunii meta este setată la absolut.Wrapper-ul de mobilier setează conținutul standfirst să aibă o poziție relativă cu un padding superior de 2 pixeli și fără margine dreapta. În interiorul standfirst-ului, zona principală de conținut are o margine inferioară de 4 pixeli. Elementele de listă din interiorul standfirst-ului folosesc o dimensiune de font de 20 de pixeli. Legăturile din interiorul standfirst-ului, inclusiv cele din elementele de listă, nu au bordură, nu au imagine de fundal și sunt subliniate cu un offset de 6 pixeli, folosind o culoare personalizată pentru subliniere. La hover, culoarea de subliniere se schimbă într-o nouă culoare de pilon.
Primul paragraf din standfirst are o bordură superioară și fără padding inferior. Pentru ecrane mai mari (61.25em și peste), dacă ecranul are și cel puțin 71.25em lățime, bordura superioară este eliminată. Pentru ecrane de cel puțin 61.25em lățime, figurile nu au margine stângă și au o lățime maximă de 630 de pixeli când sunt inline.
Pe ecrane de 71.25em și mai largi, wrapper-ul de mobilier folosește un layout de grilă cu coloane și rânduri specifice. O linie decorativă apare înaintea secțiunii meta, de 540 de pixeli lățime. Paragrafele din standfirst nu au bordură superioară și se adaugă o linie verticală înaintea conținutului standfirst. Pentru ecrane și mai mari (81.25em și peste), grila se ajustează cu mai multe coloane și rânduri, linia decorativă dinaintea meta se extinde la 620 de pixeli, iar linia verticală dinaintea standfirst se deplasează ușor.
Etichetele din antetul articolului sau secțiunea de titlu au un padding superior de 2 pixeli. Titlul principal folosește o greutate de font bold, o lățime maximă de 620 de pixeli și o dimensiune de font de 32 de pixeli. Pe ecrane mai mari (71.25em și peste), titlul principal se ajustează la o lățime maximă de 540 de pixeli și o dimensiune de font de 50 de pixeli.
Pentru ecrane medii (46.25em și peste), liniile cheie sau elementele de linie nu au margine dreapta. Pe ecrane mai mari (61.25em și peste), aceste linii sunt ascunse. Liniile folosesc o culoare personalizată pentru contur.Acest cod CSS definește stiluri pentru layout-ul unei pagini web, în special pentru un wrapper cu tematică de mobilier. Stabilește diverse proprietăți pentru elemente precum informații meta, text standfirst, media principală și legende. Stilurile includ ajustări pentru margini, padding, culori și poziționare, cu reguli specifice pentru diferite dimensiuni de ecran folosind interogări media. Designul folosește variabile CSS personalizate pentru culori, cum ar fi `--darkBackground` și `--headerBorderColor`, și asigură că elementele sunt ascunse sau afișate în funcție de lățimea viewport-ului. Wrapper-ul are un fundal întunecat și include comportament responsiv pentru dispozitive de la mobil la desktop.Codul CSS stilizează elementele din clasa furniture-wrapper. Titlurile principale (h1) sunt bold și de culoare gri deschis (#dcdcdc). Figurile din titluri nu au margine superioară și au o margine inferioară mică.
Pentru ecrane mai largi de 71.25em, apare o linie colorată înaintea secțiunii meta. Textul și rezumatele din secțiunea meta sunt de culoare gri deschis. Legăturile și butoanele de social media au o bordură colorată și folosesc o culoare specifică pentru text și icoane, care se schimbă într-un fundal întunecat la hover.
Legăturile din secțiunea meta folosesc o culoare specifică și o mențin la hover cu subliniere corespunzătoare. În secțiunea standfirst, legăturile sunt subliniate cu o culoare gri deschis care se schimbă la hover, iar textul paragrafelor este gri deschis. Pe ecrane mai largi, primul paragraf poate avea sau poate pierde o bordură superioară. Elementele de listă din standfirst sunt de asemenea gri deschis.
Pentru ecrane mai largi de 71.25em, apare o linie înaintea standfirst-ului. Pe ecrane mai largi de 46.25em, wrapper-ul primește un fundal întunecat și o bordură dreaptă.Wrapper-ul de mobilier folosește pseudo-elemente pentru a crea borduri laterale. Elementul `:before` este poziționat în stânga cu un fundal întunecat și o bordură stângă, în timp ce lățimea și poziția sa stângă sunt calculate pe baza lățimii viewport-ului, lățimii barei de derulare și a unei lățimi de bază fixe de 738px. Elementul `:after` reflectă acest lucru pe partea dreaptă cu o bordură dreaptă.
Pentru ecrane mai mari (lățime minimă 61.25em), calculele se ajustează la o lățime de bază de 978px. Acest model continuă pentru puncte de întrerupere și mai mari: 71.25em (bază 1138px) și 81.25em (bază 1298px).
În interiorul wrapper-ului, contururile SVG și anumite borduri ale elementelor sociale/meta sunt setate să folose
