Το στοιχείο με την κλάση "canvas.svelte-o3oskp" έχει οριστεί να εμφανίζεται ως block.
Ορίζεται μια προσαρμοσμένη γραμματοσειρά με το όνομα "Guardian Headline Full" με διάφορα βάρη και στυλ:
- Light (300) σε κανονικό και πλάγιο
- Regular (400) σε κανονικό και πλάγιο
- Medium (500) σε κανονικό και πλάγιο
- Semibold (600) σε κανονικό και πλάγιο
Κάθε στυλ γραμματοσειράς είναι διαθέσιμο σε μορφές WOFF2, WOFF και TrueType από τους διακομιστές περιουσιακών στοιχείων του Guardian.Ο ιστότοπος του Guardian χρησιμοποιεί συγκεκριμένες γραμματοσειρές για τους τίτλους και τους επικεφαλίδες του. Αυτές περιλαμβάνουν την Guardian Headline Full σε έντονα, έντονα πλάγια, μαύρα και μαύρα πλάγια στυλ, καθώς και την Guardian Titlepiece σε έντονο. Κάθε γραμματοσειρά είναι διαθέσιμη σε πολλαπλές μορφές αρχείων όπως woff2, woff και truetype για συμβατότητα.
Για την ενότητα του καρουζέλ, ο τίτλος εμφανίζεται σε λευκό κείμενο χρησιμοποιώντας τη γραμματοσειρά Guardian Text Sans Web, με μέγεθος 17px και μεσαίο βάρος. Τοποθετείται απόλυτα και περιλαμβάνει έναν σύνδεσμο με στυλ σε φωτεινό πράσινο χρώμα, με έντονο βάρος και χωρίς υπογράμμιση.
Το ίδιο το καρουζέλ είναι ένα οριζόντια κύλισης περιέκτης που "σπρώχνει" τα αντικείμενα στη θέση τους καθώς κάνετε κύλιση, με ομαλή κύλιση από προεπιλογή εκτός εάν ο χρήστης προτιμά μειωμένη κίνηση. Αποκρύπτει τις μπάρες κύλισης και έχει κενό 10px μεταξύ των αντικειμένων.
Κάθε κάρτα στο καρουζέλ έχει πλάτος 310px και ύψος 160px, με λευκό φόντο και μια εικόνα στα δεξιά που κλιμακώνεται για να ταιριάζει. Ο περιέκτης εικόνας είναι 120px επί 150px με γκρι φόντο, και οι εικόνες μεγενθύνονται ελαφρά όταν το ποντίκι περνά από πάνω, εκτός εάν προτιμάται μειωμένη κίνηση. Οι κάρτες περιλαμβάνουν padding και εμφανίζονται ως εύκαμπτοι περιέκτες, ευθυγραμμίζοντας το περιεχόμενο στο κάτω μέρος.Στο στοιχείο του καρουζέλ, ο περιέκτης εικόνας της κάρτας δεν έχει εφέ μετάβασης. Ο περιέκτης περιεχομένου μέσα σε κάθε κάρτα ρυθμίζεται ως εύκαμπτη διάταξη στήλης. Οι επικεφαλίδες και οι παράγραφοι μέσα στον περιέκτη περιεχομένου έχουν στυλ με σκούρο γκρι χρώμα και χωρίς διακόσμηση κειμένου. Οι επικεφαλίδες χρησιμοποιούν μια συγκεκριμένη στοίβα γραμματοσειρών serif, έχουν μέγεθος γραμματοσειράς 24px, ύψος γραμμής 115%, κανονικό βάρος και διαφανή κάτω περίγραμμα. Οι παράγραφοι χρησιμοποιούν μια στοίβα γραμματοσειρών sans-serif με μέγεθος γραμματοσειράς 14px και ύψος γραμμής 115%, με την πρώτη παράγραφο σε έντονο.
Όταν επιλέγεται μια κάρτα, η εικόνα της κλιμακώνεται κατά 20%. Οι απενεργοποιημένες κάρτες εμφανίζουν μια επικάλυψη "Coming soon" με έντονο κείμενο πάνω από ένα ημιδιαφανές λευκό φόντο, τοποθετημένη πάνω αριστερά.
Η ενότητα ελέγχου είναι μια εύκαμπτη σειρά με στοίχιση space-between και περιλαμβάνει κείμενο σελιδοποίησης σε λευκό, χρησιμοποιώντας γραμματοσειρά sans-serif 12px. Τα κουμπιά ελέγχου είναι κυκλικά, με διάμετρο 40px, με γκρι περίγραμμα και διαφανές φόντο, που περιέχουν εικονίδια 24px. Το εικονίδιο του πρώτου κουμπιού είναι οριζόντια αναστραμμένο.
Οι όψεις γραμματοσειράς για την Guardian Headline Full ορίζονται με ελαφριές, ελαφριές πλάγιες, κανονικές και κανονικές πλάγιες παραλλαγές, προερχόμενες από αρχεία woff2, woff και ttf.Η οικογένεια γραμματοσειρών Guardian Headline Full περιλαμβάνει διάφορα στυλ και βάρη, καθένα από τα οποία ορίζεται με συγκεκριμένα αρχεία πηγής σε μορφές WOFF2, WOFF και TrueType. Ακολουθούν οι λεπτομέρειες:
- Regular Italic: βάρος 400, πλάγιο στυλ
- Medium: βάρος 500, κανονικό στυλ
- Medium Italic: βάρος 500, πλάγιο στυλ
- Semibold: βάρος 600, κανονικό στυλ
- Semibold Italic: βάρος 600, πλάγιο στυλ
- Bold: βάρος 700, κανονικό στυλ
- Bold Italic: βάρος 700, πλάγιο στυλ
- Black: βάρος 900, κανονικό στυλ
- Black Italic: βάρος 900, πλάγιο στυλ
Όλα τα αρχεία γραμματοσειρών φιλοξενούνται στις καθορισμένες διευθύνσεις URL από τον τομέα περιουσιακών στοιχείων του Guardian.@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;
}Αυτός ο κώδικας CSS ορίζει διάφορα στυλ γραμματοσειράς για την οικογένεια γραμματοσειρών "Guardian Headline Full". Περιλαμβάνει διαφορετικά βάρη και στυλ (κανονικά και πλάγια) που κυμαίνονται από κανονικό (400) έως μαύρο (900). Κάθε στυλ καθορίζεται με πολλαπλές μορφές αρχείων (WOFF2, WOFF και TrueType) για διαχρονική συμβατότητα προγραμμάτων περιήγησης, όλα προέρχονται από τον διακομιστή περιουσιακών στοιχείων του Guardian.Αυτό το κείμενο ορίζει προσαρμοσμένες γραμματοσειρές και στυλ για μια ιστοσελίδα. Καθορίζει δύο γραμματοσειρές: την Guardian Headline σε μαύρο πλάγιο με βάρος 900, και την Guardian Titlepiece σε έντονο με βάρος 700, και οι δύο φορτώνονται από συγκεκριμένες διευθύνσεις URL σε διάφορες μορφές.
Περιλαμβάνει επίσης κανόνες CSS για κουμπιά, όπως ένα κυκλικό κουμπί που κλιμακώνεται ελαφρά όταν το ποντίκι περνάει από πάνω και έχει ένα δακτύλιο εστίασης. Υπάρχει ένα κουμπί "explore" για κάλεσμα σε δράση με συγκεκριμένο padding, περίγραμμα και στυλ κειμένου.
Επιπλέον, ο κώδικας ρυθμίζει μια γραμμή προόδου που αλλάζει πλάτος και έχει διαφορετικά χρώματα φόντου, μαζί με προσαρμογές ανταποκρινόμενου σχεδιασμού για διάφορα μεγέθη οθόνης. Ένας περιέκτης κουμπιού globe έχει στυλ για να είναι κολλητός και ορατός μόνο υπό συγκεκριμένες συνθήκες, με διαφορετικές διατάξεις για συσκευές Android και iOS.
Τέλος, ορίζει ένα στοιχείο βέλους τίτλου ως κυκλικό εικονίδιο με πράσινο περίγραμμα και κεντραρισμένο περιεχόμενο.Αυτός ο κώδικας CSS ορίζει στυλ για μια ιστοσελίδα, συμπεριλαμβανομένων:
- Κεντραρίσματος στοιχείων με την κλάση "title-arrow"
- Ρύθμισης εικόνων μέσα στο "title-arrow" σε πλήρες πλάτος και ύψος
- Εφαρμογής φίλτρων αντιστροφής χρώματος για σκοτεινή λειτουργία σε συσκευές iOS και Android
- Διαμόρφωσης της συμπεριφοράς κύλισης χρησιμοποιώντας τη βιβλιοθήκη ομαλής κύλισης Lenis
- Φόρτωσης πολλαπλών βαρών και στυλ γραμματοσειράς για τη γραμματοσειρά "Guardian Headline Full" από τους διακομιστές του Guardian
Ο κώδικας χειρίζεται ανταποκρινόμενο σχε
