Acest cod CSS definește o familie de fonturi personalizată numită „Guardian Headline Full” cu mai multe greutăți și stiluri de font. Include greutăți light, regular, medium și semibold, fiecare în versiuni normale și italice. Fonturile sunt încărcate de pe serverele Guardian în trei formate de fișiere diferite: WOFF2, WOFF și TrueType.
@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;
}
}
Coloana de conținut interactiv are o bordură stângă și spațiere specifică pentru elemente. Paragrafele care urmează anumitor elemente primesc padding suplimentar în partea de sus, iar prima literă a acestor paragrafe este stilizată ca o literă inițială mare și colorată. Elementele inline și figurile sunt limitate la o lățime maximă. Sunt definite diverse variabile de culoare pentru o temă consistentă.
Citatele evidențiate (pullquotes) din containere specifice ar trebui să aibă o lățime maximă de 620 de pixeli.
Legendele pentru elementele showcase din articolele principale, feature-uri, articole standard și comentarii ar trebui să fie poziționate static, să acopere întreaga lățime și să aibă, de asemenea, o lățime maximă de 620 de pixeli.
Elementele immersive ar trebui să acopere întreaga lățime a viewport-ului, minus bara de derulare. Pe ecrane mai mari (peste 71.24em), lățimea lor maximă este de 978px, cu padding-ul pentru legende ajustat la diferite puncte de întrerupere (breakpoints). Pe ecrane medii (între 46.25em și 61.24em), lățimea maximă este de 738px. Pe ecrane mai mici (sub 46.24em), aceste elemente nu ar trebui să aibă nicio margine stângă și să se alinieze la marginea stângă, cu margini și padding pentru legende ajustate pentru ecrane foarte mici.
Pentru învelișul de mobilier (furniture wrapper) pe ecrane mari (peste 61.25em), este utilizat un layout de grilă cu coloane și rânduri definite. Titlurile primesc o bordură superioară, informațiile meta sunt poziționate relativ, iar textul introductiv (standfirst) are o stilizare specifică pentru linkuri și spațiere. Figurile din acest înveliș au margini ajustate și o lățime maximă de 630px pentru elementele inline. Pe ecrane foarte mari (peste 71.25em), șablonul grilei este ajustat pentru a include mai multe coloane.
CSS-ul definește un layout de grilă pentru antetul unei pagini cu zone pentru titlu, titlu principal (headline), text introductiv (standfirst), informații meta și un portret. Stabilește dimensiuni și poziții specifice pentru aceste elemente la diferite dimensiuni de ecran. Stilizarea include borduri, fonturi și culori, cu ajustări pentru pictogramele de social media, legende și comportament responsiv în vizualizările mobile și desktop.
Codul CSS definește stiluri pentru layout-ul unei pagini web, concentrându-se pe un component numit „furniture-wrapper”. Acest component are un fundal întunecat și își ajustează marginile și padding-ul în funcție de dimensiunea ecranului. Pentru ecrane mai mari, adaugă bare laterale decorative.
În interiorul acestui înveliș, elemente precum antetele articolelor, titlurile principale și informațiile meta (cum ar fi butoanele de partajare pe social media) sunt stilizate. Titlurile principale folosesc o culoare gri deschis și font bold. Butoanele sociale au borduri colorate care se potrivesc cu o culoare de temă și se schimbă într-o culoare solidă la hover.
Codul gestionează, de asemenea, vizibilitatea legendelor și a unui buton de comutare a legendei pentru elementele media. În general, stilurile asigură că layout-ul este responsiv și vizual consistent pe diferite dispozitive.
Acest cod CSS definește stiluri pentru un component de pagină web, probabil o bară laterală sau un container de conținut. Stabilește culorile textului, aspectul linkurilor și ajustările de layout pentru diferite dimensiuni de ecran. Linkurile sunt stilizate cu culori specifice și subliniere, iar layout-ul include elemente de fundal care se ajustează în funcție de lățimea viewport-ului. Codul gestionează, de asemenea, bordurile și spațierea pentru diverse elemente din cadrul componentului.
Codul CSS definește stiluri pentru elementele articolului și încarcă fonturi personalizate. Stabilește culoarea bordurii pentru comentarii să se potrivească cu culoarea bordurii antetului. Pentru titlurile articolelor, folosește o greutate de font light în mod implicit, dar trece la bold atunci când titlul conține un tag strong.
În plus, importă familia de fonturi Guardian Headline Full în diverse greutăți și stiluri (light, regular, medium, semibold, fiecare cu versiuni normale și italice) de pe serverele Guardian, specificând mai multe formate de fișiere pentru compatibilitatea cu browserul.
Fontul „Guardian Headline Full” este definit cu mai multe stiluri: semibold italic (greutate 600), bold (greutate 700), bold italic (greutate 700), black (greutate 900) și black italic (greutate 900). Fiecare stil include fișiere de font în formatele WOFF2, WOFF și TrueType, găzduite pe serverele Guardian.
În plus, fontul „Guardian Titlepiece” este definit în stilul său bold (greutate 700), tot cu fișiere WOFF2, WOFF și TrueType.
Pentru dispozitivele iOS și Android, este setată o culoare de fundal întunecată și culori specifice pentru feature-uri. În modul întunecat, culoarea feature-ului se ajustează în consecință.
Pe iOS și Android, se aplică reguli CSS specifice pentru a stiliza prima literă a primului paragraf din anumite containere de articole, care urmează anumitor elemente precum `.element-atom` sau porțile de conectare (sign-in gates).
Pentru dispozitivele Android, prima literă a primului paragraf din articolele standard și de comentarii este stilizată cu o culoare secundară de pilon. Pe ambele platforme, iOS și Android, antetele articolelor sunt ascunse, iar învelișul de mobilier (furniture wrapper) are un padding specific. Etichetele din cadrul învelișului de mobilier folosesc un font bold, cu majuscule, cu o nouă culoare de pilon. Titlurile principale sunt setate la 32px, bold, cu padding inferior și o culoare întunecată. Figurile cu imagini sunt poziționate relativ, cu margini pe toată lățimea și înălțime automată.
Pentru dispozitivele Android, imaginile din containerele de articole ar trebui să aibă un fundal transparent, să acopere întreaga lățime a viewport-ului (ținând cont de barele de derulare) și să își ajusteze înălțimea automat.
Pe ambele platforme, iOS și Android, textul introductiv din articole ar trebui să aibă o spațiere specifică: 4 pixeli de padding în partea de sus și 24 de pixeli în partea de jos, cu o margine negativă de 10 pixeli în dreapta.
Paragrafele din acest text introductiv ar trebui să folosească familia de fonturi de titlu a Guardian.
Linkurile din acest text ar trebui să fie stilizate cu o culoare specifică, o subliniere poziționată la 6 pixeli sub text și o culoare de subliniere gri deschis, fără imagine de fundal sau bordură. La hover, sublinierea ar trebui să se schimbe pentru a se potrivi cu culoarea textului linkului.
În plus, secțiunea de metadate din articole pe ambele platforme, iOS și Android, ar trebui să primească o stilizare specifică.
Acest cod CSS stabilește stiluri pentru containerele de articole pe dispozitivele iOS și Android. Ajustează marginile, culorile, padding-ul și afișarea butoanelor pentru diverse tipuri de articole și componentele lor.
Pe dispozitivele iOS și Android, pentru containerele de articole de tip feature, standard și comentarii, imaginile care nu sunt miniaturi sau immersive sunt stilizate să nu aibă margine, o lățime calculată din viewport minus 24 de pixeli și lățimea barei de derulare, și o înălțime automată. Legendele lor nu au padding.
Imaginile immersive din aceste containere sunt setate la o lățime care este lățimea viewport-ului minus lățimea barei de derulare.
În corpul articolului (prose), citatele evidențiate (blockquotes) afișează un marker colorat folosind o variabilă CSS personalizată. Linkurile sunt stilizate cu o culoare specifică, o subliniere decalată cu 6 pixeli și o culoare de decorare dintr-o variabilă. La hover, culoarea de subliniere se schimbă într-o altă variabilă.
În modul întunecat, culoarea de fundal a învelișului de mobilier din aceste containere este setată la un gri închis (#1a1a1a).
Pentru dispozitivele iOS și Android, etichetele de conținut din articolele de tip feature, standard și comentarii folosesc noua culoare de pilon. Titlurile principale din aceste articole nu au fundal și folosesc culoarea bordurii antetului. Textul introductiv (standfirst) și linkurile, împreună cu semnăturile autorilor, adoptă, de asemenea, noua culoare de pilon. Pictograme
