Dieser CSS-Code definiert die Schriftfamilie "Guardian Headline Full" mit verschiedenen Gewichten und Stilen und bietet mehrere Dateiformate (WOFF2, WOFF, TTF) für jede Variante, um Kompatibilität über verschiedene Browser hinweg sicherzustellen. Dieser CSS-Code definiert mehrere Schriftfamilien für die Guardian Headline- und Guardian Titlepiece-Schriften, gibt deren Quellen in verschiedenen Formaten (WOFF2, WOFF und TrueType) zusammen mit ihren Schriftgewichten und -stilen an. Er enthält auch responsive Designregeln für die Hauptinhaltsspalte in interaktiven Layouts, die Ränder, Breiten und Positionierung basierend auf der Viewport-Größe anpassen. Beispielsweise wird auf breiteren Bildschirmen ein linker Rand und ein Rahmen hinzugefügt, während auf kleineren Bildschirmen die Elementbreiten und -positionen angepasst werden, um auf den Bildschirm zu passen. Die Stile stellen sicher, dass Elemente wie Absätze, Listen und immersive Komponenten sich geräteübergreifend angemessen anpassen.
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 auf einen Absatz ein Element folgt, wird der Abstand entfernt und stattdessen werden Ränder von 12 Pixel angewendet. Inline-Elemente sind auf eine maximale Breite von 620 Pixeln begrenzt, und für Bildschirme breiter als 61,25em halten auch Inline-Figuren mit einer bestimmten Rolle dieses Breitenlimit ein.
Farbvariablen sind für verschiedene Elemente definiert, wie Datumszeile, Kopfzeilenrahmen, Beschriftungstext und mehr, mit einer Akzentfarbe, die auf Rot gesetzt ist, und einer neuen Säulenfarbe, die standardmäßig auf die primäre Säule oder die Akzentfarbe festgelegt ist.
Elemente mit der Klasse 'element-atom' haben keinen Abstand. Spezifische Bedingungen gelten für den ersten Absatz nach bestimmten Elementen oder horizontalen Linien in verschiedenen Inhaltsbereichen, die 14 Pixel oberen Abstand hinzufügen. Zusätzlich wird der erste Buchstabe dieser Absätze mit einer großen, fetten, großgeschriebenen Schrift in einer bestimmten Farbe gestaltet, der mit einem Rand nach links fließt.
Horizontale Linien, gefolgt von Absätzen in diesen Bereichen, haben keinen oberen Abstand. Pullquotes innerhalb spezifischer Inhaltsbereiche sind auf eine maximale Breite von 620 Pixeln begrenzt.
Für Showcase-Elemente in Hauptartikeln, Features, Standardartikeln und Kommentaren sind Beschriftungen statisch positioniert mit voller Breite bis zu 620 Pixeln.
Immersive Elemente erstrecken sich über die gesamte Viewport-Breite abzüglich der Scrollleistenbreite. Auf Bildschirmen bis zu 71,24em Breite sind diese Elemente auf 978px begrenzt mit Beschriftungsabstand von 10px. Zwischen 30em und 71,24em erhöht sich der Beschriftungsabstand auf 20px. Für mittlere Bildschirme (46,25em bis 61,24em) beträgt die maximale Breite 738px. Auf kleineren Bildschirmen (bis zu 46,24em) richten sich immersive Elemente am linken Rand mit angepassten Rändern und Abständen aus.
Der Furniture-Wrapper verwendet ein Grid-Layout auf größeren Bildschirmen (61,25em und mehr), organisiert Titel, Überschrift, Meta-Informationen, Standfirst und Porträtbereiche. Überschriften zeichnen sich durch einen oberen Rahmen aus, Meta-Bereiche haben oberen Abstand, und Standfirst-Text beinhaltet spezifische Gestaltung für Links und Ränder. Figuren innerhalb des Wrappers haben keinen linken Rand und eine maximale Breite von 630px, wenn inline. Auf sehr großen Bildschirmen (71,25em und darüber) werden die Grid-Spalten für ein anderes Layout neu konfiguriert. Das Layout verwendet ein Grid mit spezifischen Spalten und Zeilen für verschiedene Bildschirmgrößen. Für kleinere Bildschirme hat das Grid drei Spalten und Zeilen mit festen und automatischen Höhen. Eine dünne Linie erscheint über dem Meta-Bereich, und der Standfirst-Bereich hat eine vertikale Linie auf seiner linken Seite ohne oberen Rand bei Absätzen.
Auf größeren Bildschirmen erweitert sich das Grid auf mehr Spalten und fraktionale Zeilenhöhen. Die Meta-Linie verbreitert sich, und die vertikale Linie des Standfirst verschiebt sich leicht nach links. Überschriften haben eine maximale Breite und Schriftgröße, die auf größeren Bildschirmen zunehmen, wobei die größten Bildschirme eine 50px Schrift anzeigen.
Einige Elemente wie Linien und Social-Comment-Funktionen sind auf mittleren und großen Bildschirmen ausgeblendet oder angepasst. Der Standfirst-Bereich hat negative Ränder und Abstände, mit spezifischen Schriftstilen und Abstand unter Absätzen.
Hauptmedienbilder sind relativ positioniert, nehmen die volle Breite ein und passen Ränder basierend auf der Bildschirmgröße an, mit Beschriftungen absolut am Boden positioniert mit benutzerdefiniertem Hintergrund und Textfarben. Der CSS-Code definiert Stile für eine Furniture-Wrapper-Komponente, einschließlich ihres Layouts, Farben und responsiven Verhaltens über verschiedene Bildschirmgrößen hinweg. Er setzt Hintergrundfarben, Textfarben und Rahmenstile unter Verwendung von CSS-Custom-Properties für Themen wie Dark Mode. Der Wrapper passt Ränder, Abstände und Positionierung auf größeren Bildschirmen an und beinhaltet Regeln zum Ausblenden oder Anzeigen von Elementen wie Beschriftungen und Social-Media-Buttons. Überschriften und Meta-Informationen sind mit spezifischen Schriften und Farben gestaltet, und interaktive Elemente haben Hover-Effekte für Benutzerinteraktion. Media Queries stellen sicher, dass das Design sich von Mobil- zu Desktop-Ansichten anpasst. Dieser CSS-Code definiert Stile für Elemente innerhalb eines Containers mit der Klasse "furniture-wrapper". Er setzt Textfarben auf hellgrau (#dcdcdc) für Meta-Elemente und Standfirst-Absätze und verwendet benutzerdefinierte Eigenschaften für Linkfarben, die sich an Dark Mode oder Säulenthemen anpassen. Links im Standfirst-Bereich sind mit spezifischen Offsets und Farben unterstrichen, entfernen Ränder und Hintergrundbilder.
Für größere Bildschirme (min-width: 61.25em) erhält der erste Absatz im Standfirst einen oberen Rand, der auf noch größeren Bildschirmen (71.25em) entfernt wird. Der Code erstellt auch dekorative Seitenleisten unter Verwendung von Pseudo-Elementen (:before und :after), die ihre Breite und Position basierend auf der Viewport-Größe anpassen, mit dunklen Hintergründen und umrandeten Kanten.
Zusätzlich gestaltet er SVG-Elemente mit Strichen, die der Kopfzeilenrahmenfarbe entsprechen, und stellt sicher, dass Social- und Kommentarelemente im Meta-Bereich die entsprechenden Farben erben ohne zusätzliche Hintergrundeffekte. Der Kommentarbereich hat eine Rahmenfarbe, die der Kopfzeilenrahmenfarbe entspricht.
In Artikeln verwenden Überschriften zweiter Ebene (h2) innerhalb des Hauptkörpers ein leichtes Schriftgewicht von 200. Wenn jedoch ein h2 ein strong-Element enthält, wechselt es zu einem fetten Gewicht von 700.
Die Guardian Headline Full Schriftfamilie beinhaltet verschiedene Stile und Gewichte, jeweils mit spezifischen Dateiquellen in WOFF2, WOFF und TrueType Formaten:
- Light (Gewicht 300, normaler Stil)
- Light Italic (Gewicht 300, kursiver Stil)
- Regular (Gewicht 400, normaler Stil)
- Regular Italic (Gewicht 400, kursiver Stil)
- Medium (Gewicht 500, normaler Stil)
- Medium Italic (Gewicht 500, kursiver Stil)
- Semibold (Gewicht 600, normaler Stil)
- Semibold Italic (Gewicht 600, kursiver Stil) Dieser CSS-Code definiert mehrere @font-face Regeln für die Schriftfamilie "Guardian Headline Full", jeweils mit verschiedenen Gewichten und Stilen (normal und kursiv), von Semibold (600) bis Black (900). Er spezifiziert Quell-URLs für jede Schrift in WOFF2, WOFF und TrueType Formaten. Zusätzlich definiert er die "Guardian Titlepiece" Schrift mit einem fetten Gewicht (700) und normalem Stil.
Der Code setzt auch CSS-Custom-Properties (Variablen) für Dark-Mode-Hintergründe und Akzentfarben, passt sie basierend auf dem bevorzugten Farbschema des Benutzers oder wenn die Seite auf iOS- oder Android-Geräten betrachtet wird, an. Er beinhaltet spezifische Gestaltung für den ersten Buchstaben von Absätzen in Artikelcontainern auf iOS- und Android-Plattformen, insbesondere wenn sie bestimmten Elementen wie Atoms oder Sign-In-Gates folgen. Für Android-Geräte wird der erste Buchstabe des ersten Absatzes in Standard- und Kommentarartikeln mit einer sekundären Säulenfarbe gestaltet. Auf iOS und Android sind Artikelköpfe ausgeblendet, und der Furniture-Wrapper hat spezifischen Abstand. Labels innerhalb des Furniture-Wrappers verwenden eine fette, großgeschriebene Schrift in einer Überschriftenart mit einer neuen Säulenfarbe. Überschriften sind auf 32px, fett, mit unterem Abstand und einer dunklen Farbe gesetzt. Bilder im Furniture-Wrapper sind relativ positioniert, mit angepassten Rändern und Breite, und ihre inneren Elemente, Bilder und Links sind entsprechend gestaltet. Für Android-Geräte sind Bilder innerhalb von Artikelcontainern so eingestellt, dass sie einen transparenten Hintergrund haben, die gesamte Viewport-Breite abzüglich der Scrollleiste einnehmen und ihre Höhe automatisch anpassen.
Auf iOS und Android haben die Artikelzusammenfassungsbereiche oberen und unteren Abstand von 4px bzw. 24px, mit einem rechten Rand-Offset von -10px.
Der Text in diesen Zusammenfassungen verwendet die Guardian Headline Schriftfamilie oder ähnliche Serifenschriften.
Links innerhalb der Zusammenfassungen sind mit einer spezifischen Farbe gestaltet, unterstrichen mit einem 6px Offset, und verwenden eine bestimmte Farbe für die Unterstreichung, entfernen alle Hintergrundbilder oder Ränder. Beim Darüberfahren ändert sich die Unterstreichungsfarbe, um der Linkfarbe zu entsprechen.
Zusätzlich haben Metadatenbereiche in Artikeln auf beiden Betriebssystemen konsistente Gestaltung. Für Android-Geräte hat der Meta-Bereich in Standard- und Kommentarartikelcontainern keinen Rand.
Auf iOS-Geräten verwenden die Byline- und Autoreninformationen in Feature-, Standard- und Kommentarartikeln die neue Säulenfarbe. Dies gilt auch für Android-Geräte für Feature-Artikel.
Für iOS und Android hat der diverse Meta-Bereich in Feature-, Standard- und Kommentarartikeln keinen Abstand, und alle SVG-Icons verwenden die neue Säulenfarbe.
Der Beschriftungsbutton in Showcase-Elementen für Feature-, Standard- und Kommentarartikel auf iOS und Android wird als Flex-Container angezeigt, zentriert mit 5px Abstand, 28px in Breite und Höhe, und 14px von rechts positioniert.
Der Artikelkörper in Feature-, Standard- und Kommentarartikeln auf iOS und Android hat 12px Abstand auf der linken und rechten Seite. Für iOS- und Android-Geräte haben in Feature-, Standard- und Kommentarartikelcontainern Bilder, die keine Thumbnails oder immersiv sind, keinen Rand, eine Breite der vollen Viewport-Breite minus 24 Pixel und der Scrollleistenbreite, und eine automatische Höhe. Deren Beschriftungen haben keinen Abstand.
Immersive Bilder in diesen Containern erstrecken sich über die gesamte Viewport-Breite abzüglich der Scrollleistenbreite.
Zitierte Blockquotes im Artikelkörper zeigen einen farbigen Marker unter Verwendung der neuen Säulenfarbe an.
Links innerhalb des Artikelkörpers werden mit der primären Säulenfarbe gestaltet, unterstrichen mit einem Offset, und verwenden die Kopfzeilenrahmenfarbe für die Unterstreichung. Beim Darüberfahren ändert sich die Unterstreichungsfarbe zur neuen Säulenfarbe.
Im Dark Mode wird der Furniture-Wrapper-Hintergrund auf ein dunkles Grau (#1a1a1a) gesetzt. Für iOS- und Android-Geräte gelten die folgenden Stile für Feature-, Standard- und Kommentarartikelcontainer:
- Inhaltslabels verwenden die neue Säulenfarbe.
- Überschriften haben keinen Hintergrund und verwenden die Kopfzeilenrahmenfarbe.
- Standfirst-Absätze und Links verwenden die Kopfzeilenrahmenfarbe.
- Autorennamen und Links im Meta-Bereich verwenden die neue Säulenfarbe.
- Icons im Meta-Bereich haben einen Strich in der neuen Säulenfarbe.
- Beschriftungen für Showcase-Bilder verwenden die Datumszeilenfarbe.
- Zitierte Blockquotes im Artikelkörper... Für iOS- und Android-Geräte ist die Textfarbe von zitierten Blöcken in Artikelkörpern auf eine neue Säulenfarbe gesetzt.
Zusätzlich wird die Hintergrundfarbe für verschiedene Artikelkörperbereiche auf iOS und Android auf einen dunklen Hintergrund geändert, unter Verwendung eines !important-Flags, um sicherzustellen, dass sie andere Stile überschreibt.
Weiterhin wird für den ersten Buchstaben nach spezifischen Elementen in Artikelkörpern auf iOS eine spezielle Gestaltung angewendet, obwohl der genaue Stil hier nicht spezifiziert ist. Dies scheint ein CSS-Selektor zu sein, der auf den ersten Buchstaben von Absätzen abzielt, die bestimmten Elementen in verschiedenen Artikelcontainern auf iOS- und Android-Plattformen folgen. Der Selektor gilt für verschiedene Bereiche wie Artikelkörper, Feature-Körper, Kommentarbereiche und interaktive Inhaltsbereiche, speziell nach Absätzen sucht, die auf Elemente mit der Klasse "element-atom" oder Sign-In-Gates folgen. Dieser CSS-Code definiert Stile für spezifische Elemente auf Android- und iOS-Geräten. Er setzt die Farbe des ersten Buchstabens in Absätzen, die bestimmten Elementen folgen, auf weiß oder eine benutzerdefinierte Variablenfarbe. Er passt auch Abstände und Ränder für Standfirst-Elemente in Kommentarartikeln an, setzt Schriftgrößen für h2-Überschriften und modifiziert Abstände für Beschriftungsbuttons.
Für den Dark Mode ändert er Text- und Icon-Farben zu helleren Schattierungen und definiert eine dunkle Hintergrundfarbe. Zusätzlich blendet er Artikelköpfe aus, indem er sie vollständig transparent macht, und wendet Stile auf Furniture-Wrapper an, obwohl der Code für Letzteres unvollständig ist. Für iOS- und Android-Geräte hat der Furniture-Wrapper des Artikelcontainers keinen Rand. Innerhalb dieses Wrappers verwenden Inhaltslabels in Feature-, Standard- und Kommentarartikeln eine Farbe, die durch die neue Säulenfarbe-Variable definiert ist, standardmäßig auf die Dark-Mode-Akzentfarbe.
Überschriften in diesen Artikeln sind auf eine hellgraue Farbe (#dcdcdc) gesetzt und als wichtig markiert.
Links im Artikelkopf oder solche mit dem Datenattribut für den Titel übernehmen ebenfalls die neue Säulenfarbe, mit demselben Dark-Mode-Fallback.
Vor dem Meta-Bereich oder Elementen mit dem Meta-Datenattribut wird ein sich wiederholender linearer Gradient als Hintergrund angewendet, der einen gestrichelten Linieneffekt unter Verwendung der Kopfzeilenrahmenfarbe erzeugt.
Der Byline-Text innerhalb des Meta-Bereichs wird in hellgrau (#dcdcdc) angezeigt. Für iOS- und Android-Geräte gelten die folgenden Stile für Links innerhalb des Meta-Bereichs von Feature-, Standard- und Kommentarartikelcontainern:
- Links sind eingefärbt unter Verwendung der neuen Säulenfarbe oder einer Dark-Mode-Akzentfarbe.
- SVG-Icons im diversen Meta-Bereich haben ihren Strich auf dieselbe Farbe gesetzt.
- Warnlabels werden in einer hellgrauen Farbe (#dcdcdc) mit wichtiger Priorität angezeigt.
- Spans mit Daten-Icon-Attributen übernehmen ebenfalls die neue Säulen- oder Dark-Mode-Akzentfarbe. Für iOS- und Android-Geräte ist die Farbe von Icons innerhalb des Meta-Bereichs von Feature-, Standard- und Kommentarartikelcontainern auf die neue Säulenfarbe oder eine Dark-Mode-Akzentfarbe gesetzt.
Auf größeren Bildschirmen (71.25em und darüber) zeigt der
