Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er gibt die Schriftdateien in verschiedenen Formaten (WOFF2, WOFF und TrueType) und ihre Online-Standorte an, damit der Browser sie herunterladen und verwenden kann. Die Schrift umfasst die Gewichte Light (300), Regular (400), Medium (500) und Semibold (600), jeweils in normaler und kursiver Ausführung.
@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;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
left: -10px;
}
}
Für die interaktive Hauptspalte wird vor dem Inhalt ein linker Rahmen hinzugefügt, der 11 Pixel links positioniert ist. Elemente innerhalb dieser Spalte haben keinen oberen oder unteren Rand, aber beinhalten 12 Pixel Abstand oben und unten. Wenn ein Absatz von einem Element gefolgt wird, wird der Abstand entfernt und stattdessen werden Ränder von 12 Pixeln angewendet. Inline-Elemente sind auf eine maximale Breite von 620 Pixeln beschränkt, was auch für Inline-Figuren auf Bildschirmen breiter als 61,25em gilt.
Benutzerdefinierte Eigenschaften definieren Farben für verschiedene Elemente, wie Datumszeile, Kopfzeilenrahmen, Beschriftungstext und Hintergrund, wobei eine Akzentfarbe auf Rot gesetzt ist und eine neue Säulenfarbe standardmäßig auf die Primär- oder Akzentfarbe festgelegt wird. Elemente mit der Atom-Klasse haben keinen Abstand.
Für den ersten Absatz nach bestimmten Elementen oder einer horizontalen Linie in verschiedenen Inhaltsbereichen wird ein oberer Abstand von 14 Pixeln hinzugefügt. Der erste Buchstabe dieser Absätze wird mit einer großen, fetten, großgeschriebenen Schrift in einer bestimmten Farbe gestaltet, schwebt links mit einem Rand und vertikaler Ausrichtung.
Zusätzlich haben Absätze unmittelbar nach einer horizontalen Linie in diesen Bereichen keinen oberen Abstand. Zitate innerhalb bestimmter Inhaltsbereiche haben eine maximale Breite von 620 Pixeln.
Beschriftungen von Showcase-Elementen im Hauptinhalt und Artikelcontainern sind statisch positioniert mit voller Breite, ebenfalls auf 620 Pixel begrenzt.
Immersive Elemente erstrecken sich über die gesamte Viewport-Breite abzüglich der Scrollleiste. Auf Bildschirmen bis zu 71,24em Breite sind diese Elemente auf 978 Pixel begrenzt, mit Beschriftungsabständen von 10px auf kleineren Bildschirmen und 20px auf mittleren. Zwischen 46,25em und 61,24em beträgt die maximale Breite 738 Pixel. Unterhalb von 46,24em richten sich immersive Elemente am linken Rand mit angepassten Rändern und 20px Beschriftungsabstand auf mittleren Bildschirmen aus.
Für Furniture-Wrapper auf größeren Bildschirmen (61,25em und mehr) wird ein Grid-Layout mit definierten Spalten und Zeilen verwendet. Überschriften zeichnen sich durch einen oberen Rand aus, Meta-Bereiche haben oberen Abstand, und Standfirst-Elemente enthalten gestylte Links mit Unterstreichungen, die sich bei Hover in der Farbe ändern. Ursprünglich hat der erste Absatz im Standfirst einen oberen Rand, der auf breiteren Bildschirmen (71,25em und darüber) entfernt wird. Figuren innerhalb des Wrappers haben keinen unteren Rand und einen linken Versatz, wobei Inline-Elemente auf 630 Pixel beschränkt sind. Auf den größten Bildschirmen passt das Grid seine Spaltenstruktur für ein besseres Layout an.
Das Layout verwendet ein Grid mit spezifischen Spalten und Zeilen für verschiedene Bildschirmgrößen. Auf größeren Bildschirmen passt sich das Grid an, um drei gleiche Spalten für den Titel, die Überschrift und die Meta-Bereiche zu haben, gefolgt von fünf für den Standfirst und acht für das Porträt, mit Zeilenhöhen, die als Bruchteile festgelegt sind. Eine dünne Linie erscheint über dem Meta-Bereich, und der Standfirst hat eine vertikale Linie auf seiner linken Seite.
Überschriften sind fett und ändern sich in Größe und Breite abhängig vom Bildschirm: bis zu 620px breit und 32px Schrift auf kleineren Bildschirmen und 540px breit mit einer 50px Schrift auf größeren. Einige dekorative Linien sind auf größeren Bildschirmen versteckt, und Social-Sharing- und Kommentarelemente haben Ränder, die der Farbe der Kopfzeile entsprechen.
Der Standfirst-Text ist normal gewichtet, 20px groß, mit Abstand unten und wird leicht nach links verschoben mit einem linken Abstand. Hauptmedienbilder füllen die Breite und passen die Ränder für verschiedene Bildschirmgrößen an, mit Beschriftungen, die unten mit einer Hintergrundfarbe und benutzerdefinierter Textfarbe positioniert sind. Auf sehr kleinen Bildschirmen erstrecken sich die Medien über die gesamte Viewport-Breite abzüglich der Scrollleiste.
Der Furniture-Wrapper setzt einen dunklen Hintergrund und passt Ränder und Abstände für verschiedene Bildschirmgrößen an. Auf größeren Bildschirmen fügt er dekorative Seitenleisten hinzu. Überschriften sind mit fetter, hellgrauer Textfarbe gestaltet, und Meta-Informationen verwenden ähnliche Farben. Social-Media-Buttons zeichnen sich durch eine markante Farbe aus, die sich beim Hover ändert, wobei sich die Text- und Hintergrundfarben für Kontrast umkehren. Beschriftungen sind standardmäßig ausgeblendet, können aber mit einem Button ein- und ausgeblendet werden, und verschiedene Elemente passen ihre Sichtbarkeit und ihr Layout basierend auf Bildschirmbreite und anderen Bedingungen an.
Elemente mit der Klasse "furniture-wrapper" und ihre Kinder haben spezifische Stilregeln:
- Meta-Bereich-Links sind mit einer benutzerdefinierten Eigenschaft für die Säulenfarbe oder eine Dark-Mode-Funktion eingefärbt, wobei die gleiche Farbe beim Hover für Text und Unterstreichung angewendet wird.
- Standfirst-Links haben keinen Rand, verwenden die Säulenfarbe oder Dark-Mode-Funktion für Text, entfernen Hintergrundbilder und zeichnen sich durch Unterstreichungen mit einem 6px Versatz und einer Kopfzeilenrahmenfarbe aus. Beim Hover ändert sich die Unterstreichungsfarbe zur Säulenfarbe oder Dark-Mode-Funktion.
- Standfirst-Absätze und Listenelemente sind hellgrau (#dcdcdc) eingefärbt.
- Für größere Bildschirme (min-width: 61.25em) hat der erste Absatz im Standfirst einen oberen Rand, der bei noch größeren Breakpoints (min-width: 71.25em) entfernt wird.
- Pseudo-Elemente (:before und :after) werden verwendet, um Seitenleisten mit dunklen Hintergründen und Rändern zu erstellen, die ihre Breite und Position basierend auf Viewport-Größe und Scrollleistenbreite für verschiedene Bildschirmgrößen anpassen.
- Trennlinien und Social-/Kommentarelemente im Meta-Bereich verwenden die Kopfzeilenrahmenfarbe für Striche und Styling.
Der Kommentarbereich hat eine Rahmenfarbe, die der Rahmenfarbe der Kopfzeile entspricht.
In Artikeln haben Überschriften der Ebene zwei eine leichte Schriftstärke von 200. Enthält jedoch eine Überschrift der Ebene zwei ein fettes Element, verwendet sie eine schwerere Schriftstärke von 700.
Zusätzlich ist die Schriftfamilie Guardian Headline Full mit verschiedenen Stilen und Gewichten definiert, einschließlich Light, Regular, Medium und Semibold, jeweils in normaler und kursiver Version verfügbar. Diese Schriften stammen von bestimmten URLs in WOFF2-, WOFF- und TrueType-Formaten.
Dieser CSS-Code definiert mehrere Schriftfamilien und ihre Variationen für die Guardian-Website. Er spezifiziert verschiedene Schriftgewichte und -stile (wie fett, kursiv, halbfett, schwarz) für die Schrift "Guardian Headline Full", jeweils mit mehreren Dateiformaten (WOFF2, WOFF, TTF) für cross-browser Kompatibilität. Zusätzlich beinhaltet er die Schrift "Guardian Titlepiece" in fett.
Der Code richtet auch CSS-benutzerdefinierte Eigenschaften (Variablen) für Farben ein, passt sie für den Dark Mode auf iOS- und Android-Geräten an. Er beinhaltet Media Queries, um Dark-Mode-Präferenzen zu handhaben, und wendet spezifisches Styling auf den ersten Buchstaben von Absätzen in Artikelcontainern auf iOS- und Android-Plattformen an, insbesondere wenn sie bestimmten Elementen wie Atoms oder Anmelde-Toren folgen.
Für Android- und iOS-Geräte wird der erste Buchstabe des ersten Absatzes in Standard- und Kommentarartikeln mit einer sekundären Säulenfarbe gestaltet. Die Artikelkopfzeilenhöhe ist auf Null gesetzt, während der Furniture-Wrapper einen Abstand von 4px oben, 10px an den Seiten und keinen unten hat.
Inhaltskennzeichnungen innerhalb des Furniture-Wrappers verwenden eine fette, großgeschriebene Schrift aus der Guardian-Headline-Familie in der neuen Säulenfarbe. Überschriften sind 32px, fett, mit 12px unterem Abstand und einer dunkelgrauen Farbe.
Bilder im Furniture-Wrapper sind relativ positioniert, mit einem oberen Rand von 14px, keinem unteren Rand und einem linken Rand von -10px. Ihre Breite erstreckt sich über den gesamten Viewport abzüglich der Scrollleistenbreite, und ihre Höhe passt sich automatisch an. Innere Figure-Elemente, Bilder und Links innerhalb dieser Figuren erben das gleiche Styling.
Für Android-Geräte haben Bilder innerhalb von Artikelcontainern einen transparenten Hintergrund und passen ihre Breite an den vollständigen Viewport abzüglich der Scrollleiste an, mit automatischer Höhe.
Auf iOS und Android hat der Standfirst-Bereich in Artikelcontainern oberen und unteren Abstand, mit einem negativen rechten Rand. Der Text innen verwendet spezifische Schriftfamilien, und Links sind mit einer bestimmten Farbe gestaltet, unterstrichen mit einem benutzerdefinierten Versatz und Farbe und ohne Hintergrundbild oder Rand. Beim Darüberfahren ändert sich die Unterstreichungsfarbe, um der Linkfarbe zu entsprechen.
Zusätzlich ist der Meta-Bereich in Artikelcontainern auf iOS und Android ebenfalls gestaltet.
Für Android-Geräte entfernen Sie den Rand vom Meta-Bereich in Standard- und Kommentarartikelcontainern.
Auf iOS und Android setzen Sie die Farbe von Byline- und Autor-Links in Feature-, Standard- und Kommentarartikeln auf die neue Säulenfarbe. Entfernen Sie auch den Abstand vom Meta
