Ten kod CSS definiuje niestandardową rodzinę czcionek o nazwie "Guardian Headline Full" z wieloma wagami i stylami czcionek. Obejmuje wagi lekką, regularną, średnią i półgrubą, każdą w wersjach normalnej i kursywy. Dla każdego stylu kod określa trzy różne formaty plików czcionek (woff2, woff i ttf) hostowane na serwerach Guardiana, zapewniając szeroką kompatybilność z przeglądarkami.
@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-cDla interaktywnych kolumn treści dodawana jest lewa ramka z określonym pozycjonowaniem i z-index. Na większych ekranach pozycja ramki nieznacznie się dostosowuje. Wewnątrz tych kolumn elementy atomowe nie mają górnych ani dolnych marginesów, ale zawierają wypełnienie. Gdy po elemencie atomowym następuje akapit, wypełnienie jest usuwane i zamiast tego dodawane są marginesy. Elementy liniowe są ograniczone do maksymalnej szerokości.
Dla figur z rolą inline, one również mają maksymalną szerokość na ekranach średniej wielkości i większych.
Niestandardowe właściwości definiują różne kolory dla elementów takich jak daty, nagłówki, podpisy i cechy. Podstawowy kolor filaru domyślnie przyjmuje kolor cechy, jeśli nie jest ustawiony.
Elementy atomowe w interaktywnych kolumnach lub ogólnie nie mają wypełnienia. Pierwszy akapit po określonych elementach lub poziomych liniach w różnych treściach otrzymuje dodatkowe górne wypełnienie.
Dodatkowo, pierwsza litera tych akapitów jest stylizowana jako inicjał z określoną czcionką, rozmiarem, wagą i kolorem, używając niestandardowych właściwości do kolorowania.Dla akapitów następujących po poziomych liniach w określonych obszarach treści usuń górne wypełnienie.
Ogranicz szerokość cytatu wydzielonego do 620px w treściach artykułów, interaktywnych, komentarzy i cech.
Dla podpisów elementów showcase w głównej treści i kontenerach artykułów ustaw pozycję na static, szerokość na 100% i maksymalną szerokość na 620px.
Elementy immersyjne powinny rozciągać się na pełną szerokość widoku minus pasek przewijania. Na ekranach do 71.24em ogranicz ich szerokość do 978px. Dla podpisów na tych ekranach dodaj 10px poziomego wypełnienia, zwiększając do 20px na ekranach między 30em a 71.24em.
Na ekranach średniego zakresu (46.25em do 61.24em) ogranicz elementy immersyjne do 738px. Na mniejszych ekranach (do 46.24em) usuń lewy margines, wyrównaj do lewej krawędzi i dodaj 10px ujemnego lewego marginesu (20px na ekranach 30em i szerszych). Podpisy na tych mniejszych ekranach otrzymują 20px poziomego wypełnienia.
Dla opakowania mebla na dużych ekranach (61.25em i więcej) użyj siatki CSS ze zdefiniowanymi kolumnami i wierszami. Stylizuj pierwsze dziecko nagłówków z górną ramką. Pozycjonuj sekcję meta względnie z górnym wypełnieniem i bez prawego marginesu. W sekcjach standfirst dostosuj dolne marginesy, ustaw rozmiar czcionki elementów listy na 20px i stylizuj linki z podkreśleniami (używając niestandardowego koloru dla podkreślenia, który zmienia się po najechaniu). Pierwszy akapit w standfirst otrzymuje górną ramkę i brak dolnego wypełnienia, chociaż ta ramka jest usuwana na bardzo dużych ekranach (71.25em i więcej).
Również dla figur wewnątrz opakowania usuń lewy margines i ustaw maksymalną szerokość 630px dla elementów inline. Na największych ekranach (71.25em i więcej) zdefiniowane są szablony kolumn siatki zaczynające się od tytułu, nagłówka i meta.Układ używa siatki z kolumnami i wierszami zdefiniowanymi dla różnych rozmiarów ekranów. Na większych ekranach siatka ma trzy kolumny dla sekcji tytułu, nagłówka i meta, pięć kolumn dla standfirst i osiem kolumn dla portretu, z wierszami o proporcjonalnych rozmiarach. Na średnich ekranach siatka dostosowuje się odpowiednio do dwóch, pięciu i siedmiu kolumn, z określonymi wysokościami wierszy.
Stylizacja obejmuje górną ramkę dla sekcji meta i lewą ramkę dla standfirst, obie używając niestandardowej zmiennej koloru. Nagłówki mają maksymalną szerokość i rozmiar czcionki, który zmienia się wraz z rozmiarem ekranu, stając się większy na szerszych ekranach. Niektóre elementy, takie jak udostępnianie społecznościowe i sekcje komentarzy, mają ramki pasujące do koloru nagłówka, podczas gdy inne są ukryte na niektórych urządzeniach.
Tekst standfirst ma określone właściwości wypełnienia i czcionki, a główny obszar mediów jest pozycjonowany wewnątrz siatki, z jego szerokością dostosowującą się na mniejszych ekranach, aby uwzględnić paski przewijania i marginesy. Podpisy są pozycjonowane absolutnie.Podpis figury w opakowaniu mebla jest pozycjonowany absolutnie na dole bez dolnego marginesu, z wypełnieniem, kolorem tła i kolorem tekstu. Jego szerokość jest ustawiona na 100% z minimalną wysokością 46 pikseli. Wewnątrz podpisu pierwszy span jest ukryty, podczas gdy drugi jest wyświetlany i ograniczony do 90% maksymalnej szerokości. Tekst podpisu i ikony SVG używają określonej zmiennej koloru.
Na ekranach szerszych niż 30em poziome wypełnienie podpisu zwiększa się. Dedykowany przycisk podpisu jest pozycjonowany absolutnie na dole po prawej, z okrągłym tłem i przeskalowaną ikoną SVG, dostosowując swoją prawą pozycję na większych ekranach.
Dla interaktywnych głównych kolumn na bardzo szerokich ekranach pseudo-element dostosowuje swój wierzchołek i wysokość. Nagłówki wewnątrz tych kolumn mają maksymalną szerokość.
W systemach iOS i Android zdefiniowane są zmienne kolorów trybu ciemnego, w tym kolor cechy, który zmienia się w trybie ciemnym. Określone kontenery artykułów na tych platformach stylizują pierwszą literę pierwszego akapitu po określonych elementach z kolorem pomocniczym, ustawiają wysokość nagłówka artykułu na zero, dostosowują wypełnienie dla opakowania mebla i ukrywają etykiety treści wewnątrz niego.Dla urządzeń z systemami iOS i Android następujące style dotyczą kontenerów artykułów typu feature, standard i comment:
- **Etykiety**: Używają pogrubionej, kapitalizowanej czcionki w nagłówku Guardiana lub kroju szeryfowym, kolorowanej zmienną nowego koloru filaru.
- **Nagłówki**: Ustawione na 32px, pogrubione, z dolnym wypełnieniem 12px i ciemnoszarym kolorem (#121212).
- **Obrazy**: Pozycjonowane względnie, z górnym marginesem 14px i ujemnym lewym marginesem 10px. Szerokość obejmuje pełną szerokość widoku (uwzględniając paski przewijania), a wysokość dostosowuje się automatycznie. Elementy wewnętrzne, obrazy i linki wewnątrz figury mają przezroczyste tło, pasując do pełnej szerokości widoku z automatyczną wysokością.
- **Standfirst (streszczenie artykułu)**: Zawiera 4px górnego wypełnienia, 24px dolnego wypełnienia i ujemny prawy margines 10px. Akapity wewnątrz standfirst dziedziczą style tych kontenerów.Kod CSS ustawia określone style dla standfirstów artykułów i metadanych na urządzeniach z systemami iOS i Android. Definiuje rodziny czcionek dla tekstu standfirst i dostosowuje wygląd linków, w tym kolor, styl podkreślenia i efekty po najechaniu. Kod również dostosowuje marginesy dla sekcji metadanych i zapewnia spójne stylowanie dla podpisów autorskich i linków do autorów w różnych typach artykułów.Nazwa autora w sekcji meta opakowania mebla, wraz z powiązanymi linkami i spanami na urządzeniach z Androidem dla artykułów standardowych i komentarzy, powinna używać nowego koloru filaru. W systemach iOS i Android, sekcja meta różne w artykułach typu feature, standard i comment nie powinna mieć wypełnienia, a wszelkie ikony SVG wewnątrz powinny być stylizowane z nowym kolorem filaru jako obrysem.
Dla elementów showcase w artykułach typu feature, standard i comment na obu systemach iOS i Android, przycisk podpisu powinien być wyświetlany jako kontener flex. Powinien być wyśrodkowany z wypełnieniem 5px, wyrównany zarówno poziomo, jak i pionowo, o rozmiarze 28x28 pikseli i pozycjonowany 14px od prawej.
Treść artykułu w artykułach typu feature, standard i comment na systemach iOS i Android powinna mieć 12px wypełnienia po lewej i prawej stronie. Wewnątrz treści artykułu, figury obrazów, które nie są miniaturkami ani immersyjne, nie powinny mieć marginesu. Ich szerokość powinna być pełną szerokością widoku minus 24px i wszelka szerokość paska przewijania, z automatyczną wysokości
