Ten kod CSS definiuje rodzinę czcionek "Guardian Headline Full" z wieloma stylami i grubościami. Zawiera warianty light (300), regular (400), medium (500) i semibold (600), każdy w wersjach normalnej i pochyłej. Dla każdego stylu dostarcza pliki czcionek w formatach WOFF2, WOFF i TrueType z serwera zasobów 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 i TrueType) wraz z ich wagami i stylami. Zawiera również responsywne reguły projektowania dla głównej kolumny treści w układach interaktywnych, dostosowując marginesy, szerokości i pozycjonowanie w zależności od rozmiaru widoku. Na przykład na szerszych ekranach dodaje lewy margines i obramowanie, podczas gdy na mniejszych ekranach dostosowuje szerokości i pozycje elementów, aby pasowały do wyświetlacza. Kod zapewnia, że elementy takie jak akapity i listy utrzymują maksymalną szerokość dla czytelności, oraz obsługuje elementy immersyjne, rozszerzając je do pełnej szerokości na urządzeniach mobilnych i dostosowując ich układ na większych ekranach.
Dla interaktywnych kolumn treści dodawane jest lewe obramowanie w jasnoszarym kolorze, przesunięte nieco w lewo. Elementy wewnątrz tych kolumn nie mają górnych ani dolnych marginesów, ale mają wypełnienie 12px. Gdy akapit następuje po elemencie, wypełnienie jest usuwane, a marginesy ustawiane na 12px. Elementy liniowe są ograniczone do maksymalnej szerokości 620px, a na szerszych ekranach figury z określoną rolą również przestrzegają tego limitu szerokości.
Zdefiniowano zmienne kolorów dla różnych elementów tekstu i tła, w tym dateline, obramowań nagłówków, podpisów i kolorów feature, z domyślnym kolorem feature ustawionym na czerwony.
Elementy stylizowane jako atomy nie mają wypełnienia. Specyficzne reguły dotyczą pierwszego akapitu po określonych elementach lub poziomych liniach w różnych obszarach treści, dodając górne wypełnienie 14px. Dodatkowo, pierwsza litera tych akapitów jest stylizowana dużą, pogrubioną, wielką czcionką w stylu nagłówka, pokolorowana zgodnie z zdefiniowanym kolorem feature i przesunięta do lewej z marginesem.
Poziome linie, po których następują akapity w różnych sekcjach treści, nie mają górnego wypełnienia.
Cytaty wydzielone w określonych obszarach treści mają maksymalną szerokość 620 pikseli.
Dla elementów showcase w różnych kontenerach artykułów, podpisy są pozycjonowane statycznie z pełną szerokością i maksymalną szerokością 620 pikseli.
Elementy immersyjne rozciągają się na pełną szerokość viewportu minus pasek przewijania. Na ekranach o szerokości do 71.24em, elementy te są ograniczone do 978 pikseli, z wypełnieniem podpisów 10 pikseli. Pomiędzy 30em a 71.24em, wypełnienie podpisów zwiększa się do 20 pikseli. Dla ekranów między 46.25em a 61.24em, maksymalna szerokość wynosi 738 pikseli. Poniżej 46.24em, elementy immersyjne wyrównują się do lewej z dostosowanymi marginesami i wypełnieniem podpisów 20 pikseli między 30em a 46.24em.
Furniture wrapper używa układu siatki na ekranach o szerokości 61.25em i większej, ze zdefiniowanymi kolumnami i wierszami do organizacji treści. Nagłówki mają górne obramowanie, sekcje meta mają górne wypełnienie, a elementy standfirst zawierają stylizowane linki z podkreśleniami, które zmieniają kolor po najechaniu. Początkowo, pierwszy akapit w standfirst ma górne obramienie i brak dolnego wypełnienia, co jest usuwane na ekranach o szerokości 71.25em i większej.
Figury wewnątrz furniture wrapper mają lewe marginesy i maksymalną szerokość 630 pikseli dla elementów liniowych. Na większych ekranach (71.25em i więcej), kolumny siatki są rekonfigurowane dla innego rozmieszczenia treści.
Układ używa siatki z określonymi kolumnami i wierszami dla różnych rozmiarów ekranu. Dla mniejszych ekranów, siatka definiuje obszary dla tytułu, nagłówka, standfirst, informacji meta i portretu, z wierszami ustawionymi na stałe i automatyczne wysokości. Cienka linia pojawia się nad sekcją meta, a standfirst ma pionową linię po lewej stronie.
Na większych ekranach, siatka dostosowuje się do użycia jednostek ułamkowych dla wierszy i rozszerza zakresy kolumn. Rozmiar czcionki nagłówka zwiększa się, a jego maksymalna szerokość zmienia się, podczas gdy niektóre elementy, jak linie, są ukrywane. Tekst standfirst jest stylizowany z określoną grubością i rozmiarem czcionki, a główny obszar mediów jest pozycjonowany wewnątrz siatki, z dostosowaniami szerokości i marginesów na mniejszych urządzeniach. Podpisy są absolutnie pozycjonowane na dole z kolorem tła i wypełnieniem.
Kod CSS definiuje style dla komponentu furniture wrapper, w tym jego układ, kolory i responsywne zachowanie na różnych rozmiarach ekranów. Ustawia kolory tła, kolory tekstu i style obramowań używając niestandardowych właściwości CSS dla motywów takich jak tryb ciemny. wrapper dostosowuje marginesy, wypełnienie i pozycjonowanie na większych ekranach oraz zawiera ukryte elementy i interaktywne przyciski z efektami hover do udostępniania społecznościowego. Nagłówki i informacje meta są stylizowane określonymi czcionkami i kolorami, zapewniając spójność projektu.
Ten kod CSS definiuje style dla elementów wewnątrz klasy "furniture-wrapper", skupiając się na sekcjach informacji meta i standfirst. Ustawia kolor tekstu na jasnoszary (#dcdcdc) i kolor linków na odcień oparty na zmiennej, z efektami hover, które zmieniają kolor dekoracji tekstu. Linki w standfirst są podkreślone z określonym przesunięciem i kolorem, a stany hover dostosowują kolor podkreślenia.
Dla większych ekranów (min-width: 61.25em), pierwszy akapit w standfirst otrzymuje górne obramowanie, które jest usuwane na jeszcze większych ekranach (min-width: 71.25em). Elementy listy w standfirst również przyjmują jasnoszary kolor tekstu.
Kod zawiera elementy responsywnego projektowania używając zapytań medialnych dla różnych szerokości ekranu (46.25em, 61.25em, 71.25em i 81.25em). Te dostosowują szerokość i pozycjonowanie elementów pseudo (:before i :after) do tworzenia obszarów tła z obramowaniami, obliczając wymiary na podstawie szerokości viewportu i korekt paska przewijania.
Dodatkowo, stylizuje elementy SVG wewnątrz keylines oraz elementy mediów społecznościowych lub komentarzy w sekcji meta, ustawiając ich kolor obrysu i tekstu, aby pasowały do motywu używając zmiennych CSS.
Sekcja komentarzy ma kolor obramowania pasujący do koloru obramowania nagłówka. W artykułach, nagłówki drugiego poziomu mają lekki krój czcionki o wadze 200, ale jeśli zawierają element strong, używają pogrubienia o wadze 700.
Dodatkowo, rodzina czcionek Guardian Headline Full jest zdefiniowana z różnymi stylami i wagami, w tym light, regular, medium i semibold, każda w wersjach normalnej i pochyłej. Te czcionki są pozyskiwane z określonych URL-i w formatach WOFF2, WOFF i TrueType.
Ten kod CSS definiuje kilka face'ów czcionek dla rodziny czcionek "Guardian Headline Full", każdy z różnymi wagami i stylami (normal i italic), w zakresie od semibold (600) do black (900). Zawiera również face czcionki dla "Guardian Titlepiece" w wersji bold. Czcionki są pozyskiwane z określonych URL-i w formatach WOFF2, WOFF i TrueType.
Dodatkowo, kod ustawia niestandardowe właściwości CSS (zmienne) dla ciemnych trybów tła i kolorów feature, dostosowując je na podstawie preferencji schematu kolorów użytkownika lub gdy strona jest przeglądana na urządzeniach iOS lub Android. Zawiera również stylizację pierwszej litery akapitów w kontenerach artykułów na tych platformach mobilnych, z określonymi selektorami do obsługi bramek logowania.
Dla urządzeń z Androidem, pierwsza litera pierwszego akapitu w standardowych artykułach i komentarzach jest stylizowana kolorem secondary pillar. Zarówno na iOS, jak i Androidzie, nagłówki artykułów są ukrywane, a furniture wrapper mają określone wypełnienie. Etykiety wewnątrz tych wrapperów używają pogrubionej, kapitalizowanej czcionki w stylu nagłówka z nowym kolorem pillar. Nagłówki są ustawione na 32px, pogrubione, z dolnym wypełnieniem i ciemnym kolorem. Obrazy w furniture wrapper są pozycjonowane względnie, rozciągają się na szerokość viewportu minus pasek przewijania i dostosowują swoją wysokość automatycznie.
Dla urządzeń z Androidem, obrazy wewnątrz kontenerów artykułów są ustawione na przezroczyste tło, rozciągają się na pełną szerokość viewportu minus pasek przewijania i dostosowują swoją wysokość automatycznie.
Zarówno na iOS, jak i Androidzie, sekcje podsumowania artykułów mają górne i dolne wypełnienie odpowiednio 4px i 24px, z prawym marginesem przesuniętym o -10px.
Tekst w tych podsumowaniach używa rodziny czcionek Guardian Headline lub podobnych czcionek szeryfowych.
Linki wewnątrz podsumowań są stylizowane określonym kolorem, podkreślone z przesunięciem 6px i używają wyznaczonego koloru dla podkreślenia, który zmienia się po najechaniu na kolor linku.
Dodatkowo, sekcje metadanych w artykułach na obu systemach operacyjnych mają spójne stylizacje.
Dla urządzeń z Androidem, margines dla elementów meta w standardowych kontenerach artykułów i komentarzy jest ustawiony na zero.
Na urządzeniach z iOS, informacje o autorze i byline w kontenerach artykułów feature, standardowych i komentarzy będą pojawiać się w wyznaczonym kolorze pillar. Podobnie, na urządzeniach z Androidem, te same elementy w kontenerach artykułów feature, standardowych i komentarzy również użyją koloru pillar.
Dla obu iOS i Android, różne informacje meta w kontenerach artykułów feature, standardowych i komentarzy nie mają wypełnienia, a wszelkie ikony SVG wewnątrz nich są stylizowane z kolorem pillar jako ich obrys.
Przycisk podpisu w elementach showcase dla artykułów feature, standardowych i komentarzy na obu iOS i Androidzie jest wyświetlany jako kontener flex. Jest wyśrodkowany, ma wymiary 28 na 28 pikseli i pozycjonowany 14 pikseli od prawej z wypełnieniem 5 pikseli.
Ciało artykułu w kontenerach feature, standardowych i komentarzy dla iOS i Android ma 12 pikseli wypełnienia poziomego i brak wypełnienia pionowego.
Dla urządzeń iOS i Android, w kontenerach artykułów feature, standardowych i komentarzy, obrazy niebędące miniaturkami i nieimmersyjne wewnątrz ciała artykułu nie będą miały marginesu, szerokość obliczona jako pełna szerokość viewportu 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ść viewportu minus szerokość paska przewijania.
W prozie ciała artykułu, cytowane blokowe cytaty wyświetlą kolorowy znacznik używając nowego koloru pillar. Linki będą stylizowane podstawowym kolorem pillar, podkreślone z przesunięciem i użyją koloru obramowania nagłówka dla podkreślenia. Po najechaniu, kolor podkreślenia zmienia się na nowy kolor pillar.
W trybie ciemnym, tło furniture wrapper będzie ustawione na ciemny szary (#1a1a1a).
Dla urządzeń iOS i Android, zastosuj następujące style do kontenerów artykułów feature, standardowych i komentarzy:
- Ustaw etykiety treści, aby używały nowego koloru pillar.
- Usuń kolor tła z nagłówków i ustaw ich kolor tekstu na kolor obramowania nagłówka, zapewniając pierwszeństwo.
- Spraw, aby akapity i linki standfirst przyjęły kolor obramowania nagłówka.
- Użyj nowego koloru pillar dla autorów byline i ich linków.
- Zastosuj nowy kolor pillar do obrysu ikon meta różnego rodzaju.
- Ustaw kolor podpisów obrazów showcase na kolor dateline.
- Stylizuj cytowane blokowe cytaty w prozie ciała artykułu odpowiednio.
Dla urządzeń iOS i Android, kolor tekstu cytowanych bloków w ciałach artykułów jest ustawiony na określony kolor pillar.
Dodatkowo, kolor tła dla różnych sekcji ciała artykułu na obu systemach operacyjnych jest wymuszony na ciemne tło.
Na iOS, pierwsza litera po określonych elementach w ciałach artykułów jest stylizowana z efektem inicjału.
To wydaje się być selektorem CSS celującym w pierwszą literę akapitów, które następują po określonych 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ę między elementami.
Ten kod CSS definiuje style dla określonych elementów na urządzeniach z Androidem i iOS. Ustawia kolor pierwszej litery w określonych akapitach na biały lub kolor zmiennej niestandardowej. Dostosowuje również wypełnienie i marginesy dla elementów standfirst w artykułach komentarzy, ustawia rozmiary czcionek dla nagłówków h2 i modyfikuje wypełnienie dla przycisków podpisów.
Dla trybu ciemnego, zmienia kolory tekstu i ikon na jaśniejsze odcienie i definiuje ciemny kolor tła. Dodatkowo, ukrywa nagłówki artykułów, czyniąc je w pełni przezroczystymi i stosuje style do furniture wrapper, choć ostatnia reguła wydaje się niekompletna.
Dla urządzeń iOS i Android, furniture wrapper kontenera artykułu nie ma marginesu. Etykiety w artykułach feature, standardowych i komentarzy używają nowego koloru pillar lub koloru feature trybu ciemnego. Nagłówki w tych artykułach są ustaw
