Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Schriftgewichten und -stilen. Er enthält leichte, reguläre, mittlere und halbfette Gewichte, jeweils in normalen und kursiven Versionen. Die Schriftarten werden in drei verschiedenen Dateiformaten von den Servern des Guardian geladen: WOFF2, WOFF und TrueType.
@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://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://interactive.guim.co.uk/fonts/garnett/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://interactive.guim.co.uk/fonts/garnett/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));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
Die interaktive Inhalts-Spalte hat einen linken Rand und spezifische Abstände für Elemente. Absätze, die auf bestimmte Elemente folgen, erhalten zusätzlichen oberen Abstand, und der erste Buchstabe dieser Absätze wird als großer, farbiger Initialbuchstabe gestaltet. Inline-Elemente und Abbildungen sind auf eine maximale Breite beschränkt. Verschiedene Farbvariablen sind für ein konsistentes Theming definiert.
Pullquotes innerhalb spezifischer Container sollten eine maximale Breite von 620 Pixeln haben.
Bildunterschriften für Showcase-Elemente in Hauptartikeln, Features, Standardartikeln und Kommentaren sollten statisch positioniert sein, die volle Breite einnehmen und ebenfalls eine maximale Breite von 620 Pixeln haben.
Immersive Elemente sollten die volle Viewport-Breite abzüglich der Scrollbar einnehmen. Auf größeren Bildschirmen (über 71.24em) beträgt ihre maximale Breite 978px, wobei die Abstände der Bildunterschriften bei verschiedenen Breakpoints angepasst werden. Auf mittleren Bildschirmen (zwischen 46.25em und 61.24em) beträgt die maximale Breite 738px. Auf kleineren Bildschirmen (unter 46.24em) sollten diese Elemente keinen linken Rand haben und am linken Rand ausgerichtet sein, mit angepassten Rändern und Bildunterschriften-Abständen für sehr kleine Bildschirme.
Für den Furniture-Wrapper auf großen Bildschirmen (über 61.25em) wird ein Grid-Layout mit definierten Spalten und Zeilen verwendet. Überschriften erhalten einen oberen Rand, Meta-Informationen werden relativ positioniert, und der Standfirst-Text hat spezifische Stilisierungen für Links und Abstände. Abbildungen innerhalb dieses Wrappers haben angepasste Ränder und eine maximale Breite von 630px für Inline-Elemente. Auf extra großen Bildschirmen (über 71.25em) wird das Grid-Template angepasst, um mehr Spalten einzubeziehen.
Das CSS definiert ein Grid-Layout für eine Seitenüberschrift mit Bereichen für Titel, Überschrift, Standfirst, Meta-Informationen und ein Porträt. Es legt spezifische Dimensionen und Positionen für diese Elemente bei verschiedenen Bildschirmgrößen fest. Die Gestaltung umfasst Ränder, Schriftarten und Farben, mit Anpassungen für Social-Media-Icons, Bildunterschriften und responsives Verhalten auf Mobil- und Desktop-Ansichten.
Der CSS-Code definiert Stile für ein Webseiten-Layout, mit Fokus auf eine Komponente namens "furniture-wrapper". Diese Komponente hat einen dunklen Hintergrund und passt ihre Ränder und Abstände basierend auf der Bildschirmgröße an. Für größere Bildschirme fügt sie dekorative Seitenleisten hinzu.
Innerhalb dieses Wrappers werden Elemente wie Artikelüberschriften, Schlagzeilen und Meta-Informationen (wie Social-Sharing-Buttons) gestaltet. Schlagzeilen verwenden eine hellgraue Farbe und eine fette Schrift. Social-Buttons haben farbige Ränder, die einer Themenfarbe entsprechen, und wechseln bei Hover zu einer Volltonfarbe.
Der Code verwaltet auch die Sichtbarkeit von Bildunterschriften und einem Umschalt-Button für Medienelemente. Insgesamt sorgen die Stile dafür, dass das Layout responsiv und visuell konsistent über verschiedene Geräte hinweg ist.
Dieser CSS-Code definiert Stile für eine Webseiten-Komponente, wahrscheinlich eine Seitenleiste oder einen Inhalts-Wrapper. Er legt Textfarben, Link-Darstellungen und Layout-Anpassungen für verschiedene Bildschirmgrößen fest. Links werden mit spezifischen Farben und Unterstreichungen gestaltet, und das Layout enthält Hintergrundelemente, die sich basierend auf der Viewport-Breite anpassen. Der Code behandelt auch Ränder und Abstände für verschiedene Elemente innerhalb der Komponente.
Der CSS-Code definiert Stile für Artikelelemente und lädt benutzerdefinierte Schriftarten. Er setzt die Rahmenfarbe für Kommentare so, dass sie der Rahmenfarbe der Überschrift entspricht. Für Artikelüberschriften verwendet er standardmäßig ein leichtes Schriftgewicht, wechselt aber zu fett, wenn die Überschrift ein strong-Tag enthält.
Zusätzlich importiert er die Schriftfamilie "Guardian Headline Full" in verschiedenen Gewichten und Stilen (leicht, regulär, mittel, halbfett, jeweils mit normalen und kursiven Versionen) von den Servern des Guardian und gibt mehrere Dateiformate für Browser-Kompatibilität an.
Die Schrift "Guardian Headline Full" ist mit mehreren Stilen definiert: halbfett kursiv (Gewicht 600), fett (Gewicht 700), fett kursiv (Gewicht 700), schwarz (Gewicht 900) und schwarz kursiv (Gewicht 900). Jeder Stil enthält Schriftdateien in den Formaten WOFF2, WOFF und TrueType, die auf den Servern des Guardian gehostet werden.
Zusätzlich ist die Schrift "Guardian Titlepiece" in ihrem fetten Stil (Gewicht 700) definiert, ebenfalls mit WOFF2-, WOFF- und TrueType-Dateien.
Für iOS- und Android-Geräte werden eine dunkle Hintergrundfarbe und spezifische Feature-Farben festgelegt. Im Dark Mode passt sich die Feature-Farbe entsprechend an.
Auf iOS und Android werden spezifische CSS-Regeln angewendet, um den ersten Buchstaben des ersten Absatzes in bestimmten Artikel-Containern zu gestalten, die auf bestimmte Elemente wie `.element-atom` oder Anmelde-Gates 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 sind Artikelüberschriften ausgeblendet, und der Furniture-Wrapper hat spezifische Abstände. Labels innerhalb des Furniture-Wrappers verwenden eine fette, großgeschriebene Schrift mit einer neuen Pillar-Farbe. Schlagzeilen sind auf 32px, fett, mit unterem Abstand und einer dunklen Farbe gesetzt. Bildabbildungen werden relativ positioniert, mit vollem Rand und automatischer Höhe.
Für Android-Geräte sollten Bilder innerhalb von Artikel-Containern einen transparenten Hintergrund haben, die volle Viewport-Breite (unter Berücksichtigung von Scrollbars) einnehmen und ihre Höhe automatisch anpassen.
Auf iOS und Android sollte der einleitende Text in Artikeln spezifische Abstände haben: 4 Pixel Abstand oben und 24 Pixel unten, mit einem negativen Rand von 10 Pixeln rechts.
Die Absätze innerhalb dieses einleitenden Textes sollten die Schlagzeilen-Schriftfamilie des Guardian verwenden.
Links innerhalb dieses Textes sollten mit einer spezifischen Farbe gestaltet werden, einer Unterstreichung, die 6 Pixel unter dem Text positioniert ist, und einer hellgrauen Unterstreichungsfarbe, ohne Hintergrundbild oder Rand. Beim Überfahren sollte sich die Unterstreichung an die Textfarbe des Links anpassen.
Zusätzlich sollte der Metadaten-Bereich in Artikeln auf iOS und Android eine spezifische Gestaltung erhalten.
Dieser CSS-Code legt Stile für Artikel-Container auf iOS- und Android-Geräten fest. Er passt Ränder, Farben, Abstände und Button-Darstellungen für verschiedene Artikeltypen und ihre Komponenten an.
Auf iOS- und Android-Geräten werden für Feature-, Standard- und Kommentar-Artikel-Container Bilder, die keine Thumbnails oder immersive Bilder sind, so gestaltet, dass sie keinen Rand haben, eine Breite, die aus dem Viewport minus 24 Pixeln und der Scrollbar-Breite berechnet wird, und eine automatische Höhe. Ihre Bildunterschriften haben keinen Abstand.
Immersive Bilder in diesen Containern werden auf eine Breite gesetzt, die der Viewport-Breite minus der Scrollbar-Breite entspricht.
Innerhalb des Fließtextes des Artikelkörpers zeigen zitierte Blockzitate einen farbigen Marker unter Verwendung einer benutzerdefinierten CSS-Variablen an. Links werden mit einer spezifischen Farbe gestaltet, einer Unterstreichung, die um 6 Pixel versetzt ist, und einer Dekorationsfarbe aus einer Variablen. Beim Überfahren ändert sich die Unterstreichungsfarbe in eine andere Variable.
Im Dark Mode wird die Hintergrundfarbe des Furniture-Wrappers in diesen Containern auf ein dunkles Grau (#1a1a1a) gesetzt.
Für iOS- und Android-Geräte verwenden die Inhalts-Labels in Feature-, Standard- und Kommentarartikeln die neue Pillar-Farbe. Schlagzeilen in diesen Artikeln haben keinen Hintergrund und verwenden die Rahmenfarbe der Überschrift. Der Standfirst-Text und Links sowie Autorenzeilen übernehmen ebenfalls die neue Pillar-Farbe. Icons im Meta-Bereich werden mit derselben Farbe gestaltet. Bildunterschriften für Showcase-Bilder verwenden die Datumszeilen-Farbe, und zitierter Text innerhalb des Artikelkörpers folgt derselben Gestaltung.
Für iOS- und Android-Geräte wird die Textfarbe von zitierten Blöcken innerhalb von Artikelkörpern auf eine spezifische Pillar-Farbe gesetzt. Zusätzlich wird die Hintergrundfarbe für verschiedene Artikelkörper-Container auf einen dunklen Hintergrund gezwungen. Auf iOS wird der erste Buchstabe, der auf bestimmte Elemente in diesen Containern folgt, mit einem Initialbuchstaben-Effekt gestaltet.
Dies scheint ein CSS-Selektor zu sein, der den ersten Buchstaben von Absätzen in spezifischen Artikel-Containern auf iOS- und Android-Geräten anspricht. Der Selektor gilt für verschiedene Artikeltypen (Standard, Feature, Kommentar) und berücksichtigt verschiedene Seitenstrukturen und Anmelde-Gate-Elemente.
Dieser CSS-Code legt Stile für spezifische Elemente auf Android- und iOS-Geräten fest. Er definiert Farben, Abstände, Ränder und andere visuelle Eigenschaften für verschiedene Artikel-Container, Buttons und Textelemente. Der Code enthält auch eine Dark-Mode-Media-Query, die Farben anpasst, wenn der Benutzer ein dunkles Farbschema bevorzugt. Einige Elemente, wie Artikelüberschriften, werden durch Setzen ihrer Deckkraft auf Null ausgeblendet.
Der CSS-Code legt Stile für Artikel-Container auf iOS- und Android-Geräten fest. Er entfernt Ränder von Furniture-Wrappern und passt Farben für Labels, Schlagzeilen und Links basierend auf benutzerdefinierten Eigenschaften oder
