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 trzech różnych formatach plików: WOFF2, WOFF i TrueType.
@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://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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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;
}
}
Kolumna z treścią interaktywną ma lewą ramkę i określone odstępy dla elementów. Akapity następujące po określonych elementach otrzymują dodatkowy górny padding, a pierwsza litera tych akapitów jest stylizowana jako duża, kolorowa inicjała. Elementy liniowe i figury są ograniczone do maksymalnej szerokości. Zdefiniowano różne zmienne kolorów dla spójnego motywu.
Cytaty wydzielone (pullquotes) w określonych kontenerach powinny mieć maksymalną szerokość 620 pikseli.
Podpisy dla elementów showcase w głównych artykułach, reportażach, standardowych artykułach i komentarzach powinny być pozycjonowane statycznie, rozciągać się na pełną szerokość i również mieć maksymalną szerokość 620 pikseli.
Elementy immersyjne powinny rozciągać się na pełną szerokość okna widoku (viewport), minus pasek przewijania. Na większych ekranach (powyżej 71.24em) ich maksymalna szerokość to 978px, z paddingiem podpisów dostosowanym w różnych punktach granicznych. Na średnich ekranach (między 46.25em a 61.24em) maksymalna szerokość to 738px. Na mniejszych ekranach (poniżej 46.24em) te elementy nie powinny mieć lewego marginesu i powinny wyrównywać się do lewej krawędzi, z dostosowanymi marginesami i paddingiem podpisów dla bardzo małych ekranów.
Dla opakowania mebla (furniture wrapper) na dużych ekranach (powyżej 61.25em) używany jest układ siatki (grid) z zdefiniowanymi kolumnami i wierszami. Nagłówki otrzymują górną ramkę, informacje meta są pozycjonowane względnie, a tekst wstępny (standfirst) ma określone stylowanie dla linków i odstępów. Figury w tym opakowaniu mają dostosowane marginesy i maksymalną szerokość 630px dla elementów liniowych. Na bardzo dużych ekranach (powyżej 71.25em) szablon siatki jest dostosowany, aby zawierać więcej kolumn.
CSS definiuje układ siatki dla nagłówka strony z obszarami na tytuł, nagłówek, tekst wstępny, informacje meta i portret. Ustawia określone wymiary i pozycje dla tych elementów przy różnych rozmiarach ekranu. Stylowanie obejmuje ramki, czcionki i kolory, z dostosowaniami dla ikon mediów społecznościowych, podpisów i responsywnego zachowania w widokach mobilnych i desktopowych.
Kod CSS definiuje style dla układu strony internetowej, skupiając się na komponencie zwanym "furniture-wrapper". Ten komponent ma ciemne tło i dostosowuje swoje marginesy i padding w zależności od rozmiaru ekranu. Dla większych ekranów dodaje dekoracyjne paski boczne.
Wewnątrz tego opakowania stylowane są elementy takie jak nagłówki artykułów, tytuły i informacje meta (np. przyciski udostępniania społecznościowego). Tytuły używają jasnoszarego koloru i pogrubionej czcionki. Przyciski społecznościowe mają kolorowe ramki pasujące do koloru motywu i zmieniają się na jednolity kolor po najechaniu.
Kod zarządza również widocznością podpisów i przycisku przełączania podpisów dla elementów multimedialnych. Ogólnie, style zapewniają, że układ jest responsywny i wizualnie spójny na różnych urządzeniach.
Ten kod CSS definiuje style dla komponentu strony internetowej, prawdopodobnie paska bocznego lub opakowania treści. Ustawia kolory tekstu, wygląd linków i dostosowania układu dla różnych rozmiarów ekranu. Linki są stylizowane z określonymi kolorami i podkreśleniami, a układ zawiera elementy tła, które dostosowują się w zależności od szerokości okna widoku. Kod obsługuje również ramki i odstępy dla różnych elementów wewnątrz komponentu.
Kod CSS definiuje style dla elementów artykułu i ładuje niestandardowe czcionki. Ustawia kolor ramki dla komentarzy tak, aby pasował do koloru ramki nagłówka. Dla nagłówków artykułów używa domyślnie lekkiej wagi czcionki, ale przełącza się na pogrubioną, gdy nagłówek zawiera znacznik strong.
Dodatkowo importuje rodzinę czcionek Guardian Headline Full w różnych wagach i stylach (lekka, regularna, średnia, półgruba, każda w wersjach normalnej i kursywy) z serwerów Guardiana, określając wiele formatów plików dla kompatybilności z przeglądarkami.
Czcionka "Guardian Headline Full" jest zdefiniowana z kilkoma stylami: półgruba kursywa (waga 600), pogrubiona (waga 700), pogrubiona kursywa (waga 700), czarna (waga 900) i czarna kursywa (waga 900). Każdy styl zawiera pliki czcionek w formatach WOFF2, WOFF i TrueType, hostowane na serwerach Guardiana.
Dodatkowo zdefiniowana jest czcionka "Guardian Titlepiece" w stylu pogrubionym (waga 700), również z plikami WOFF2, WOFF i TrueType.
Dla urządzeń iOS i Android ustawiony jest ciemny kolor tła i określone kolory funkcji. W trybie ciemnym kolor funkcji dostosowuje się odpowiednio.
Na iOS i Android stosowane są określone reguły CSS do stylizacji pierwszej litery pierwszego akapitu w określonych kontenerach artykułów, następujących po konkretnych elementach takich jak `.element-atom` lub bramki logowania.
Dla urządzeń z Androidem pierwsza litera pierwszego akapitu w standardowych artykułach i komentarzach jest stylizowana kolorem drugorzędnym kolumny tematycznej (pillar). Zarówno na iOS, jak i Androidzie nagłówki artykułów są ukryte, a opakowanie mebla ma określony padding. Etykiety wewnątrz opakowania mebla używają pogrubionej, pisanej wielkimi literami czcionki z nowym kolorem kolumny tematycznej. Tytuły ustawione są na 32px, pogrubione, z dolnym paddingiem i ciemnym kolorem. Obrazy-figury są pozycjonowane względnie, z pełnymi marginesami i automatyczną wysokością.
Dla urządzeń z Androidem obrazy w kontenerach artykułów powinny mieć przezroczyste tło, rozciągać się na pełną szerokość okna widoku (z uwzględnieniem pasków przewijania) i automatycznie dostosowywać swoją wysokość.
Zarówno na iOS, jak i Androidzie wstępny tekst w artykułach powinien mieć określone odstępy: 4 piksele paddingu u góry i 24 piksele u dołu, z ujemnym marginesem 10 pikseli po prawej stronie.
Akapity w tym tekście wstępnym powinny używać rodzinę czcionek nagłówkowych Guardiana.
Linki wewnątrz tego tekstu powinny być stylizowane określonym kolorem, podkreśleniem umieszczonym 6 pikseli poniżej tekstu i jasnoszarym kolorem podkreślenia, bez obrazka tła ani ramki. Po najechaniu podkreślenie powinno zmienić się na kolor tekstu linku.
Dodatkowo, sekcja metadanych w artykułach na iOS i Androidzie powinna otrzymać określone stylowanie.
Ten kod CSS ustawia style dla kontenerów artykułów na urządzeniach iOS i Android. Dostosowuje marginesy, kolory, padding i wyświetlanie przycisków dla różnych typów artykułów i ich komponentów.
Na urządzeniach iOS i Android, dla kontenerów artykułów typu feature, standard i comment, obrazy, które nie są miniaturkami ani immersyjne, są stylizowane tak, aby nie miały marginesu, szerokość obliczona z okna widoku minus 24 piksele i szerokość paska przewijania, oraz automatyczną wysokość. Ich podpisy nie mają paddingu.
Obrazy immersyjne w tych kontenerach są ustawione na szerokość równą szerokości okna widoku minus szerokość paska przewijania.
W treści artykułu (prosie), cytowane bloki cytatów wyświetlają kolorowy znacznik przy użyciu niestandardowej zmiennej CSS. Linki są stylizowane określonym kolorem, podkreśleniem przesuniętym o 6 pikseli i kolorem dekoracji z zmiennej. Po najechaniu kolor podkreślenia zmienia się na inną zmienną.
W trybie ciemnym kolor tła opakowania mebla w tych kontenerach jest ustawiony na ciemny szary (#1a1a1a).
Dla urządzeń iOS i Android etykiety treści w artykułach typu feature, standard i comment używają nowego koloru kolumny tematycznej. Nagłówki w tych artykułach nie mają tła i używają koloru ramki nagłówka. Tekst wstępny i linki, wraz z podpisami autorów, również przyjmują nowy kolor kolumny tematycznej. Ikony w sekcji meta są stylizowane tym samym kolorem. Podpisy dla obrazów showcase używają koloru daty, a cytowany tekst w treści artykułu stosuje to samo stylowanie.
Dla urządzeń iOS i Android kolor tekstu cytowanych bloków w treści artykułów jest ustawiony na określony kolor kolumny tematycznej. Dodatkowo, kolor tła dla różnych kontenerów treści artykułów jest wymuszony na ciemne tło. Na iOS pierwsza litera następująca po okre
