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 cu variații normale și italice. Fișierele de font sunt furnizate în formatele WOFF2, WOFF și TrueType, găzduite pe serverele Guardian.
@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 au o umplutură superioară suplimentară, 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ă de 620px pe ecrane mai mari. Sunt definite diverse variabile de culoare pentru o temă consistentă.
Citatele extrase din anumite containere ar trebui să aibă o lățime maximă de 620 de pixeli.
Legendele pentru elementele showcase din conținutul principal și containerele de articole ar trebui să fie poziționate static, cu o lățime completă de până la 620 de pixeli.
Elementele immersive ar trebui să acopere întreaga lățime a viewport-ului, minus bara de derulare. Pe ecrane mai mari, acestea sunt limitate la 978 de pixeli, cu umplutura legendei ajustată pentru ecranele medii. Pe ecrane de dimensiuni medii, lățimea maximă este de 738 de pixeli. Pe ecrane mai mici, elementele immersive se aliniază la marginea stângă cu margini ajustate și umplutură de legendă.
Pentru învelișurile de mobilier pe ecrane mai mari, este utilizat un layout de grilă cu coloane și rânduri definite. Titlurile au o bordură superioară, secțiunile meta sunt poziționate relativ, iar conținutul standfirst include stilizări specifice pentru link-uri și paragrafe. Figurile din interiorul învelișului nu au margine stângă și au o lățime maximă de 630 de pixeli când sunt inline. Pe ecrane foarte mari, coloanele șablonului de grilă sunt ajustate.
CSS-ul definește un layout de grilă pentru un antet de articol cu zone specifice pentru titlu, titlu principal, standfirst, informații meta și o imagine portret. Stabilește stiluri pentru borduri, tipografie și spațiere, ajustând aceste proprietăți pe diferite dimensiuni de ecran folosind interogări media. De exemplu, dimensiunea fontului titlului principal crește pe ecrane mai mari, iar anumite elemente sunt ascunse sau repoziționate pe măsură ce viewport-ul se schimbă. Zona media principală este configurată să aibă lățime completă pe dispozitivele mobile.
Codul CSS definește stiluri pentru layout-ul unei pagini web, concentrându-se pe un element de înveliș de mobilier. Stabilește culori de fundal, margini, umplutură și comportamente responsive pentru diferite dimensiuni de ecran. Stilurile includ proprietăți personalizate pentru culori, cum ar fi caracteristicile modului întunecat și bordurile antetului. Reguli specifice controlează aspectul legendelor, butoanelor, titlurilor și informațiilor meta, cu ajustări pentru efecte de hover și pictograme de social media. Interogările media asigură că layout-ul se adaptează de la vizualizările mobile la cele desktop, inclusiv ecrane mai largi unde sunt adăugate fundaluri laterale.
Acest cod CSS definește stiluri pentru o componentă a paginii web, probabil o bară laterală sau un înveliș de conținut. Stabilește culori, borduri și ajustări de layout pentru diverse elemente precum link-uri, text și pictograme de social media. Stilurile se adaptează la diferite dimensiuni de ecran folosind interogări media, schimbând lățimile și bordurile pentru a se potrivi pe ecrane mai mari. Culorile sunt gestionate folosind variabile CSS pentru teme, cum ar fi modul întunecat.
Codul CSS definește stiluri pentru elementele de articol ș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 ușoară, dar face titlurile cu text puternic aldine. Codul importă, de asemenea, familia de fonturi Guardian Headline în diverse greutăți și stiluri, inclusiv light, regular, medium și semibold, în versiuni normale și italice.
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.
Î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ă (#1a1a1a) și culori specifice de caracteristici. În modul întunecat, culoarea caracteristicii se ajustează în consecință.
Pe iOS și Android, se aplică o stilizare specială primei litere din primul paragraf din containerele de articole, care urmează anumitor elemente precum `.element-atom` sau 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 platforme, iOS și Android, anteturile articolelor sunt ascunse, iar învelișul de mobilier are o umplutură specifică. Etichetele din interiorul învelișului de mobilier folosesc un font aldine, capitalizat, cu o nouă culoare de pilon. Titlurile principale sunt setate la 32px, aldine, cu umplutură inferioară și o culoare întunecată. Figurile cu imagini sunt poziționate relativ, cu margini de lățime completă ș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 umplutură superioară, 24 de pixeli pe partea inferioară și o margine negativă de 10 pixeli pe dreapta.
Paragrafele din acest text introductiv ar trebui să folosească familia de fonturi de titlu a Guardian.
Link-urile din interiorul acestui 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. Ele nu ar trebui să aibă imagine de fundal sau bordură inferioară. Când sunt parcurse cu mouse-ul, sublinierea ar trebui să se schimbe pentru a se potrivi cu culoarea textului link-ului.
În plus, secțiunea de metadate a articolului ar trebui să fie stilizată în mod consistent pentru ambele sisteme de operare.
Acest cod CSS stabilește stiluri pentru containerele de articole pe dispozitivele Android și iOS. Ajustează marginile, culorile, umplutura ș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 au o margine de zero, 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 umplutură.
Imaginile immersive din aceste containere au o lățime calculată din viewport minus lățimea barei de derulare.
În interiorul textului principal al articolului, citatele bloc citate folosesc noua culoare de pilon pentru elementul lor decorativ. Link-urile sunt stilizate cu culoarea primară de pilon, o subliniere decalată cu 6px și o culoare de bordură pentru subliniere, care se schimbă la noua culoare de pilon la hover.
În modul întunecat, culoarea de fundal a învelișului de mobilier este setată la #1a1a1a.
Pentru dispozitivele iOS și Android, etichetele de conținut din articolele de tip feature, standard și comentarii folosesc noua culoare de pilon.
Pe ambele platforme, iOS și Android, titlul principal în aceste tipuri de articole nu are fundal și folosește culoarea bordurii antetului pentru text.
Textul standfirst din aceste articole folosește, de asemenea, culoarea bordurii antetului. Link-urile din interiorul standfirst-ului, precum și semnăturile autorilor și link-urile acestora, sunt stilizate cu noua culoare de pilon.
Pictogramele din metadatele articolului folosesc noua culoare de pilon pentru conturul lor.
În cele din urmă, legendele pentru imaginile showcase din aceste articole folosesc culoarea dateline.
Pentru dispozitivele iOS și Android, culoarea textului blocurilor citate din corpul articolelor este setată la o anumită variabilă de culoare.
În
