Acest cod CSS definește familia de fonturi „Guardian Headline Full” cu diferite greutăți și stiluri, inclusiv light, regular, medium și semibold, fiecare în versiuni normale și cursive. Specifică fișierele de font în formatele WOFF2, WOFF și TrueType găzduite pe serverele 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, TTF) împreună cu greutățile și stilurile lor de font. De asemenea, include reguli de design responsive pentru coloana de conținut principal î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, extinde elementele la lățime completă și le centrează. Stilurile asigură formatarea corectă pe toate dispozitivele, cu lățimi maxime setate pentru diferite tipuri de conținut, cum ar fi atomi, showcase-uri și elemente immersive.
Pentru coloanele de conținut interactiv, se adaugă o bordură stângă înaintea elementului, poziționată la 11 pixeli spre stânga. În aceste coloane, atomii (elementele) nu au margini superioare sau inferioare, dar includ un padding de 12 pixeli atât în partea de sus cât și de jos. Când un paragraf urmează unui atom, 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, iar pentru ecrane mai late (peste 61.25em), figurile inline cu un anumit rol respectă și ele această limită de lățime.
Sunt definite variabile de culoare pentru diverse elemente, cum ar fi dateline-uri, antete, captioni și feature-uri, cu o culoare implicită pentru feature setată la roșu. Atomii din coloana principală și din altă parte nu au padding.
Reguli specifice se aplică primului paragraf după anumite elemente sau linii orizontale în diferite zone de conținut (corpul articolului, conținut interactiv, comentarii, feature-uri), adăugând un padding superior de 14 pixeli. În plus, prima literă a acestor paragrafe este stilizată cu un font mare, bold, majuscul, într-un anumit tip de literă, colorată în funcție de o variabilă și flotată la stânga cu o margine.
Liniile orizontale urmate de paragrafe în aceste secțiuni nu au padding superior.
Citatele (pullquotes) din anumite zone de conținut sunt limitate la o lățime maximă de 620 de pixeli.
Pentru elementele showcase din diverse containere de articole, captioniile sunt poziționate static cu lățime completă până la 620 de pixeli.
Elementele immersive acoperă lățimea completă a viewport-ului minus lățimea scrollbar-ului. Pe ecrane cu lățime de până la 71.24em, aceste elemente sunt limitate la o lățime de 978px cu un padding pentru captioni de 10px. Între 30em și 71.24em, padding-ul pentru captioni crește la 20px. Pentru ecrane între 46.25em și 61.24em, lățimea maximă devine 738px. Sub 46.24em, elementele immersive se aliniază la marginea stângă cu marginile ajustate și mențin un padding pentru captioni de 20px între 30em și 46.24em.
Furniture wrapper-ul folosește un layout grid responsive pe ecrane de 61.25em și mai late, organizând secțiunile pentru titlu, headline, informații meta, standfirst și portret. Headline-urile au o bordură superioară, secțiunile meta au padding superior, iar textul standfirst include stilizări specifice pentru liste și link-uri cu subliniere personalizate care își schimbă culoarea la hover. Primul paragraf din standfirst are o bordură superioară pe ecrane mai mari, dar o elimină peste 71.25em.
Figurile din interiorul furniture wrapper-ului au margini aliniate la stânga, iar elementele inline sunt limitate la o lățime de 630px. Peste 71.25em, layout-ul grid se ajustează pentru a găzdui mai multe coloane pentru conținutul portret.
Layout-ul folosește un grid cu coloane și rânduri specifice pentru diferite dimensiuni de ecran. Pentru ecrane mai mici, grid-ul are trei coloane și rânduri care se ajustează automat, cu o înălțime fixă de 80px pentru zonele de titlu și portret. O linie subțire apare deasupra secțiunii meta, iar secțiunea standfirst are o linie verticală pe partea stângă.
Pe ecrane mai mari, grid-ul se extinde la mai multe coloane și rânduri cu unități fracționale pentru flexibilitate. Linia de sus a secțiunii meta se lățește, iar linia verticală a standfirst-ului se deplasează ușor. Headline-urile au o lățime și o dimensiune de font maximă care cresc pe ecrane mai mari, în timp ce anumite elemente, cum ar fi liniile, sunt ascunse sau ajustate în margini pentru diferite puncte de întrerupere (breakpoints).
Elementele sociale și de comentarii din secțiunea meta au aceeași culoare de bordură, iar unele componente nu sunt afișate. Textul standfirst are o stilizare specifică cu margine stângă și padding reduse, și proprietăți de font. Elementele media principale sunt poziționate relativ, cu lățime completă și margini ajustate pe diverse dispozitive, iar captioniile sunt poziționate absolut în partea de jos cu fundal și culori de text personalizate.
Codul CSS definește stiluri pentru o componentă furniture wrapper, inclusiv layout-ul, culorile și comportamentul responsive pe diferite dimensiuni de ecran. Stabilește culori de fundal, culori de text și stiluri de bordură folosind proprietăți CSS personalizate pentru teme cum ar fi modul întunecat. Wrapper-ul ajustează marginile, padding-ul și poziționarea pe ecrane mai mari și include reguli pentru ascunderea sau afișarea elementelor, cum ar fi captioniile și butoanele. Headline-urile și informațiile meta sunt stilizate cu fonturi și culori specifice, iar butoanele de social media au efecte de hover care le schimbă aspectul. Interogările media (media queries) asigură că designul se adaptează la diverse dispozitive.
Acest cod CSS definește stiluri pentru clasa furniture-wrapper a unei pagini web, concentrându-se pe elemente precum secțiunile de informații meta și standfirst. Stabilește 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 zonele standfirst au subliniere cu offset-uri specifice și fără borduri, în timp ce paragrafele și elementele de listă adoptă și ele culoarea gri deschis.
Pentru ecrane mai mari (min-width: 61.25em), primul paragraf din standfirst primește o bordură superioară, care este eliminată pe ecrane și mai mari (71.25em). Codul creează, de asemenea, bare laterale decorative folosind pseudo-elementele (:before și :after) care se ajustează în lățime în funcție de dimensiunea viewport-ului, având fundaluri întunecate și margini bordate. În plus, stilizează elementele SVG cu culori de contur (stroke) și pictograme pentru social media sau comentarii în cadrul secțiunilor meta.
Secțiunea de comentarii are o culoare de bordură care se potrivește cu culoarea bordurii antetului.
În articole, titlurile de nivelul doi (h2) din corpul principal au o greutate a fontului light de 200. Cu toate acestea, dacă un h2 conține un element strong, acesta folosește o greutate a fontului bold de 700.
Familia de fonturi Guardian Headline Full include diverse stiluri și greutăți, fiecare cu surse specifice de fișiere în formatele WOFF2, WOFF și TrueType:
- Light (greutate 300, stil normal)
- Light Italic (greutate 300, stil italic)
- Regular (greutate 400, stil normal)
- Regular Italic (greutate 400, stil italic)
- Medium (greutate 500, stil normal)
- Medium Italic (greutate 500, stil italic)
- Semibold (greutate 600, stil normal)
- Semibold Italic (greutate 600, stil italic)
Acest cod CSS definește mai multe fețe de font pentru familia de fonturi „Guardian Headline Full” cu diferite greutăți și stiluri (normal și italic), variind de la semibold (600) la black (900). Fiecare față de font specifică fișierele sursă în formatele WOFF2, WOFF și TrueType de pe serverele de asset-uri ale Guardian.
De asemenea, definește fontul „Guardian Titlepiece” cu o greutate bold (700) și stil normal, folosind formate de fișiere similare de la un subdomeniu diferit.
Codul include proprietăți CSS personalizate (variabile) pentru schemele de culori, în special pentru modul întunecat pe dispozitivele iOS și Android. Stabilește o culoare de fundal întunecată, culori pentru feature-uri pentru modul luminos și întunecat și folosește interogări media pentru a ajusta culoarea pillar în funcție de schema de culori preferată de utilizator.
În plus, există reguli de stilizare specifice pentru prima literă a paragrafelor din containerele de articole pe dispozitivele iOS și Android, care se aplică atunci când acestea urmează anumitor elemente, cum ar fi atomi, porți de sign-in sau elemente gate specifice.
Pentru dispozitivele Android, prima literă a primului paragraf din articolele standard și de comentarii este stilizată cu o culoare pillar secundară. Pe ambele platforme, 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, într-un stil de headline, cu o nouă culoare pillar. Headline-urile sunt setate la 32px, bold, cu padding inferior și o culoare întunecată. Imaginile din furniture wrapper-e sunt poziționate relativ, acoperă lățimea viewport-ului minus scrollbar-ul și își ajustează înălțimea automat.
Pentru dispozitivele Android, imaginile din containerele de articole sunt setate să aibă un fundal transparent, să acopere lățimea completă a viewport-ului minus scrollbar-ul și să își ajusteze înălțimea automat.
Pe ambele platforme, iOS și Android, secțiunea standfirst din articole are un padding superior și inferior de 4px, respectiv 24px, cu un offset al marginii drepte de -10px. Textul din interior folosește familia de fonturi Guardian Headline sau fonturi serif de rezervă.
Link-urile din interiorul standfirst-ului pe ambele platforme sunt stilizate cu o culoare specifică, subliniate cu un offset de 6px și folosesc o culoare desemnată pentru subliniere care se schimbă la hover. Imaginea de fundal și bordura de jos sunt eliminate.
În plus, secțiunea meta din articole este stilizată în mod consistent pe iOS și Android pentru containerele de tip feature, standard și comentarii.
Pentru dispozitivele Android, eliminați marginile din elementele meta din containerele de articole standard și de comentarii.
Pentru dispozitivele iOS, setați culoarea elementelor byline și author din containerele de articole feature, standard și comentarii la noua culoare pillar. De asemenea, eliminați padding-ul din elementele meta misc și setați conturul (stroke) pictogramelor SVG din interiorul lor la noua culoare pillar. În plus, stilizați butonul de captioniune din elementele showcase cu afișaj, padding, aliniere și dimensiuni specifice.
Pentru ambele platforme, iOS și Android, setați padding-ul corpului articolului la 0 pe părțile laterale și 12px în partea de sus și de jos în containerele de articole feature, standard și comentarii.
Pentru dispozitivele iOS și Android, în containerele de articole feature, standard și comentarii, imaginile care nu sunt thumbnail-uri și nu sunt immersive din corpul articolului nu vor avea margine, vor avea o lățime egală cu viewport-ul complet minus 24 de pixeli și lățimea scrollbar-ului și o înălțime automată. Captioniile lor nu vor avea padding.
Imaginile immersive din aceste containere vor acoperi lățimea completă a viewport-ului minus lățimea scrollbar-ului.
Blockquote-urile citate din corpul articolului vor afișa un marker colorat folosind noua culoare pillar.
Link-urile din corpul articolului vor fi stilizate cu culoarea pillar primară, subliniate cu un offset și vor folosi culoarea bordurii antetului pentru subliniere. La hover, culoarea de subliniere se schimbă la noua culoare pillar.
În modul întunecat, fundalul furniture wrapper-ului va fi gri închis (#1a1a1a).
Pentru dispozitivele iOS și Android, următoarele stiluri se aplică containerelor de articole feature, standard și comentarii:
- Etichetele de conținut folosesc noua culoare pillar.
- Headline-urile nu au fundal și folosesc culoarea bordurii antetului pentru text.
- Paragrafele și link-urile din standfirst folosesc culoarea bordurii antetului.
- Byline-urile autorilor și link-urile lor folosesc noua culoare pillar.
- Pictogramele metadata diverse sunt conturate cu noua culoare pillar.
- Captioniile imaginilor din showcase folosesc culoarea dateline-ului.
- Blockquote-urile citate din corpul articolului sunt stilizate cu noua culoare pillar.
Pentru dispozitivele iOS și Android, culoarea textului blocurilor citate din corpurile articolelor este setată la o anumită culoare pillar.
În plus, culoarea de fundal a diverselor secțiuni ale corpului articolului pe ambele platforme, iOS și Android, este schimbată la un fundal întunecat, asigurându-se că aceasta înlocuiește orice alte stiluri.
Mai mult, pentru prima literă care urmează anumitor elemente din corpurile articolelor pe iOS, se aplică o stilizare specială, deși efectul exact nu este specificat aici.
Acesta pare a fi un selector CSS care vizează prima literă a paragrafelor care urmează anumitor elemente în diverse containere de articole pe platformele iOS și Android. Selectorul se aplică diferitelor tipuri de articole (standard, feature, comentarii) și ține cont de porțile de sign-in care ar putea apărea între elemente.
Acest cod CSS definește stiluri pentru elemente specifice pe dispozitivele Android și iOS. Setează culoarea primei litere din anumite paragrafe
