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. Elemente innerhalb dieser Spalte haben keinen oberen oder unteren Rand, enthalten jedoch Innenabstand. Wenn auf ein Element ein Absatz folgt, passt sich der Abstand entsprechend an. Inline-Elemente sind auf eine maximale Breite von 620 Pixeln beschränkt.
Für größere Bildschirme sind auch Inline-Grafiken auf 620 Pixel beschränkt. Spezielles Styling gilt für Video-Loops, einschließlich der Platzierung von Buttons und der Positionierung von Untertiteln. Selbst gehostete Videos werden auf eine maximale Breite von 620 Pixeln mit zentrierten Rändern eingestellt, während immersive Videos auf größeren Bildschirmen auf volle Breite mit angepassten Rändern erweitert werden.
Farbvariablen definieren das Thema, wie z.B. Datumszeilen, Kopfzeilenrahmen und Untertitel-Farben. Im Dunkelmodus passen sich diese Farben an eine dunklere Palette an. Der erste Absatz nach bestimmten Elementen erhält zusätzlichen oberen Innenabstand, und der erste Buchstabe des ersten Absatzes kann markant gestaltet werden.
Der CSS-Code definiert Stile für Initialen, Zitate und verschiedene Layoutelemente auf verschiedenen Bereichen einer Website, wie Artikeln, Kommentaren und Features. Er legt spezifische Schriftarten, Größen und Farben für den ersten Buchstaben von Absätzen fest, passt die Breite und Positionierung von immersiven und Showcase-Elementen an und erstellt ein responsives Grid-Layout für größere Bildschirme. Die Stile umfassen auch Media Queries, um das Layout für verschiedene Bildschirmgrößen anzupassen.
Der Furniture-Wrapper setzt den Standfirst-Inhalt auf eine relative Position mit einem oberen Innenabstand von 2 Pixeln und ohne rechten Rand. Innerhalb des Standfirst haben Listenelemente eine Schriftgröße von 20 Pixeln, und Links haben keinen Rahmen, kein Hintergrundbild, eine Unterstreichung mit einem Versatz von 6 Pixeln und eine Farbe aus der benutzerdefinierten Eigenschaft `--headerBorder` (Standard: `#dcdcdc`). Beim Überfahren ändert sich die Unterstreichungsfarbe des Links in die durch `--new-pillar-colour` definierte Farbe.
Für größere Bildschirme (61.25em und darüber) haben Grafiken keinen linken Rand, und Inline-Elemente mit einer bestimmten Rolle sind auf eine maximale Breite von 630 Pixeln beschränkt. Bei 71.25em und darüber verwendet das Layout ein Grid mit definierten Spalten und Zeilen. Eine dekorative Linie erscheint vor dem Meta-Bereich, und eine vertikale Linie wird vor dem Standfirst hinzugefügt. Absatzrahmen werden bei diesem Breakpoint entfernt.
Bei 81.25em passt sich das Grid an, um mehr Spalten einzubeziehen, und die dekorativen Linien werden neu positioniert.
Überschriften haben eine Schriftstärke von 600 und eine maximale Breite von 620 Pixeln, mit einer Schriftgröße von 32 Pixeln. Auf größeren Bildschirmen (71.25em und darüber) erhöht sich die Schriftgröße der Überschrift auf 50 Pixel, und die maximale Breite reduziert sich auf 540 Pixel.
Für mittlere Bildschirme (46.25em und darüber) haben Elemente mit der Klasse `keyline-4` oder dem Attribut `data-gu-name=lines` keinen rechten Rand. Auf größeren Bildschirmen (61.25em und darüber) sind diese Elemente ausgeblendet. Ihre SVG-Striche verwenden die Farbe `--headerBorder`.
Dieser CSS-Code definiert Stile für ein Webseiten-Layout, insbesondere für einen Furniture-Wrapper. Er legt verschiedene Eigenschaften für Elemente wie Meta-Informationen, Standfirst-Text, Hauptmedien und Untertitel fest. Die Stile umfassen Anpassungen für Ränder, Innenabstände, Farben und Positionierung, mit spezifischen Regeln für verschiedene Bildschirmgrößen unter Verwendung von Media Queries. Das Design verwendet benutzerdefinierte CSS-Variablen für Farben, wie Dunkelmodus-Features und Hintergrundfarben, und gewährleistet responsives Verhalten über Geräte hinweg.
Der CSS-Code gestaltet Elemente innerhalb einer Furniture-Wrapper-Klasse. Überschriften (h1) sind fett und hellgrau (#dcdcdc). Grafiken 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-Bereich. Text und Zusammenfassungen im Meta-Bereich sind hellgrau. Social-Media-Buttons haben einen farbigen Rahmen und ein Icon, wobei sich Icon und Text beim Überfahren farblich ändern.
Links im Meta-Bereich verwenden eine Themenfarbe und behalten diese beim Überfahren bei, mit einer Unterstreichung in derselben Farbe. Im Standfirst-Bereich sind Links mit einer hellgrauen Linie unterstrichen, die beim Überfahren in die Themenfarbe wechselt. Absätze und Listenelemente im Standfirst sind hellgrau.
Auf Bildschirmen breiter als 61.25em hat der erste Absatz im Standfirst einen oberen Rahmen, der auf Bildschirmen breiter als 71.25em entfernt wird. Auf diesen größeren Bildschirmen erscheint auch eine farbige Linie vor dem Standfirst.
Für Bildschirme breiter als 46.25em erhält der Furniture-Wrapper einen dunklen Hintergrund und einen rechten Rahmen.
Das CSS definiert einen `.furniture-wrapper` mit Pseudo-Elementen, die Seitenleisten erzeugen. Diese passen Breite und Position basierend auf der Viewport-Größe an, um einen zentrierten Inhaltsbereich mit festen Breiten (738px, 978px, 1138px, 1298px) über verschiedene Breakpoints hinweg beizubehalten, unter Berücksichtigung der Scrollbar-Breite. Rahmen und Hintergrundfarben werden mit CSS Custom Properties angewendet.
Für Überschriften innerhalb von Artikeln verwenden `h2`-Elemente eine leichte Schriftstärke (200), wechseln aber zu fett (700), wenn sie ein `strong`-Element enthalten.
Die `@font-face`-Regeln laden die Schriftfamilie "Guardian Headline Full" in mehreren Strichstärken und Stilen (Light, Light Italic, Regular, Regular Italic) von den Servern des Guardian.
@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/full-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/full-not-h
