Das Element mit der Klasse "canvas.svelte-o3oskp" ist als Block angelegt.
Eine benutzerdefinierte Schriftart namens "Guardian Headline Full" wird mit verschiedenen Gewichten und Stilen definiert:
- Light (300) in normal und kursiv
- Regular (400) in normal und kursiv
- Medium (500) in normal und kursiv
- Semibold (600) in normal und kursiv
Jeder Schriftstil ist in den Formaten WOFF2, WOFF und TrueType von den Asset-Servern des Guardian verfügbar. Die Guardian-Website verwendet spezifische Schriftarten für ihre Überschriften und Titel. Dazu gehören Guardian Headline Full in den Stilen fett, fett kursiv, black und black kursiv sowie Guardian Titlepiece in fett. Jede Schriftart ist in mehreren Dateiformaten wie woff2, woff und truetype für Kompatibilität verfügbar.
Für den Karussell-Bereich erscheint der Titel in weißer Schrift unter Verwendung der Guardian Text Sans Web Schrift, mit einer Größe von 17px und mittlerem Gewicht. Er ist absolut positioniert und enthält einen Link, der in hellem Grün mit fettem Gewicht und ohne Unterstreichung gestaltet ist.
Das Karussell selbst ist ein horizontal scrollender Container, der Elemente beim Scrollen einrasten lässt, mit standardmäßig sanftem Scrollen, es sei denn, der Benutzer bevorzugt reduzierte Bewegung. Es verbirgt Scrollleisten und hat einen Abstand von 10px zwischen den Elementen.
Jede Karte im Karussell ist 310px breit und 160px hoch, mit weißem Hintergrund und einem Bild auf der rechten Seite, das sich anpasst. Der Bildcontainer ist 120px mal 150px groß mit grauem Hintergrund, und Bilder vergrößern sich leicht beim Hover, es sei denn, reduzierte Bewegung ist bevorzugt. Karten enthalten Padding und werden als Flex-Container angezeigt, die Inhalte am unteren Rand ausrichten. In der Karussell-Komponente hat der Bildcontainer der Karte keinen Übergangseffekt. Der Inhaltscontainer innerhalb jeder Karte ist als flexible Spaltenanordnung eingerichtet. Überschriften und Absätze innerhalb des Inhaltscontainers sind mit dunkelgrauer Farbe und ohne Textdekoration gestaltet. Überschriften verwenden einen spezifischen Serifenschriftstapel, haben eine Schriftgröße von 24px, 115% Zeilenhöhe, normales Gewicht und einen transparenten unteren Rand. Absätze verwenden einen Sans-Serif-Schriftstapel mit einer Schriftgröße von 14px und 115% Zeilenhöhe, wobei der erste Absatz fett ist.
Wenn eine Karte ausgewählt ist, vergrößert sich ihr Bild um 20%. Deaktivierte Karten zeigen ein "Coming soon"-Overlay in fetter Schrift über einem halbtransparenten weißen Hintergrund, oben links positioniert.
Der Steuerungsbereich ist eine flexible Zeile mit Space-Between-Ausrichtung und enthält Paginierungstext in weiß, unter Verwendung einer 12px Sans-Serif-Schrift. Steuerungstasten sind kreisförmig, 40px im Durchmesser, mit grauem Rand und transparentem Hintergrund, die 24px Symbole enthalten. Das Symbol der ersten Taste ist horizontal gespiegelt.
Schriftgesichter für Guardian Headline Full sind mit den Varianten Light, Light Italic, Regular und Regular Italic definiert, bezogen aus woff2, woff und ttf Dateien. Die Guardian Headline Full Schriftfamilie umfasst verschiedene Stile und Gewichte, die jeweils mit spezifischen Quelldateien in WOFF2, WOFF und TrueType Formaten definiert sind. Hier die Details:
- Regular Italic: Gewicht 400, kursiver Stil
- Medium: Gewicht 500, normaler Stil
- Medium Italic: Gewicht 500, kursiver Stil
- Semibold: Gewicht 600, normaler Stil
- Semibold Italic: Gewicht 600, kursiver Stil
- Bold: Gewicht 700, normaler Stil
- Bold Italic: Gewicht 700, kursiver Stil
- Black: Gewicht 900, normaler Stil
- Black Italic: Gewicht 900, kursiver Stil
Alle Schriftdateien sind unter den angegebenen URLs von der Guardian-Asset-Domain gehostet.@font-face {
font-family: Guardian Headline Full;
src: 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;
}
.globe-overlay-wrapper {
overflow: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 30;
background: #121212e6;
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
}
.globe-overlay-wrapper .body-width-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
padding: 22px 16px;
}
@media (min-width: 46.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 740px;
}
}
@media (min-width: 61.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 980px;
}
}
@media (min-width: 71.25em) {
.globe-overlay-wrapper .body-width-wrapper {
max-width: 1140px;
}
}
button {
padding: 1px 8px 3px;
border-radius: 30px;
border: 1px solid #fff;
background: var(--Neutral-neutral-neutral-7, #121212);
color: var(--Neutral-neutral-neutral-100, #fff);
font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 130%;
align-self: flex-start;
position: relative;
z-index: 60;
}
button:hover {
cursor: pointer;
}
.canvas-container {
width: 100vw;
height: 100vw;
max-width: min(600px, 100vh - 340px);
max-height: min(600px, 100vh - 340px);
align-self: center;
position: fixed;
top: 40px;
z-index: 40;
}
@media (min-width: 23.4375em) {
.canvas-container {
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
}
}
.carousel-container {
height: calc(100vh - 116px);
height: calc(100dvh - 116px);
position: relative;
z-index: 50;
}
body.android .globe-overlay-wrapper .body-width-wrapper > button {
top: 58px;
}
body.ios .carousel-container {
height: calc(100vh - 180px) !important;
height: calc(100dvh - 180px) !important;
}
body.ios .canvas-container {
top: calc(50% - 170px) !important;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-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/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
font-style: italic;
}Dieser CSS-Code definiert mehrere Schriftstile für die Schriftfamilie "Guardian Headline Full". Er umfasst verschiedene Gewichte und Stile (normal und kursiv) von Regular (400) bis Black (900). Jeder Stil ist mit mehreren Dateiformaten (WOFF2, WOFF und TrueType) für browserübergreifende Kompatibilität angegeben, alle von Guardian's Asset-Server bezogen.Dieser Text definiert benutzerdefinierte Schriftarten und Stile für eine Webseite. Er spezifiziert zwei Schriftarten: Guardian Headline in Black Italic mit einem Gewicht von 900 und Guardian Titlepiece in Bold mit einem Gewicht von 700, beide von bestimmten URLs in verschiedenen Formaten geladen.
Er enthält auch CSS-Regeln für Buttons, wie einen kreisförmigen Button, der sich beim Überfahren leicht vergrößert und einen Fokusring hat. Es gibt einen "Explore"-Call-to-Action-Button mit spezifischem Padding, Rand und Textstilen.
Zusätzlich richtet der Code eine Fortschrittsleiste ein, die ihre Breite ändert und verschiedene Hintergrundfarben hat, zusammen mit responsiven Designanpassungen für verschiedene Bildschirmgrößen. Ein Globe-Button-Wrapper ist so gestaltet, dass er unter bestimmten Bedingungen klebrig und sichtbar ist, mit verschiedenen Layouts für Android- und iOS-Geräte.
Schließlich definiert er ein Titel-Pfeil-Element als kreisförmiges Symbol mit grünem Rand und zentriertem Inhalt.Dieser CSS-Code definiert Stile für eine Webseite, einschließlich:
- Zentrieren von Elementen mit der Klasse "title-arrow"
- Einstellen von Bildern innerhalb von "title-arrow" auf volle Breite und Höhe
- Anwenden von Farbinversionsfiltern für den Dunkelmodus auf iOS- und Android-Geräten
- Konfigurieren des Scrollverhaltens mit der Lenis-Smooth-Scrolling-Bibliothek
- Laden mehrerer Schriftgewichte und -stile für die "Guardian Headline Full"-Schriftart von den Servern des Guardian
Der Code behandelt responsives Design, Barrierefreiheitsfunktionen und Typografie für ein Nachrichten-Website-Layout.Die Guardian-Website verwendet spezifische Schriftarten für ihre Überschriften und Titel, die von ihren Servern in verschiedenen Formaten wie WOFF2, WOFF und TrueType geladen werden. Diese Schriftarten umfassen verschiedene Stile und Gewichte, wie Semibold, Bold und Black, sowohl in regulären als auch kursiven Versionen.
Für interaktive Inhalte passt sich das Layout basierend auf der Bildschirmgröße an. Auf breiteren Bildschirmen verschiebt sich die Hauptspalte nach links mit zunehmenden Rändern, während Elemente wie Atoms, Showcases und immersive Inhalte festgelegte maximale Breiten haben, die sich mit dem Viewport ändern. Auf kleineren Bildschirmen erweitern sich immersive Elemente auf volle Breite, und Anpassungen für Scrollleisten werden vorgenommen, um eine korrekte Ausrichtung zu gewährleisten.Dieser Text scheint CSS-Code für das Styling eines Webseiten-Layouts zu sein. Er definiert Stile für verschiedene Bildschirmgrößen, Farben, Abstände und interaktive Elemente. Der Code setzt maximale Breiten für Inhaltsbereiche, erstellt Ränder, definiert Farbvariablen für verschiedene Elemente wie Links und Hintergründe und behandelt, wie die Seite erscheint, wenn Skripte aktiviert oder deaktiviert sind. Er beinhaltet auch spezifisches Styling für Überschriften, Absätze und Listen innerhalb der Hauptinhaltsspalte, das Ränder und Abstände für verschiedene Geräte anpasst.Die Absatzlinks im Header-Wrapper haben eine grüne Unterstreichung, die 4px vom Text versetzt ist. Beim Überfahren wird die Unterstreichung dunkel.
Der Headline-Bereich hat einen dezent grün gestreiften Hintergrund und stellt sicher, dass der Titel kein oberes Padding hat. Die Titellinks sind in einer spezifischen Schriftart gestaltet, mit einer Größe von 38px in hellgrauer Farbe und sanften Übergängen. Beim Überfahren werden Unterstreichungen entfernt, die Farbe zu Dunkel geändert und der Kontrast eines Pfeilsymbols erhöht. Wenn Bewegungsreduzierung bevorzugt wird, sind Übergänge deaktiviert. Nicht-Link-Spans im Titel sind versteckt.
Der Standfirst-(Unterüberschrift-)Bereich hat zusätzliches unteres Padding und verwendet dieselbe Schriftart und Größe wie der Titel für seine Absätze.
Animationen steuern das Einblenden des Titels und Standfirsts, wenn sie in den Blick kommen, wobei der Titel zuerst eingeblendet wird. Diese Animationen werden übersprungen, wenn reduzierte Bewegung aktiviert ist oder Skripting nicht verfügbar ist.
Das erste Inline-Element ist auf ein 4:5-Seitenverhältnis beschränkt, wobei sein Bild oben zugeschnitten wird. Der Headline-Bereich hat unteres Padding und gestaltet die Hauptüberschrift mit spezifischer Typografie.
Figuren haben Beschriftungen, die unten mit einem halbtransparenten dunklen Hintergrund und hellem Text positioniert sind, wobei alle Spans innerhalb versteckt sind.
Linien werden nicht angezeigt, und der Meta-Bereich hat einen dünnen oberen Rand.Dieser Text scheint CSS-Code für das Styling einer Webseite, wahrscheinlich für ein Artikel-Layout, zu sein. Er definiert verschiedene visuelle Eigenschaften wie Ränder, Schriftarten, Farben und responsives Verhalten für verschiedene Bildschirmgrößen. Der Code enthält spezifische Regeln für Elemente wie den Artikelkörper, Bilder, Beschriftungen und Social-Media-Links, die ihr Erscheinungsbasierend auf Gerätebreite und Benutzereinstellungen für reduzierte Bewegung anpassen.Das CSS definiert ein Grid-Layout für interaktive Inhalte mit spezifischen Spaltengrößen und benannten Bereichen. Es passt das Layout für größere Bildschirme und bei bevorzugter reduzierter Bewegung an. Medienelemente sind so eingestellt, dass sie Pointer-Events ignorieren.
Für Reporting-Team-Abschnitte gestaltet es eine umrandete Box mit grünen Rändern, spezifischen Schriftarten und Abständen, die sich auf größeren Bildschirmen ändern. Textelemente haben definierte Größen, Gewichte und Farben, mit Kursivschrift für hervorgehobenen Text. Listenelemente werden ohne Aufz
