Rodzina czcionek Guardian Headline Full obejmuje kilka stylów, każdy o różnej grubości i wersjach kursywy. Wersja light (grubość 300) dostępna jest zarówno w stylu regularnym, jak i kursywie, podobnie jak wersja regularna (grubość 400). Style medium (grubość 500) i semibold (grubość 600) również mają opcje regularną i kursywę. Każdy plik czcionki jest dostępny w formatach WOFF2, WOFF i TrueType z serwerów Guardiana.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}Główna interaktywna kolumna treści ma określone style dla elementów. Na przykład atomy nie mają marginesów górnych ani dolnych, ale mają wypełnienie 12px. Gdy po atomie następuje akapit, wypełnienie atomu jest usuwane, a marginesy ustawiane na 12px. Elementy liniowe są ograniczone do szerokości 620px.
Dla figur z rolą loop podpis jest pozycjonowany z indeksem z równym 6. Przycisk loop jest stylizowany na szerokość 32px, wyrównany do prawego dolnego rogu z określonymi marginesami. Przycisk podpisu ma wysoki indeks z równy 100.
Elementy wideo hostowane lokalnie są ustawione na 100% szerokości, z limitem 620px, i wyświetlane jako blok z marginesami 12px. Wideo i jego kontener również zajmują pełną szerokość do 620px i są wyśrodkowane. Jeśli wideo jest immersyjne, usuwa limit szerokości i marginesy, rozciągając się w pełni. Na większych ekranach immersyjne wideo rozszerza się do szerokości 1140px z ujemnym lewym marginesem, a przy jeszcze większych rozmiarach staje się szerokie na 1300px z większym ujemnym marginesem.
Zmienne kolorów definiują różne kolory motywu, takie jak szary dateline, obramowanie nagłówka, tekst podpisu i czerwony feature. W trybie ciemnym niektóre kolory dostosowują się do palety ciemnego motywu.
W treści artykułu pierwszy akapit po atomie lub poziomej linii ma dodatkowe górne wypełnienie. Ponadto pierwsza litera pierwszego akapitu po atomie jest stylizowana, choć konkretne stylizowanie nie jest tutaj w pełni szczegółowo opisane.Kod CSS definiuje style dla inicjałów, cytatów wydzielonych i różnych elementów układu na różnych sekcjach strony. Inicjały są stylizowane określoną czcionką, rozmiarem i kolorem oraz są przesunięte w lewo. Cytatom wydzielonym nadaje się maksymalną szerokość. Dla elementów showcase podpisy są ustawione na pozycję statyczną z pełną szerokością i maksymalną szerokością 620px.
Elementy immersyjne są ustawione na zajęcie pełnej szerokości widoku, minus pasek przewijania. Na ekranach mniejszych niż 71.24em ich maksymalna szerokość jest dostosowywana do 978px, a wypełnienie podpisu różni się w zależności od rozmiaru ekranu. Na średnich ekranach (46.25em do 61.24em) maksymalna szerokość wynosi 738px. Na małych ekranach (poniżej 46.24em) elementom immersyjnym nadaje się ujemne lewe marginesy, aby rozciągnąć się do krawędzi widoku, z odpowiednio dostosowanym wypełnieniem podpisu.
Dla większych ekranów (powyżej 61.25em) dla opakowania furniture używany jest układ siatki, tworząc strukturę dwukolumnową z zdefiniowanymi wierszami dla sekcji tytułu, nagłówka, standfirst, meta i portretu. Górne obramowanie jest dodawane do pierwszego dziecka elementów nagłówka, a pozycjonowanie sekcji meta jest ustawione na absolute.Opakowanie furniture ustawia treść standfirst na pozycję względną z górnym wypełnieniem 2 pikseli i bez prawego marginesu. Wewnątrz standfirst główny obszar treści ma dolny margines 4 pikseli. Elementy listy wewnątrz standfirst używają rozmiaru czcionki 20 pikseli. Linki wewnątrz standfirst, w tym te w elementach listy, nie mają obramowania, nie mają obrazu tła i są podkreślone z przesunięciem 6 pikseli, używając niestandardowego koloru do podkreślenia. Po najechaniu kolor podkreślenia zmienia się na nowy kolor filaru.
Pierwszy akapit w standfirst ma górne obramowanie i brak dolnego wypełnienia. Dla większych ekranów (61.25em i więcej), jeśli ekran ma również co najmniej 71.25em szerokości, górne obramowanie jest usuwane. Dla ekranów o szerokości co najmniej 61.25em, figury nie mają lewego marginesu i mają maksymalną szerokość 630 pikseli, gdy są liniowe.
Na ekranach o szerokości 71.25em i większej, opakowanie furniture używa układu siatki z określonymi kolumnami i wierszami. Dekoracyjna linia pojawia się przed sekcją meta, o szerokości 540 pikseli. Akapity w standfirst nie mają górnego obramowania, a przed treścią standfirst dodawana jest pionowa linia. Dla jeszcze większych ekranów (81.25em i więcej) siatka dostosowuje się z większą liczbą kolumn i wierszy, dekoracyjna linia przed meta rozciąga się do 620 pikseli, a pionowa linia przed standfirst przesuwa się nieznacznie.
Etykiety w nagłówku lub sekcji tytułowej artykułu mają górne wypełnienie 2 pikseli. Nagłówek używa pogrubionej wagi czcionki, maksymalnej szerokości 620 pikseli i rozmiaru czcionki 32 pikseli. Na większych ekranach (71.25em i więcej) nagłówek dostosowuje się do maksymalnej szerokości 540 pikseli i rozmiaru czcionki 50 pikseli.
Dla średnich ekranów (46.25em i więcej) linie kluczowe lub elementy linii nie mają prawego marginesu. Na większych ekranach (61.25em i więcej) te linie są ukryte. Linie używają niestandardowego koloru dla obrysu.Ten kod CSS definiuje style dla układu strony internetowej, szczególnie dla opakowania o tematyce furniture. Ustawia różne właściwości dla elementów takich jak informacje meta, tekst standfirst, główne media i podpisy. Style obejmują dostosowania marginesów, wypełnienia, kolorów i pozycjonowania, z określonymi regułami dla różnych rozmiarów ekranów przy użyciu zapytań medialnych. Projekt używa niestandardowych zmiennych CSS dla kolorów, takich jak `--darkBackground` i `--headerBorderColor`, oraz zapewnia ukrywanie lub wyświetlanie elementów w zależności od szerokości widoku. Opakowanie ma ciemne tło i zawiera responsywne zachowanie dla urządzeń od mobilnych po desktop.Kod CSS stylizuje elementy wewnątrz klasy furniture-wrapper. Nagłówki (h1) są pogrubione i jasnoszare (#dcdcdc). Figury w nagłówkach nie mają górnego marginesu i mają mały dolny margines.
Dla ekranów szerszych niż 71.25em, kolorowa linia pojawia się przed sekcją meta. Tekst i podsumowania w sekcji meta są jasnoszare. Linki i przyciski mediów społecznościowych mają kolorowe obramowanie i używają określonego koloru dla tekstu i ikon, który zmienia się na ciemne tło po najechaniu.
Linki w sekcji meta używają określonego koloru i zachowują go po najechaniu z pasującymi podkreśleniami. W sekcji standfirst linki są podkreślone jasnoszarym kolorem, który zmienia się po najechaniu, a tekst akapitów jest jasnoszary. Na szerszych ekranach pierwszy akapit może mieć lub stracić górne obramowanie. Elementy listy w standfirst są również jasnoszare.
Dla ekranów szerszych niż 71.25em, linia pojawia się przed standfirst. Na ekranach szerszych niż 46.25em, opakowanie otrzymuje ciemne tło i prawe obramowanie.Opakowanie furniture używa pseudo-elementów do tworzenia bocznych obramowań. Element `:before` jest pozycjonowany po lewej stronie z ciemnym tłem i lewym obramowaniem, podczas gdy jego szerokość i pozycja lewa są obliczane na podstawie szerokości widoku, szerokości paska przewijania i stałej szerokości bazowej 738px. Element `:after` odzwierciedla to po prawej stronie z prawym obramowaniem.
Dla większych ekranów (minimalna szerokość 61.25em) obliczenia dostosowują się do szerokości bazowej 978px. Ten wzorzec kontynuuje się dla jeszcze większych punktów przełomowych: 71.25em (baza 1138px) i 81.25em (baza 1298px).
Wewnątrz opakowania, obrysy SVG i obramowania niektórych elementów społecznościowych/meta są ustawione na użycie niestandardowej zmiennej CSS dla koloru, `--headerBorderColor`.
W treści artykułu, nagłówki drugiego poziomu (`h2`) mają wagę czcionki 200, ale jeśli zawierają element `strong`, waga wzrasta do 700.
Wreszcie, zdefiniowanych jest kilka reguł `@font-face` do ładowania rodziny czcionek "Guardian Headline Full" w różnych wagach i stylach (Light, Light Italic, Regular, Regular Italic) z serwerów zasobów Guardiana.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk
