Elementet med klassen "canvas.svelte-o3oskp" er satt til å vises som en blokk.
En tilpasset skrifttype kalt "Guardian Headline Full" er definert med ulike vekter og stiler:
- Lett (300) i normal og kursiv
- Normal (400) i normal og kursiv
- Medium (500) i normal og kursiv
- Halvfet (600) i normal og kursiv
Hver skriftstil er tilgjengelig i WOFF2-, WOFF- og TrueType-formater fra Guardians asset-servere. Guardian-nettstedet bruker spesifikke skrifttyper for sine overskrifter og titler. Disse inkluderer Guardian Headline Full i fet, fet kursiv, svart og svart kursiv stil, samt Guardian Titlepiece i fet stil. Hver skrifttype er tilgjengelig i flere filformater som woff2, woff og truetype for kompatibilitet.
For karusellseksjonen vises tittelen i hvit tekst med Guardian Text Sans Web-skrifttypen, med en størrelse på 17px og medium vekt. Den er plassert absolutt og inkluderer en lenke stilert i lysegrønt med fet vekt og ingen understreking.
Selve karusellen er en horisontalt rullende beholder som fester elementer på plass mens du blar, med jevn scrolling som standard med mindre brukeren foretrekker redusert bevegelse. Den skjuler rullefelt og har et mellomrom på 10px mellom elementer.
Hvert kort i karusellen er 310px bredt og 160px høyt, med hvit bakgrunn og et bilde til høyre som skalere for å passe. Bildebeholderen er 120px ganger 150px med grå bakgrunn, og bilder zoomer litt inn ved sveving med mindre redusert bevegelse er foretrukket. Kort inkluderer padding og vises som fleksible beholdere, og justerer innholdet nederst. I karusellkomponenten har kortets bildebeholder ingen overgangseffekt. Innholdsbeholderen i hvert kort er satt opp som en fleksibel kolonneoppsett. Overskrifter og avsnitt inni innholdsbeholderen er stilert med en mørkegrå farge og ingen tekstdekorasjon. Overskrifter bruker en spesifikk serif-skriftstabel, har en skriftstørrelse på 24px, 115% linjehøyde, normal vekt og en gjennomsiktig bunnkant. Avsnitt bruker en sans-serif-skriftstabel med en skriftstørrelse på 14px og 115% linjehøyde, med det første avsnittet i fet stil.
Når et kort er valgt, skal bildet opp med 20%. Deaktiverte kort viser et "Kommer snart"-overlegg i fet tekst over en delvis gjennomsiktig hvit bakgrunn, plassert øverst til venstre.
Kontrollseksjonen er en fleksibel rad med mellomrom-mellom-justering og inkluderer pagineringstekst i hvit, med en 12px sans-serif-skrifttype. Kontrollknapper er sirkulære, 40px i diameter, med en grå kant og gjennomsiktig bakgrunn, og inneholder 24px-ikoner. Den første knappens ikon er horisontalt speilvendt.
Skrifttyper for Guardian Headline Full er definert med lette, lette kursiv, vanlige og vanlige kursiv varianter, hentet fra woff2-, woff- og ttf-filer. Guardian Headline Full-skriftfamilien inkluderer ulike stiler og vekter, hver definert med spesifikke kildefiler i WOFF2-, WOFF- og TrueType-formater. Her er detaljene:
- Normal kursiv: vekt 400, kursiv stil
- Medium: vekt 500, normal stil
- Medium kursiv: vekt 500, kursiv stil
- Halvfet: vekt 600, normal stil
- Halvfet kursiv: vekt 600, kursiv stil
- Fet: vekt 700, normal stil
- Fet kursiv: vekt 700, kursiv stil
- Svart: vekt 900, normal stil
- Svart kursiv: vekt 900, kursiv stil
Alle skriftfiler er hostet på de spesifiserte URL-ene fra Guardians assets-domene.@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;
}Denne CSS-koden definerer flere skriftstiler for "Guardian Headline Full"-skriftfamilien. Den inkluderer ulike vekter og stiler (normal og kursiv) fra normal (400) til svart (900). Hver stil er spesifisert med flere filformater (WOFF2, WOFF og TrueType) for tverrbrowser kompatibilitet, alle hentet fra Guardians asset-server. Denne teksten definerer tilpassede skrifttyper og stiler for en nettside. Den spesifiserer to skrifttyper: Guardian Headline i svart kursiv med en vekt på 900, og Guardian Titlepiece i fet med en vekt på 700, begge lastet fra spesifikke URL-er i ulike formater.
Den inkluderer også CSS-regler for knapper, som en sirkulær knapp som skalere opp litt når den holdes over og har en fokusring. Det er en "utforsk"-handlingsknapp med spesifikk padding, kantlinje og tekststiler.
I tillegg setter koden opp en fremdriftslinje som endrer bredde og har forskjellige bakgrunnsfarger, sammen med responsiv designtilpasninger for ulike skjermstørrelser. En globus-knapp-innpakning er stilet til å være sticky og bare synlig under visse forhold, med forskjellige oppsett for Android- og iOS-enheter.
Til slutt definerer den et tittelpil-element som et sirkulært ikon med en grønn kantlinje og sentrert innhold. Denne CSS-koden definerer stiler for en nettside, inkludert:
- Sentrering av elementer med klassen "title-arrow"
- Setter bilder inni "title-arrow" til full bredde og høyde
- Anvender fargeinversjonsfilter for mørk modus på iOS- og Android-enheter
- Konfigurerer rullende atferd ved bruk av Lenis jevn rulling-bibliotek
- Laster flere skriftvekter og stiler for "Guardian Headline Full"-skrifttypen fra Guardians servere
Koden håndterer responsivt design, tilgjengelighetsfunksjoner og typografi for en nyhetsnettstedsoppsett. Guardian-nettstedet bruker spesifikke skrifttyper for sine overskrifter og titler, og laster dem fra sine servere i ulike formater som WOFF2, WOFF og TrueType. Disse skrifttypene inkluderer ulike stiler og vekter, som halvfet, fet og svart, i både vanlige og kursiv versjoner.
For interaktivt innhold tilpasses oppsettet basert på skjermstørrelse. På bredere skjermer flyttes hovedkolonnen til venstre med økende marger, mens elementer som atomer, showcase og immersivt innhold har satt maksimumsbredder som endres med visningsporten. På mindre skjermer utvides immersive elementer til full bredde, og justeringer gjøres for rullefelt for å sikre riktig justering. Denne teksten ser ut til å være CSS-kode for styling av en nettsideoppsett. Den definerer stiler for ulike skjermstørrelser, farger, mellomrom og interaktive elementer. Koden setter maksimumsbredder for innholdsområder, lager kantlinjer, definerer fargevariabler for ulike elementer som lenker og bakgrunner, og håndterer hvordan siden vises når skript er aktivert eller deaktivert. Den inkluderer også spesifikk styling for overskrifter, avsnitt og lister i hovedinnholdskolonnen, og justerer marger og padding for ulike enheter. Overskriftens avsnittslenker har en grønn understrekning som forskyver 4px fra teksten. Ved sveving blir understrekningen mørk.
Overskriftseksjonen har en subtil grønn stripebakgrunn og sikrer at tittelen ikke har topppadding. Tittellenkene er stilet i en spesifikk skrifttype, størrelse 38px med en lys grå farge og jevne overganger. Ved sveving over dem fjernes understrekninger, fargen endres til mørk, og kontrasten på et pilikon økes. Hvis reduksjon av bevegelse foretrekkes, deaktiveres overganger. Ikke-lenke spenn i tittelen er skjult.
Standfirst-området (underoverskrift) har ekstra bunnpadding og bruker samme skrifttype og størrelse som tittelen for sine avsnitt.
Animasjoner kontrollerer inntoningen av tittelen og standfirst når de kommer inn i synsfeltet, med tittelen som toner inn først. Disse animasjonene hoppes over hvis redusert bevegelse er aktivert eller skripting ikke er tilgjengelig.
Det første inline-elementet er begrenset til et 4:5-aspektforhold med bildet beskjært til toppen. Overskriftseksjonen har bunnpadding og stiler hovedoverskriften med spesifikk typografi.
Figurer har bildetekster plassert nederst med en delvis gjennomsiktig mørk bakgrunn og lys tekst, og skjuler eventuelle spenn inni.
Linjer vises ikke, og metaseksjonen har en tynn toppkantlinje. Denne teksten ser ut til å være CSS-kode for styling av en nettside, sannsynligvis for en artikkeloppsett. Den definerer ulike visuelle egenskaper som marger, skrifttyper, farger og responsiv atferd for ulike skjermstørrelser. Koden inkluderer spesifikke regler for elementer som artikkelens kropp, bilder, bildetekster og sosiale medie-lenker, og justerer deres utseende basert på enhetsbredde og brukerpreferanser for redusert bevegelse. CSS-en definerer et rutenettoppsett for interaktivt innhold med spesifikke kolonnestørrelser og navngitte områder. Den justerer oppsettet for større skjerm
