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 stylowanie dla elementów. Elementy w tej kolumnie nie mają marginesów górnych ani dolnych, ale zawierają wypełnienie. Gdy po elemencie następuje akapit, odstępy dostosowują się odpowiednio. Elementy liniowe są ograniczone do maksymalnej szerokości 620 pikseli.
Na większych ekranach figury liniowe również są ograniczone do 620 pikseli. Specjalne stylowanie dotyczy zapętlanych filmów, w tym umiejscowienia przycisków i pozycjonowania podpisów. Filmy hostowane lokalnie są ustawione na maksymalną szerokość 620 pikseli z wyśrodkowanymi marginesami, podczas gdy filmy immersyjne rozszerzają się na pełną szerokość z dostosowanymi marginesami na większych ekranach.
Zmienne kolorów definiują motyw, takie jak kolor daty, obramowania nagłówków i kolory podpisów. W trybie ciemnym te kolory dostosowują się do ciemniejszej palety. Pierwszy akapit po określonych elementach otrzymuje dodatkowe górne wypełnienie, a pierwsza litera pierwszego akapitu może być stylizowana w charakterystyczny sposób.Kod CSS definiuje style dla inicjałów, wyróżnionych cytatów i różnych elementów układu na różnych sekcjach strony internetowej, takich jak artykuły, komentarze i materiały specjalne. Ustawia określone czcionki, rozmiary i kolory dla pierwszej litery akapitów, dostosowuje szerokość i pozycjonowanie elementów immersyjnych i showcase, oraz tworzy responsywny układ siatki dla większych ekranów. Style obejmują również zapytania medialne, aby dostosować układ do różnych rozmiarów ekranu.Opakowanie furniture-wrapper ustawia treść standfirst na pozycję względną z górnym wypełnieniem 2 pikseli i bez prawego marginesu. Wewnątrz standfirst elementy listy mają rozmiar czcionki 20 pikseli, a linki nie mają obramowania, obrazu tła, podkreślenia z przesunięciem 6 pikseli i koloru z właściwości niestandardowej `--headerBorder` (domyślnie `#dcdcdc`). Po najechaniu podkreślenie linku zmienia się na kolor zdefiniowany przez `--new-pillar-colour`.
Dla większych ekranów (61.25em i więcej), figury nie mają lewego marginesu, a elementy liniowe o określonej roli są ograniczone do maksymalnej szerokości 630 pikseli. Przy 71.25em i więcej, układ używa siatki z zdefiniowanymi kolumnami i wierszami. Dekoracyjna linia pojawia się przed sekcją meta, a pionowa linia jest dodawana przed standfirst. Obramowania akapitów są usuwane w tym punkcie przerwania.
Przy 81.25em, siatka dostosowuje się, aby zawierać więcej kolumn, a linie dekoracyjne są zmieniane.
Nagłówki mają grubość czcionki 600 i maksymalną szerokość 620 pikseli, z rozmiarem czcionki 32 pikseli. Na większych ekranach (71.25em i więcej), rozmiar czcionki nagłówka zwiększa się do 50 pikseli, a maksymalna szerokość zmniejsza się do 540 pikseli.
Dla średnich ekranów (46.25em i więcej), elementy z klasą `keyline-4` lub atrybutem `data-gu-name=lines` nie mają prawego marginesu. Na większych ekranach (61.25em i więcej), te elementy są ukryte. Ich obrysy SVG używają koloru `--headerBorder`.Ten kod CSS definiuje style dla układu strony internetowej, szczególnie dla opakowania o tematyce meblowej. 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 funkcje trybu ciemnego i odcienie tła, oraz zapewnia responsywne zachowanie na różnych urządzeniach.Kod CSS styluje 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. Przyciski mediów społecznościowych mają kolorowe obramowanie i ikonę, z ikoną i tekstem zmieniającymi kolor po najechaniu.
Linki w sekcji meta używają koloru motywu i zachowują ten kolor po najechaniu, z podkreśleniem w tym samym kolorze. W sekcji standfirst linki są podkreślone jasnoszarą linią, która zmienia się na kolor motywu po najechaniu. Akapity i elementy listy w standfirst są jasnoszare.
Na ekranach szerszych niż 61.25em, pierwszy akapit w standfirst ma górne obramowanie, które jest usuwane na ekranach szerszych niż 71.25em. Na tych większych ekranach kolorowa linia również pojawia się przed standfirst.
Dla ekranów szerszych niż 46.25em, furniture-wrapper otrzymuje ciemne tło i prawe obramowanie.CSS definiuje `.furniture-wrapper` z elementami pseudo, które tworzą paski boczne. Dostosowują one szerokość i pozycję w zależności od rozmiaru widoku, aby utrzymać wyśrodkowany obszar treści o stałych szerokościach (738px, 978px, 1138px, 1298px) w różnych punktach przerwania, uwzględniając szerokość paska przewijania. Obramowania i kolory tła są stosowane przy użyciu niestandardowych właściwości CSS.
Dla nagłówków w artykułach, elementy `h2` używają lekkiej grubości czcionki (200), ale przełączają się na pogrubienie (700), jeśli zawierają element `strong`.
Reguły `@font-face` ładują rodzinę czcionek "Guardian Headline Full" w kilku grubościach i stylach (Light, Light Italic, Regular, Regular Italic) 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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
