Dieser CSS-Code definiert die Schriftfamilie "Guardian Headline Full" mit mehreren Stilen und Gewichten. Er enthält die Varianten Light (300), Regular (400), Medium (500) und Semibold (600), jeweils in normaler und kursiver Ausführung. Für jeden Stil werden Schriftdateien in den Formaten WOFF2, WOFF und TrueType vom Asset-Server des Guardian bereitgestellt.
Dieser CSS-Code definiert mehrere Schriftfamilien für die Guardian Headline und Guardian Titlepiece Schriftarten, gibt deren Quellen in verschiedenen Formaten (WOFF2, WOFF und TrueType) sowie deren Schriftgewichte und Stile an. Er enthält auch responsive Design-Regeln 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. Der Code stellt sicher, dass Elemente wie Absätze und Listen eine maximale Breite für bessere Lesbarkeit beibehalten, und behandelt immersive Elemente, indem sie auf Mobilgeräten auf die volle Breite erweitert und auf größeren Bildschirmen in ihrem Layout angepasst werden.
Für interaktive Inhalte wird eine linke Rahmenlinie in hellgrauer Farbe hinzugefügt und leicht nach links positioniert. Elemente innerhalb dieser Spalten haben keine oberen oder unteren Ränder, aber beinhalten 12px Innenabstand. Wenn ein Absatz auf ein Element folgt, wird der Innenabstand entfernt und die Ränder auf 12px gesetzt. Inline-Elemente sind auf eine maximale Breite von 620px begrenzt, und auf breiteren Bildschirmen halten sich auch Figuren mit einer bestimmten Rolle an diese Breitenbegrenzung.
Farbvariablen sind für verschiedene Text- und Hintergrundelemente definiert, einschließlich Datumszeile, Kopfzeilenrahmen, Bildunterschriften und Akzentfarben, wobei die Standard-Akzentfarbe auf Rot gesetzt ist.
Elemente, die als Atome gestaltet sind, haben keinen Innenabstand. Spezifische Regeln gelten für den ersten Absatz nach bestimmten Elementen oder horizontalen Trennlinien in verschiedenen Inhaltsbereichen, wobei 14px oberer Innenabstand hinzugefügt wird. Zusätzlich wird der erste Buchstabe dieser Absätze mit einer großen, fetten, großgeschriebenen Schrift in Überschriftenstil gestaltet, gefärbt entsprechend der definierten Akzentfarbe, und nach links mit einem Rand ausgerichtet.
Horizontale Trennlinien, gefolgt von Absätzen in verschiedenen Inhaltsabschnitten, haben keinen oberen Innenabstand. Zitate in spezifischen Inhaltsbereichen haben eine maximale Breite von 620 Pixeln.
Für Showcase-Elemente in verschiedenen Artikelcontainern sind Bildunterschriften statisch positioniert mit voller Breite und einer maximalen Breite von 620 Pixeln.
Immersive Elemente erstrecken sich über die volle Viewport-Breite abzüglich der Scrollleiste. Auf Bildschirmen bis zu 71.24em Breite sind diese Elemente auf 978 Pixel begrenzt, mit einem Bildunterschriften-Innenabstand von 10 Pixeln. Zwischen 30em und 71.24em erhöht sich der Bildunterschriften-Innenabstand auf 20 Pixel. Für Bildschirme zwischen 46.25em und 61.24em beträgt die maximale Breite 738 Pixel. Unterhalb von 46.24em richten sich immersive Elemente links aus mit angepassten Rändern und einem Bildunterschriften-Innenabstand von 20 Pixeln zwischen 30em und 46.24em.
Der Furniture-Wrapper verwendet ein Grid-Layout auf Bildschirmen von 61.25em und breiter, mit definierten Spalten und Zeilen zur Organisation von Inhalten. Überschriften zeichnen sich durch einen oberen Rahmen aus, Meta-Bereiche haben oberen Innenabstand, und Standfirst-Elemente enthalten gestaltete Links mit Unterstreichungen, die sich bei Hover in der Farbe ändern. Ursprünglich hat der erste Absatz im Standfirst einen oberen Rahmen und keinen unteren Innenabstand, was auf Bildschirmen von 71.25em und darüber entfernt wird.
Figuren innerhalb des Furniture-Wrappers haben linke Ränder und eine maximale Breite von 630 Pixeln für Inline-Elemente. Auf größeren Bildschirmen (71.25em und aufwärts) werden die Grid-Spalten für eine andere Inhaltsplatzierung neu konfiguriert. Das Layout verwendet ein Grid mit spezifischen Spalten und Zeilen für verschiedene Bildschirmgrößen. Für kleinere Bildschirme definiert das Grid Bereiche für Titel, Überschrift, Standfirst, Meta-Informationen und Porträt, mit Zeilen auf feste und automatische Höhen gesetzt. Eine dünne Linie erscheint über dem Meta-Bereich, und der Standfirst hat eine vertikale Linie auf seiner linken Seite.
Auf größeren Bildschirmen passt sich das Grid an, verwendet Bruchteileinheiten für Zeilen und erweitert Spaltenbereiche. Die Überschriftenschriftgröße erhöht sich und ihre maximale Breite ändert sich, während einige Elemente wie Linien ausgeblendet werden. Der Standfirst-Text ist mit einem spezifischen Schriftgewicht und -größe gestaltet, und der Hauptmedienbereich wird innerhalb des Grids positioniert, mit Anpassungen für Breite und Ränder auf kleineren Geräten. Bildunterschriften sind absolut am unteren Rand positioniert mit einer Hintergrundfarbe und Innenabstand.
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 den Dunkelmodus. Der Wrapper passt Ränder, Innenabstände und Positionierung auf größeren Bildschirmen an und enthält versteckte Elemente und interaktive Buttons mit Hover-Effekten für Social Sharing. Überschriften und Meta-Informationen sind mit spezifischen Schriftarten und Farben gestaltet, um Konsistenz im Design zu gewährleisten.
Dieser CSS-Code definiert Stile für Elemente innerhalb einer "furniture-wrapper"-Klasse, mit Fokus auf Meta-Informationen und Standfirst-Bereiche. Er setzt Textfarben auf hellgrau (#dcdcdc) und Linkfarben auf eine variablenbasierte Farbe, mit Hover-Effekten, die die Textdekorationfarbe ändern. Links im Standfirst sind mit einem spezifischen Offset und Farbe unterstrichen, und Hover-Zustände passen die Unterstreichungsfarbe entsprechend an.
Für größere Bildschirme (min-width: 61.25em) erhält der erste Absatz im Standfirst einen oberen Rahmen, der auf noch größeren Bildschirmen (min-width: 71.25em) entfernt wird. Listenelemente im Standfirst übernehmen ebenfalls die hellgraue Textfarbe.
Der Code enthält responsive Design-Elemente mit Media Queries für verschiedene Bildschirmbreiten (46.25em, 61.25em, 71.25em und 81.25em). Diese passen die Breite und Positionierung von Pseudo-Elementen (:before und :after) an, um Hintergrundbereiche mit Rändern zu erstellen, und berechnen Dimensionen basierend auf Viewport-Breite und Scrollleistenanpassungen.
Zusätzlich gestaltet er SVG-Elemente innerhalb von Keylines und Social-Media- oder Kommentarelementen im Meta-Bereich, setzt deren Strich- und Textfarben, um mit dem Thema über CSS-Variablen übereinzustimmen.
Der Kommentarbereich hat eine Rahmenfarbe, die der Rahmenfarbe der Kopfzeile entspricht. In Artikeln haben Überschriften zweiter Ebene ein leichtes Schriftgewicht von 200, aber wenn sie ein strong-Element enthalten, verwenden sie ein fettes Gewicht von 700.
Zusätzlich ist die Guardian Headline Full Schriftfamilie mit verschiedenen Stilen und Gewichten definiert, einschließlich Light, Regular, Medium und Semibold, jeweils in normaler und kursiver Version. Diese Schriftarten stammen von spezifischen URLs in WOFF2, WOFF und TrueType Formaten.
Dieser CSS-Code definiert mehrere @font-face Regeln für die "Guardian Headline Full" Schriftfamilie, jeweils mit verschiedenen Gewichten und Stilen (normal und kursiv), von Semibold (600) bis Black (900). Er enthält auch eine @font-face Regel für "Guardian Titlepiece" in fett. Die Schriftarten stammen von spezifischen URLs in WOFF2, WOFF und TrueType Formaten.
Zusätzlich setzt der Code CSS-Custom-Properties (Variablen) für Dunkelmodus-Hintergründe und Akzentfarben, passt sie basierend auf der Benutzereinstellung für Farbschema oder wenn die Seite auf iOS- oder Android-Geräten betrachtet wird, an. Er beinhaltet auch Gestaltung für den ersten Buchstaben von Absätzen in Artikelcontainern auf diesen Mobilplattformen, mit spezifischen Selektoren zur Handhabung von Anmeldetoren.
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 Artikelköpfe ausgeblendet, und Furniture-Wrapper haben spezifischen Innenabstand. Labels innerhalb dieser Wrapper verwenden eine fette, großgeschriebene Schrift in Überschriftenstil mit einer neuen Pillar-Farbe. Überschriften sind auf 32px, fett, mit unterem Innenabstand und einer dunklen Farbe gesetzt. Bilder in Furniture-Wrappern sind relativ positioniert, erstrecken sich über die Viewport-Breite minus der Scrollleiste und passen ihre Höhe automatisch an.
Für Android-Geräte sind Bilder innerhalb von Artikelcontainern so eingestellt, dass sie einen transparenten Hintergrund haben, die volle Viewport-Breite minus der Scrollleiste einnehmen und ihre Höhe automatisch anpassen.
Auf iOS und Android haben die Artikelzusammenfassungsbereiche oberen und unteren Innenabstand 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, die sich bei Hover an die Linkfarbe anpasst.
Zusätzlich haben Metadatenbereiche in Artikeln auf beiden Betriebssystemen konsistente Gestaltung.
Für Android-Geräte ist der Rand für Meta-Elemente in Standard- und Kommentarartikelcontainern auf Null gesetzt.
Auf iOS-Geräten erscheinen die Byline- und Autoreninformationen in Feature-, Standard- und Kommentarartikelcontainern in der festgelegten Pillar-Farbe. Ebenso verwenden auf Android-Geräten dieselben Elemente in Feature-, Standard- und Kommentarartikelcontainern ebenfalls die Pillar-Farbe.
Für iOS und Android hat die sonstige Meta-Information in Feature-, Standard- und Kommentarartikelcontainern keinen Innenabstand, und alle SVG-Icons innerhalb dieser sind mit der Pillar-Farbe als Strich gestaltet.
Der Bildunterschriften-Button in Showcase-Elementen für Feature-, Standard- und Kommentarartikel auf iOS und Android wird als Flex-Container angezeigt. Er ist zentriert, misst 28 mal 28 Pixel und ist 14 Pixel vom rechten Rand positioniert mit 5 Pixel Innenabstand.
Der Artikelkörper in Feature-, Standard- und Kommentarcontainern für iOS und Android hat 12 Pixel horizontalen Innenabstand und keinen vertikalen Innenabstand.
Für iOS- und Android-Geräte, in Feature-, Standard- und Kommentarartikelcontainern, haben Nicht-Miniaturansicht und nicht-immersive Bilder innerhalb des Artikelkörpers keinen Rand, eine Breite berechnet als volle Viewport-Breite minus 24 Pixel und der Scrollleistenbreite, und eine automatische Höhe. Deren Bildunterschriften haben keinen Innenabstand.
Immersive Bilder in diesen Containern erstrecken sich über die volle Viewport-Breite minus der Scrollleistenbreite.
Im Prosa-Teil des Artikelkörpers zeigen zitierte Blockzitate einen farbigen Marker unter Verwendung der neuen Pillar-Farbe. Links sind mit der primären Pillar-Farbe gestaltet, unterstrichen mit einem Offset, und verwenden die Kopfzeilenrahmenfarbe für die Unterstreichung. Bei Hover ändert sich die Unterstreichungsfarbe zur neuen Pillar-Farbe.
Im Dunkelmodus wird der Hintergrund des Furniture-Wrappers auf ein dunkles Grau (#1a1a1a) gesetzt.
Für iOS- und Android-Geräte wenden Sie die folgenden Stile auf Feature-, Standard- und Kommentarartikelcontainer an:
- Setzen Sie Inhaltslabels auf die neue Pillar-Farbe.
- Entfernen Sie die Hintergrundfarbe von Überschriften und setzen Sie ihre Textfarbe auf die Kopfzeilenrahmenfarbe, um Priorität sicherzustellen.
- Lassen Sie Standfirst-Absätze und Links die Kopfzeilenrahmenfarbe annehmen.
- Verwenden Sie die neue Pillar-Farbe für Byline-Autoren und deren Links.
- Wenden Sie die neue Pillar-Farbe auf den Strich der sonstigen Meta-Icons an.
- Setzen Sie die Farbe von Showcase-Bildunterschriften auf die Datumszeilenfarbe.
- Gestalten Sie zitierte Blockzitate im Prosa-Teil des Artikelkörpers entsprechend.
Für iOS- und Android-Geräte ist die Textfarbe von zitierten Blöcken in Artikelkörpern auf eine spezifische Pillar-Farbe gesetzt.
Zusätzlich wird die Hintergrundfarbe für verschiedene Artikelkörperbereiche auf beiden Betriebssystemen auf einen dunklen Hintergrund erzwungen.
Auf iOS wird der erste Buchstabe nach bestimmten Elementen in Artikelkörpern mit einem Initial-Effekt gestaltet.
Dies scheint ein CSS-Selektor zu sein, der den ersten Buchstaben von Absätzen anvisiert, die auf spezifische Elemente in verschiedenen Artikelcontainern auf iOS- und Android-Plattformen folgen. Der Selektor gilt für verschiedene Artikeltypen (Standard, Feature, Kommentar) und berücksichtigt Anmeldetore, die zwischen Elementen erscheinen könnten.
Dieser CSS-Code definiert Stile für spezifische Elemente auf Android- und iOS-Geräten. Er setzt die Farbe des ersten Buchstabens in bestimmten Absätzen auf Weiß oder eine benutzerdefinierte Variable-Farbe. Er passt auch Innenabstände und Ränder für Standfirst-Elemente in Kommentarartikeln an, setzt Schriftgrößen für h2-Überschriften und ändert Innenabstände für Bildunterschriften-Buttons.
Für den Dunkelmodus ä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, wobei die letzte Regel unvollständig erscheint.
Für iOS- und Android-Geräte hat der Furniture-Wrapper des Artikelcontainers keinen Rand. Labels in Feature-, Standard- und Kommentarartikeln verwenden die neue Pillar-Farbe oder eine Dunkelmodus-Akzentfarbe. Überschriften in diesen Artikeln sind auf eine hellgraue Farbe gesetzt. Links in Artikelköpfen oder Titelsektionen übernehmen ebenfalls die neue Pillar- oder Dunkelmodus-Akzentfarbe.
Vor dem Meta-Bereich in diesen Artikeln wird ein sich wiederholender linearer Gradient als Hintergrund angewendet, der die Kopfzeilenrahmenfarbe verwendet, um einen gestreiften Effekt zu erzeugen. Der Byline-Text innerhalb des Meta-Bereichs wird in hellgrau 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 mit der neuen Pillar-Farbe oder einer Dunkelmodus-Akzentfarbe eingefärbt.
- SVG-Icons im sonstigen Meta-Bereich haben ihren Strich auf dieselbe Farbe gesetzt.
- Warnhinweis-Labels werden in hellgrauer Farbe (#dcdcdc) mit wichtiger Priorität angezeigt.
- Spans mit data-icon-Attributen übernehmen ebenfalls die neue Pillar- oder Dunkelmodus-Akzentfarbe.
Für iOS- und Android-Geräte ist die Farbe von Icons innerhalb des Meta-Bereichs von Feature-, Standard- und Kommentarartikelcontainern auf eine neue Pillar-Farbe oder eine Dunkelmodus-Akzentfarbe gesetzt.
Auf größeren Bildschirmen (71.25em und darüber) zeigt der Meta-Bereich in diesen Containern einen oberen Rahmen unter Verwendung derselben Farboptionen. Zusätzlich wird der Rand der sonstigen Meta-Elemente zurückgesetzt und ein linker Rand von 20 Pixeln angewendet.
Absätze und un
