Ten kod CSS definiuje niestandardową rodzinę czcionek o nazwie "Guardian Headline Full" z wieloma stylami i grubościami. Zawiera wersje lekką, regularną, średnią i półgrubą, każda dostępna zarówno w stylu normalnym, jak i kursywie. Pliki czcionek są hostowane online i dostarczane w trzech formatach: WOFF2, WOFF i TrueType (TTF).
@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ą dodawane jest lewe obramowanie z określonym pozycjonowaniem i z-indexem. Na większych ekranach lewa pozycja obramowania nieznacznie się dostosowuje. Wewnątrz tych kolumn elementy atomowe nie mają górnych ani dolnych marginesów, 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 620px.
Dla figur z rolą pętli, podpisy są ustawione na wyższy z-index, a przyciski pętli są stylizowane z określonymi wymiarami i wyrównaniem. Elementy wideo hostowane na własnym serwerze są ustawione na pełną szerokość, ograniczoną do 620px, i zawierają górne i dolne marginesy. Dla układów wideo immersyjnych ograniczenia szerokości są usuwane, a marginesy dostosowywane. Na szerszych ekranach wideo immersyjne rozszerzają się w szerokości i przesuwają w lewo.
Zmienne kolorów definiują style dla dat, obramowań, podpisów i elementów feature. W trybie ciemnym kolory tekstu i ikon dostosowują się do ciemnego motywu. Elementy atomowe w kolumnach treści nie mają wypełnienia. Określone reguły zapewniają odpowiednie stylizowanie pierwszego akapitu po określonych elementach lub poziomych liniach w różnych sekcjach treści, takich jak artykuły, komentarze i feature.
Pierwszy akapit po bramce logowania lub poziomej linii (z wyjątkiem ostatniej) ma górne wypełnienie 14 pikseli.
Dla pierwszej litery pierwszego akapitu następującego po początkowym elemencie, bramce logowania lub poziomej linii (z wyjątkiem ostatniej) w różnych treściach artykułów, zastosuj określony styl inicjału. Używa on czcionki Guardian headline, jest pogrubiony, ma rozmiar 111 pikseli z wysokością linii 92 pikseli. Jest przesunięty w lewo, pisany wielkimi literami, używa box-sizing border-box, ma prawy margines 8 pikseli, wyrównany do góry i używa niestandardowej zmiennej koloru.
Akapity bezpośrednio następujące po poziomej linii w tych treściach artykułów nie mają górnego wypełnienia.
Cytaty wydzielone w tych treściach artykułów mają maksymalną szerokość 620 pikseli.
Podpisy dla elementów showcase w głównej treści i kontenerach artykułów są pozycjonowane statycznie, zajmując pełną szerokość do 620 pikseli.
Elementy immersyjne rozciągają się na pełną szerokość viewportu, uwzględniając pasek przewijania. Na większych ekranach (do 71.24em) są ograniczone do 978 pikseli, z dostosowanym wypełnieniem podpisów w różnych punktach przerwania. Na średnich ekranach (46.25em do 61.24em) maksymalna szerokość wynosi 738 pikseli. Na mniejszych ekranach (poniżej 46.24em) wyrównują się do lewej krawędzi z dostosowanymi marginesami i wypełnieniem podpisów.
Dla opakowań furniture na dużych ekranach (61.25em i więcej) używany jest układ siatki z zdefiniowanymi kolumnami i wierszami do pozycjonowania komponentów nagłówka.
Style CSS definiują układ i wygląd sekcji nagłówka strony internetowej, określanej jako "furniture-wrapper". Ustawiają obramowania, odstępy, typografię i struktury siatki, które dostosowują się do różnych rozmiarów ekranu.
Dla większych ekranów (powyżej 71.25em) ustanowiony jest złożony układ siatki z określonymi kolumnami i wierszami dla elementów takich jak tytuł, nagłówek, metadane, standfirst (podtytuł) i portret. Elementy wizualne, takie jak obramowania i linie, są dostosowywane lub usuwane w określonych punktach przerwania. Rozmiar czcionki nagłówka zwiększa się, a jego maksymalna szerokość zmienia się na większych ekranach. Linki w standfirst są stylizowane z podkreśleniami, które zmieniają kolor po najechaniu.
Dla ekranów szerszych niż 740 pikseli ukryj elementy z klasą `.keyline-4` lub atrybutem `[data-gu-name="lines"]`. Wewnątrz `.furniture-wrapper` stylizuj obrysy SVG w tych elementach, aby używały zmiennej koloru `--headerBorder`.
Na ekranach szerszych niż 740 pikseli usuń prawy margines z elementów z ID `#meta` lub atrybutem `[data-gu-name="meta"]` wewnątrz `.furniture-wrapper`. Dla tych elementów meta ustaw kolor obramowania linków społecznościowych, sekcji komentarzy i ich podrzędnych spanów na `--headerBorder`. Ukryj również wszystkie komponenty `gu-island` wewnątrz `.content__meta-container_dcr`.
Dla sekcji standfirst (wybranej po klasie, ID lub `data-gu-name`) zastosuj ujemny lewy margines i odpowiadające mu wypełnienie oraz ustaw jej pozycję na względną. Na szerszych ekranach (powyżej 740px) dodaj małe górne wypełnienie. Stylizuj akapity w standfirst z grubością czcionki 400, rozmiarem 20 pikseli i dolnym wypełnieniem 14 pikseli.
Główny obszar mediów (wybrany po ID lub `data-gu-name`) jest pozycjonowany względnie, nie ma górnego marginesu, ma mały dolny margines i umieszczony jest w obszarze siatki "portrait". Upewnij się, że jego wewnętrzne divy zajmują pełną szerokość i nie mają poziomego marginesu. Na bardzo szerokich ekranach (powyżej 980px) usuń dolny margines. Na mniejszych ekranach (poniżej 740px) ustaw jego szerokość na pełną szerokość viewportu minus pasek przewijania i zastosuj ujemny lewy margines. Dla ekranów między 480px a 740px zwiększ ten ujemny lewy margines do -20px.
Stylizuj podpisy figur, aby były pozycjonowane absolutnie na dole, z określonym wypełnieniem i kolorami tła/tekstu z zmiennych CSS. Ustaw ich szerokość na 100% bez maksymalnej szerokości, usuń dolny margines i ustaw minimalną wysokość. Koloruj spany w podpisie za pomocą `--headerBorder` i wypełniaj ich SVG tym samym kolorem. Ukryj pierwszy span i wyświetl drugi span jako element blokowy, ograniczając jego szerokość do 90%. Na ekranach szerszych niż 480px zwiększ poziome wypełnienie podpisu. Klasa `.hidden` na podpisie ustawia jego przezroczystość na 0.
Przycisk podpisu jest wyświetlany jako blok, pozycjonowany absolutnie w pobliżu prawego dolnego rogu, z wysokim z-indexem. Ma okrągłe tło, brak obramowania i określone wypełnienie. Zmniejsz jego ikonę SVG nieznacznie. Na ekranach szerszych niż 480px dostosuj jego prawą pozycję. Dla bardzo szerokich ekranów (powyżej 1140px) dostosuj górę i wysokość pseudo-elementu `.content__main-column--interactive`. Ogranicz również maksymalną szerokość nagłówków h2 w tej kolumnie do 620 pikseli.
Dla elementu głównego, gdy ciało ma klasę `.ios` lub `.android`, zdefiniuj zestaw zmiennych kolorów trybu ciemnego. W preferencji ciemnego schematu kolorów zaktualizuj zmienną `--new-pillar-colour` odpowiednio.
Na urządzeniach iOS, wyceluj w pierwszą literę pierwszego akapitu po określonych początkowych elementach w różnych kontenerach artykułów i stylizuj tę pierwszą literę. Dotyczy to również, jeśli element bramki logowania pojawi się między tym pierwszym elementem a akapitem.
Pierwsza litera pierwszego akapitu po bramce logowania lub po elemencie atomowym, po którym następuje bramka logowania, powinna być kolorowana za pomocą zmiennej drugiego filaru. Dotyczy to kontenerów artykułów feature, standard i comment zarówno na iOS, jak i Androidzie.
Na iOS i Androidzie wysokość nagłówka artykułu powinna być ustawiona na zero w kontenerach artykułów feature, standard i comment.
Opakowanie furniture w tych kontenerach powinno mieć górne wypełnienie 4 pikseli i poziome wypełnienie 10 pikseli. Etykiety treści wewnątrz powinny używać pogrubionej, szeryfowej rodziny czcionek, być kolorowane za pomocą nowej zmiennej filaru i mieć tekst pisany wielkimi literami.
Nagłówki wewnątrz opakowania furniture powinny mieć rozmiar 32 pikseli, być pogrubione, mieć dolne wypełnienie 12 pikseli i używać koloru #121212.
Elementy obrazów wewnątrz opakowania furniture powinny być pozycjonowane względnie, mieć górny margines 14 pikseli, lewy margines -10 pikseli, szerokość obliczoną jako szerokość viewportu minus szerokość paska przew
