Ten kod CSS definiuje rodzinę czcionek „Guardian Headline Full” z różnymi wagami i stylami, w tym light, regular, medium i semibold, każda w wersjach normalnych i pochyłych. Określa pliki czcionek w formatach WOFF2, WOFF i TrueType hostowane na serwerach Guardiana.
Ten kod CSS definiuje kilka rodzin czcionek dla czcionek Guardian Headline i Guardian Titlepiece, określając ich źródła w różnych formatach (WOFF2, WOFF, TTF) wraz z ich wagami i stylami. Zawiera również reguły responsywnego projektowania dla głównej kolumny treści w układach interaktywnych, dostosowując marginesy, szerokości i pozycjonowanie w zależności od rozmiaru widocznego obszaru. Na przykład na szerszych ekranach dodaje lewy margines i obramowanie, podczas gdy na mniejszych ekranach rozszerza elementy do pełnej szerokości i wyśrodkowuje je. Style zapewniają prawidłowe formatowanie na różnych urządzeniach, z ustawionymi maksymalnymi szerokościami dla różnych typów treści, takich atomy, wizytówki i elementy immersyjne.
Dla interaktywnych kolumn treści, przed elementem dodawane jest lewe obramowanie, pozycjonowane 11 pikseli w lewo. Wewnątrz tych kolumn atomy (elementy) nie mają górnych ani dolnych marginesów, ale zawierają 12 pikseli wypełnienia zarówno u góry, jak i na dole. Gdy po atomie następuje akapit, wypełnienie jest usuwane, a zamiast niego stosowane są marginesy o wielkości 12 pikseli. Elementy liniowe są ograniczone do maksymalnej szerokości 620 pikseli, a na szerszych ekranach (powyżej 61.25em) figury liniowe z określoną rolą również przestrzegają tego limitu szerokości.
Zdefiniowane są zmienne kolorów dla różnych elementów, takich jak dataliny, nagłówki, podpisy i feature, z domyślnym kolorem feature ustawionym na czerwony. Atomy w głównej kolumnie i innych miejscach nie mają wypełnienia.
Specyficzne reguły dotyczą pierwszego akapitu po określonych elementach lub poziomych liniach w różnych obszarach treści (treść artykułu, treść interaktywna, komentarze, feature), dodając 14 pikseli górnego wypełnienia. Dodatkowo, pierwsza litera tych akapitów jest stylizowana dużą, pogrubioną, wielką czcionką w określonym kroju, pokolorowana zgodnie ze zmienną i przesunięta do lewej z marginesem.
Poziome linie, po których następują akapity w tych sekcjach, nie mają górnego wypełnienia.
Cytaty wydzielone w określonych obszarach treści są ograniczone do maksymalnej szerokości 620 pikseli.
Dla elementów wizytówki w różnych kontenerach artykułów, podpisy są pozycjonowane statycznie z pełną szerokością do 620 pikseli.
Elementy immersyjne rozciągają się na pełną szerokość widocznego obszaru minus szerokość paska przewijania. Na ekranach o szerokości do 71.24em, elementy te są ograniczone do szerokości 978px z wypełnieniem podpisów 10px. Pomiędzy 30em a 71.24em, wypełnienie podpisów zwiększa się do 20px. Dla ekranów pomiędzy 46.25em a 61.24em, maksymalna szerokość wynosi 738px. Poniżej 46.24em, elementy immersyjne wyrównują się do lewej krawędzi z dostosowanymi marginesami i zachowują wypełnienie podpisów 20px pomiędzy 30em a 46.24em.
Opakowanie mebla (furniture wrapper) używa responsywnego układu siatki na ekranach o szerokości 61.25em i większej, organizując sekcje tytułu, nagłówka, metadanych, wstępu (standfirst) i portretu. Nagłówki mają górne obramowanie, sekcje meta mają górne wypełnienie, a tekst wstępu zawiera specyficzne stylowanie dla list i linków z niestandardowymi podkreśleniami, które zmieniają kolor po najechaniu. Pierwszy akapit we wstępie ma górne obramowanie na większych ekranach, ale usuwa je powyżej 71.25em.
Figury wewnątrz opakowania mebla mają wyrównane do lewej marginesy, a elementy liniowe są ograniczone do szerokości 630px. Powyżej 71.25em, układ siatki dostosowuje się, aby pomieścić więcej kolumn dla treści portretowej.
Układ używa siatki z określonymi kolumnami i wierszami dla różnych rozmiarów ekranu. Dla mniejszych ekranów siatka ma trzy kolumny i wiersze, które dostosowują się automatycznie, ze stałą wysokością 80px dla obszarów tytułu i portretu. Cienka linia pojawia się nad sekcją meta, a sekcja wstępu ma pionową linię po lewej stronie.
Na większych ekranach siatka rozszerza się do większej liczby kolumn i wierszy z jednostkami ułamkowymi dla elastyczności. Górna linia sekcji meta poszerza się, a pionowa linia wstępu lekko się przesuwa. Nagłówki mają maksymalną szerokość i rozmiar czcionki, które zwiększają się na większych ekranach, podczas gdy niektóre elementy, takie jak linie, są ukrywane lub dostosowywane w marginesach dla różnych punktów granicznych.
Elementy społecznościowe i komentarzy w sekcji meta współdzielą ten sam kolor obramowania, a niektóre komponenty nie są wyświetlane. Tekst wstępu ma specyficzne stylowanie ze zmniejszonym lewym marginesem i wypełnieniem oraz właściwościami czcionki. Główne elementy multimedialne są pozycjonowane względnie, z pełną szerokością i dostosowanymi marginesami na różnych urządzeniach, a podpisy są pozycjonowane absolutnie na dole z niestandardowym tłem i kolorami tekstu.
Kod CSS definiuje style dla komponentu opakowania mebla, w tym jego układ, kolory i responsywne zachowanie na różnych rozmiarach ekranu. Ustawia kolory tła, kolory tekstu i style obramowań przy użyciu niestandardowych właściwości CSS dla motywów, takich jak tryb ciemny. Opakowanie dostosowuje marginesy, wypełnienie i pozycjonowanie na większych ekranach oraz zawiera reguły ukrywania lub pokazywania elementów, takich jak podpisy i przyciski. Nagłówki i informacje meta są stylizowane z określonymi czcionkami i kolorami, a przyciski mediów społecznościowych mają efekty po najechaniu, które zmieniają ich wygląd. Zapytania medialne zapewniają, że projekt adaptuje się do różnych urządzeń.
Ten kod CSS definiuje style dla klasy furniture-wrapper strony internetowej, skupiając się na elementach takich jak sekcje informacji meta i wstępu. Ustawia kolory tekstu na jasnoszary (#dcdcdc) i kolory linków na odcień oparty na zmiennej, z efektami po najechaniu, które zmieniają kolory dekoracji tekstu. Linki w obszarach wstępu mają podkreślenia z określonymi offsetami i bez obramowań, podczas gdy akapity i elementy listy również przyjmują jasnoszary kolor.
Dla większych ekranów (min-width: 61.25em), pierwszy akapit we wstępie otrzymuje górne obramowanie, które jest usuwane na jeszcze większych ekranach (71.25em). Kod tworzy również dekoracyjne paski boczne przy użyciu pseudo-elementów (:before i :after), które dostosowują szerokość w zależności od rozmiaru widocznego obszaru, charakteryzując się ciemnym tłem i obramowanymi krawędziami. Dodatkowo, stylizuje elementy SVG z kolorami obrysu oraz ikony mediów społecznościowych lub komentarzy w sekcjach meta.
Sekcja komentarzy ma kolor obramowania pasujący do koloru obramowania nagłówka.
W artykułach, nagłówki drugiego poziomu (h2) w głównej treści mają lekki stopień pisma 200. Jednakże, jeśli h2 zawiera element strong, używa pogrubionego stopnia pisma 700.
Rodzina czcionek Guardian Headline Full zawiera różne style i wagi, każda z określonymi źródłami plików w formatach WOFF2, WOFF i TrueType:
- Light (waga 300, styl normalny)
- Light Italic (waga 300, styl pochyły)
- Regular (waga 400, styl normalny)
- Regular Italic (waga 400, styl pochyły)
- Medium (waga 500, styl normalny)
- Medium Italic (waga 500, styl pochyły)
- Semibold (waga 600, styl normalny)
- Semibold Italic (waga 600, styl pochyły)
Ten kod CSS definiuje kilka odmian kroju (font face) dla rodziny czcionek „Guardian Headline Full” z różnymi wagami i stylami (normalny i pochyły), w zakresie od semibold (600) do black (900). Każda odmiana kroju określa pliki źródłowe w formatach WOFF2, WOFF i TrueType z serwerów zasobów Guardiana.
Definiuje również czcionkę „Guardian Titlepiece” z pogrubioną wagą (700) i normalnym stylem, używając podobnych formatów plików z innej subdomeny.
Kod zawiera niestandardowe właściwości CSS (zmienne) dla schematów kolorów, szczególnie dla trybu ciemnego na urządzeniach iOS i Android. Ustawia ciemny kolor tła, kolory feature dla trybu jasnego i ciemnego oraz używa zapytań medialnych do dostosowania koloru filaru w zależności od preferowanego schematu kolorów użytkownika.
Dodatkowo, istnieją specyficzne reguły stylizowania pierwszej litery akapitów w kontenerach artykułów na urządzeniach iOS i Android, które stosują się, gdy następują one po określonych elementach, takich jak atomy, bramki logowania (sign-in gates) lub określone elementy gate.
Dla urządzeń Android, pierwsza litera pierwszego akapitu w standardowych artykułach i artykułach z komentarzami jest stylizowana kolorem pomocniczego filaru. Na iOS i Android, nagłówki artykułów są ukrywane, a opakowania mebli mają specyficzne wypełnienie. Etykiety wewnątrz tych opakowań używają pogrubionej, kapitalizowanej czcionki w stylu nagłówka z nowym kolorem filaru. Nagłówki są ustawione na 32px, pogrubione, z dolnym wypełnieniem i ciemnym kolorem. Obrazy w opakowaniach mebli są pozycjonowane względnie, rozciągają się na szerokość widocznego obszaru minus pasek przewijania i dostosowują swoją wysokość automatycznie.
Dla urządzeń Android, obrazy wewnątrz kontenerów artykułów są ustawione na przezroczyste tło, rozciągają się na pełną szerokość widocznego obszaru minus pasek przewijania i dostosowują swoją wysokość automatycznie.
Na iOS i Android, sekcja wstępu w artykułach ma górne i dolne wypełnienie odpowiednio 4px i 24px, z prawym marginesem offsetowanym o -10px. Tekst wewnątrz używa rodziny czcionek Guardian Headline lub zapasowych czcionek szeryfowych.
Linki wewnątrz wstępu na obu platformach są stylizowane określonym kolorem, podkreślone z offsetem 6px i używają wyznaczonego koloru dla podkreślenia, który zmienia się po najechaniu. Obraz tła i dolne obramowanie są usuwane.
Dodatkowo, sekcja meta w artykułach jest stylizowana spójnie na iOS i Android dla kontenerów feature, standard i comment.
Dla urządzeń Android, usuń marginesy z elementów meta w standardowych i komentarzowych kontenerach artykułów.
Dla urządzeń iOS, ustaw kolor elementów byline i author w kontenerach artykułów feature, standard i comment na nowy kolor filaru. Również usuń wypełnienie z elementów meta misc i ustaw obrys ikon SVG wewnątrz nich na nowy kolor filaru. Dodatkowo, stylizuj przycisk podpisu w elementach showcase z określonym wyświetlaniem, wypełnieniem, wyrównaniem i wymiarami.
Dla iOS i Android, ustaw wypełnienie treści artykułu na 0 po bokach i 12px u góry i na dole w kontenerach artykułów feature, standard i comment.
Dla urządzeń iOS i Android, w kontenerach artykułów feature, standard i comment, obrazy niebędące miniaturkami i nieimmersyjne wewnątrz treści artykułu nie będą miały marginesu, będą miały szerokość pełnego widocznego obszaru minus 24 piksele i szerokość paska przewijania oraz automatyczną wysokość. Ich podpisy nie będą miały wypełnienia.
Obrazy immersyjne w tych kontenerach rozciągną się na pełną szerokość widocznego obszaru minus szerokość paska przewijania.
Cytowane bloki cytatów w treści artykułu wyświetlą kolorowy znacznik używając nowego koloru filaru.
Linki w treści artykułu będą stylizowane podstawowym kolorem filaru, podkreślone z offsetem i użyją koloru obramowania nagłówka dla podkreślenia. Po najechaniu kolor podkreślenia zmienia się na nowy kolor filaru.
W trybie ciemnym, tło opakowania mebla będzie ciemnoszare (#1a1a1a).
Dla urządzeń iOS i Android, następujące style stosują się do kontenerów artykułów feature, standard i comment:
- Etykiety treści używają nowego koloru filaru.
- Nagłówki nie mają tła i używają koloru obramowania nagłówka dla tekstu.
- Akapity i linki wstępu używają koloru obramowania nagłówka.
- Autorzy byline i ich linki używają nowego koloru filaru.
- Różne ikony metadanych są obrysowane nowym kolorem filaru.
- Podpisy obrazów wizytówki używają koloru dateline.
- Cytowane bloki cytatów w treści artykułu są stylizowane nowym kolorem filaru.
Dla urządzeń iOS i Android, kolor tekstu cytowanych bloków w treściach artykułów jest ustawiony na specyficzny kolor filaru.
Dodatkowo, kolor tła różnych sekcji treści artykułu na iOS i Android jest zmieniany na ciemne tło, zapewniając, że zastępuje inne style.
Ponadto, dla pierwszej litery następującej po określonych elementach w treściach artykułów na iOS, stosowane jest specjalne stylizowanie, chociaż dokładny efekt nie jest tu określony.
Wydaje się, że jest to selektor CSS celujący w pierwszą literę akapitów, które następują po specyficznych elementach w różnych kontenerach artykułów na platformach iOS i Android. Selektor stosuje się do różnych typów artykułów (standard, feature, comment) i uwzględnia bramki logowania, które mogą pojawić się pomiędzy elementami.
Ten kod CSS definiuje style dla specyficznych elementów na urządzeniach Android i iOS. Ustawia kolor pierwszej litery w określonych akapitach na kolor zmiennej, dostosowuje wypełnienie i marginesy dla elementów wstępu w artykułach z komentarzami oraz stylizuje
