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 Schriftarten für die Schriftfamilien "Guardian Headline Full" und "Guardian Titlepiece". Jede Schriftart spezifiziert verschiedene Gewichte (wie 300 für leicht, 400 für normal, 700 für fett und 900 für schwarz) und Stile (normal oder kursiv). Sie stammen aus verschiedenen Dateiformaten (WOFF2, WOFF und TrueType), die von bestimmten URLs der Guardian-Asset-Domain gehostet werden.
Dieser CSS-Code definiert mehrere Schriftstile für die Schriftfamilie "Guardian Headline Full". Er enthält normale, mittlere, halbfette, fette und schwarze Gewichte, jeweils mit normalen und kursiven Varianten. Für jeden Stil werden die Schriftdateien in den Formaten WOFF2, WOFF und TrueType zusammen mit ihren entsprechenden Schriftgewicht- und Stileigenschaften angegeben. Die Schriftdateien werden auf dem Asset-Server des Guardians gehostet.
Dieser Text scheint CSS-Code zu sein, der Schriftstile und Layoutraster für eine Website definiert, wahrscheinlich für The Guardian. Er spezifiziert Schriftdateien für verschiedene Gewichte und Stile und richtet responsive Grid-Layouts ein, die sich bei verschiedenen Bildschirmgrößen ändern. Der Code steuert, wie Inhaltsbereiche wie Titel, Überschriften, Medien und Fließtext über verschiedene Gerätebreiten hinweg angeordnet werden.
Für interaktive Grid-Figuren mit immersiven Bildunterschriften in bestimmten Inhaltsbereichen wird der Bildunterschriftenabstand oben auf 4 Pixel und an anderen Stellen auf 0 gesetzt.
In verschiedenen Inhaltsbereichen werden Elemente namens "lines" und "meta" innerhalb interaktiver Grids im Grid von Zeile 2 bis 5 und Spalte 1 bis 2 positioniert. Die "lines"-Elemente passen ihre Höhe an ihren Inhalt an und haben einen oberen Abstand von 5 Pixeln, während "meta"-Elemente einen oberen Abstand von 18 Pixeln haben.
Auf größeren Bildschirmen (81,25em und darüber) verwenden die interaktiven Grids in diesen Bereichen ein Fünf-Spalten-Layout mit spezifischen Breiten: 219px, 1px, 620px, 80px und 300px.
Für iOS- und Android-Geräte haben Artikelüberschriften angepasste Stile:
- Standfirst-Absätze verwenden bestimmte Serifenschriften mit mittlerem Gewicht.
- Abschnittskicker werden als Blöcke angezeigt und setzen ihren ersten Buchstaben in Großbuchstaben.
- Keylines haben einen oberen Abstand von 12 Pixeln.
- Autorenzeilen verwenden fette Serifenschriften, wobei Links ebenfalls fett sind.
- Bildfiguren haben ihre Höhe auf automatisch gesetzt.
- Absätze, die auf atomare Figuren folgen, haben keinen oberen Abstand.
Zusätzlich werden benutzerdefinierte Schriftarten für "Guardian Headline Full" mit leichten und leichten kursiven Gewichten definiert, die von bestimmten URLs in woff2-, woff- und truetype-Formaten bezogen werden.
Dieser Text definiert mehrere Schriftstile für die Schriftfamilie "Guardian Headline Full", spezifiziert verschiedene Gewichte und Stile (normal und kursiv) zusammen mit ihren Quelldateien in verschiedenen Formaten (WOFF2, WOFF und TrueType). Jeder Eintrag enthält das Gewicht und den Stil der Schrift und verweist darauf, wo die Schriftdateien online zu finden sind.
Dieser CSS-Code definiert Schriftstile und Layoutanpassungen für eine Website, wahrscheinlich für The Guardian. Er spezifiziert benutzerdefinierte Schriften mit verschiedenen Gewichten und Stilen, einschließlich normaler und kursiver Versionen, und legt responsive Designregeln für verschiedene Bildschirmgrößen fest. Das Layout passt Abstände, Breiten und Positionierungen für Elemente wie Spalten, Atome, Showcases und immersive Bereiche an, um eine korrekte Darstellung über Geräte hinweg zu gewährleisten. Es enthält auch Media Queries, um verschiedene Viewport-Breiten zu handhaben, sodass Elemente für Mobil-, Tablet- und Desktop-Bildschirme angemessen skaliert und neu positioniert werden. Zusätzlich werden Farben für Datumszeilen, Überschriften, Bildunterschriften und Features festgelegt, und Abstände für Inhaltselemente definiert, um ein konsistentes und lesbares Layout beizubehalten.
Der erste Absatz nach bestimmten Elementen wie Anmelde-Toren, horizontalen Linien oder initialen Atomen in verschiedenen Inhaltsbereichen (wie Artikelkörpern, interaktiven Inhalten, Kommentaren, Features und data-gu-benannten Abschnitten) erhält einen oberen Abstand von 14 Pixeln.
Für den ersten Buchstaben dieser Absätze wird die Guardian Headline oder ähnliche Serifenschriften in fett verwendet, mit einer großen Schriftgröße von 111 Pixeln und einer Zeilenhöhe von 92 Pixeln. Er ist so gestaltet, dass er links fließt, in Großbuchstaben gesetzt wird, einen rechten Abstand von 8 Pixeln hat, oben ausgerichtet ist und die Farbe aus einer CSS-Variable für Initialen annimmt.
Absätze, die auf horizontale Linien folgen, haben keinen oberen Abstand.
Elemente mit dem Datenattribut für Pullquotes sind auf eine maximale Breite von 620 Pixeln begrenzt.
In Showcase-Elementen innerhalb von Hauptinhalten, Feature-Artikeln, Standardartikeln und Kommentarbereichen werden Bildunterschriften statisch positioniert und erstrecken sich über die volle Breite bis zu 620 Pixeln.
Immersive Elemente erstrecken sich auf die volle Viewport-Breite abzüglich der Scrollleiste. Auf Bildschirmen kleiner als 71,24 em sind sie auf eine maximale Breite von 978 Pixeln beschränkt, und ihre Bildunterschriften haben Inline-Abstände.
Dies scheint CSS-Code für responsives Webdesign zu sein, der verschiedene Stile für verschiedene Bildschirmgrößen festlegt. Er definiert, wie Seitenelemente wie Überschriften, Bilder und Bildunterschriften auf Geräten von Mobil bis Desktop erscheinen und sich anpassen sollen. Der Code verwendet Media Queries, um spezifische Layouts, Abstände, Ränder und Grid-Strukturen anzuwenden, wenn der Viewport bestimmte Breitenbedingungen erfüllt.
Das Grid-Layout verwendet fünf gleichbreite Spalten für die Titel-, Überschriften- und Standfirst-Bereiche, gefolgt von acht gleichbreiten Spalten für den Porträtbereich. Zeilen sind mit spezifischen Höhen für Titel, Überschrift, Standfirst und Meta-Bereiche definiert.
Für Meta-Elemente wird eine feste Breite von 620px gesetzt, während Standfirst-Inhalte leicht nach links versetzt sind. Beschriftungen in Titel und Überschrift haben minimalen oberen Abstand.
Überschriften sind fett mit einer maximalen Breite von 620px und einer Schriftgröße von 32px, die auf größeren Bildschirmen auf 50px mit einer schmaleren Breite ansteigt. Auf mittleren Bildschirmen werden rechte Ränder für Zeilen entfernt, und auf breiteren Displays werden Zeilen ausgeblendet, wobei ihre Farbe der Rahmenfarbe der Überschrift entspricht.
Meta-Bereiche verlieren ebenfalls ihren rechten Rand auf mittleren Bildschirmen, und soziale und Kommentar-Elemente teilen die Rahmenfarbe der Überschrift. Einige Meta-Komponenten sind ausgeblendet.
Standfirst-Text ist eingerückt und relativ positioniert, mit normalem Gewicht, 20px Schriftgröße und unterem Abstand. Auf mittleren Bildschirmen erhält er oberen Abstand.
Hauptmedien werden im Porträt-Grid-Bereich platziert, anfangs ohne oberen Abstand und mit einem kleinen unteren Abstand, und erweitern sich auf kleineren Bildschirmen auf volle Breite mit angepassten Abständen. Bildunterschriften sind unten mit einer Hintergrundfarbe und Textfarbe positioniert, wobei die erste Spanne ausgeblendet und die zweite angezeigt wird. Ein Bildunterschriften-Umschaltknopf ist unten rechts mit einem kreisförmigen Hintergrund positioniert.
Auf sehr großen Bildschirmen wird die Hauptinhaltsspalte mit einer modifizierten oberen Position und Höhe angepasst.
Die interaktiven Überschriften der Hauptspalte haben eine maximale Breite von 620 Pixeln. Für iOS- und Android-Geräte verwendet das Farbschema dunkle Hintergründe und spezifische Akzentfarben, die sich im Dunkelmodus anpassen.
Auf diesen Mobilplattformen wird der erste Buchstabe des ersten Absatzes in verschiedenen Artikeltypen mit einer sekundären Farbe gestaltet. Artikelüberschriften sind ausgeblendet, während Möbel-Wrapper minimalen Abstand haben. Beschriftungen innerhalb dieser Wrapper sind fett, verwenden eine bestimmte Schriftfamilie und sind entsprechend dem aktuellen Thema eingefärbt, wobei Überschriften auf eine dunkelgraue Farbe und eine große, fette Schriftgröße gesetzt sind.
Für iOS- und Android-Geräte gelten die folgenden Stile für Artikelcontainer (Feature, Standard und Kommentar):
- Bildelemente innerhalb des Möbel-Wrappers sind relativ positioniert, mit einem oberen Abstand von 14px, einem linken Abstand von -10px und einer Breite, die die volle Viewport-Breite abzüglich der Scrollleistenbreite umfasst. Ihre Höhe passt sich automatisch an.
- Die innere Figur, Bild- und Linkelemente haben einen transparenten Hintergrund, entsprechen der vollen Viewport-Breite abzüglich der Scrollleiste und behalten eine automatische Höhe bei.
- Standfirst-Bereiche haben oberen Abstand von 4px, unteren Abstand von 24px und einen rechten Abstand von -10px.
- Absätze innerhalb des Standfirst verwenden die Guardian Headline Schriftfamilie oder Fallback-Serifenschriften.
- Links innerhalb des Standfirst, einschließlich solcher in Listenelementen, erben diese Stile.
Für Kommentar-Artikelcontainer sind Links im Standfirst mit einer spezifischen Farbe gestaltet, unterstrichen mit einem Versatz und ohne Hintergrundbild oder Rahmen. Auf iOS- und Android-Geräten ändert sich die Unterstreichungsfarbe beim Überfahren dieser Links in Feature-, Standard- oder Kommentarartikeln, um der Pfeilerfarbe zu entsprechen. Zusätzlich hat der Meta-Bereich in diesen Artikeln keinen Abstand, und Elemente wie Autorenzeilen und Autor-Links verwenden die Pfeilerfarbe für den Text. Der Meta-Misc-Bereich hat keinen Abstand.
Für iOS- und Android-Geräte gelten die folgenden Stile für Feature-, Standard- und Kommentar-Artikelcontainer:
- SVG-Icons im Meta-Misc-Bereich verwenden die neue Pfeilerfarbe für Striche.
- Der Bildunterschriften-Knopf in Showcase-Elementen wird als Flex-Container angezeigt, zentriert mit 5px Abstand, 28px Abmessungen und positioniert 14px von rechts.
- Der Artikelkörper hat 12px horizontalen Abstand.
- Nicht-Miniaturansicht, nicht-immersive Bilder im Artikelkörper haben keinen Abstand, eine Breite, die als Viewport-Breite minus 24px und Scrollleistenbreite berechnet wird, und automatische Höhe, ohne Abstand in ihren Bildunterschriften.
- Immersive Bilder erstrecken sich über die volle Viewport-Breite abzüglich der Scrollleistenbreite.
- Zitierte Blockzitate im Prosa-Bereich haben ein entsprechend gestaltetes before-Pseudo-Element.
Für iOS- und Android-Geräte wird die Gestaltung von zitiertem Text und Links in Artikeln angepasst. Zitierter Text verwendet eine spezifische Farbe, während Links mit einer bestimmten Farbe und Versatz unterstrichen sind. Beim Überfahren ändert sich die Linkunterstreichung in eine andere Farbe.
Im Dunkelmodus wird der Hintergrund von Artikelüberschriften dunkelgrau. Beschriftungen, Überschriften und einleitender Text nehmen spezifische Farben für besseren Kontrast an. Links und Autorennamen in diesen Bereichen sind ebenfalls gestaltet, um Lesbarkeit und Konsistenz mit dem Gesamtdesign beizubehalten.
Dieser CSS-Code definiert Stile für verschiedene Artikelcontainer auf Android- und iOS-Geräten. Er setzt die Farbe von Autorenzeilen und zitiertem Text auf eine spezifische Variable, wendet eine Strichfarbe auf bestimmte Icons an und ändert die Bildunterschriftenfarbe für Showcase-Bilder. Zusätzlich stellt er sicher, dass die Hintergrundfarbe für verschiedene Inhaltsbereiche ein dunkles Thema verwendet, und gestaltet den ersten Buchstaben von Absätzen, die auf bestimmte Elemente folgen.
Dies scheint ein CSS-Selektor zu sein, der auf den ersten Buchstaben von Absätzen abzielt, die auf bestimmte Elemente innerhalb verschiedener Artikelcontainer auf iOS- und Android-Geräten folgen. Der Selektor gilt für verschiedene Bereiche wie Feature-Artikel, Standardartikel und Kommentarbereiche und konzentriert sich auf Absätze, die auf Elemente mit Klassen wie "element-atom" oder IDs wie "sign-in-gate" folgen.
Für Android- und iOS-Geräte wird der erste Buchstabe von Absätzen, die auf bestimmte Elemente in verschiedenen Artikelcontainern folgen, mit einer benutzerdefinierten Farbvariable gestaltet, standardmäßig weiß.
Für Kommentarartikel auf iOS und Android hat das Standfirst-Element einen oberen Abstand von 24 Pixeln und keinen oberen Abstand. Überschriften der Ebene 2 in Prosa sind auf 24 Pixel in der Größe gesetzt.
Bildunterschriften-Knöpfe in Feature-, Standard- und Kommentarartikeln haben unterschiedliche Abstände: 6 Pixel oben, 5 Pixel an den Seiten und 0 unten auf iOS, während Android 4 Pixel oben und an den Seiten mit 0 unten verwendet.
Im Dunkelmodus werden verschiedene Text- und Icon-Farben für bessere Lesbarkeit angepasst, wie z.B. hellgrau für Folgetext und Standfirst, mit spezifischen Farben für Links und Autorenzeilen.
Wenn der Möbel-Wrapper ein Guardian-Organisationslogo enthält, wird die Branding-Insel prominent angezeigt.
Beschriftungen und Überschriften in Artikelcontainern erhalten ein mittleres Schriftgewicht zur Betonung.
Der Seitenhintergrund für Wochenend-Essays ist auf einen hellrosa Farbton (#fff4f2) gesetzt, der auch für Artikelbereiche und Sub-Meta-Hintergründe gilt.
Linien sind im Layout ausgeblendet, und der Möbel-Wrapper ist relativ positioniert. Auf größeren Bildschirmen verwendet er ein Grid-Layout mit definierten Zeilen für Titel-, Überschriften-, Standfirst- und Meta-Bereiche.
Der Artikelkopf- oder Titelbereich hat eine feste Höhe von 70 Pixeln und enthält Inhaltsbeschriftungen mit einem Hintergrundbild eines Buch-GIFs in der unteren rechten Ecke, das sich auf breiteren Bildschirmen vergrößert. Eine horizontale Linie wird unter den Beschriftungen hinzugefügt, die sich über die Viewport-Breite minus der Scrollleiste erstreckt, mit Anpassungen für mittlere und größere Bildschirme.
Für Bildschirme breiter als 71,25em haben der Artikelkopf und das Titel-Element des Möbel-Wrappers eine Höhe von 80px, die auf 125px für Bildschirme über 81,25em ansteigt. Auf diesen größeren Bildschirmen haben die Überschrift, ihre Datenattribut-Version und die Überschrift-Klasse einen oberen Abstand von -2px.
Innerhalb des Möbel-Wrappers haben die Überschrift, ihre Datenattribut-Version und die Überschrift-Klasse alle innere Divs ohne unteren Abstand. Ihr Porträt-Hauptmedien-Überschriften-Wrapper ist auf volle Höhe gesetzt, relativ positioniert, mit verstecktem Überlauf und 24px unterem Abstand. Überschriften und Links innerhalb dieser Wrapper haben keine maximale Breite und zeigen eine 2px dicke Unterstreichung mit einem 6px Versatz beim Überfahren an.
Textelemente wie h1, Links und Autorenzeilen-Spannen im Porträt-Hauptmedien-Überschriften-Wrapper verwenden eine 115% Zeilenhöhe, mittleres Schriftgewicht und 36px Schriftgröße, die für Bildschirme breiter als 71,25em auf 50px skaliert.
Der Standfirst-Bereich und seine Entsprechungen sind relativ positioniert mit einem oberen Abstand von 4px, der für Bildschirme über 61,25em auf 0 und für solche über 71,25em auf 2px wird.
Im Meta-Bereich werden Branding-Inseln innerhalb des Inhalts-Meta-Containers als Blöcke angezeigt.
Der Möbel-Wrapper positioniert Medienelemente relativ. Auf größeren Bildschirmen (über 61,25em)
