Dieser CSS-Code definiert eine benutzerdefinierte Schriftfamilie namens "Guardian Headline Full" mit mehreren Stilen und Gewichten. Er enthält leichte, reguläre, mittlere und halbfette Versionen, jeweils in normaler und kursiver Ausführung verfügbar. Die Schriftdateien sind online gehostet und in drei Formaten bereitgestellt: WOFF2, WOFF und TrueType (TTF).
@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://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/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, 0px));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width, 0px)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width, 0px)) !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) {
}
Für interaktive Inhalts-Spalten wird eine linke Rahmenlinie mit spezifischer Positionierung und Z-Index hinzugefügt. Auf größeren Bildschirmen passt sich die linke Position der Linie leicht an. Innerhalb dieser Spalten haben atomare Elemente keine oberen oder unteren Ränder, enthalten jedoch Innenabstand. Wenn Absätze vor atomaren Elementen stehen, wird der Innenabstand entfernt und stattdessen werden Ränder hinzugefügt. Inline-Elemente sind auf eine maximale Breite von 620px begrenzt.
Für Abbildungen mit einer Loop-Rolle werden Bildunterschriften auf einen höheren Z-Index gesetzt, und Loop-Schaltflächen werden mit spezifischen Abmessungen und Ausrichtung gestaltet. Selbst gehostete Video-Elemente werden auf volle Breite gesetzt, auf 620px begrenzt und enthalten obere und untere Ränder. Für immersive Video-Layouts werden Breitenbeschränkungen entfernt und Ränder angepasst. Auf breiteren Bildschirmen weiten sich immersive Videos in der Breite aus und verschieben sich nach links.
Farbvariablen definieren Stile für Datumszeilen, Rahmen, Bildunterschriften und Feature-Elemente. Im Dunkelmodus passen sich Text- und Symbolfarben an ein dunkles Thema an. Atomare Elemente innerhalb von Inhalts-Spalten haben keinen Innenabstand. Spezifische Regeln stellen sicher, dass der erste Absatz nach bestimmten Elementen oder horizontalen Trennlinien in verschiedenen Inhaltsbereichen wie Artikeln, Kommentaren und Features angemessen gestaltet wird. Der erste Absatz nach einem Anmelde-Gate oder einer horizontalen Trennlinie (außer der letzten) hat einen oberen Innenabstand von 14 Pixeln.
Für den ersten Buchstaben des ersten Absatzes nach einem Anfangselement, einem Anmelde-Gate oder einer horizontalen Trennlinie (außer der letzten) innerhalb verschiedener Inhaltskörper wird ein spezifischer Initialstil angewendet. Dieser verwendet die Guardian-Headline-Schrift, ist fett, 111 Pixel groß mit 92 Pixeln Zeilenhöhe. Er schwebt links, ist in Großbuchstaben, verwendet Border-Box-Sizing, hat einen 8-Pixel-rechten Rand, ist oben ausgerichtet und verwendet eine benutzerdefinierte Farbvariable.
Absätze unmittelbar nach einer horizontalen Trennlinie innerhalb dieser Inhaltskörper haben keinen oberen Innenabstand.
Hervorgehobene Zitate innerhalb dieser Inhaltskörper haben eine maximale Breite von 620 Pixeln.
Bildunterschriften für Showcase-Elemente in Hauptinhalten und Artikel-Containern sind statisch positioniert, nehmen die volle Breite bis zu 620 Pixeln ein.
Immersive Elemente erstrecken sich über die gesamte Viewport-Breite unter Berücksichtigung der Scrollbar. Auf größeren Bildschirmen (bis zu 71.24em) sind sie auf 978 Pixel begrenzt, wobei der Innenabstand der Bildunterschriften bei verschiedenen Breakpoints angepasst wird. Auf mittleren Bildschirmen (46.25em bis 61.24em) beträgt die maximale Breite 738 Pixel. Auf kleineren Bildschirmen (unter 46.24em) werden sie am linken Rand ausgerichtet mit angepassten Rändern und Bildunterschriften-Innenabstand.
Für Furniture-Wrapper auf großen Bildschirmen (61.25em und darüber) wird ein Grid-Layout mit definierten Spalten und Zeilen für die Positionierung von Headline-Komponenten verwendet. Die CSS-Stile definieren das Layout und Erscheinungsbild für den Header-Bereich einer Webseite, bezeichnet als "furniture-wrapper". Sie setzen Rahmen, Abstände, Typografie und Grid-Strukturen, die sich an verschiedene Bildschirmgrößen anpassen.
Für größere Bildschirme (über 71.25em) wird ein komplexes Grid-Layout mit spezifischen Spalten und Zeilen für Elemente wie Titel, Headline, Meta-Informationen, Standfirst (Unterüberschrift) und Porträt eingerichtet. Visuelle Elemente wie Rahmen und Linien werden bei bestimmten Breakpoints angepasst oder entfernt. Die Headline-Schriftgröße erhöht sich und ihre maximale Breite ändert sich auf größeren Bildschirmen. Links innerhalb des Standfirst werden mit Unterstreichungen gestaltet, die sich bei Hover in der Farbe ändern. Für Bildschirme breiter als 740 Pixel werden Elemente mit der Klasse `.keyline-4` oder dem Attribut `[data-gu-name="lines"]` ausgeblendet. Innerhalb des `.furniture-wrapper` werden die SVG-Striche innerhalb dieser Elemente gestaltet, um die Farbvariable `--headerBorder` zu verwenden.
Auf Bildschirmen breiter als 740 Pixel wird der rechte Rand von Elementen mit der ID `#meta` oder dem Attribut `[data-gu-name="meta"]` innerhalb von `.furniture-wrapper` entfernt. Für diese Meta-Elemente wird die Rahmenfarbe von Social-Links, Kommentarbereichen und ihren untergeordneten Spans auf `--headerBorder` gesetzt. Außerdem werden alle `gu-island`-Komponenten innerhalb von `.content__meta-container_dcr` ausgeblendet.
Für den Standfirst-Bereich (ausgewählt durch Klasse, ID oder `data-gu-name`) wird ein negativer linker Rand und passender Innenabstand angewendet und seine Position auf relativ gesetzt. Auf breiteren Bildschirmen (über 740px) wird ein kleiner oberer Innenabstand hinzugefügt. Absätze innerhalb des Standfirst werden mit einer Schriftstärke von 400, einer Größe von 20 Pixeln und einem unteren Innenabstand von 14 Pixeln gestaltet.
Der Hauptmedienbereich (ausgewählt durch ID oder `data-gu-name`) ist relativ positioniert, hat keinen oberen Rand, einen kleinen unteren Rand und wird im "portrait" Grid-Bereich platziert. Sichergestellt wird, dass seine inneren Divs die volle Breite einnehmen und keinen horizontalen Rand haben. Auf sehr breiten Bildschirmen (über 980px) wird der untere Rand entfernt. Auf kleineren Bildschirmen (unter 740px) wird seine Breite auf die volle Viewport-Breite abzüglich der Scrollbar gesetzt und ein negativer linker Rand angewendet. Für Bildschirme zwischen 480px und 740px wird dieser negative linke Rand auf -20px erhöht.
Bildunterschriften werden gestaltet, um absolut am unteren Rand positioniert zu sein, mit spezifischem Innenabstand und Hintergrund-/Textfarben aus CSS-Variablen. Ihre Breite wird auf 100% ohne maximale Breite gesetzt, der untere Rand wird entfernt und eine Mindesthöhe festgelegt. Spans innerhalb der Bildunterschrift werden mit `--headerBorder` eingefärbt und ihre SVGs mit derselben Farbe gefüllt. Der erste Span wird ausgeblendet und der zweite Span als Block-Element angezeigt, wobei seine Breite auf 90% begrenzt wird. Auf Bildschirmen breiter als 480px wird der horizontale Innenabstand der Bildunterschrift erhöht. Eine Klasse `.hidden` auf der Bildunterschrift setzt ihre Deckkraft auf 0.
Die Bildunterschriften-Schaltfläche wird als Block angezeigt, absolut in der Nähe der unteren rechten Ecke positioniert, mit einem hohen Z-Index. Sie hat einen kreisförmigen Hintergrund, keinen Rahmen und spezifischen Innenabstand. Ihr SVG-Symbol wird leicht verkleinert. Auf Bildschirmen breiter als 480px wird ihre rechte Position angepasst. Für sehr breite Bildschirme (über 1140px) werden die obere Position und Höhe des `.content__main-column--interactive` Pseudo-Elements angepasst. Außerdem wird die maximale Breite von h2-Überschriften innerhalb dieser Spalte auf 620 Pixel begrenzt.
Für das Root-Element, wenn der Body eine `.ios` oder `.android` Klasse hat, wird ein Satz von Dunkelmodus-Farbvariablen definiert. Bei einer Dunkelfarb-Schema-Präferenz wird die Variable `--new-pillar-colour` entsprechend aktualisiert.
Auf iOS-Geräten wird der erste Buchstabe des ersten Absatzes nach bestimmten Anfangselementen in verschiedenen Artikel-Containern gestaltet. Dies gilt auch, wenn ein Anmelde-Gate-Element zwischen diesem ersten Element und dem Absatz erscheint. Der erste Buchstabe des ersten Absatzes nach einem Anmelde-Gate oder nach einem Element-Atom gefolgt von einem Anmelde-Gate sollte mit der sekundären Pillar-Variable eingefärbt werden. Dies gilt für Feature-, Standard- und Kommentar-Artikel-Container auf iOS und Android.
Auf iOS und Android sollte die Artikel-Header-Höhe in Feature-, Standard- und Kommentar-Artikel-Containern auf Null gesetzt werden.
Der Furniture-Wrapper in diesen Containern sollte einen oberen Innenabstand von 4 Pixeln und einen horizontalen Innenabstand von 10 Pixeln haben. Die Inhalts-Labels darin sollten eine fette, Serifenschriftfamilie verwenden, mit der neuen Pillar-Variable eingefärbt sein und großgeschriebenen Text haben.
Headlines innerhalb des Furniture-Wrappers sollten 32 Pixel groß sein, fett, einen unteren Innenabstand von 12 Pixeln haben und die Farbe #121212 verwenden.
Bildelemente innerhalb des Furniture-Wrappers sollten relativ positioniert sein, einen oberen Rand von 14 Pixeln, einen linken Rand von -10 Pixeln, eine Breite berechnet als Viewport-Breite minus Scrollbar-Breite und eine automatische Höhe haben. Dies gilt für die inneren Figure-, Image- und Link-Elemente innerhalb von Feature-Artikel-Containern auf iOS. Für iOS- und Android-Geräte werden Bilder innerhalb von Artikel-Containern auf einen transparenten Hintergrund gesetzt, mit einer Breite gleich der vollen Viewport-Breite minus der Scrollbar-Breite und einer automatischen Höhe.
Der Standfirst-Bereich in diesen Containern hat einen oberen Innenabstand von 4 Pixeln, einen unteren Innenabstand von 24 Pixeln und einen rechten Rand von -10 Pixeln.
Absätze innerhalb des Standfirst verwenden die Guardian-Headline-Schriftfamilie.
Links innerhalb des Standfirst werden mit einer spezifischen Farbe gestaltet, einer Unterstreichung positioniert 6 Pixel vom Text entfernt, und einer dekorativen Linienfarbe, ohne Rahmen. Für Android-Geräte sollte beim Überfahren von Links im Standfirst-Bereich des Kommentar-Artikels die Unterstreichungsfarbe der neuen Pillar-Farbe entsprechen.
Für iOS- und Android-Geräte, über Feature-, Standard- und
