A "canvas.svelte-o3oskp" osztályú elem blokk-ként jelenik meg.
Egy "Guardian Headline Full" nevű egyéni betűtípust határoznak meg különböző vastagságokkal és stílusokkal:
- Világos (300) normál és dőlt változatban
- Normál (400) normál és dőlt változatban
- Közepes (500) normál és dőlt változatban
- Félkövér (600) normál és dőlt változatban
Minden betűtípus-stílus elérhető WOFF2, WOFF és TrueType formátumban a Guardian szervereiről. A Guardian weboldala specifikus betűtípusokat használ a címsorokhoz és címekhez. Ezek közé tartozik a Guardian Headline Full félkövér, félkövér dőlt, fekete és fekete dőlt stílusokban, valamint a Guardian Titlepiece félkövérben. Minden betűtípus több fájlformátumban is elérhető, mint a woff2, woff és truetype a kompatibilitás érdekében.
A karuszel szekcióban a cím fehér szövegként jelenik meg a Guardian Text Sans Web betűtípussal, 17px méretben és közepes vastagsággal. Abszolút pozícióban van, és tartalmaz egy élénkzölden stílusozott linket félkövér vastagsággal és aláhúzás nélkül.
Maga a karuszel egy vízszintesen görgethető tároló, amely a görgetés során a pozícióba rögzíti az elemeket, alapértelmezés szerint sima görgetéssel, kivéve ha a felhasználó csökkentett mozgást preferál. Elrejti a görgetősávokat, és 10px rés van az elemek között.
A karuszel minden kártyája 310px széles és 160px magas, fehér háttérrel és egy jobb oldali képpel, amely az arányokhoz igazodik. A kép tároló 120x150px méretű szürke háttérrel, és a képek enyhén nagyítanak rámutatáskor, kivéve ha csökkentett mozgás van beállítva. A kártyák tartalmaznak paddinget és flex tárolókként jelennek meg, tartalmat az alján igazítva.
A karuszel komponensben a kártya kép tárolóján nincs átmeneti hatás. Az egyes kártyákon belüli tartalom tároló rugalmas oszlop elrendezésként van beállítva. A tartalom tárolón belüli címsorok és bekezdések sötétszürke színnel és szövegdekoráció nélkül vannak stílusozva. A címsorok specifikus serif betűtípus-csoportot használnak, 24px betűmérettel, 115%-os soremagassággal, normál vastagsággal és átlátszó alsó szegéllyel. A bekezdések sans-serif betűtípus-csoportot használnak 14px betűmérettel és 115%-os soremagassággal, az első bekezdés félkövérrel.
Amikor egy kártya ki van választva, képe 20%-kal nagyobbodik. A letiltott kártyák "Hamarosan" átfedést jelenítenek meg félkövér szöveggel félig átlátszó fehér háttérrel, bal felső pozícióban.
A vezérlőszekció egy rugalmas sor, térköz elrendezéssel, és tartalmaz fehér lapozószöveget, 12px sans-serif betűtípussal. A vezérlőgombok kör alakúak, 40px átmérőjűek, szürke szegéllyel és átlátszó háttérrel, 24px ikonokat tartalmazva. Az első gomb ikonja vízszintesen tükrözött.
A Guardian Headline Full betűkép stílusai világos, világos dőlt, normál és normál dőlt változatokban vannak definiálva, woff2, woff és ttf fájlokból származtatva. A Guardian Headline Full betűtípus-család különböző stílusokat és vastagságokat tartalmaz, mindegyik specifikus forrásfájlokkal definiálva WOFF2, WOFF és TrueType formátumban. Itt a részletek:
- Normál dőlt: 400 vastagság, dőlt stílus
- Közepes: 500 vastagság, normál stílus
- Közepes dőlt: 500 vastagság, dőlt stílus
- Félkövér: 600 vastagság, normál stílus
- Félkövér dőlt: 600 vastagság, dőlt stílus
- Félkövér: 700 vastagság, normál stílus
- Félkövér dőlt: 700 vastagság, dőlt stílus
- Fekete: 900 vastagság, normál stílus
- Fekete dőlt: 900 vastagság, dőlt stílus
Minden betűtípusfájl a megadott URL-eken érhető el a Guardian tartományáról.
@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;
}
Ez a CSS kód több betűstílust definiál a "Guardian Headline Full" betűtípus-családhoz. Különböző vastagságokat és stílusokat tartalmaz (normál és dőlt) a normál (400) és fekete (900) között. Minden stílus több fájlformátummal (WOFF2, WOFF és TrueType) van megadva a böngészőkompatibilitás érdekében, mind a Guardian szerveréről származik.
Ez a szöveg egyéni betűtípusokat és stílusokat határoz meg egy weboldalhoz. Két betűtípust határoz meg: Guardian Headline fekete dőlt 900 vastagsággal és Guardian Titlepiece félkövér 700 vastagsággal, mindkettő specifikus URL-ekről töltődik különböző formátumokban.
CSS szabályokat is tartalmaz gombokhoz, például egy kör alakú gombot, amely enyhén nagyobbodik rámutatáskor és fókuszgyűrűvel rendelkezik. Van egy "felfedezés" felhívás gomb specifikus paddinggel, szegéllyel és szövegstílusokkal.
Ezen kívül a kód beállít egy folyamatjelző sávot, amely megváltoztatja szélességét és különböző háttérszínekkel rendelkezik, valamint reszponzív design beállításokat különböző képernyőméretekhez. Egy globusz gomb burkoló stílusa ragadóssá van állítva és csak bizonyos feltételek mellett látható, különböző elrendezésekkel Android és iOS eszközökhöz.
Végül definiál egy cím nyíl elemet kör alakú ikonként zöld szegéllyel és középre igazított tartalommal.
Ez a CSS kód stílusokat határoz meg egy weboldalhoz, beleértve:
- "title-arrow" osztályú elemek középre igazítását
- A "title-arrow" elemen belüli képek teljes szélességű és magasságú beállítását
- Színinverziós szűrők alkalmazását sötét módhoz iOS és Android eszközökön
- Görgetés viselkedés beállítását a Lenis sima görgetés könyvtár használatával
- Több betűvastagság és stílus betöltését a "Guardian Headline Full" betűtípushoz a Guardian szervereiről
A kód kezeli a reszponzív designot, akadálymentesítési funkciókat és tipográfiát egy hírportál elrendezéséhez.
A Guardian weboldala specifikus betűtípusokat használ a címsorokhoz és címekhez, szervereikről tölti le őket különböző formátumokban, mint WOFF2, WOFF és TrueType. Ezek a betűtípusok különböző stílusokat és vastagságokat tartalmaznak, mint félkövér, félkövér és fekete, mind normál és dőlt változatban.
Interaktív tartalomhoz az elrendezés a képernyőméret alapján igazodik. Szélesebb képernyőkön a fő oszlop balra tolódik növekvő margóval, míg az atomok, kiemelések és immerzív tartalom elemeknek beállított maximális szélessége van, amely a nézeti területtel változik. Kisebb képernyőkön az immerzív elemek teljes szélességűre bővülnek, és a görgetősávokhoz igazításokat végeznek a megfelelő elrendezés érdekében.
Ez a szöveg CSS kódnak tűnik egy weboldal elrendezésének stílusozásához. Stílusokat határoz meg különböző képernyőméretekhez, színekhez, térközökhöz és interaktív elemekhez. A kód beállítja a tartalomterülek maximális szélességét, szegélyeket hoz létre, színváltozókat határoz meg különböző elemekhez, mint linkek és hátterek, és kezeli, hogyan jelenik meg az oldal, ha a szkriptek engedélyezve vagy letiltva vannak. Speciális stílusozást is tartalmaz fejlécekhez, bekezdésekhez és
