Ten kod CSS definiuje niestandardową rodzinę czcionek o nazwie "Guardian Headline Full" z wieloma wagami i stylami czcionek. Zawiera wagi lekką, regularną, średnią i półgrubą, każda z normalnymi i kursywowymi wariantami. Pliki czcionek są dostarczane w formatach WOFF2, WOFF i TrueType, hostowane na serwerach Guardiana.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Interaktywna kolumna treści ma lewą obwódkę i określone odstępy dla elementów. Akapity następujące po określonych elementach mają dodatkowy górny padding, a pierwsza litera tych akapitów jest stylizowana jako duża, kolorowa inicjała. Elementy liniowe i figury są ograniczone do maksymalnej szerokości 620px na większych ekranach. Zdefiniowano różne zmienne kolorów dla spójnego motywu.
Cytaty wydzielone (pullquotes) w określonych kontenerach powinny mieć maksymalną szerokość 620 pikseli.
Podpisy dla elementów showcase w głównej treści i kontenerach artykułów powinny być pozycjonowane statycznie, z pełną szerokością do 620 pikseli.
Elementy immersyjne powinny rozciągać się na pełną szerokość okna widoku, minus pasek przewijania. Na większych ekranach są ograniczone do 978 pikseli, z dostosowanym paddingiem podpisów dla średnich ekranów. Na ekranach średniej wielkości maksymalna szerokość wynosi 738 pikseli. Na mniejszych ekranach elementy immersyjne wyrównują się do lewej krawędzi z dostosowanymi marginesami i paddingiem podpisów.
Dla opakowań meblowych (furniture wrappers) na większych ekranach używany jest układ siatki (grid) z zdefiniowanymi kolumnami i wierszami. Nagłówki mają górną obwódkę, sekcje meta są pozycjonowane względnie, a treść wstępu (standfirst) zawiera określone stylizacje dla linków i akapitów. Figury wewnątrz opakowania nie mają lewego marginesu i mają maksymalną szerokość 630 pikseli, gdy są liniowe. Na bardzo dużych ekranach szablony kolumn siatki są dostosowane.
CSS definiuje układ siatki dla nagłówka artykułu z określonymi obszarami na tytuł, nagłówek, wstęp, informacje meta i obraz portretowy. Ustawia style dla obwódek, typografii i odstępów, dostosowując te właściwości dla różnych rozmiarów ekranów za pomocą zapytań medialnych. Na przykład, rozmiar czcionki nagłówka zwiększa się na większych ekranach, a niektóre elementy są ukrywane lub zmieniają pozycję w miarę zmiany okna widoku. Główny obszar mediów jest skonfigurowany do pełnej szerokości na urządzeniach mobilnych.
Kod CSS definiuje style dla układu strony internetowej, skupiając się na elemencie opakowania meblowego. Ustawia kolory tła, marginesy, padding i zachowania responsywne dla różnych rozmiarów ekranów. Style obejmują niestandardowe właściwości dla kolorów, takie jak funkcje trybu ciemnego i obwódek nagłówków. Określone reguły kontrolują wygląd podpisów, przycisków, nagłówków i informacji meta, z dostosowaniami dla efektów najechania i ikon mediów społecznościowych. Zapytania medialne zapewniają, że układ dostosowuje się od widoków mobilnych do desktopowych, w tym szerszych ekranów, gdzie dodawane są boczne tła.
Ten kod CSS definiuje style dla komponentu strony internetowej, prawdopodobnie paska bocznego lub opakowania treści. Ustawia kolory, obwódki i dostosowania układu dla różnych elementów, takich jak linki, tekst i ikony mediów społecznościowych. Style dostosowują się do różnych rozmiarów ekranów za pomocą zapytań medialnych, zmieniając szerokości i obwódki, aby pasowały do większych ekranów. Kolory są zarządzane za pomocą zmiennych CSS dla motywów, takich jak tryb ciemny.
Kod CSS definiuje style dla elementów artykułów i ładuje niestandardowe czcionki. Ustawia kolor obwódki dla komentarzy, aby pasował do koloru obwódki nagłówka. Dla nagłówków artykułów używa lekkiej wagi czcionki, ale nagłówki z mocnym tekstem (strong) są pogrubione. Kod importuje również rodzinę czcionek Guardian Headline w różnych wagach i stylach, w tym lekką, regularną, średnią i półgrubą, w wersjach normalnych i kursywnych.
Czcionka "Guardian Headline Full" jest zdefiniowana z kilkoma stylami: półgruba kursywa (waga 600), pogrubiona (waga 700), pogrubiona kursywa (waga 700), czarna (waga 900) i czarna kursywa (waga 900). Każdy styl zawiera pliki czcionek w formatach WOFF2, WOFF i TrueType.
Dodatkowo, czcionka "Guardian Titlepiece" jest zdefiniowana w stylu pogrubionym (waga 700), również z plikami WOFF2, WOFF i TrueType.
Dla urządzeń iOS i Android ustawiono ciemny kolor tła (#1a1a1a) i określone kolory funkcji. W trybie ciemnym kolor funkcji odpowiednio się dostosowuje.
Na iOS i Android specjalne stylizowanie jest stosowane do pierwszej litery pierwszego akapitu w kontenerach artykułów, następujących po określonych elementach, takich jak `.element-atom` lub bramki logowania (sign-in gates).
Dla urządzeń Android, pierwsza litera pierwszego akapitu w standardowych artykułach i artykułach z komentarzami jest stylizowana kolorem wtórnym filaru. Na obu systemach, iOS i Android, nagłówki artykułów są ukryte, a opakowanie meblowe ma określony padding. Etykiety wewnątrz opakowania meblowego używają pogrubionej, kapitalizowanej czcionki z nowym kolorem filaru. Nagłówki są ustawione na 32px, pogrubione, z dolnym paddingiem i ciemnym kolorem. Obrazy figur są pozycjonowane względnie, z marginesami na pełną szerokość i automatyczną wysokością.
Dla urządzeń Android, obrazy wewnątrz kontenerów artykułów powinny mieć przezroczyste tło, rozciągać się na pełną szerokość okna widoku (z uwzględnieniem pasków przewijania) i automatycznie dostosowywać swoją wysokość.
Na obu systemach, iOS i Android, wstępny tekst w artykułach powinien mieć określone odstępy: 4 piksele paddingu u góry, 24 piksele na dole i ujemny margines 10 pikseli po prawej stronie.
Akapity wewnątrz tego wstępnego tekstu powinny używać rodzinę czcionek nagłówkowych Guardiana.
Linki wewnątrz tego tekstu powinny być stylizowane określonym kolorem, podkreśleniem umieszczonym 6 pikseli poniżej tekstu i jasnoszarym kolorem podkreślenia. Nie powinny mieć obrazu tła ani dolnej obwódki. Po najechaniu, podkreślenie powinno zmienić się na kolor tekstu linku.
Dodatkowo, sekcja metadanych artykułu powinna być stylizowana spójnie dla obu systemów operacyjnych.
Ten kod CSS ustawia style dla kontenerów artykułów na urządzeniach Android i iOS. Dostosowuje marginesy, kolory, padding i wyświetlanie przycisków dla różnych typów artykułów i ich komponentów.
Na urządzeniach iOS i Android, dla kontenerów artykułów typu feature, standard i comment, obrazy, które nie są miniaturkami ani immersyjne, mają margines zero, szerokość obliczoną z okna widoku minus 24 piksele i szerokość paska przewijania, oraz automatyczną wysokość. Ich podpisy nie mają paddingu.
Obrazy immersyjne w tych kontenerach mają szerokość obliczoną z okna widoku minus szerokość paska przewijania.
Wewnątrz treści artykułu (prozy), cytowane bloki cytatów używają nowego koloru filaru dla swojego dekoracyjnego elementu. Linki są stylizowane podstawowym kolorem filaru, z podkreśleniem odsuniętym o 6px i podkreśleniem kolorem obwódki, które zmienia się na nowy kolor filaru po najechaniu.
W trybie ciemnym, kolor tła opakowania meblowego jest ustawiony na #1a1a1a.
Dla urządzeń iOS i Android, etykiety treści w artykułach typu feature, standard i comment używają nowego koloru filaru.
Na obu systemach, iOS i Android, główny nagłówek w tych typach artykułów nie ma tła i używa koloru obwódki nagłówka dla tekstu.
Tekst wstępu (standfirst) w tych artykułach również używa koloru obwódki nagłówka. Linki wewnątrz wstępu, a także autorzy i ich linki, są stylizowane nowym kolorem filaru.
Ikony w metadanych artykułu używają nowego koloru filaru dla swoich obrysów (stroke).
Podpisy dla obrazów showcase w tych artykułach używają koloru daty.
Wreszcie, cytowany tekst wewnątrz treści artykułu na iOS jest ustawiony na określone stylizowanie.
Dla urządzeń iOS i Android, kolor tekstu cytowanych bloków wewnątrz treści artykułów jest ustawiony na określoną zmienną koloru.
Dodatkowo, kolor tła dla różnych kontenerów treści artykułów na obu systemach, iOS i Android, jest wymuszony na ciemne tło za pomocą deklaracji !important.
Ponadto, dla urządzeń iOS, pierwsza litera następująca po określonych elementach, takich jak atomy, bram
