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żdą w wersjach normalnej i kursywy. Czcionki są ładowane z serwerów Guardiana w formatach WOFF2, WOFF i TrueType, aby zapewnić kompatybilność w różnych przeglądarkach.
@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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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) {
}
Dla kolumn z treścią interaktywną dodawana jest lewa ramka z określonym pozycjonowaniem i z-indexem. Na większych ekranach lewa pozycja ramki nieznacznie się dostosowuje. Wewnątrz tych kolumn elementy atomowe nie mają marginesów górnych ani dolnych, ale zawierają wypełnienie. Gdy akapity poprzedzają elementy atomowe, wypełnienie jest usuwane i zamiast tego dodawane są marginesy. Elementy liniowe są ograniczone do maksymalnej szerokości.
Dla figur liniowych na ekranach średnich i większych ustawiana jest maksymalna szerokość. W sekcjach mediów zawierających figury pętli, podpisy są warstwowane na wierzchu, a przyciski pętli są stylizowane z określonymi wymiarami i wyrównaniem. Przyciski podpisów są umieszczane na górze.
W sekcji body, samodzielnie hostowane wyspy wideo zajmują pełną szerokość do maksimum, z wyśrodkowanymi marginesami. Figury pętli i filmy wideo w obrębie tych wysp również zajmują pełną szerokość. Dla immersyjnych elementów wideo ograniczenia szerokości są usuwane, a marginesy dostosowywane. Na większych ekranach immersyjne filmy wideo rozszerzają się w szerokości i przesuwają w lewo, z odpowiednio wciętymi podpisami.
Zmienne kolorów definiują różne elementy interfejsu użytkownika, takie jak daty, ramki, podpisy i kolory funkcji, przy czym kolory filarów wpływają na podtytuły, cytaty wydzielone i blokowe cytaty. W trybie ciemnym te kolory dostosowują się do ciemnego motywu.
Elementy atomowe w kolumnach treści nie mają wypełnienia. Określone reguły dostosowują pierwsze akapity po określonych elementach lub poziomych liniach w różnych obszarach treści, takich jak artykuły, treści interaktywne, komentarze i funkcje, zapewniając odpowiednie odstępy i układ.
Pierwszy akapit po bramce logowania lub poziomej linii (z wyjątkiem ostatniej) ma górne wypełnienie o wysokości 14 pikseli.
Dla pierwszej litery pierwszego akapitu następującego po określonych elementach, takich jak atom, bramka logowania lub pozioma linia (nie ostatnia) w różnych obszarach treści (treść artykułu, treść interaktywna, komentarze, funkcje lub elementy z atrybutem `data-gu-name` równym "body"), zastosuj specjalny styl inicjału. Ten styl używa określonych czcionek nagłówkowych, ustawia rozmiar czcionki na 111px z wysokością linii 92px, ustawia float: left, zmienia na wielkie litery, dodaje prawy margines o szerokości 8px, wyrównuje do góry tekstu i koloruje za pomocą niestandardowej zmiennej dla inicjałów.
Akapity bezpośrednio następujące po poziomej linii w tych obszarach treści nie powinny mieć górnego wypełnienia.
Cytaty wydzielone w tych obszarach treści są ograniczone do maksymalnej szerokości 620 pikseli.
Podpisy dla elementów showcase w głównej treści, artykułach funkcji, standardowych artykułach i sekcjach komentarzy są pozycjonowane statycznie, zajmując pełną szerokość do maksimum 620 pikseli.
Elementy immersyjne rozciągają się na pełną szerokość viewportu, uwzględniając pasek przewijania. Na większych ekranach (do 71.24em) ich maksymalna szerokość wynosi 978px, z dostosowanym wypełnieniem podpisów w różnych punktach przerwania. Na ekranach średnich (między 46.25em a 61.24em) maksymalna szerokość wynosi 738px. Na mniejszych ekranach (poniżej 46.24em) elementy immersyjne wyrównują się do lewej krawędzi z dostosowanymi marginesami i wypełnieniem podpisów.
Dla szerszych ekranów (powyżej 61.25em) opakowanie mebli używa układu CSS Grid z zdefiniowanymi kolumnami i wierszami do pozycjonowania elementów takich jak tytuł, nagłówek, metadane, wstęp i obszar portretu.
Style CSS definiują opakowanie układu dla komponentów artykułu. Nagłówki mają górną ramkę i dostosowują rozmiar od 32px do 50px na większych ekranach, z maksymalną szerokością, która również się zmienia. Informacje meta zawierają dekoracyjną górną linię na szerokich ekranach. Sekcja wstępu zawiera podkreślone linki z niestandardowym kolorem, który zmienia się po najechaniu, a jej pierwszy akapit ma górną ramkę na mniejszych ekranach, która jest usuwana na większych. W wstępie na szerokich ekranach pojawia się pionowa linia separatora.
Siatki układu są zdefiniowane dla ekranów o szerokości 71.25em i większej, oraz ponownie dla 81.25em i większej, określając szablony kolumn i wierszy dla pozycjonowania elementów takich jak obszary tytułu, nagłówka, metadanych, wstępu i portretu. Figury mają określone marginesy i maksymalne szerokości. Ogólnie, style kontrolują responsywną prezentację nagłówków artykułów i treści wprowadzającej.
Dla ekranów szerszych niż 740px, ukryj elementy z klasą `.keyline-4` lub atrybutem `[data-gu-name="lines"]`. Wewnątrz `.furniture-wrapper` styluj obrysy SVG wewnątrz tych elementów za pomocą niestandardowej zmiennej koloru.
Na ekranach średnich i większych usuń prawy margines z elementów o ID `#meta` lub atrybucie `[data-gu-name="meta"]`.
Wewnątrz sekcji meta ustaw kolor ramki dla linków społecznościowych, elementów komentarzy i ich podrzędnych spanów na niestandardową zmienną. Ukryj również wszelkie elementy `gu-island` w określonym kontenerze.
Dla sekcji wstępu dostosuj jej pozycjonowanie i wypełnienie, dodając lewe przesunięcie. Na ekranach średnich dodaj małe górne wypełnienie. Styluj akapit wewnątrz z regularną wagą czcionki, rozmiarem 20px i dolnym wypełnieniem.
Główny obszar mediów jest pozycjonowany względnie, umieszczony w obszarze siatki 'portrait' i ma określone marginesy. Upewnij się, że jego wewnętrzne divy zajmują pełną szerokość. Na większych ekranach usuń dolny margines. Na mniejszych ekranach dostosuj szerokość i lewy margines, z dodatkowym dostosowaniem dla ekranów średnio-małych.
Styluj podpisy figur, aby pojawiały się na dole z niestandardowym tłem i kolorem tekstu, nadpisując domyślną szerokość i marginesy. Ukryj pierwszy span wewnątrz i wyświetl drugi, ograniczając jego szerokość. Na ekranach średnich dostosuj wypełnienie podpisu. Stan ukryty sprawia, że podpis jest przezroczysty.
Przycisk podpisu jest pozycjonowany na dole po prawej, stylizowany z okrągłym tłem i przeskalowaną ikoną, z pozycją dostosowaną na ekranach średnich.
Dla interaktywnych kolumn artykułów na bardzo dużych ekranach dostosuj pozycję i wysokość elementu pseudo. Ogranicz również szerokość nagłówków poziomu drugiego.
Na iOS lub Android zdefiniuj zestaw zmiennych kolorów ciemnego motywu. W trybie ciemnym dostosuj zmienną koloru podstawowego.
Dla urządzeń iOS, wyceluj w pierwszy akapit po określonych elementach w różnych kontenerach artykułów i styluj jego pierwszą literę.
Pierwsza litera pierwszego akapitu następującego po bramce logowania lub pierwszy akapit po elemencie atomowym w różnych kontenerach artykułów na iOS i Androidzie powinna być pokolorowana za pomocą zmiennej drugiego filaru (domyślnie czarny).
Na iOS i Androidzie wysokość nagłówka artykułu w kontenerach artykułów funkcji, standardowych i komentarzy powinna być ustawiona na zero.
Opakowanie mebli w tych kontenerach artykułów na obu platformach powinno mieć górne wypełnienie o wysokości 4 pikseli i poziome wypełnienie o szerokości 10 pikseli.
Etykiety wewnątrz opakowania mebli powinny być pogrubione, używać określonego stosu czcionek, pobierać kolor z nowej zmiennej filaru i być pisane wielkimi literami.
Nagłówki (h1) wewnątrz opakowania mebli powinny mieć rozmiar 32 pikseli, być pogrubione, mieć dolne wypełnienie o wysokości 12 pikseli i być pokolorowane na #121212.
Figury obrazów wewnątrz opakowania mebli powinny być pozycjonowane względnie, mieć górny margines o wysokości 14 pikseli, lewy margines o szerokości -10 pikseli, szerokość obliczaną jako szerokość viewportu minus szerokość paska przewijania i automatyczną wysokość.
Dla artykułów funkcji na iOS, wewnętrzny
