Die Schriftfamilie Guardian Headline Full umfasst mehrere Stile, jeweils mit verschiedenen Strichstärken und Kursivvarianten. Die Light-Version (Strichstärke 300) gibt es sowohl in regulärer als auch in kursiver Ausführung, ebenso wie die Regular-Version (Strichstärke 400). Die Medium- (Strichstärke 500) und Semibold-Stile (Strichstärke 600) bieten ebenfalls reguläre und kursive Optionen. Jede Schriftdatei ist in den Formaten WOFF2, WOFF und TrueType von den Servern des Guardian verfügbar.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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/full-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-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, 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) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
}
}Die Hauptspalte für interaktive Inhalte hat spezifisches Styling für Elemente. Beispielsweise haben Atome keinen oberen oder unteren Rand, aber einen Innenabstand von 12px. Wenn auf ein Atom ein Absatz folgt, wird der Innenabstand des Atoms entfernt und die Ränder werden auf 12px gesetzt. Inline-Elemente sind auf eine Breite von 620px begrenzt.
Bei Abbildungen mit einer Loop-Rolle wird die Bildunterschrift mit einem z-index von 6 positioniert. Eine Loop-Schaltfläche wird gestaltet, um 32px breit zu sein, rechts unten ausgerichtet mit spezifischen Rändern. Die Beschriftungsschaltfläche hat einen hohen z-index von 100.
Selbst gehostete Videoelemente werden auf 100% Breite gesetzt, auf 620px begrenzt und als Block mit 12px Rändern angezeigt. Das Video und sein Container nehmen ebenfalls die volle Breite bis zu 620px ein und werden zentriert. Wenn das Video immersiv ist, wird die Breitenbegrenzung und die Ränder entfernt, sodass es sich vollständig erstreckt. Auf größeren Bildschirmen erweitern sich immersive Videos auf 1140px Breite mit einem negativen linken Rand, und bei noch größeren Größen werden sie 1300px breit mit einem größeren negativen Rand.
Farbvariablen definieren verschiedene Designfarben, wie Dateline-Grau, Kopfzeilenrahmen, Beschriftungstext und Feature-Rot. Im Dunkelmodus passen sich einige Farben an eine dunkle Designpalette an.
Innerhalb des Artikeltextes hat der erste Absatz nach einem Atom oder einer horizontalen Linie zusätzlichen oberen Innenabstand. Außerdem wird der erste Buchstabe des ersten Absatzes nach einem Atom gestaltet, obwohl das spezifische Styling hier nicht vollständig detailliert ist.Der CSS-Code definiert Stile für Initialen, Zitate und verschiedene Layoutelemente in verschiedenen Bereichen einer Website. Initialen werden mit einer bestimmten Schriftart, Größe und Farbe gestaltet und nach links ausgerichtet. Zitate erhalten eine maximale Breite. Für Showcase-Elemente werden Bildunterschriften auf eine statische Position mit voller Breite und einer maximalen Breite von 620px gesetzt.
Immersive Elemente sind so eingestellt, dass sie die volle Viewport-Breite abzüglich der Scrollleiste einnehmen. Auf Bildschirmen kleiner als 71.24em wird ihre maximale Breite auf 978px angepasst, und der Innenabstand der Bildunterschrift variiert mit der Bildschirmgröße. Auf mittleren Bildschirmen (46.25em bis 61.24em) beträgt die maximale Breite 738px. Auf kleinen Bildschirmen (unter 46.24em) erhalten immersive Elemente negative linke Ränder, um sich bis zum Viewport-Rand zu erstrecken, wobei der Innenabstand der Bildunterschrift entsprechend angepasst wird.
Für größere Bildschirme (über 61.25em) wird ein Grid-Layout für den Furniture-Wrapper verwendet, wodurch eine zweispaltige Struktur mit definierten Zeilen für Titel, Überschrift, Vorspann, Meta- und Porträtabschnitte entsteht. Dem ersten Kind von Überschriftenelementen wird ein oberer Rahmen hinzugefügt, und die Positionierung des Meta-Abschnitts wird auf absolut gesetzt.Der Furniture-Wrapper setzt den Vorspanninhalt auf eine relative Position mit einem oberen Innenabstand von 2 Pixeln und ohne rechten Rand. Innerhalb des Vorspanns hat der Hauptinhaltbereich einen unteren Rand von 4 Pixeln. Listenelemente innerhalb des Vorspanns verwenden eine Schriftgröße von 20 Pixeln. Links innerhalb des Vorspanns, einschließlich solcher in Listenelementen, haben keinen Rahmen, kein Hintergrundbild und sind mit einem Versatz von 6 Pixeln unterstrichen, wobei eine benutzerdefinierte Farbe für die Unterstreichung verwendet wird. Beim Überfahren ändert sich die Unterstreichungsfarbe in eine neue Pillar-Farbe.
Der erste Absatz im Vorspann hat einen oberen Rahmen und keinen unteren Innenabstand. Für größere Bildschirme (61.25em und darüber), wenn der Bildschirm auch mindestens 71.25em breit ist, wird der obere Rahmen entfernt. Für Bildschirme mit mindestens 61.25em Breite haben Abbildungen keinen linken Rand und eine maximale Breite von 630 Pixeln, wenn sie inline sind.
Auf Bildschirmen von 71.25em und breiter verwendet der Furniture-Wrapper ein Grid-Layout mit spezifischen Spalten und Zeilen. Eine dekorative Linie erscheint vor dem Meta-Abschnitt, 540 Pixel breit. Absätze im Vorspann haben keinen oberen Rahmen, und eine vertikale Linie wird vor dem Vorspanninhalt hinzugefügt. Für noch größere Bildschirme (81.25em und darüber) passt sich das Grid mit mehr Spalten und Zeilen an, die dekorative Linie vor dem Meta erstreckt sich auf 620 Pixel, und die vertikale Linie vor dem Vorspann verschiebt sich leicht.
Beschriftungen im Artikelkopf oder Titelbereich haben einen oberen Innenabstand von 2 Pixeln. Die Überschrift verwendet eine fette Schriftstärke, eine maximale Breite von 620 Pixeln und eine Schriftgröße von 32 Pixeln. Auf größeren Bildschirmen (71.25em und darüber) passt sich die Überschrift auf eine maximale Breite von 540 Pixeln und eine Schriftgröße von 50 Pixeln an.
Für mittlere Bildschirme (46.25em und darüber) haben Keylines oder Linienelemente keinen rechten Rand. Auf größeren Bildschirmen (61.25em und darüber) sind diese Linien ausgeblendet. Die Linien verwenden eine benutzerdefinierte Farbe für den Strich.Dieser CSS-Code definiert Stile für ein Webseitenlayout, insbesondere für einen Furniture-Wrapper. Er legt verschiedene Eigenschaften für Elemente wie Meta-Informationen, Vorspann-Text, Hauptmedien und Bildunterschriften fest. Die Stile umfassen Anpassungen für Ränder, Innenabstände, Farben und Positionierung, mit spezifischen Regeln für verschiedene Bildschirmgrößen über Media Queries. Das Design verwendet benutzerdefinierte CSS-Variablen für Farben, wie `--darkBackground` und `--headerBorderColor`, und stellt sicher, dass Elemente basierend auf der Viewport-Breite ausgeblendet oder angezeigt werden. Der Wrapper hat einen dunklen Hintergrund und beinhaltet responsives Verhalten für Geräte von Mobil bis Desktop.Der CSS-Code gestaltet Elemente innerhalb einer Furniture-Wrapper-Klasse. Überschriften (h1) sind fett und hellgrau (#dcdcdc). Abbildungen in Überschriften haben keinen oberen Rand und einen kleinen unteren Rand.
Für Bildschirme breiter als 71.25em erscheint eine farbige Linie vor dem Meta-Abschnitt. Text und Zusammenfassungen im Meta-Abschnitt sind hellgrau. Social-Media-Links und Schaltflächen haben einen farbigen Rahmen und verwenden eine bestimmte Farbe für Text und Symbole, die sich bei Hover auf einen dunklen Hintergrund ändert.
Links im Meta-Abschnitt verwenden eine bestimmte Farbe und behalten diese bei Hover bei, mit passenden Unterstreichungen. Im Vorspannabschnitt sind Links mit einer hellgrauen Farbe unterstrichen, die sich bei Hover ändert, und Absatztext ist hellgrau. Auf breiteren Bildschirmen kann der erste Absatz einen oberen Rahmen haben oder verlieren. Listenelemente im Vorspann sind ebenfalls hellgrau.
Für Bildschirme breiter als 71.25em erscheint eine Linie vor dem Vorspann. Auf Bildschirmen breiter als 46.25em erhält der Wrapper einen dunklen Hintergrund und einen rechten Rand.Der Furniture-Wrapper verwendet Pseudo-Elemente, um Seitenränder zu erstellen. Das `:before`-Element ist links positioniert mit einem dunklen Hintergrund und einem linken Rand, während seine Breite und linke Position basierend auf der Viewport-Breite, der Scrollleistenbreite und einer festen Basisbreite von 738px berechnet werden. Das `:after`-Element spiegelt dies auf der rechten Seite mit einem rechten Rand wider.
Für größere Bildschirme (Mindestbreite 61.25em) passen sich die Berechnungen auf eine Basisbreite von 978px an. Dieses Muster setzt sich für noch größere Breakpoints fort: 71.25em (1138px Basis) und 81.25em (1298px Basis).
Innerhalb des Wrappers sind SVG-Striche und bestimmte Ränder von Social-/Meta-Elementen so eingestellt, dass sie eine benutzerdefinierte CSS-Variable für die Farbe, `--headerBorderColor`, verwenden.
Im Artikeltext haben Überschriften der Ebene zwei (`h2`) eine Schriftstärke von 200, aber wenn sie ein `strong`-Element enthalten, erhöht sich die Stärke auf 700.
Schließlich sind mehrere `@font-face`-Regeln definiert, um die Schriftfamilie "Guardian Headline Full" in verschiedenen Strichstärken und Stilen (Light, Light Italic, Regular, Regular Italic) von den Asset-Servern des Guardian zu laden.@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/f
