Acest cod CSS definește o familie de fonturi personalizată numită „Guardian Headline Full” cu multiple greutăți și stiluri de font. Specifică fișierele de font în diferite formate (WOFF2, WOFF și TrueType) și locațiile lor online pentru ca browserul să le descarce și să le folosească. Fontul include greutăți light (300), regular (400), medium (500) și semibold (600), fiecare cu stiluri normale și cursive.
@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://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));
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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}
Pentru coloana principală interactivă, este adăugată o bordură stângă înainte de conținut, poziționată la 11 pixeli spre stânga. Elementele din această coloană nu au margini superioare sau inferioare, dar includ un padding de 12 pixeli atât în partea de sus, cât și în partea de jos. Când un paragraf este urmat de un element, padding-ul este eliminat și se aplică în schimb margini de 12 pixeli. Elementele inline sunt limitate la o lățime maximă de 620 de pixeli, ceea ce se aplică și figurilor inline pe ecrane mai late de 61.25em.
Proprietățile personalizate definesc culori pentru diverse elemente, cum ar fi dateline, bordura antetului, textul capturilor și fundalul, cu o culoare de trăsătură setată la roșu și o nouă culoare de pilon care implicit este culoarea primară sau de trăsătură. Elementele cu clasa atom nu au padding.
Pentru primul paragraf care urmează anumitor elemente sau unei linii orizontale în diferite zone de conținut, se adaugă un padding superior de 14 pixeli. Prima literă a acestor paragrafe este stilizată cu un font mare, îngroșat, majuscul, într-o culoare specifică, flotând spre stânga cu o margine și aliniere verticală.
În plus, paragrafele imediat după o linie orizontală în aceste zone nu au padding superior.
Citatele evidențiate din zonele specifice de conținut au o lățime maximă de 620 de pixeli.
Capturile elementelor showcase în conținutul principal și containerele de articole sunt poziționate static cu lățime completă, de asemenea limitate la 620 de pixeli.
Elementele immersive acoperă lățimea completă a viewport-ului minus bara de derulare. Pe ecrane cu lățime de până la 71.24em, aceste elemente sunt limitate la 978 de pixeli, cu padding pentru capturi de 10px pe ecrane mai mici și 20px pe cele medii. Între 46.25em și 61.24em, lățimea maximă este de 738 de pixeli. Sub 46.24em, elementele immersive se aliniază la marginea stângă cu margini ajustate și padding pentru capturi de 20px pe ecrane medii.
Pentru învelișurile de mobilier pe ecrane mai mari (61.25em și peste), este utilizat un layout de grilă cu coloane și rânduri definite. Antetele au o bordură superioară, secțiunile meta au padding superior, iar elementele standfirst includ linkuri stilizate cu subliniere care își schimbă culoarea la hover. Inițial, primul paragraf din standfirst are o bordură superioară, care este eliminată pe ecrane mai late (71.25em și peste). Figurile din interiorul învelișului nu au margine inferioară și au o compensare spre stânga, cu elementele inline limitate la 630 de pixeli. Pe cele mai mari ecrane, grila își ajustează structura de coloane pentru un layout mai bun.
Layout-ul folosește o grilă cu coloane și rânduri specifice pentru diferite dimensiuni de ecran. Pe ecrane mai mari, grila se ajustează pentru a avea trei coloane egale pentru secțiunile titlu, antet și meta, urmate de cinci pentru standfirst și opt pentru portret, cu înălțimile rândurilor setate ca fracții. O linie subțire apare deasupra secțiunii meta, iar standfirst-ul are o linie verticală pe partea stângă.
Antetele sunt îngroșate și se schimbă în dimensiune și lățime în funcție de ecran: până la 620px lățime și 32px font pe ecrane mai mici și 540px lățime cu un font de 50px pe cele mai mari. Unele linii decorative sunt ascunse pe ecrane mai mari, iar elementele de partajare socială și comentarii au borduri care se potrivesc cu culoarea antetului.
Textul standfirst are greutate normală, dimensiunea de 20px, cu padding în partea de jos și este ușor deplasat spre stânga cu un padding stâng. Imaginile media principale umplu lățimea și ajustează marginile pentru diferite dimensiuni de ecran, cu capturi poziționate în partea de jos cu o culoare de fundal și culoare de text personalizată. Pe ecrane foarte mici, media acoperă lățimea completă a viewport-ului minus bara de derulare.
Învelișul de mobilier setează un fundal întunecat și ajustează marginile și padding-ul pentru diferite dimensiuni de ecran. Pe ecrane mai mari, adaugă bare laterale decorative. Antetele sunt stilizate cu text îngroșat, gri deschis, iar informațiile meta folosesc culori similare. Butoanele de social media au o culoare distinctă care se schimbă la hover, comutând culorile textului și fundalului pentru contrast. Capturile sunt ascunse în mod implicit, dar pot fi afișate cu un buton, iar diverse elemente își adaptează vizibilitatea și layout-ul în funcție de lățimea ecranului și alte condiții.
Elementele cu clasa "furniture-wrapper" și copiii lor au reguli de stilizare specifice:
- Linkurile din secțiunea meta sunt colorate folosind o proprietate personalizată pentru culoarea pilonului sau o caracteristică pentru modul întunecat, cu aceeași culoare aplicată la hover atât pentru text, cât și pentru subliniere.
- Linkurile din standfirst nu au bordură, folosesc culoarea pilonului sau caracteristica pentru modul întunecat pentru text, elimină imaginile de fundal și au subliniere cu un offset de 6px și o culoare a bordurii antetului. La hover, culoarea de subliniere se schimbă la culoarea pilonului sau caracteristica pentru modul întunecat.
- Paragrafele și elementele de listă din standfirst sunt colorate gri deschis (#dcdcdc).
- Pentru ecrane mai mari (min-width: 61.25em), primul paragraf din standfirst are o bordură superioară, care este eliminată la puncte de întrerupere și mai mari (min-width: 71.25em).
- Pseudo-elementele (:before și :after) sunt folosite pentru a crea bare laterale cu fundaluri întunecate și borduri, ajustându-și lățimea și poziția în funcție de dimensiunea viewport-ului și lățimea barei de derulare pentru diferite dimensiuni de ecran.
- Liniile cheie și elementele sociale/comentarii din secțiunea meta folosesc culoarea bordurii antetului pentru contururi și stilizare.
Secțiunea de comentarii are o culoare de bordură care se potrivește cu culoarea bordurii antetului.
În articole, titlurile de nivel doi au o greutate a fontului ușoară de 200. Cu toate acestea, dacă un titlu de nivel doi conține un element bold, acesta folosește o greutate a fontului mai mare de 700.
În plus, familia de fonturi Guardian Headline Full este definită cu diverse stiluri și greutăți, inclusiv light, regular, medium și semibold, fiecare disponibilă în versiuni normale și cursive. Aceste fonturi sunt preluate de la URL-uri specifice în formatele WOFF2, WOFF și TrueType.
Acest cod CSS definește mai multe familii de fonturi și variațiile lor pentru site-ul Guardian. Specifică diferite greutăți și stiluri de font (cum ar fi bold, italic, semibold, black) pentru fontul "Guardian Headline Full", fiecare cu multiple formate de fișiere (WOFF2, WOFF, TTF) pentru compatibilitate cross-browser. În plus, include fontul "Guardian Titlepiece" în bold.
Codul stabilește, de asemenea, proprietăți CSS personalizate (variabile) pentru culori, ajustându-le pentru modul întunecat pe dispozitivele iOS și Android. Include interogări media pentru a gestiona preferințele modului întunecat și aplică o stilizare specifică primei litere a paragrafelor din containerele de articole pe platformele iOS și Android, în special atunci când acestea urmează anumitor elemente precum atomi sau porți de conectare.
Pentru dispozitivele Android și iOS, prima literă a primului paragraf din articolele standard și de comentarii este stilizată cu o culoare secundară de pilon. Înălțimea antetului articolului este setată la zero, în timp ce învelișul de mobilier are un padding de 4px în partea de sus, 10px pe părțile laterale și niciunul în partea de jos.
Etichetele de conținut din interiorul învelișului de mobilier folosesc un font îngroșat, capitalizat din familia Guardian headline, în noua culoare de pilon. Antetele au 32px, bold, cu un padding inferior de 12px și o culoare gri închis.
Imaginile din învelișul de mobilier sunt poziționate relativ, cu o margine superioară de 14px, fără margine inferioară și cu o margine
