Dieser CSS-Code definiert die Schriftfamilie "Guardian Headline Full" mit verschiedenen Gewichten und Stilen, darunter Light, Regular, Medium und Semibold, jeweils in normalen und kursiven Versionen. Er gibt die Schriftdateien in den Formaten WOFF2, WOFF und TrueType an, die auf den Servern des Guardian gehostet werden.
Dieser CSS-Code definiert mehrere Schriftfamilien für die Guardian Headline- und Guardian Titlepiece-Schriften, gibt deren Quellen in verschiedenen Formaten (WOFF2, WOFF, TTF) sowie ihre Schriftgewichte und -stile 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 Elemente auf die volle Breite erweitert und zentriert werden. Die Stile sorgen für eine ordnungsgemäße Formatierung auf allen Geräten, mit maximalen Breiten für verschiedene Inhaltstypen wie Atoms, Showcases und immersive Elemente.
Für interaktive Inhalte wird vor dem Element ein linker Rahmen hinzugefügt, der 11 Pixel links positioniert ist. Innerhalb dieser Spalten haben Atoms (Elemente) keine oberen oder unteren Ränder, aber 12 Pixel Abstand oben und unten. Wenn ein Absatz auf ein Atom folgt, 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, und für breitere Bildschirme (über 61,25em) halten sich auch Inline-Figuren mit einer bestimmten Rolle an diese Breitenbegrenzung.
Es werden Farbvariablen für verschiedene Elemente definiert, wie Datumszeilen, Überschriften, Bildunterschriften und Features, wobei eine Standard-Feature-Farbe auf Rot gesetzt ist. Atoms in der Hauptspalte und anderswo haben keinen Abstand.
Bestimmte Regeln gelten für den ersten Absatz nach bestimmten Elementen oder horizontalen Linien in verschiedenen Inhaltsbereichen (Artikelkörper, interaktive Inhalte, Kommentare, Features), 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 Typeart gestaltet, entsprechend einer Variable eingefärbt und mit einem Rand nach links verschoben.
Horizontale Linien, denen Absätze in diesen Abschnitten folgen, haben keinen oberen Abstand. Pullquotes in bestimmten Inhaltsbereichen sind auf eine maximale Breite von 620 Pixeln beschränkt.
Für Showcase-Elemente in verschiedenen Artikelcontainern werden Bildunterschriften statisch mit voller Breite bis zu 620 Pixeln positioniert.
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 Breite begrenzt mit Bildunterschriftenabstand von 10px. Zwischen 30em und 71,24em erhöht sich der Bildunterschriftenabstand auf 20px. Für Bildschirme zwischen 46,25em und 61,24em beträgt die maximale Breite 738px. Unterhalb von 46,24em richten sich immersive Elemente am linken Rand aus mit angepassten Rändern und behalten 20px Bildunterschriftenabstand zwischen 30em und 46,24em.
Der Furniture-Wrapper verwendet ein responsives Grid-Layout auf Bildschirmen von 61,25em und breiter, organisiert Titel, Überschrift, Meta-Informationen, Standfirst und Porträtbereiche. Überschriften haben einen oberen Rahmen, Meta-Bereiche oberen Abstand, und Standfirst-Text enthält spezifische Gestaltung für Listen und Links mit benutzerdefinierten Unterstreichungen, die sich bei Hover farblich ändern. Der erste Absatz im Standfirst erhält auf größeren Bildschirmen einen oberen Rahmen, entfernt ihn jedoch oberhalb von 71,25em.
Figuren innerhalb des Furniture-Wrappers haben links ausgerichtete Ränder und Inline-Elemente sind auf 630px Breite begrenzt. Oberhalb von 71,25em passt sich das Grid-Layout an, um mehr Spalten für Porträtinhalte aufzunehmen.
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, die sich automatisch anpassen, mit einer festen Höhe von 80px für Titel- und Porträtbereiche. Eine dünne Linie erscheint über dem Meta-Bereich, und der Standfirst-Bereich hat eine vertikale Linie auf seiner linken Seite.
Auf größeren Bildschirmen erweitert sich das Grid auf mehr Spalten und Zeilen mit fraktionalen Einheiten für Flexibilität. Die obere Linie des Meta-Bereichs verbreitert sich, und die vertikale Linie des Standfirst verschiebt sich leicht. Überschriften haben eine maximale Breite und Schriftgröße, die auf größeren Bildschirmen zunehmen, während bestimmte Elemente wie Linien für verschiedene Breakpoints ausgeblendet oder in ihren Rändern angepasst werden.
Soziale und Kommentarelemente im Meta-Bereich teilen sich die gleiche Rahmenfarbe, und einige Komponenten werden nicht angezeigt. Der Standfirst-Text hat eine spezifische Gestaltung mit reduziertem linken Rand und Abstand sowie Schrifteigenschaften. Hauptmedienelemente sind relativ positioniert, mit voller Breite und angepassten Rändern auf verschiedenen Geräten, und Bildunterschriften sind absolut am unteren Rand 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 den Dunkelmodus. Der Wrapper passt Ränder, Abstände und Positionierung auf größeren Bildschirmen an und enthält Regeln zum Ausblenden oder Anzeigen von Elementen wie Bildunterschriften und Schaltflächen. Überschriften und Meta-Informationen sind mit spezifischen Schriftarten und Farben gestaltet, und Social-Media-Schaltflächen haben Hover-Effekte, die ihr Erscheinungsbild ändern. Medienabfragen stellen sicher, dass das Design sich an verschiedene Geräte anpasst.
Dieser CSS-Code definiert Stile für die furniture-wrapper-Klasse einer Webseite, mit Fokus auf Elementen wie Meta-Informationen und Standfirst-Bereichen. Er setzt Textfarben auf hellgrau (#dcdcdc) und Linkfarben auf einen variablenbasierten Farbton, mit Hover-Effekten, die die Farben der Textdekoration ändern. Links in Standfirst-Bereichen haben Unterstreichungen mit spezifischen Offsets und keine Ränder, während Absätze und Listenelemente ebenfalls die hellgraue Farbe übernehmen.
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 (71.25em) entfernt wird. Der Code erstellt auch dekorative Seitenleisten mit Pseudo-Elementen (:before und :after), die ihre Breite basierend auf der Viewport-Größe anpassen, mit dunklen Hintergründen und umrandeten Kanten. Zusätzlich gestaltet er SVG-Elemente mit Strichfarben und Social-Media- oder Kommentarsymbolen innerhalb von Meta-Bereichen.
Der Kommentarbereich hat eine Rahmenfarbe, die der Rahmenfarbe der Überschrift entspricht.
In Artikeln haben Überschriften zweiter Ebene (h2) innerhalb des Hauptkörpers ein leichtes Schriftgewicht von 200. Enthält ein h2 jedoch ein strong-Element, verwendet es ein fettes Schriftgewicht von 700.
Die Guardian Headline Full-Schriftfamilie umfasst 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" mit verschiedenen Gewichten und Stilen (normal und kursiv), die von Semibold (600) bis Black (900) reichen. Jede @font-face-Regel gibt Quelldateien in den Formaten WOFF2, WOFF und TrueType von den Asset-Servern des Guardian an.
Er definiert auch die Schrift "Guardian Titlepiece" mit einem fetten Gewicht (700) und normalem Stil, unter Verwendung ähnlicher Dateiformate von einer anderen Subdomain.
Der Code enthält CSS-Custom-Properties (Variablen) für Farbschemata, insbesondere für den Dunkelmodus auf iOS- und Android-Geräten. Er richtet eine dunkle Hintergrundfarbe ein, Feature-Farben für Hell- und Dunkelmodus, und verwendet Medienabfragen, um die Pillar-Farbe basierend auf dem bevorzugten Farbschema des Benutzers anzupassen.
Zusätzlich gibt es spezifische Gestaltungsregeln für den ersten Buchstaben von Absätzen in Artikelcontainern auf iOS- und Android-Geräten, die angewendet werden, wenn sie auf bestimmte Elemente wie Atoms, Sign-In-Gates oder spezifische Gate-Elemente folgen.
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 werden Artikelüberschriften ausgeblendet, und Furniture-Wrapper haben spezifischen Abstand. Beschriftungen innerhalb dieser Wrapper verwenden eine fette, großgeschriebene Schrift in einer Überschriftenart mit einer neuen Pillar-Farbe. Überschriften sind auf 32px, fett, mit unterem Abstand und einer dunklen Farbe gesetzt. Bilder in Furniture-Wrappern sind relativ positioniert, erstrecken sich über die Viewport-Breite abzüglich 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 abzüglich der Scrollleiste einnehmen und ihre Höhe automatisch anpassen.
Auf iOS und Android hat der Standfirst-Bereich in Artikeln oberen und unteren Abstand von 4px bzw. 24px, mit einem rechten Rand-Offset von -10px. Der Text darin verwendet die Guardian Headline-Schriftfamilie oder Fallback-Serifenschriften.
Links innerhalb des Standfirst auf beiden Plattformen sind mit einer spezifischen Farbe gestaltet, unterstrichen mit einem 6px-Offset, und verwenden eine bestimmte Farbe für die Unterstreichung, die sich bei Hover ändert. Das Hintergrundbild und der untere Rahmen werden entfernt.
Zusätzlich ist der Meta-Bereich in Artikeln konsistent über iOS und Android für Feature-, Standard- und Kommentarcontainer gestaltet.
Für Android-Geräte werden Ränder von Meta-Elementen in Standard- und Kommentarartikelcontainern entfernt.
Für iOS-Geräte wird die Farbe von Byline- und Autorenelementen in Feature-, Standard- und Kommentarartikelcontainern auf die neue Pillar-Farbe gesetzt. Außerdem wird der Abstand von Meta-Misc-Elementen entfernt und der Strich von SVG-Symbolen innerhalb dieser auf die neue Pillar-Farbe gesetzt. Zusätzlich wird die Beschriftungsschaltfläche in Showcase-Elementen mit spezifischer Anzeige, Abstand, Ausrichtung und Abmessungen gestaltet.
Für iOS und Android wird der Artikelkörperabstand in Feature-, Standard- und Kommentarartikelcontainern auf 0 an den Seiten und 12px oben und unten gesetzt.
Für iOS- und Android-Geräte haben in Feature-, Standard- und Kommentarartikelcontainern Nicht-Miniaturansicht- und nicht-immersive Bilder innerhalb des Artikelkörpers keinen Rand, eine Breite der vollen Viewport-Breite minus 24 Pixel und der Scrollleistenbreite, und eine automatische Höhe. Deren Bildunterschriften haben keinen Abstand.
Immersive Bilder in diesen Containern erstrecken sich über die volle Viewport-Breite abzüglich der Scrollleistenbreite.
Zitierte Blockquotes im Artikelkörper zeigen einen farbigen Marker unter Verwendung der neuen Pillar-Farbe an.
Links im Artikelkörper sind mit der primären Pillar-Farbe gestaltet, unterstrichen mit einem Offset, und verwenden die Rahmenfarbe der Überschrift für die Unterstreichung. Beim Hover ändert sich die Unterstreichungsfarbe zur neuen Pillar-Farbe.
Im Dunkelmodus wird der Hintergrund des Furniture-Wrappers dunkelgrau (#1a1a1a).
Für iOS- und Android-Geräte gelten die folgenden Stile für Feature-, Standard- und Kommentarartikelcontainer:
- Inhaltsbeschriftungen verwenden die neue Pillar-Farbe.
- Überschriften haben keinen Hintergrund und verwenden die Rahmenfarbe der Überschrift für den Text.
- Standfirst-Absätze und -Links verwenden die Rahmenfarbe der Überschrift.
- Autoren-Byline und deren Links verwenden die neue Pillar-Farbe.
- Verschiedene Metadaten-Symbole sind mit der neuen Pillar-Farbe umrandet.
- Showcase-Bildunterschriften verwenden die Datumszeilenfarbe.
- Zitierte Blockquotes im Artikelkörper sind mit der neuen Pillar-Farbe gestaltet.
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 verschiedener Artikelkörperbereiche auf iOS und Android auf einen dunklen Hintergrund geändert, um sicherzustellen, dass sie andere Stile überschreibt.
Ferner wird für den ersten Buchstaben nach bestimmten Elementen in Artikelkörpern auf iOS eine spezielle Gestaltung angewendet, obwohl der genaue Effekt hier nicht spezifiziert ist.
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 Sign-In-Gates, 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 eine variable Farbe, passt Abstände und Ränder für Standfirst-Elemente in Kommentarartikeln an und gestaltet Überschriften mit einer Schriftgröße von 24px.
Für Beschriftungsschaltflächen werden unterschiedliche Abstandswerte auf iOS und Android angewendet. Im Dunkelmodus ändert es verschiedene Farbvariablen zu dunkleren Schattierungen für bessere Lesbarkeit und setzt eine dunkle Hintergrundfarbe.
Zusätzlich werden Artikelüberschriften durch vollständige Transparenz auf beiden Betriebssystemen ausgeblendet und Stile auf Furniture-Wrapper angewendet, 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 von Feature-, Standard- und Kommentarartikeln verwenden Inhaltsbeschriftungen eine spezifische Farbvariable, während Überschriften auf hellgrau gesetzt sind. Links im Artikelkopf oder Titelsektion übernehmen ebenfalls die bestimmte Farbvariable.
Zusätzlich wird ein sich wiederholender linearer Gradient als Hintergrund vor dem Meta-Bereich angewendet, der einen gemusterten Randeffekt erzeugt. Der Byline-Text im Meta-Bereich erscheint in hellgrau, und Links innerhalb des Meta-Bereichs sind entsprechend gestaltet.
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 Pillar-Farbe oder einer Dunkelmodus-Feature-Farbe.
- SVG-Symbole im Meta-Misc-Bereich haben ihren Strich auf die gleiche Farbe gesetzt.
- Warnhinweise werden in hellgrauer Farbe (#dcdcdc) mit wichtiger Priorität angezeigt.
- Spans mit data-icon-Attributen übernehmen ebenfalls die neue Pillar- oder Dunkelmodus-Feature-Farbe.
Für iOS- und Android-Geräte ist die Farbe von Symbolen innerhalb des Meta-Bereichs von Feature-, Standard- und Kommentarartikelcontainern auf
