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. Pentru fiecare stil, codul specifică trei formate diferite de fișiere de font (woff2, woff și ttf) găzduite pe serverele Guardian, asigurând o compatibilitate largă cu browserele.
@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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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-cPentru coloanele de conținut interactiv, se adaugă o bordură stângă cu poziționare și z-index specific. Pe ecrane mai mari, poziția bordurii se ajustează ușor. În aceste coloane, elementele atom nu au margini superioare sau inferioare, dar includ padding. Când un paragraf urmează unui element atom, padding-ul este eliminat și se adaugă margini în schimb. Elementele inline sunt limitate la o lățime maximă.
Pentru figurile cu rol inline, acestea au și ele o lățime maximă pe ecrane de dimensiuni medii și mai mari.
Proprietățile personalizate definesc diverse culori pentru elemente precum dateline-uri, antete, capturi și feature-uri. Culoarea principală a pilonului (pillar) implicitează culoarea feature-ului dacă nu este setată.
Elementele atom din coloanele interactive sau în general nu au padding. Primul paragraf după anumite elemente sau linii orizontale în diferite corpuri de conținut primește padding superior suplimentar.
În plus, prima literă a acestor paragrafe este stilizată ca un drop cap cu un font, dimensiune, greutate și culoare specifice, folosind proprietăți personalizate pentru colorare.Pentru paragrafele care urmează liniilor orizontale în anumite zone de conținut, se elimină padding-ul superior.
Se limitează lățimea pullquote-urilor la 620px în corpurile articolelor, interactive, comentariilor și feature-urilor.
Pentru capturile elementelor showcase în conținutul principal și containerele de articole, se setează poziția la static, lățimea la 100% și lățimea maximă la 620px.
Elementele immersive ar trebui să acopere întreaga lățime a viewport-ului minus scrollbar-ul. Pe ecrane de până la 71.24em, lățimea lor este limitată la 978px. Pentru capturile pe aceste ecrane, se adaugă 10px de padding orizontal, crescând la 20px pe ecrane între 30em și 71.24em.
Pe ecrane de dimensiuni medii (46.25em până la 61.24em), elementele immersive sunt limitate la 738px. Pe ecrane mai mici (până la 46.24em), se elimină marginea stângă, se aliniază la marginea stângă și se adaugă o margine stângă negativă de 10px (20px pe ecrane de 30em și mai largi). Capturile pe aceste ecrane mai mici primesc 20px de padding orizontal.
Pentru wrapper-ul de mobilier pe ecrane mari (61.25em și mai sus), se folosește un grid CSS cu coloane și rânduri definite. Se stilizează primul copil al antetelor cu o bordură superioară. Secțiunea meta este poziționată relativ cu padding superior și fără margine dreapta. În secțiunile standfirst, se ajustează marginile inferioare, se setează dimensiunea fontului elementelor de listă la 20px și se stilizează link-urile cu subliniere (folosind o culoare personalizată pentru subliniere care se schimbă la hover). Primul paragraf din standfirst primește o bordură superioară și fără padding inferior, deși această bordură este eliminată pe ecrane foarte mari (71.25em și mai sus).
De asemenea, pentru figurile din interiorul wrapper-ului, se elimină marginea stângă și se setează o lățime maximă de 630px pentru elementele inline. Pe cele mai mari ecrane (71.25em și mai sus), coloanele template-ului de grid sunt definite începând de la titlu, antet și meta.Layout-ul folosește un grid cu coloane și rânduri definite pentru diferite dimensiuni de ecran. Pe ecrane mai mari, gridul are trei coloane pentru secțiunile titlu, antet și meta, cinci coloane pentru standfirst și opt coloane pentru portret, cu rânduri dimensionate proporțional. Pe ecrane medii, gridul se ajustează la două, cinci și, respectiv, șapte coloane, cu înălțimi specifice ale rândurilor.
Stilizarea include o bordură superioară pentru secțiunea meta și o bordură stângă pentru standfirst, ambele folosind o variabilă de culoare personalizată. Antetele au o lățime maximă și o dimensiune a fontului care se schimbă cu dimensiunea ecranului, devenind mai mari pe ecrane mai largi. Unele elemente, cum ar fi partajarea socială și secțiunile de comentarii, au borduri care se potrivesc cu culoarea antetului, în timp ce altele sunt ascunse pe anumite dispozitive.
Textul standfirst are proprietăți specifice de padding și font, iar zona media principală este poziționată în interiorul gridului, cu lățimea sa ajustându-se pe ecrane mai mici pentru a ține cont de scrollbar-uri și margini. Capturile sunt poziționate absolut.Captura figurii din wrapper-ul de mobilier este poziționată absolut în partea de jos, fără margine inferioară, având padding, o culoare de fundal și o culoare a textului. Lățimea sa este setată la 100% cu o înălțime minimă de 46 de pixeli. În interiorul capturii, primul span este ascuns, în timp ce al doilea este afișat și limitat la 90% din lățimea maximă. Textul capturii și iconițele SVG folosesc o variabilă de culoare specifică.
Pe ecrane mai largi de 30em, padding-ul orizontal al capturii crește. Un buton dedicat pentru captură este poziționat absolut în dreapta jos, cu un fundal circular și o iconiță SVG scalată, ajustându-și poziția din dreapta pe ecrane mai mari.
Pentru coloanele principale interactive pe ecrane foarte largi, un pseudo-element își ajustează partea superioară și înălțimea. Antetele din aceste coloane au o lățime maximă.
Pe iOS și Android, sunt definite variabile de culoare pentru modul întunecat, inclusiv o culoare de feature care se schimbă în modul întunecat. Anumite containere de articole pe aceste platforme stilizează prima literă a primului paragraf după anumite elemente cu o culoare secundară, setează înălțimea antetului articolului la zero, ajustează padding-ul pentru wrapper-ul de mobilier și ascund etichetele de conținut din interiorul acestuia.Pentru dispozitivele iOS și Android, următoarele stiluri se aplică containerelor de articole de tip feature, standard și comentarii:
- **Etichete**: Folosesc un font îngroșat, capitalizat, în familia Guardian Headline sau serif, colorat cu variabila de culoare a noului pilon.
- **Antete**: Setate la 32px, îngroșate, cu 12px padding inferior și o culoare gri închis (#121212).
- **Imagini**: Poziționate relativ, cu o margine superioară de 14px și o margine stângă negativă de 10px. Lățimea acoperă întregul viewport (ținând cont de scrollbar), iar înălțimea se ajustează automat. Elementele interioare, imaginile și link-urile din interiorul figurii au un fundal transparent, corespunzând lățimii complete a viewport-ului cu înălțime automată.
- **Standfirst (rezumatul articolului)**: Include 4px padding superior, 24px padding inferior și o margine dreaptă negativă de 10px. Paragrafele din interiorul standfirst-ului moștenesc aceste stiluri de container.Codul CSS stabilește stiluri specifice pentru standfirst-urile articolelor și metadatele pe dispozitivele iOS și Android. Definește familii de fonturi pentru textul standfirst și personalizează aspectul link-urilor, inclusiv culoarea, stilul de subliniere și efectele de hover. Codul ajustează, de asemenea, marginile pentru secțiunile de metadate și asigură o stilizare consistentă pentru byline-uri și link-uri de autor pe diferite tipuri de articole.Numele autorului în secțiunea meta a wrapper-ului de mobilier, împreună cu link-urile și span-urile asociate pe dispozitivele Android pentru articolele standard și de comentarii, ar trebui să folosească noua culoare a pilonului. Pe iOS și Android, secțiunea meta diverse din articolele de tip feature, standard și comentarii nu ar trebui să aibă padding, iar orice iconițe SVG din interior ar trebui stilizate cu noua culoare a pilonului ca stroke.
Pentru elementele showcase din articolele de tip feature, standard și comentarii pe ambele platforme, iOS și Android, butonul de captură ar trebui afișat ca un container flex. Ar trebui centrat cu 5px padding, aliniat atât orizontal cât și vertical, dimensionat la 28x28 pixeli și poziționat la 14px din dreapta.
Corpul articolului din articolele de tip feature, standard și comentarii pe iOS și Android ar trebui să aibă 12px padding pe stânga și dreapta. În interiorul corpului articolului, figurile cu imagini care nu sunt thumbnail-
