Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er umfasst leichte, reguläre, mittlere und halbfette Gewichte, jeweils in normalen und kursiven Versionen. Die Schriften werden von den Servern des Guardian in den Formaten WOFF2, WOFF und TrueType geladen, um Kompatibilität über verschiedene Browser hinweg sicherzustellen.
@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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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) {
}
Für interaktive Inhalts-Spalten wird eine linke Rahmenlinie mit spezifischer Positionierung und Z-Index hinzugefügt. Auf größeren Bildschirmen passt sich die linke Position der Linie leicht an. Innerhalb dieser Spalten haben atomare Elemente keine oberen oder unteren Ränder, enthalten jedoch Innenabstand. Wenn Absätze vor atomaren Elementen stehen, wird der Innenabstand entfernt und stattdessen werden Ränder hinzugefügt. Inline-Elemente sind auf eine maximale Breite beschränkt.
Für Inline-Bilder auf mittleren Bildschirmen und größer wird eine maximale Breite festgelegt. In Medienbereichen, die Loop-Bilder enthalten, werden Bildunterschriften darüber geschichtet, und Loop-Buttons werden mit spezifischen Abmessungen und Ausrichtung gestaltet. Beschriftungs-Buttons werden oben platziert.
Im Body-Bereich nehmen selbst-gehostete Video-Inseln die volle Breite bis zu einem Maximum ein, mit zentrierten Rändern. Loop-Bilder und Videos innerhalb dieser Inseln nehmen ebenfalls die volle Breite ein. Für immersive Video-Elemente werden Breitenbeschränkungen entfernt und Ränder angepasst. Auf größeren Bildschirmen erweitern sich immersive Videos in der Breite und verschieben sich nach links, wobei die Bildunterschriften entsprechend eingerückt werden.
Farbvariablen definieren verschiedene UI-Elemente wie Datumszeilen, Rahmen, Bildunterschriften und Akzentfarben, wobei die Säulenfarben Unterüberschriften, Zitate und Blockzitate beeinflussen. Im Dunkelmodus passen sich diese Farben dem dunklen Thema an.
Atomare Elemente innerhalb von Inhalts-Spalten haben keinen Innenabstand. Spezifische Regeln passen die ersten Absätze nach bestimmten Elementen oder horizontalen Trennlinien in verschiedenen Inhaltsbereichen wie Artikeln, interaktiven Inhalten, Kommentaren und Features an, um korrekten Abstand und Layout zu gewährleisten.
Der erste Absatz nach einem Anmelde-Gate oder einer horizontalen Trennlinie (außer der letzten) hat einen oberen Innenabstand von 14 Pixeln.
Für den ersten Buchstaben des ersten Absatzes, der auf bestimmte Elemente wie ein Atom, ein Anmelde-Gate oder eine horizontale Trennlinie (nicht die letzte) in verschiedenen Inhaltsbereichen (Artikel-Body, interaktiver Inhalt, Kommentare, Features oder Elemente mit einem `data-gu-name` von "body") folgt, wird ein spezieller Initialbuchstaben-Stil angewendet. Dieser Stil verwendet bestimmte Überschriften-Schriftarten, setzt die Schriftgröße auf 111px mit einer Zeilenhöhe von 92px, lässt ihn nach links fließen, macht ihn großbuchstabig, fügt einen 8px rechten Rand hinzu, richtet ihn an der Oberseite des Textes aus und färbt ihn mit einer benutzerdefinierten Variable für Initialbuchstaben.
Absätze, die unmittelbar auf eine horizontale Trennlinie in diesen Inhaltsbereichen folgen, sollten keinen oberen Innenabstand haben.
Zitate innerhalb dieser Inhaltsbereiche sind auf eine maximale Breite von 620 Pixeln beschränkt.
Bildunterschriften für Showcase-Elemente in Hauptinhalten, Feature-Artikeln, Standard-Artikeln und Kommentarbereichen sind statisch positioniert, nehmen die volle Breite bis zu einem Maximum von 620 Pixeln ein.
Immersive Elemente erstrecken sich über die gesamte Viewport-Breite unter Berücksichtigung der Scrollbar. Auf größeren Bildschirmen (bis zu 71.24em) beträgt ihre maximale Breite 978px, wobei der Innenabstand der Bildunterschriften bei verschiedenen Breakpoints angepasst wird. Auf mittleren Bildschirmen (zwischen 46.25em und 61.24em) beträgt die maximale Breite 738px. Auf kleineren Bildschirmen (unter 46.24em) richten sich immersive Elemente am linken Rand mit angepassten Rändern und Bildunterschriften-Innenabstand aus.
Für breitere Bildschirme (über 61.25em) verwendet der Furniture-Wrapper ein CSS-Grid-Layout mit definierten Spalten und Zeilen, um Elemente wie Titel, Überschrift, Metadaten, Standfirst und Porträtbereich zu positionieren.
Die CSS-Stile definieren einen Layout-Wrapper für Artikel-Komponenten. Überschriften haben einen oberen Rahmen und passen ihre Größe von 32px auf 50px auf größeren Bildschirmen an, wobei sich auch eine maximale Breite ändert. Meta-Informationen enthalten auf breiten Bildschirmen eine dekorative obere Linie. Der Standfirst-Bereich enthält unterstrichene Links mit einer benutzerdefinierten Farbe, die sich beim Hover ändert, und sein erster Absatz hat auf kleineren Bildschirmen einen oberen Rahmen, der auf größeren entfernt wird. Eine vertikale Trennlinie erscheint im Standfirst auf breiten Bildschirmen.
Layout-Grids werden für Bildschirme von 71.25em und breiter sowie erneut für 81.25em und breiter definiert, wobei Spalten- und Zeilenvorlagen für die Positionierung von Elementen wie Titel-, Überschriften-, Meta-, Standfirst- und Porträtbereichen festgelegt werden. Bilder haben spezifische Ränder und maximale Breiten. Insgesamt steuern die Stile die responsive Darstellung von Artikel-Überschriften und einleitenden Inhalten.
Für Bildschirme breiter als 740px werden Elemente mit der Klasse `.keyline-4` oder dem Attribut `[data-gu-name="lines"]` ausgeblendet. Innerhalb des `.furniture-wrapper` werden die SVG-Striche innerhalb dieser Elemente mit einer benutzerdefinierten Farbvariable gestaltet.
Auf mittleren Bildschirmen und größer wird der rechte Rand von Elementen mit der ID `#meta` oder dem Attribut `[data-gu-name="meta"]` entfernt.
Innerhalb des Meta-Bereichs wird die Rahmenfarbe für Social-Links, Kommentar-Elemente und deren Kind-Spans auf eine benutzerdefinierte Variable gesetzt. Außerdem werden alle `gu-island`-Elemente innerhalb eines bestimmten Containers ausgeblendet.
Für den Standfirst-Bereich wird seine Positionierung und sein Innenabstand angepasst, wobei ein linker Versatz hinzugefügt wird. Auf mittleren Bildschirmen wird ein kleiner oberer Innenabstand hinzugefügt. Der Absatz darin wird mit einem regulären Schriftgewicht, einer Größe von 20px und unterem Innenabstand gestaltet.
Der Hauptmedienbereich wird relativ positioniert, im 'portrait'-Grid-Bereich platziert und erhält spezifische Ränder. Sichergestellt wird, dass seine inneren Divs die volle Breite einnehmen. Auf größeren Bildschirmen wird der untere Rand entfernt. Auf kleineren Bildschirmen werden Breite und linker Rand angepasst, mit einer zusätzlichen Anpassung für mittelkleine Bildschirme.
Bildunterschriften werden gestaltet, um unten mit einem benutzerdefinierten Hintergrund und Textfarbe zu erscheinen, wobei Standardbreite und -ränder überschrieben werden. Das erste Span darin wird ausgeblendet und das zweite angezeigt, wobei seine Breite begrenzt wird. Auf mittleren Bildschirmen wird der Innenabstand der Bildunterschrift angepasst. Ein ausgeblendeter Zustand macht die Bildunterschrift transparent.
Ein Beschriftungs-Button wird unten rechts positioniert, mit einem kreisförmigen Hintergrund und skaliertem Icon gestaltet, wobei seine Position auf mittleren Bildschirmen angepasst wird.
Für interaktive Artikel-Spalten auf sehr großen Bildschirmen wird die Position und Höhe eines Pseudo-Elements angepasst. Außerdem wird die Breite von Überschriften der Ebene 2 begrenzt.
Für iOS oder Android wird ein Satz von Dunkelmodus-Farbvariablen definiert. Im Dunkelmodus wird die primäre Farbvariable angepasst.
Für iOS-Geräte wird der erste Absatz nach bestimmten Elementen in verschiedenen Artikel-Containern angesprochen und sein erster Buchstabe gestaltet.
Der erste Buchstabe des ersten Absatzes, der auf ein Anmelde-Gate folgt, oder der erste Absatz nach einem Element-Atom in verschiedenen Artikel-Containern auf iOS und Android, sollte mit der sekundären Säulenvariable (Standard: schwarz) eingefärbt werden.
Sowohl auf iOS als auch Android sollte die Artikel-Header-Höhe in Feature-, Standard- und Kommentar-Artikel-Containern auf Null gesetzt werden.
Der Furniture-Wrapper innerhalb dieser Artikel-Container auf beiden Plattformen sollte einen oberen Innenabstand von 4 Pixeln und horizontalen Innenabstand von 10 Pixeln haben.
Labels innerhalb des Furniture-Wrappers sollten fett sein, die angegebene Schriftarten-Abfolge verwenden, ihre Farbe aus der neuen Säulenvariable nehmen und großgeschrieben werden.
Überschriften (h1) innerhalb des Furniture-Wrappers sollten eine Größe von 32 Pixeln haben, fett sein, 12 Pixel unteren Innenabstand haben und die Farbe #121212 haben.
Bilder innerhalb des Furniture-Wrappers sollten relativ positioniert sein, einen oberen Rand von 14 Pixeln, einen linken Rand von -10 Pixeln, eine Breite berechnet als Viewport-Breite minus Scrollbar-Breite und eine automatische Höhe haben.
Für Feature-Artikel auf iOS sollten das innere Figure-Element, das Bild und der Link innerhalb dieser Bilder ebenfalls diesen Gestaltungsregeln folgen.
Für iOS- und Android-Geräte gelten die folgenden CSS-Regeln:
Für Bilder innerhalb von Artikel-Containern:
- Hintergrund auf transparent setzen.
- Breite gleich der vollen Viewport-Breite minus der Scrollbar-Breite machen.
- Sicherstellen, dass die Höhe sich automatisch anpasst.
Für den Artikel-Standfirst-Bereich:
- 4px Innenabstand oben und 24px unten hinzufügen.
- Einen negativen rechten Rand von 10px anwenden.
Für Absätze innerhalb des Standfirst:
- Die Guardian-Überschriften- und Serifenschriftfamilien verwenden.
Für Links innerhalb des Standfirst:
- Farbe auf eine bestimmte Variable setzen.
- Jedes Hintergrundbild entfernen.
- Eine Unterstreichung mit 6px Versatz und einer bestimmten Rahmenfarbe anwenden.
- Jeden unteren Rahmen entfernen.
Für Hover-Effekte auf diesen Links:
- Dieselbe Gestaltung wie oben anwenden.
Für Android-Geräte sollte beim Überfahren von Links innerhalb des Standfirst-Bere
