Acest cod CSS definește o familie de fonturi personalizată numită „Guardian Headline Full” cu multiple stiluri și greutăți. Include versiuni light, regular, medium și semibold, fiecare disponibilă atât în stil normal, cât și în italic. Fișierele de font sunt găzduite online și furnizate în trei formate: WOFF2, WOFF și TrueType (TTF).
@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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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) {
}
Pentru coloanele de conținut interactiv, se adaugă o bordură stângă cu poziționare și z-index specific. Pe ecrane mai mari, poziția stângă a bordurii se ajustează ușor. În aceste coloane, elementele atomice nu au margini superioare sau inferioare, dar includ padding. Când paragrafele preced elemente atomice, padding-ul este eliminat și se adaugă margini în schimb. Elementele inline sunt limitate la o lățime maximă de 620px.
Pentru figurile cu rolul loop, subtitlurile sunt setate la un z-index mai mare, iar butoanele loop sunt stilizate cu dimensiuni și aliniere specifice. Elementele video auto-găzduite sunt setate la lățime completă, limitate la 620px și includ margini superioare și inferioare. Pentru layout-urile video immersive, constrângerile de lățime sunt eliminate, iar marginile sunt ajustate. Pe ecrane mai largi, videoclipurile immersive se extind în lățime și se deplasează spre stânga.
Variabilele de culoare definesc stiluri pentru dateline-uri, borduri, subtitluri și elemente de tip feature. În modul întunecat, culorile textului și ale iconițelor se adaptează la o temă întunecată. Elementele atomice din coloanele de conținut nu au padding. Reguli specifice asigură că primul paragraf după anumite elemente sau linii orizontale este stilizat corespunzător în diferite secțiuni de conținut, cum ar fi articole, comentarii și feature-uri.
Primul paragraf după o poartă de conectare (sign-in gate) sau o linie orizontală (cu excepția ultimei) are un padding superior de 14 pixeli.
Pentru prima literă a primului paragraf care urmează unui element inițial, unei porți de conectare sau unei linii orizontale (excluzând ultima) în cadrul diferitelor corpuri de conținut, se aplică un stil specific de majusculă decorativă (drop cap). Aceasta utilizează fontul Guardian headline, este bold, are dimensiunea de 111 pixeli cu înălțimea liniei de 92 pixeli. Plutește la stânga, este scrisă cu majuscule, utilizează box-sizing border-box, are o margine dreaptă de 8 pixeli, se aliniază în partea de sus și folosește o variabilă de culoare personalizată.
Paragrafele imediat după o linie orizontală în aceste corpuri de conținut nu au padding superior.
Citatele evidențiate (pullquotes) în aceste corpuri de conținut au o lățime maximă de 620 pixeli.
Subtitlurile pentru elementele showcase din conținutul principal și containerele de articole sunt poziționate static, ocupând lățimea completă până la 620 pixeli.
Elementele immersive acoperă lățimea completă a viewport-ului, ținând cont de bara de derulare. Pe ecrane mai mari (până la 71.24em), sunt limitate la 978 pixeli, cu padding-ul subtitlurilor ajustat la diferite puncte de întrerupere. Pe ecrane medii (46.25em până la 61.24em), lățimea maximă este de 738 pixeli. Pe ecrane mai mici (sub 46.24em), se aliniază la marginea stângă cu marginile ajustate și padding-ul subtitlurilor.
Pentru învelișurile de mobilier (furniture wrappers) pe ecrane mari (61.25em și peste), se utilizează un layout de tip grid cu coloane și rânduri definite pentru poziționarea componentelor titlului.
Stilurile CSS definesc aspectul și structura pentru secțiunea de antet a unei pagini web, denumită „furniture-wrapper”. Acestea stabilesc borduri, spațiere, tipografie și structuri grid care se ajustează la diferite dimensiuni de ecran.
Pentru ecrane mai mari (peste 71.25em), este stabilit un layout grid complex cu coloane și rânduri specifice pentru elemente precum titlu, antet, meta informații, standfirst (subtitlu) și portret. Elementele vizuale precum bordurile și liniile sunt ajustate sau eliminate la anumite puncte de întrerupere. Dimensiunea fontului antetului crește și lățimea sa maximă se schimbă pe ecrane mai mari. Linkurile din standfirst sunt stilizate cu subliniere care își schimbă culoarea la hover.
Pentru ecrane mai largi de 740 pixeli, ascunde elementele cu clasa `.keyline-4` sau atributul `[data-gu-name="lines"]`. În cadrul `.furniture-wrapper`, stilizează contururile SVG din aceste elemente să utilizeze variabila de culoare `--headerBorder`.
Pe ecrane mai largi de 740 pixeli, elimină marginea dreaptă din elementele cu ID-ul `#meta` sau atributul `[data-gu-name="meta"]` din interiorul `.furniture-wrapper`. Pentru aceste elemente meta, setează culoarea bordurii linkurilor sociale, secțiunilor de comentarii și a span-urilor copil la `--headerBorder`. De asemenea, ascunde orice componente `gu-island` din interiorul `.content__meta-container_dcr`.
Pentru secțiunea standfirst (selectată prin clasă, ID sau `data-gu-name`), aplică o margine stângă negativă și un padding corespunzător și setează poziția la relativ. Pe ecrane mai largi (peste 740px), adaugă un mic padding superior. Stilizează paragrafele din standfirst cu o greutate a fontului de 400, o dimensiune de 20 pixeli și un padding inferior de 14 pixeli.
Zona media principală (selectată prin ID sau `data-gu-name`) este poziționată relativ, nu are margine superioară, are o mică margine inferioară și este plasată în zona grid „portrait”. Asigură că div-urile interioare ocupă lățimea completă și nu au margine orizontală. Pe ecrane foarte largi (peste 980px), elimină marginea inferioară. Pe ecrane mai mici (sub 740px), setează lățimea sa la lățimea completă a viewport-ului minus orice bară de derulare și aplică o margine stângă negativă. Pentru ecrane între 480px și 740px, mărește această margine stângă negativă la -20px.
Stilizează subtitlurile figurilor să fie poziționate absolut în partea de jos, cu padding și culori de fundal/text specifice din variabilele CSS. Setează lățimea lor la 100% fără lățime maximă, elimină marginea inferioară și setează o înălțime minimă. Colorează span-urile din subtitlu folosind `--headerBorder` și umple SVG-urile lor cu aceeași culoare. Ascunde primul span și afișează al doilea span ca element block, limitându-i lățimea la 90%. Pe ecrane mai largi de 480px, mărește padding-ul orizontal al subtitlului. O clasă `.hidden` pe subtitlu îi setează opacitatea la 0.
Butonul de subtitlu este afișat ca block, poziționat absolut în dreapta jos, cu un z-index ridicat. Are un fundal circular, fără bordură și un padding specific. Micșorează ușor iconița SVG. Pe ecrane mai largi de 480px, ajustează poziția dreaptă. Pentru ecrane foarte largi (peste 1140px), ajustează partea de sus și înălțimea pseudo-elementului `.content__main-column--interactive`. De asemenea, limitează lățimea maximă a titlurilor h2 din această coloană la 620 pixeli.
Pentru elementul root când corpul are o clasă `.ios` sau `.android`, definește un set de variabile de culoare pentru modul întunecat. Într-o preferință de schemă de culori întunecată, actualizează variabila `--new-pillar-colour` în consecință.
Pe dispozitivele iOS, țintește primul paragraf după anumite elemente inițiale în diferite containere de articole și stilizează prima lor literă. Acest lucru se aplică și dacă un element de tip poartă de conectare apare între acel prim element și paragraf.
Prima literă a primului paragraf după o poartă de conectare, sau după un element atom urmat de o poartă de conectare, ar trebui să fie colorată folosind variabila secundară de pillar. Acest lucru se aplică pentru containerele de articole de tip feature, standard și comentarii, atât pe iOS, cât și pe Android.
Pe iOS și Android, înălțimea antetului articolului ar trebui setată la zero în containerele de articole feature, standard și comentarii.
Învelișul de mobilier (furniture wrapper) din aceste containere ar trebui să aibă un padding superior de 4 pixeli și un padding orizontal de 10 pixeli. Etichetele de conținut din interior ar trebui să utilizeze o familie de fonturi serif bold, să fie colorate cu noua variabilă de pillar și să aibă textul scris cu majuscule.
Antetele din învelișul de mobilier ar trebui să aibă dimensiunea de 32 pixeli, bold, un padding inferior
