Acest cod CSS definește familia de fonturi "Guardian Headline Full" cu multiple stiluri și grosimi. Include variante light (300), regular (400), medium (500) și semibold (600), fiecare în versiuni normale și cursive. Pentru fiecare stil, oferă fișiere de font în formatele WOFF2, WOFF și TrueType de la serverul de resurse al Guardian.
Acest cod CSS definește mai multe familii de fonturi pentru fonturile Guardian Headline și Guardian Titlepiece, specificând sursele lor în diferite formate (WOFF2, WOFF și TrueType) împreună cu grosimile și stilurile lor. De asemenea, include reguli de design responsive pentru coloana principală de conținut în layout-uri interactive, ajustând marginile, lățimile și poziționarea în funcție de dimensiunea viewport-ului. De exemplu, pe ecrane mai late, adaugă o margine stângă și o bordură, în timp ce pe ecrane mai mici, ajustează lățimile și pozițiile elementelor pentru a se potrivi afișajului. Codul asigură că elementele precum paragrafele și listele mențin o lățime maximă pentru lizibilitate și gestionează elementele immersive prin extinderea lor la lățime completă pe dispozitive mobile și ajustarea layout-ului lor pe ecrane mai mari.
Pentru coloanele de conținut interactive, se adaugă o bordură stângă de culoare gri deschis și este poziționată ușor spre stânga. Elementele din aceste coloane nu au margini superioare sau inferioare, dar includ un padding de 12px. Când un paragraf urmează după un element, padding-ul este eliminat și marginile sunt setate la 12px. Elementele inline sunt limitate la o lățime maximă de 620px, iar pentru ecrane mai late, figurile cu un anumit rol respectă și ele această limită de lățime.
Sunt definite variabile de culoare pentru diverse elemente de text și fundal, inclusiv dateline, borduri antet, captioni și culori de trăsătură, cu o culoare de trăsătură implicită setată la roșu.
Elementele stilizate ca atomi nu au padding. Reguli specifice se aplică primului paragraf care urmează anumitor elemente sau linii orizontale în diferite zone de conținut, adăugând un padding superior de 14px. În plus, prima literă a acestor paragrafe este stilizată cu un font mare, bold, majuscul în stil de titlu, colorată în funcție de culoarea de trăsătură definită și flotată la stânga cu o margine.
Liniile orizontale urmate de paragrafe în diverse secțiuni de conținut nu au padding superior. Pullquote-urile din zonele specifice de conținut au o lățime maximă de 620 de pixeli.
Pentru elementele showcase în diferite containere de articol, captioniile sunt poziționate static cu lățime completă și o lățime maximă de 620 de pixeli.
Elementele immersive acoperă lățimea completă a viewport-ului minus bara de derulare. Pe ecrane de până la 71.24em lățime, aceste elemente sunt limitate la 978 de pixeli, cu un padding pentru captioni de 10 pixeli. Între 30em și 71.24em, padding-ul pentru captioni crește la 20 de pixeli. Pentru ecrane între 46.25em și 61.24em, lățimea maximă este de 738 de pixeli. Sub 46.24em, elementele immersive se aliniază la stânga cu marginile ajustate și un padding pentru captioni de 20 de pixeli între 30em și 46.24em.
Furniture wrapper-ul folosește un layout grid pe ecrane de 61.25em și mai mari, cu coloane și rânduri definite pentru organizarea conținutului. Titlurile au o bordură superioară, secțiunile meta au padding superior, iar elementele standfirst includ link-uri stilizate cu subliniere care își schimbă culoarea la hover. Inițial, primul paragraf din standfirst are o bordură superioară și fără padding inferior, care este eliminat pe ecrane de 71.25em și mai mari.
Figurile din interiorul furniture wrapper-ului au margini stângi și o lățime maximă de 630 de pixeli pentru elementele inline. Pe ecrane mai mari (71.25em și peste), coloanele grid sunt reconfigurate pentru o plasare diferită a conținutului.
Layout-ul folosește un grid cu coloane și rânduri specifice pentru diferite dimensiuni de ecran. Pentru ecrane mai mici, gridul definește zone pentru titlu, headline, standfirst, informații meta și portret, cu rânduri setate la înălțimi fixe și automate. O linie subțire apare deasupra secțiunii meta, iar standfirst-ul are o linie verticală pe partea stângă.
Pe ecrane mai mari, gridul se ajustează pentru a utiliza unități fracționale pentru rânduri și extinde întinderile coloanelor. Dimensiunea fontului pentru headline crește și lățimea sa maximă se schimbă, în timp ce unele elemente precum liniile sunt ascunse. Textul standfirst este stilizat cu o anumită grosime și dimensiune a fontului, iar zona media principală este poziționată în interiorul gridului, cu ajustări pentru lățime și margini pe dispozitive mai mici. Captioniile sunt poziționate absolut în partea de jos cu o culoare de fundal și padding.
Codul CSS definește stiluri pentru o componentă furniture wrapper, inclusiv layout-ul, culorile și comportamentul responsive pe diferite dimensiuni de ecran. Setează culori de fundal, culori de text și stiluri de bordură folosind proprietăți CSS personalizate pentru teme precum modul întunecat. Wrapper-ul ajustează marginile, padding-ul și poziționarea pe ecrane mai mari și include elemente ascunse și butoane interactive cu efecte de hover pentru partajare socială. Headline-urile și informațiile meta sunt stilizate cu fonturi și culori specifice, asigurând consistența designului.
Acest cod CSS definește stiluri pentru elementele din clasa "furniture-wrapper", concentrându-se pe secțiunile de informații meta și standfirst. Setează culoarea textului la gri deschis (#dcdcdc) și culoarea link-urilor la o nuanță bazată pe variabile, cu efecte de hover care schimbă culoarea decorării textului. Link-urile din standfirst sunt subliniate cu o compensare și culoare specifică, iar stările de hover ajustează culoarea de subliniere în consecință.
Pentru ecrane mai mari (min-width: 61.25em), primul paragraf din standfirst capătă o bordură superioară, care este eliminată pe ecrane și mai mari (min-width: 71.25em). Elementele de listă din standfirst adoptă și ele culoarea de text gri deschis.
Codul include elemente de design responsive folosind interogări media pentru diferite lățimi de ecran (46.25em, 61.25em, 71.25em și 81.25em). Acestea ajustează lățimea și poziționarea pseudo-elementelor (:before și :after) pentru a crea zone de fundal cu borduri, calculând dimensiunile pe baza lățimii viewport-ului și ajustărilor pentru bara de derulare.
În plus, stilizează elementele SVG din interiorul keylines-urilor și elementele de social media sau comentarii din secțiunea meta, setând culoarea conturului și a textului să se potrivească cu tema folosind variabile CSS.
Secțiunea de comentarii are o culoare de bordură care se potrivește cu culoarea bordurii antetului. În articole, titlurile de nivelul doi au o grosime a fontului light de 200, dar dacă conțin un element strong, folosesc o grosime bold de 700.
În plus, familia de fonturi Guardian Headline Full este definită cu diverse stiluri și grosimi, inclusiv light, regular, medium și semibold, fiecare î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 fețe de font pentru familia de fonturi "Guardian Headline Full", fiecare cu diferite grosimi și stiluri (normal și italic), variind de la semibold (600) la black (900). De asemenea, include o față de font pentru "Guardian Titlepiece" în bold. Fonturile sunt preluate de la URL-uri specifice în formatele WOFF2, WOFF și TrueType.
În plus, codul setează proprietăți CSS personalizate (variabile) pentru fundalurile modului întunecat și culorile de trăsătură, ajustându-le în funcție de preferința de schemă de culori a utilizatorului sau când site-ul este vizualizat pe dispozitive iOS sau Android. De asemenea, include stilizarea primei litere a paragrafelor în containerele de articole pe aceste platforme mobile, cu selectori specifici pentru a gestiona porțile de conectare.
Pentru dispozitivele Android, prima literă a primului paragraf din articolele standard și de comentarii este stilizată cu o culoare secundară de pilon. Pe ambele, iOS și Android, antetele articolelor sunt ascunse, iar furniture wrapper-ele au un padding specific. Etichetele din aceste wrapper-e folosesc un font bold, capitalizat, în stil de titlu, cu o nouă culoare de pilon. Headline-urile sunt setate la 32px, bold, cu padding inferior și o culoare închisă. Imaginile din furniture wrapper-e sunt poziționate relativ, acoperă lățimea viewport-ului minus bara de derulare și își ajustează înălțimea automat.
Pentru dispozitivele Android, imaginile din containerele de articole sunt setate să aibă un fundal transparent, să acopere întreaga lățime a viewport-ului minus bara de derulare și să își ajusteze înălțimea automat.
Pe ambele, iOS și Android, secțiunile de rezumat ale articolului au un padding superior și inferior de 4px, respectiv 24px, cu o compensare a marginii drepte de -10px.
Textul din aceste rezumate folosește familia de fonturi Guardian Headline sau fonturi serif similare.
Link-urile din rezumate sunt stilizate cu o culoare specifică, subliniate cu o compensare de 6px și folosesc o culoare desemnată pentru subliniere care se schimbă la hover pentru a se potrivi cu culoarea link-ului.
În plus, secțiunile de metadate din articole pe ambele sisteme de operare au o stilizare consistentă.
Pentru dispozitivele Android, marginea pentru elementele meta în containerele de articole standard și de comentarii este setată la zero.
Pe dispozitivele iOS, informațiile despre autor și redactor în containerele de articole feature, standard și de comentarii vor apărea în culoarea de pilon desemnată. Similar, pe dispozitivele Android, aceleași elemente în containerele de articole feature, standard și de comentarii vor folosi, de asemenea, culoarea de pilon.
Pentru ambele, iOS și Android, informațiile meta diverse din containerele de articole feature, standard și de comentarii nu au padding, iar orice icoane SVG din interiorul lor sunt stilizate cu culoarea de pilon ca contur.
Butonul de captioni în elementele showcase pentru articolele feature, standard și de comentarii pe ambele, iOS și Android, este afișat ca un container flex. Este centrat, măsoară 28 pe 28 de pixeli și este poziționat la 14 pixeli din dreapta cu 5 pixeli de padding.
Corpul articolului în containerele feature, standard și de comentarii pentru iOS și Android are 12 pixeli de padding orizontal și niciun padding vertical.
Pentru dispozitivele iOS și Android, în containerele de articole feature, standard și de comentarii, imaginile care nu sunt thumbnail-uri și nu sunt immersive din corpul articolului nu vor avea margine, o lățime calculată ca lățimea completă a viewport-ului minus 24 de pixeli și lățimea barei de derulare, și o înălțime automată. Captionile lor nu vor avea padding.
Imaginile immersive în aceste containere vor acoperi lățimea completă a viewport-ului minus lățimea barei de derulare.
În textul principal al articolului, blockquote-urile citate vor afișa un marker colorat folosind noua culoare de pilon. Link-urile vor fi stilizate cu culoarea primară de pilon, subliniate cu o compensare și vor folosi culoarea bordurii antetului pentru subliniere. La hover, culoarea de subliniere se schimbă la noua culoare de pilon.
În modul întunecat, fundalul furniture wrapper-ului va fi setat la un gri închis (#1a1a1a).
Pentru dispozitivele iOS și Android, aplicați următoarele stiluri containere
