Ten kod CSS definiuje rodzinę czcionek "Guardian Headline Full" z różnymi wagami i stylami, zapewniając wiele formatów plików (WOFF2, WOFF, TTF) dla każdego wariantu, aby zapewnić kompatybilność w różnych przeglądarkach.
Ten kod CSS definiuje kilka rodzin czcionek dla 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. Style zapewniają, że elementy takie jak akapity, listy i komponenty immersyjne odpowiednio dostosowują się na różnych urządzeniach.
Dla interaktywnej głównej kolumny, przed treścią dodawane jest lewe obramowanie, pozycjonowane 11 pikseli w lewo. Elementy w tej kolumnie nie mają górnego ani dolnego marginesu, ale zawierają 12 pikseli wypełnienia u góry i na dole. Gdy po akapicie następuje element, wypełnienie jest usuwane, a zamiast tego stosowane są marginesy o wielkości 12 pikseli. Elementy liniowe są ograniczone do maksymalnej szerokości 620 pikseli, a dla ekranów szerszych niż 61.25em, elementy liniowe z określoną rolą również przestrzegają tego ograniczenia szerokości.
Zdefiniowano zmienne kolorów dla różnych elementów, takich jak dateline, obramowanie nagłówka, tekst podpisu i inne, z kolorem funkcji ustawionym na czerwony, a domyślnym kolorem nowego filaru ustawionym na główny filar lub kolor funkcji.
Elementy z klasą 'element-atom' nie mają wypełnienia. Specyficzne warunki dotyczą pierwszego akapitu po określonych elementach lub poziomych liniach w różnych obszarach treści, dodając 14 pikseli górnego wypełnienia. Dodatkowo, pierwsza litera tych akapitów jest stylizowana dużym, pogrubionym, wielkim fontem w określonym kolorze, pływającym po lewej stronie z marginesem.
Poziome linie, po których następują akapity w tych obszarach, 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 showcase w głównych artykułach, feature, standardowych artykułach i komentarzach, podpisy są pozycjonowane statycznie z pełną szerokością do 620 pikseli.
Elementy immersyjne rozciągają się na pełną szerokość widoku minus szerokość paska przewijania. Na ekranach do 71.24em szerokości, te elementy są ograniczone do 978px z wypełnieniem podpisów 10px. Między 30em a 71.24em, wypełnienie podpisów zwiększa się do 20px. Dla średnich ekranów (46.25em do 61.24em) maksymalna szerokość wynosi 738px. Na mniejszych ekranach (do 46.24em) elementy immersyjne wyrównują się do lewej krawędzi z dostosowanymi marginesami i wypełnieniem.
Opakowanie furniture używa układu siatki na większych ekranach (61.25em i więcej), organizując tytuł, nagłówek, informacje meta, standfirst i sekcje portretowe. Nagłówki mają górne obramowanie, sekcje meta mają górne wypełnienie, a tekst standfirst zawiera specyficzne stylizacje dla linków i obramowań. Elementy figure w opakowaniu nie mają lewego marginesu i mają maksymalną szerokość 630px, gdy są liniowe. Na bardzo dużych ekranach (71.25em i powyżej) kolumny siatki są rekonfigurowane dla innego układu.
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 ze stałymi i automatycznymi wysokościami. Cienka linia pojawia się nad sekcją meta, a sekcja standfirst ma pionową linię po lewej stronie bez górnego obramowania na akapitach.
Na większych ekranach siatka rozszerza się do większej liczby kolumn i ułamkowych wysokości wierszy. Linia meta poszerza się, a pionowa linia standfirst przesuwa się nieco w lewo. Nagłówki mają maksymalną szerokość i rozmiar czcionki, które zwiększają się na większych ekranach, z największymi ekranami wyświetlającymi czcionkę 50px.
Niektóre elementy, takie jak linie i funkcje komentarzy społecznościowych, są ukrywane lub dostosowywane na średnich i dużych ekranach. Sekcja standfirst ma ujemne marginesy i wypełnienie, z określonymi stylami czcionek i wypełnieniem poniżej akapitów.
Obrazy głównego medium są pozycjonowane względnie, zajmując pełną szerokość i dostosowując marginesy w zależności od rozmiaru ekranu, z podpisami absolutnie pozycjonowanymi na dole z niestandardowym tłem i kolorami tekstu.
Kod CSS definiuje style dla komponentu opakowania furniture, w tym jego układ, kolory i responsywne zachowanie na różnych rozmiarach ekranów. 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 mediów społecznościowych. Nagłówki i informacje meta są stylizowane określonymi czcionkami i kolorami, a elementy interaktywne mają efekty hover dla zaangażowania użytkownika. Zapytania medialne zapewniają, że projekt adaptuje się od widoków mobilnych do desktopowych.
Ten kod CSS definiuje style dla elementów w kontenerze z klasą "furniture-wrapper". Ustawia kolory tekstu na jasnoszary (#dcdcdc) dla elementów meta i akapitów standfirst oraz używa niestandardowych właściwości dla kolorów linków, które dostosowują się do trybu ciemnego lub motywów filarów. Linki w sekcji standfirst są podkreślone z określonymi offsetami i kolorami, usuwając obramowania i obrazy tła.
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 (71.25em). Kod tworzy również dekoracyjne paski boczne przy użyciu pseudo-elementów (:before i :after), które dostosowują swoją szerokość i pozycję w zależności od rozmiaru widoku, z ciemnymi tłami i obramowanymi krawędziami.
Dodatkowo, stylizuje elementy SVG z obrysami pasującymi do koloru obramowania nagłówka i zapewnia, że elementy społecznościowe i komentarzy w sekcji meta dziedziczą odpowiednie kolory bez dodatkowych efektów tła.
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 używają lekkiej wagi czcionki 200. Jednakże, jeśli h2 zawiera element strong, przełącza się na pogrubioną wagę 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 italic)
- Regular (waga 400, styl normalny)
- Regular Italic (waga 400, styl italic)
- Medium (waga 500, styl normalny)
- Medium Italic (waga 500, styl italic)
- Semibold (waga 600, styl normalny)
- Semibold Italic (waga 600, styl italic)
Ten kod CSS definiuje kilka face'ów czcionek dla rodziny czcionek "Guardian Headline Full", każdy z różnymi wagami i stylami (normalny i italic), w zakresie od semibold (600) do black (900). Określa adresy URL źródłowe dla każdej czcionki w formatach WOFF2, WOFF i TrueType. Dodatkowo definiuje czcionkę "Guardian Titlepiece" z pogrubioną wagą (700) i stylem normalnym.
Kod ustawia również niestandardowe właściwości CSS (zmienne) dla ciemnych trybów tła i kolorów funkcji, dostosowując je w zależności od preferowanego schematu kolorów użytkownika lub gdy strona jest przeglądana na urządzeniach iOS lub Android. Zawiera specyficzne stylizacje dla pierwszej litery akapitów w kontenerach artykułów na platformach iOS i Android, szczególnie gdy następują po określonych elementach, takich jak atomy lub bramki logowania.
Dla urządzeń z Androidem, pierwsza litera pierwszego akapitu w standardowych artykułach i komentarzach jest stylizowana kolorem drugiego filaru. Na iOS i Androidzie, nagłówki artykułów są ukrywane, a opakowanie furniture ma specyficzne wypełnienie. Etykiety w opakowaniu furniture 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 opakowaniu furniture są pozycjonowane względnie, z dostosowanymi marginesami i szerokością, a ich wewnętrzne elementy, obrazy i linki są odpowiednio stylizowane.
Dla urządzeń z Androidem, obrazy w kontenerach artykułów są ustawione na przezroczyste tło, rozciągają się na pełną szerokość widoku minus pasek przewijania i automatycznie dostosowują swoją wysokość.
Na iOS i Androidzie, sekcje podsumowania artykułów mają górne i dolne wypełnienie odpowiednio 4px i 24px, z prawym marginesem offsetowanym o -10px.
Tekst w tych podsumowaniach używa rodziny czcionek Guardian Headline lub podobnych czcionek szeryfowych.
Linki w podsumowaniach są stylizowane określonym kolorem, podkreślone z offsetem 6px i używają wyznaczonego koloru dla podkreślenia, usuwając wszelkie obrazy tła lub obramowania. Po najechaniu, kolor podkreślenia zmienia się na kolor linku.
Dodatkowo, sekcje metadanych w artykułach na obu systemach operacyjnych mają spójną stylizację.
Dla urządzeń z Androidem, sekcja meta w kontenerach standardowych artykułów i komentarzy nie ma marginesu.
Na urządzeniach z iOS, informacje o autorze i byline w artykułach typu feature, standard i komentarze używają nowego koloru filaru. Dotyczy to również urządzeń z Androidem dla artykułów typu feature.
Dla iOS i Androida, różnorodna sekcja meta w artykułach typu feature, standard i komentarze nie ma wypełnienia, a wszelkie ikony SVG używają nowego koloru filaru.
Przycisk podpisu w elementach showcase dla artykułów typu feature, standard i komentarze na iOS i Androidzie jest wyświetlany jako kontener flex, wyśrodkowany z wypełnieniem 5px, 28px szerokości i wysokości oraz pozycjonowany 14px od prawej.
Ciało artykułu w artykułach typu feature, standard i komentarze na iOS i Androidzie ma 12px wypełnienia po lewej i prawej stronie.
Dla urządzeń z iOS i Androidem, w kontenerach artykułów typu feature, standard i komentarze, obrazy, które nie są miniaturkami lub immersyjne, nie będą miały marginesu, szerokości pełnego widoku minus 24 piksele i szerokość paska przewijania oraz automatycznej wysokości. Ich podpisy nie będą miały wypełnienia.
Obrazy immersyjne w tych kontenerach rozciągną się na pełną szerokość widoku 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 furniture będzie ustawione na ciemnoszary (#1a1a1a).
Dla urządzeń z iOS i Androidem, następujące style dotyczą kontenerów artykułów typu feature, standard i komentarze:
- Etykiety treści używają nowego koloru filaru.
- Nagłówki nie mają tła i używają koloru obramowania nagłówka.
- Akapity standfirst i linki używają koloru obramowania nagłówka.
- Nazwy autorów i linki w sekcji meta używają nowego koloru filaru.
- Ikony w sekcji meta mają obrys w nowym kolorze filaru.
- Podpisy dla obrazów showcase używają koloru dateline.
- Cytowane bloki cytatów w treści artykułu...
Dla urządzeń z iOS i Androidem, kolor tekstu cytowanych bloków w treści artykułów jest ustawiony na nowy kolor filaru.
Dodatkowo, kolor tła dla różnych sekcji treści artykułu na iOS i Androidzie jest zmieniany na ciemne tło, z użyciem flagi important, aby zapewnić, że zastąpi inne style.
Ponadto, dla pierwszej litery po specyficznych elementach w treści artykułów na iOS, stosowana jest specjalna stylizacja, chociaż dokładny styl 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 dotyczy różnych sekcji, takich jak treść artykułu, treść feature, sekcje komentarzy i interaktywne obszary treści, specyficznie szukając akapitów, które występują po elementach z klasą "element-atom" lub bramkach logowania.
Ten kod CSS definiuje style dla specyficznych elementów na urządzeniach z Androidem i iOS. Ustawia kolor pierwszej litery w akapitach następujących po określonych elementach na biały lub kolor zmiennej niestandardowej. Dostosowuje również wypełnienie i marginesy dla elementów standfirst w artykułach z komentarzami, 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 opakowań furniture, chociaż kod jest niekompletny dla tego ostatniego.
Dla urządzeń z iOS i Androidem, opakowanie furniture kontenera artykułu nie ma marginesu. W tym opakowaniu, etykiety treści w arty
