Element z klasą "canvas.svelte-o3oskp" jest ustawiony na wyświetlanie jako blok.
Niestandardowa czcionka o nazwie "Guardian Headline Full" jest zdefiniowana z różnymi grubościami i stylami:
- Light (300) w wersji normalnej i kursywie
- Regular (400) w wersji normalnej i kursywie
- Medium (500) w wersji normalnej i kursywie
- Semibold (600) w wersji normalnej i kursywie
Każdy styl czcionki jest dostępny w formatach WOFF2, WOFF i TrueType z serwerów zasobów Guardiana. Strona internetowa Guardiana używa określonych czcionek do nagłówków i tytułów. Obejmują one Guardian Headline Full w stylach bold, bold italic, black i black italic, a także Guardian Titlepiece w stylu bold. Każda czcionka jest dostępna w wielu formatach plików, takich jak woff2, woff i truetype dla kompatybilności.
Dla sekcji karuzeli tytuł pojawia się w białym tekście przy użyciu czcionki Guardian Text Sans Web, o rozmiarze 17px i średniej grubości. Jest pozycjonowany absolutnie i zawiera link stylizowany na jasnozielony z pogrubieniem i bez podkreślenia.
Sama karuzela jest poziomym kontenerem przewijania, który przyciąga elementy podczas przewijania, z płynnym przewijaniem domyślnie, chyba że użytkownik preferuje redukcję ruchu. Ukrywa paski przewijania i ma odstęp 10px między elementami.
Każda karta w karuzeli ma 310px szerokości i 160px wysokości, z białym tłem i obrazem po prawej stronie, który skaluje się, aby dopasować. Kontener obrazu ma 120px na 150px z szarym tłem, a obrazy lekko powiększają się po najechaniu, chyba że preferowana jest redukcja ruchu. Karty zawierają wypełnienie i wyświetlają się jako kontenery flex, wyrównując treść na dole. W komponencie karuzeli kontener obrazu karty nie ma efektu przejścia. Kontener treści w każdej karcie jest skonfigurowany jako elastyczny układ kolumnowy. Nagłówki i akapity wewnątrz kontenera treści są stylizowane na ciemnoszary kolor i bez dekoracji tekstu. Nagłówki używają określonego stosu czcionek szeryfowych, mają rozmiar czcionki 24px, wysokość linii 115%, normalną grubość i przezroczysty dolny border. Akapity używają stosu czcionek bezszeryfowych z rozmiarem czcionki 14px i wysokością linii 115%, przy czym pierwszy akapit jest pogrubiony.
Gdy karta jest zaznaczona, jej obraz skaluje się o 20%. Wyłączone karty wyświetlają nakładkę "Wkrótce" w pogrubionym tekście na półprzezroczystym białym tle, umieszczoną w lewym górnym rogu.
Sekcja sterowania jest elastycznym wierszem z wyrównaniem space-between i zawiera tekst paginacji w kolorze białym, używając czcionki bezszeryfowej 12px. Przyciski sterujące są okrągłe, o średnicy 40px, z szarym obramowaniem i przezroczystym tłem, zawierając ikony 24px. Ikona pierwszego przycisku jest odwrócona poziomo.
Facety czcionek dla Guardian Headline Full są zdefiniowane z wariantami light, light italic, regular i regular italic, pobierane z plików woff2, woff i ttf. Rodzina czcionek Guardian Headline Full obejmuje różne style i grubości, każda zdefiniowana z określonymi plikami źródłowymi w formatach WOFF2, WOFF i TrueType. Oto szczegóły:
- Regular Italic: grubość 400, styl italic
- Medium: grubość 500, styl normal
- Medium Italic: grubość 500, styl italic
- Semibold: grubość 600, styl normal
- Semibold Italic: grubość 600, styl italic
- Bold: grubość 700, styl normal
- Bold Italic: grubość 700, styl italic
- Black: grubość 900, styl normal
- Black Italic: grubość 900, styl italic
Wszystkie pliki czcionek są hostowane pod określonymi adresami URL z domeny zasobów Guardiana.@font-face {
font-family: Guardian Headline Full;
src: 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;
}
.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}
.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}
@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}
@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}
button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(--Neutral-neutral-neutral-7, #121212);
color: var(--Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}
button:hover {
cursor: pointer;
}
.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh - 340px);
max-height: min(600px, 100vh - 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}
@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}
.carousel-container {
height: calc(100vh - 116px);
height: calc(100dvh - 116px);
position: relative;
z-index: 50;
}
body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}
body.ios .carousel-container {
height: calc(100vh - 180px) !important;
height: calc(100dvh - 180px) !important;
}
body.ios .canvas-container {
top: calc(50% - 170px) !important;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}Ten kod CSS definiuje kilka stylów czcionek dla rodziny czcionek "Guardian Headline Full". Obejmuje różne grubości i style (normalne i kursywa) od regular (400) do black (900). Każdy styl jest określony z wieloma formatami plików (WOFF2, WOFF i TrueType) dla kompatybilności między przeglądarkami, wszystkie pobierane z serwera zasobów Guardiana.Ten tekst definiuje niestandardowe czcionki i style dla strony internetowej. Określa dwie czcionki: Guardian Headline w black italic z grubością 900 i Guardian Titlepiece w bold z grubością 700, obie ładowane z określonych adresów URL w różnych formatach.
Zawiera również reguły CSS dla przycisków, takich jak okrągły przycisk, który lekko się powiększa po najechaniu i ma pierścień fokusu. Jest przycisk wezwania do działania "explore" z określonym wypełnieniem, obramowaniem i stylami tekstu.
Dodatkowo kod konfiguruje pasek postępu, który zmienia szerokość i ma różne kolory tła, wraz z dostosowaniami responsywnego projektu dla różnych rozmiarów ekranu. Opakowanie przycisku globusa jest stylizowane, aby było przyklejone i widoczne tylko w określonych warunkach, z różnymi układami dla urządzeń z Androidem i iOS.
Na koniec definiuje element strzałki tytułu jako okrągłą ikonę z zielonym obramowaniem i wyśrodkowaną zawartością.Ten kod CSS definiuje style dla strony internetowej, w tym:
- Wyśrodkowanie elementów z klasą "title-arrow"
- Ustawienie obrazów wewnątrz "title-arrow" na pełną szerokość i wysokość
- Zastosowanie filtrów inwersji kolorów dla trybu ciemnego na urządzeniach z iOS i Androidem
- Konfigurację zachowania przewijania przy użyciu biblioteki płynnego przewijania Lenis
- Ładowanie wielu grubości i stylów czcionki dla kroju "Guardian Headline Full" z serwerów Guardiana
Kod obsługuje responsywny projekt, funkcje dostępności i typografię dla układu strony internetowej gazety.Strona internetowa Guardiana używa określonych czcionek do nagłówków i tytułów, ładując je z ich serwerów w różnych formatach, takich jak WOFF2, WOFF i TrueType. Te czcionki obejmują różne style i grubości, takie jak semibold, bold i black, zarówno w wersjach regularnych, jak i kursywach.
Dla treści interaktywnych układ dostosowuje się w zależności od rozmiaru ekranu. Na szerszych ekranach główna kolumna przesuwa się w lewo z rosnącymi marginesami, podczas gdy elementy takie jak atomy, showcase i treści immersyjne mają ustalone maksymalne szerokości, które zmieniają się wraz z viewportem. Na mniejszych ekranach elementy immersyjne rozszerzają się na pełną szerokość, a korekty są wprowadzane dla pasków przewijania, aby zapewnić właściwe wyrównanie.Ten tekst wydaje się być kodem CSS do stylowania układu strony internetowej. Definiuje style dla różnych rozmiarów ekranu, kolorów, odstępów i elementów interaktywnych. Kod ustawia maksymalne szerokości dla obszarów treści, tworzy obramowania, definiuje zmienne kolorów dla różnych elementów, takich jak linki i tła, oraz obsługuje sposób wyświetlania strony, gdy skrypty są włączone lub wyłączone. Zawiera również specyficzne stylowanie nagłówków, akapitów i list w głównej kolumnie treści, dostosowując marginesy i wypełnienia dla różnych urządzeń.Linki akapitów w opakowaniu nagłówka mają zielone podkreślenie przesunięte o 4px od tekstu. Po najechaniu podkreślenie staje się ciemne.
Sekcja nagłówka ma subtelne zielone paskowane tło i zapewnia, że tytuł nie ma górnego wypełnienia. Linki tytułów są stylizowane w określonej czcionce, o rozmiarze 38px z jasnoszarym kolorem i płynnymi przejściami. Najechanie na nie usuwa podkreślenia, zmienia kolor na ciemny i zwiększa kontrast ikony strzałki. Jeśli preferowana jest redukcja ruchu, przejścia są wyłączone. Niełączące się spany w tytule są ukryte.
Obszar standfirst (podtytuł) ma dodatkowe dolne wypełnienie i używa tej samej czcionki i rozmiaru co tytuł dla swoich akapitów.
Animacje kontrolują pojawianie się tytułu i standfirst, gdy wchodzą w widok, z tytułem pojawiającym się pierwszym. Te animacje są pomijane, jeśli włączona jest redukcja ruchu lub skrypty są niedostępne.
Pierwszy element inline jest ograniczony do proporcji 4:5 z obrazem przyciętym do góry. Sekcja nagłówka ma dolne wypełnienie i stylizuje główny nagłówek z określoną typografią.
Rysunki mają podpisy pozycjonowane na dole z półprzezroczystym ciemnym tłem i jasnym tekstem, ukrywając wszelkie spany wewnątrz.
Linie nie są wyświetlane, a sekcja meta ma cienkie górne obramowanie
