Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er enthält leichte, reguläre, mittlere und halbfette Gewichte, jeweils mit normalen und kursiven Varianten. Die Schriftdateien werden in den Formaten WOFF2, WOFF und TrueType bereitgestellt, die auf den Servern des Guardian gehostet werden.
@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;
}
}
Die interaktive Inhalts-Spalte hat einen linken Rahmen und spezifische Abstände für Elemente. Absätze, die auf bestimmte Elemente folgen, haben zusätzliches oberes Padding, und der erste Buchstabe dieser Absätze wird als großer, farbiger Initialbuchstabe gestaltet. Inline-Elemente und Abbildungen sind auf größeren Bildschirmen auf eine maximale Breite von 620px begrenzt. Verschiedene Farbvariablen sind für ein konsistentes Theming definiert.
Pullquotes innerhalb spezifischer Container sollten eine maximale Breite von 620 Pixeln haben.
Bildunterschriften für Showcase-Elemente im Hauptinhalt und in Artikel-Containern sollten statisch positioniert sein, mit einer vollen Breite von bis zu 620 Pixeln.
Immersive Elemente sollten die volle Viewport-Breite abzüglich der Scrollbar einnehmen. Auf größeren Bildschirmen sind sie auf 978 Pixel begrenzt, wobei das Padding für Bildunterschriften für mittlere Bildschirme angepasst ist. Auf mittelgroßen Bildschirmen beträgt die maximale Breite 738 Pixel. Auf kleineren Bildschirmen richten sich immersive Elemente am linken Rand aus, mit angepassten Rändern und Padding für Bildunterschriften.
Für Furniture-Wrapper auf größeren Bildschirmen wird ein Grid-Layout mit definierten Spalten und Zeilen verwendet. Überschriften haben einen oberen Rahmen, Meta-Bereiche sind relativ positioniert, und Standfirst-Inhalte enthalten spezifisches Styling für Links und Absätze. Abbildungen innerhalb des Wrappers haben keinen linken Rand und eine maximale Breite von 630 Pixeln, wenn sie inline sind. Auf sehr großen Bildschirmen werden die Grid-Template-Spalten angepasst.
Das CSS definiert ein Grid-Layout für einen Artikel-Header mit spezifischen Bereichen für Titel, Überschrift, Standfirst, Meta-Informationen und ein Porträtbild. Es setzt Stile für Rahmen, Typografie und Abstände und passt diese Eigenschaften über verschiedene Bildschirmgrößen hinweg mit Media Queries an. Beispielsweise vergrößert sich die Schriftgröße der Überschrift auf größeren Bildschirmen, und bestimmte Elemente werden ausgeblendet oder umpositioniert, wenn sich der Viewport ändert. Der Hauptmedienbereich ist so konfiguriert, dass er auf Mobilgeräten die volle Breite einnimmt.
Der CSS-Code definiert Stile für ein Webseiten-Layout, wobei der Fokus auf einem Furniture-Wrapper-Element liegt. Er setzt Hintergrundfarben, Ränder, Padding und responsives Verhalten für verschiedene Bildschirmgrößen. Die Stile beinhalten benutzerdefinierte Eigenschaften für Farben, wie Dark-Mode-Funktionen und Rahmen für Header. Spezifische Regeln steuern das Erscheinungsbild von Bildunterschriften, Buttons, Überschriften und Meta-Informationen, mit Anpassungen für Hover-Effekte und Social-Media-Icons. Media Queries stellen sicher, dass das Layout sich von mobilen zu Desktop-Ansichten anpasst, einschließlich breiterer Bildschirme, wo Seitenhintergründe hinzugefügt werden.
Dieser CSS-Code definiert Stile für eine Webseiten-Komponente, wahrscheinlich eine Seitenleiste oder einen Inhalts-Wrapper. Er setzt Farben, Rahmen und Layout-Anpassungen für verschiedene Elemente wie Links, Text und Social-Media-Icons. Die Stile passen sich mit Media Queries an verschiedene Bildschirmgrößen an, ändern Breiten und Rahmen, um auf größere Bildschirme zu passen. Farben werden mit CSS-Variablen für Themes verwaltet, wie zum Beispiel den Dark Mode.
Der CSS-Code definiert Stile für Artikelelemente und lädt benutzerdefinierte Schriftarten. Er setzt die Rahmenfarbe für Kommentare so, dass sie mit der Header-Rahmenfarbe übereinstimmt. Für Artikelüberschriften verwendet er ein leichtes Schriftgewicht, macht aber Überschriften mit starkem Text fett. Der Code importiert außerdem die Guardian-Headline-Schriftfamilie in verschiedenen Gewichten und Stilen, einschließlich leicht, regulär, mittel und halbfett, jeweils in normaler und kursiver Version.
Die Schrift "Guardian Headline Full" ist mit mehreren Stilen definiert: halbfett kursiv (Gewicht 600), fett (Gewicht 700), fett kursiv (Gewicht 700), schwarz (Gewicht 900) und schwarz kursiv (Gewicht 900). Jeder Stil enthält Schriftdateien in den Formaten WOFF2, WOFF und TrueType.
Zusätzlich ist die Schrift "Guardian Titlepiece" in ihrem fetten Stil (Gewicht 700) definiert, ebenfalls mit WOFF2-, WOFF- und TrueType-Dateien.
Für iOS- und Android-Geräte wird eine dunkle Hintergrundfarbe (#1a1a1a) und spezifische Feature-Farben gesetzt. Im Dark Mode passt sich die Feature-Farbe entsprechend an.
Auf iOS und Android wird ein spezielles Styling auf den ersten Buchstaben des ersten Absatzes in Artikel-Containern angewendet, der auf bestimmte Elemente wie `.element-atom` oder Anmelde-Gates folgt.
Für Android-Geräte wird der erste Buchstabe des ersten Absatzes in Standard- und Kommentarartikeln mit einer sekundären Pillar-Farbe gestaltet. Auf iOS und Android sind Artikel-Header ausgeblendet, und der Furniture-Wrapper hat spezifisches Padding. Labels innerhalb des Furniture-Wrappers verwenden eine fette, großgeschriebene Schrift mit einer neuen Pillar-Farbe. Überschriften sind auf 32px, fett, mit unterem Padding und einer dunklen Farbe gesetzt. Bildabbildungen sind relativ positioniert, mit vollem Rand und automatischer Höhe.
Für Android-Geräte sollten Bilder innerhalb von Artikel-Containern einen transparenten Hintergrund haben, die volle Viewport-Breite (unter Berücksichtigung von Scrollbars) einnehmen und ihre Höhe automatisch anpassen.
Auf iOS und Android sollte der einleitende Text in Artikeln spezifische Abstände haben: 4 Pixel Padding oben, 24 Pixel unten und einen negativen Rand von 10 Pixeln rechts.
Die Absätze innerhalb dieses einleitenden Textes sollten die Guardian-Headline-Schriftfamilie verwenden.
Links innerhalb dieses Textes sollten mit einer spezifischen Farbe, einer Unterstreichung, die 6 Pixel unter dem Text positioniert ist, und einer hellgrauen Unterstreichungsfarbe gestaltet werden. Sie sollten kein Hintergrundbild oder unteren Rahmen haben. Beim Darüberfahren sollte sich die Unterstreichung an die Textfarbe des Links anpassen.
Zusätzlich sollte der Artikel-Metadatenbereich für beide Betriebssysteme konsistent gestaltet sein.
Dieser CSS-Code setzt Stile für Artikel-Container auf Android- und iOS-Geräten. Er passt Ränder, Farben, Padding und die Anzeige von Buttons für verschiedene Artikeltypen und ihre Komponenten an.
Auf iOS- und Android-Geräten haben Bilder, die keine Thumbnails oder immersive Bilder sind, in Feature-, Standard- und Kommentar-Artikel-Containern einen Rand von null, eine Breite, die aus dem Viewport minus 24 Pixeln und der Scrollbar-Breite berechnet wird, und eine automatische Höhe. Ihre Bildunterschriften haben kein Padding.
Immersive Bilder in diesen Containern haben eine Breite, die aus dem Viewport minus der Scrollbar-Breite berechnet wird.
Innerhalb des Fließtextes im Artikelkörper verwenden zitierte Blockquotes die neue Pillar-Farbe für ihr dekoratives Element. Links sind mit der primären Pillar-Farbe, einer Unterstreichung mit einem Abstand von 6px und einer Rahmenfarbe als Unterstreichung gestaltet, die beim Darüberfahren in die neue Pillar-Farbe wechselt.
Im Dark Mode ist die Hintergrundfarbe des Furniture-Wrappers auf #1a1a1a gesetzt.
Für iOS- und Android-Geräte verwenden die Inhalts-Labels in Feature-, Standard- und Kommentarartikeln die neue Pillar-Farbe.
Auf iOS und Android hat die Hauptüberschrift in diesen Artikeltypen keinen Hintergrund und verwendet die Header-Rahmenfarbe für den Text.
Der Standfirst-Text in diesen Artikeln verwendet ebenfalls die Header-Rahmenfarbe. Links innerhalb des Standfirst sowie Autorenzeilen und ihre Links sind mit der neuen Pillar-Farbe gestaltet.
Icons in den Artikel-Metadaten verwenden die neue Pillar-Farbe für ihre Striche.
Bildunterschriften für Showcase-Bilder in diesen Artikeln verwenden die Datumszeilen-Farbe.
Schließlich verwendet zitierter Text innerhalb des Artikelkörpers auf iOS das angegebene Styling.
Für iOS- und Android-Geräte ist die Textfarbe von zitierten Blöcken innerhalb von Artikelkörpern auf eine spezifische Variablenfarbe gesetzt.
Zusätzlich wird die Hintergrundfarbe für verschiedene Artikelkörper-Container auf iOS und Android mit einer wichtigen Deklaration auf einen dunklen Hintergrund gezwungen.
Ferner wird für iOS-Geräte der erste Buchstabe, der auf bestimmte Elemente wie Atoms, Anmelde-Gates oder spezifische IDs innerhalb von Artikelkörpern folgt, gestaltet, obwohl das genaue Styling im bereitgestellten Text abgeschnitten ist.
Dies scheint ein CSS-Selektor zu sein, der den ersten Buchstaben von Absätzen in spezifischen Artikel-Containern auf iOS- und Android-Geräten anspricht. Der Selektor gilt für verschiedene Artikeltypen (Standard, Feature, Kommentar) und berücksichtigt verschiedene Seitenstrukturen und Anmelde-Gate-Elemente.
Dieser CSS-Code setzt Stile für spezifische Elemente auf Android- und iOS-Geräten. Er definiert Farben, Padding, Ränder und andere visuelle Eigenschaften für verschiedene Artikel-Container, Buttons und Textelemente. Der Code beinhaltet auch Dark-Mode-Präferenzen und setzt bestimmte Header auf unsichtbar.
Der CSS-Code setzt Stile für Artikel-Container auf iOS- und Android-Geräten. Er entfernt Ränder von Furniture-Wrappern und passt Farben für Labels, Überschriften und Links basierend auf benutzerdefinierten Eigenschaften an. Überschriften sind auf eine hellgraue Farbe gesetzt, während Links und Labels eine Variablenfarbe verwenden. Meta-Bereiche haben ein gestreiftes Hintergrundmuster und Autorenzeilen in Hellgrau.
Für iOS- und Android-Geräte sollten Links innerhalb des Meta-Bereichs von Feature-, Standard- und Kommentarartikeln die neue Pillar-Farbe (oder eine Dark-Mode-Feature-Farbe als Fallback) verwenden.
Eb
