Luokan "canvas.svelte-o3oskp" omaava elementti on asetettu näkymään lohkona.
Mukautettu fontti nimeltä "Guardian Headline Full" on määritelty useilla painoilla ja tyyleillä:
- Light (300) normaalina ja kursiivina
- Regular (400) normaalina ja kursiivina
- Medium (500) normaalina ja kursiivina
- Semibold (600) normaalina ja kursiivina
Jokainen fonttityyli on saatavilla WOFF2-, WOFF- ja TrueType-muodoissa Guardianin resurssipalvelimilta. The Guardian -verkkosivusto käyttää otsikoihinsa ja otsakkeisiinsa erityisiä fontteja. Näihin kuuluvat Guardian Headline Full lihavoidussa, lihavoidussa kursiivissa, mustassa ja mustassa kursiivissa -tyyleissä, sekä Guardian Titlepiece lihavoituna. Jokainen fontti on saatavilla useissa tiedostomuodoissa kuten woff2, woff ja truetype yhteensopivuuden vuoksi.
Karuselliosiossa otsikko näkyy valkoisella tekstillä käyttäen Guardian Text Sans Web -fonttia, kooltaan 17px ja keskiraskaana. Se on sijoitettu absoluuttisesti ja sisältää linkin, joka on tyylitelty kirkkaanvihreäksi, lihavoidulla painolla ja ilman alleviivausta.
Karuselli itsessään on vaakasuunnassa vierittävä säiliö, joka nappailee kohteet paikoilleen vierittäessä, ja siinä on oletusarvoisesti tasainen vieritys, ellei käyttäjä suosi vähennettyä liikettä. Se piilottaa vierityspalkit ja kohteiden välillä on 10px väli.
Jokainen karusellin kortti on 310px leveä ja 160px korkea, ja siinä on valkoinen tausta ja kuva oikealla puolella, joka skaalautuu sopimaan. Kuvan säiliö on 120px x 150px harmaalla taustalla, ja kuvat zoomautuvat hieman kohdattaessa, ellei vähennettyä liikettä suosita. Kortit sisältävät täytön ja näkyvät flex-säiliöinä, kohdistaen sisällön alareunaan.
Karusellikomponentissa kortin kuvasäiliöllä ei ole siirtymäefektiä. Kunkin kortin sisällönsäiliö on asetettu joustavaksi sarakkeeseen. Sisällönsäiliön sisällä olevat otsikot ja kappaleet on tyylitelty tummanharmaaksi ilman tekstin koristelua. Otsikot käyttävät erityistä serif-fonttikokoelmaa, niiden fonttikoko on 24px, rivikorkeus 115%, normaalipaino ja läpinäkyvä alareunus. Kappaleet käyttävät sans-serif-fonttikokoelmaa, fonttikoko 14px ja rivikorkeus 115%, ja ensimmäinen kappale on lihavoitu.
Kun kortti valitaan, sen kuva suurenee 20%. Poistetut kortit näyttävät "Coming soon" -päälliskirjoituksen lihavoidulla tekstillä puoliläpinäkyvän valkoisen taustan päällä, sijoitettuna vasempaan yläkulmaan.
Ohjauselementtien osa on joustava rivi, jossa on tasainen välistys, ja se sisältää sivutuksen tekstin valkoisella, käyttäen 12px sans-serif-fonttia. Ohjauspainikkeet ovat pyöreitä, halkaisijaltaan 40px, harmaalla reunuksella ja läpinäkyvällä taustalla, sisältäen 24px kuvakkeet. Ensimmäisen painikkeen kuvake on vaakasuunnassa käännetty.
Guardian Headline Full -fontin fonttikoot on määritelty light-, light italic-, regular- ja regular italic -muunnoksilla, jotka lähteenevät woff2-, woff- ja ttf-tiedostoista. Guardian Headline Full -fonttiperhe sisältää erilaisia tyylejä ja painoja, joista jokainen on määritelty tietyillä lähdetiedostoilla WOFF2-, WOFF- ja TrueType-muodoissa. Tässä yksityiskohdat:
- Regular Italic: paino 400, kursiivityyli
- Medium: paino 500, normaali tyyli
- Medium Italic: paino 500, kursiivityyli
- Semibold: paino 600, normaali tyyli
- Semibold Italic: paino 600, kursiivityyli
- Bold: paino 700, normaali tyyli
- Bold Italic: paino 700, kursiivityyli
- Black: paino 900, normaali tyyli
- Black Italic: paino 900, kursiivityyli
Kaikki fonttitiedostot sijaitsevat määritellyillä URLeilla Guardianin resurssialueella.@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;
}Tämä CSS-koodi määrittelee useita fonttityylejä "Guardian Headline Full" -fonttiperheelle. Se sisältää erilaisia painoja ja tyylejä (normaali ja kursiivi) vaihdellen regularista (400) mustaan (900). Jokainen tyyli on määritelty useilla tiedostomuodoilla (WOFF2, WOFF ja TrueType) yli selainten yhteensopivuuden vuoksi, ja kaikki lähteet ovat Guardianin resurssipalvelimelta.Tämä teksti määrittelee mukautettuja fontteja ja tyylejä verkkosivulle. Se määrittää kaksi fonttia: Guardian Headline mustana kursiivina painolla 900 ja Guardian Titlepiece lihavoituna painolla 700, molemmat ladattu tietyistä URLeista eri muodoissa.
Se sisältää myös CSS-säännöt painikkeille, kuten pyöreä painike, joka suurenee hieman kohdattaessa ja jossa on tarkennusrengas. Siinä on "explore" -toimintakehotepainike tietyllä täytöllä, reunuksella ja tekstityyleillä.
Lisäksi koodi asettaa etenemispalkin, joka muuttaa leveyttään ja jossa on erilaisia taustavärejä, sekä mukautuvia suunnittelusäätöjä eri näytön koille. Maapallon painikkeen wrapper on tyylitelty kiinnittyväksi ja näkyväksi vain tietyissä olosuhteissa, eri asetteluilla Android- ja iOS-laitteille.
Lopuksi se määrittelee otsikkonuolielementin pyöreäksi kuvakkeeksi, jossa on vihreä reuna ja keskitetty sisältö.Tämä CSS-koodi määrittelee tyylejä verkkosivulle, mukaan lukien:
- Elementtien keskittäminen luokalla "title-arrow"
- Kuvien asettaminen "title-arrow" -sisällä täyteen leveyteen ja korkeuteen
- Väriinversiosuodattimien käyttö tummassa tilassa iOS- ja Android-laitteissa
- Vierityskäyttäytymisen määrittäminen Lenis-tasaisen vierityksen kirjastolla
- Useiden fontin painojen ja tyylien lataaminen "Guardian Headline Full" -kirjasinlajille Guardianin palvelimilta
Koodi käsittelee mukautuvaa suunnittelua, saavutettavuusominaisuuksia ja typografiaa uutissivuston asettelua varten.The Guardian -verkkosivusto käyttää erityisiä fontteja otsikoihinsa ja otsakkeisiinsa, lataen ne palvelimiltaan eri muodoissa kuten WOFF2, WOFF ja TrueType. Nämä fontit sisältävät erilaisia tyylejä ja painoja, kuten semibold, bold ja black, sekä tavallisina että kursiiviversioina.
Interaktiivista sisältöä varten asettelu mukautuu näytön koon mukaan. Leveämmillä näytöillä pääsarake siirtyy vasemmalle kasvavilla marginaaleilla, kun taas elementit kuten atomit, esittelyt ja uppottava sisältö ovat asetetuilla enimmäisleveyksillä, jotka muuttuvat näkymän mukana. Pienemmillä näytöillä uppottavat elementit laajenevat täyteen leveyteen, ja vierityspalkkeja säädetään oikean linjauksen varmistamiseksi.Tämä teksti näyttää olevan CSS-koodia verkkosivun asettelun tyylittelyyn. Se määrittelee tyylejä eri näytön koille, väreille, väleille ja interaktiivisille elementeille. Koodi asettaa enimmäisleveyksiä sisältöalueille, luo reunuksia, määrittelee värimuuttujia eri elementeille kuten linkeille ja taustoille, ja käsittelee sivun ulkonäön, kun komentosarjat ovat käytössä tai pois käytöstä. Se sisältää myös erityisiä tyylejä otsakkeille, kappaleille ja luetteloille pääsisältösarakkeen sisällä, säädellen marginaaleja ja täyttöjä eri laitteille.Otsikkowrapperin kappalelinkeillä on vihreä alleviivaus, joka siirtyy 4px tekstistä. Kohdettaessa alleviivaus muuttuu tummaksi.
Otsikko-osassa on hieno vihreä raidallinen tausta ja varmistetaan, että otsikossa ei ole yläreunan täyttöä. Otsikkolinkit on tyylitelty tietyllä fontilla, koolla 38px, vaaleanharmaa väri ja tasaiset siirtymät. Niiden kohdistaminen poistaa alleviivaukset, muuttaa värin tummaksi ja lisää nuolikuvakkeen kontrastia. Jos liikkeen vähentämistä suositaan, siirtymät poistetaan käytöstä. Otsikon linkittömät jänte
