studio-variable/world-game
3
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

closes #22
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
Details

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-21 09:03:11 +01:00
parent 875e4d63f5
commit 4803390a1f
25 changed files with 75 additions and 366 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/App.svelte
View file

@ -98,7 +98,7 @@
style="width: {wrapperWidth}; transform: {wrapperTransform}"
>
{#each slides.all as slide, i}
<section class="slide" class:active={i === slides.activeIndex} data-slide={slide.id}>
<section class="slide" class:active={i === slides.activeIndex} data-slide={slide.id} inert={i !== slides.activeIndex}>
{#if slide.loaded}
<svelte:component
this={templates[slide.template] ?? Default}

45
src/styles/a11y.css Normal file
View file

@ -0,0 +1,45 @@
a:focus-visible,
button:focus-visible {
border: none;
outline: 2px solid var(--color-primary);
}
a.navbar-logo:focus-visible {
outline-offset: 4px;
}
.button:focus-visible,
.lang-switcher:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
.play-carousel-item button:focus-visible {
outline: 4px solid #fff;
outline-offset: 4px;
border-radius: 3.4vw;
}
.play-carousel-item.active button:focus-visible {
outline-offset: 6px;
border-radius: 4.6vw;
}
.pagination-dot:focus-visible {
outline: 1px solid var(--color-primary);
outline-offset: 2px;
border-radius: 1rem;
}
.pagination-dot.active:focus-visible {
outline: 1px solid #fff;
}
.footer-bottom a,
.footer-col a {
outline-offset: 4px;
}
.footer-socials a:focus-visible {
outline: 2px solid #fff;
border-radius: 2px;
}

3
src/styles/buttons.css
View file

@ -1,5 +1,6 @@
button {
border: none;
border: 0px solid transparent;
outline: 0px solid transparent;
}
button[disabled] {

1
src/styles/index.css
View file

@ -8,3 +8,4 @@
@import "./cursor.css";
@import "./form.css";
@import "./utils.css";
@import "./a11y.css";

22
src/views/About.svelte
View file

@ -134,16 +134,18 @@
onclick={prevSlide}
>← BEFORE</button>
<div class="pagination-indicator">
<ul class="pagination-indicator">
{#each { length: totalSlides } as _, i}
<button
class="pagination-dot"
class:active={i === currentSlide}
aria-label="Slide {i + 1}"
onclick={() => goToSlide(i)}
></button>
<li>
<button
class="pagination-dot"
class:active={i === currentSlide}
aria-label="Slide {i + 1}"
onclick={() => goToSlide(i)}
></button>
</li>
{/each}
</div>
</ul>
<button
class="nav-button"
@ -326,6 +328,10 @@
opacity: 0.8;
}
.pagination-indicator li {
list-style: none;
}
/* Nav */
.nav-buttons {
display: flex;

12
src/views/Blog.svelte
View file

@ -135,18 +135,18 @@
{#if featured.intro}
<p class="collection-card-description">{featured.intro}</p>
{/if}
<a href="/blog/{featured.slug}" class="collection-card-readmore desktop-only">
<a href="/blog/{featured.slug}" class="collection-card-readmore desktop-only" tabindex="-1">
{t('read_article')} <span class="arrow">→</span>
</a>
</div>
{#if featured.cover}
<div class="collection-card-image collection-card-image--featured">
<a href="/blog/{featured.slug}">
<a href="/blog/{featured.slug}" tabindex="-1">
<img src={featured.cover} alt={featured.title} />
</a>
</div>
{/if}
<a href="/blog/{featured.slug}" class="collection-card-readmore mobile-only">
<a href="/blog/{featured.slug}" class="collection-card-readmore mobile-only" tabindex="-1">
{t('read_article')} <span class="arrow">→</span>
</a>
</article>
@ -160,18 +160,18 @@
<h2 class="collection-card-title">
<a href="/blog/{article.slug}">{article.title}</a>
</h2>
<a href="/blog/{article.slug}" class="collection-card-readmore desktop-only">
<a href="/blog/{article.slug}" class="collection-card-readmore desktop-only" tabindex="-1">
{t('read_article')} <span class="arrow">→</span>
</a>
</div>
{#if article.cover}
<div class="collection-card-image">
<a href="/blog/{article.slug}">
<a href="/blog/{article.slug}" tabindex="-1">
<img src={article.cover} alt={article.title} />
</a>
</div>
{/if}
<a href="/blog/{article.slug}" class="collection-card-readmore mobile-only">
<a href="/blog/{article.slug}" class="collection-card-readmore mobile-only" tabindex="-1">
{t('read_article')} <span class="arrow">→</span>
</a>
</article>

6
src/views/Home.svelte
View file

@ -50,6 +50,7 @@
playsinline
loop
preload="auto"
tabindex="-1"
id="home-video"
class="home-video home-video-desktop"
poster={data.backgroundVideoPoster ?? undefined}
@ -61,6 +62,7 @@
playsinline
loop
preload="auto"
tabindex="-1"
id="home-video-mobile"
class="home-video home-video-mobile"
poster={data.backgroundVideoMobilePoster ?? undefined}
@ -81,8 +83,6 @@
<button
class="button with-icon earth-icon home-cta"
onclick={handleExplore}
onkeypress={(e) => e.key === 'Enter' && handleExplore()}
tabindex="0"
>
{data.hero.ctaText}
</button>
@ -128,7 +128,7 @@
/* Text overlay */
.home-text {
z-index: var(--z-content);
grid-area: 9/1 / span 6 / span 20;
grid-area: 10/1 / span 6 / span 20;
width: 100%;
justify-self: center;
margin-top: 6vmax;

9
src/views/Play.svelte
View file

@ -285,7 +285,6 @@
alt=""
/>
{/if}
<span class="play-carousel-title">{game.title}</span>
</button>
</li>
{/each}
@ -456,16 +455,10 @@
.play-carousel-item.active button :global(picture img) {
object-fit: cover;
transition: all 0.4s var(--ease-standard);
border: 4px solid var(--color-primary);
border: 5px solid var(--color-primary);
border-radius: 25%;
}
.play-carousel-title {
font-size: var(--font-size-caption);
color: var(--color-text);
text-align: center;
}
/* --- Mobile (≤ 700px) --- */
@media (max-width: 700px) {
.game-preview {

4
src/views/WhitePapers.svelte
View file

@ -134,13 +134,13 @@
{#if item.intro}
<p class="collection-card-description">{item.intro}</p>
{/if}
<a href="/{pageUri}/{item.slug}" class="collection-card-readmore">
<a href="/{pageUri}/{item.slug}" class="collection-card-readmore" tabindex="-1">
{t('read_wp')} <span class="arrow">→</span>
</a>
</div>
{#if item.cover}
<div class="collection-card-image">
<a href="/{pageUri}/{item.slug}">
<a href="/{pageUri}/{item.slug}" tabindex="-1">
<img src={item.cover} alt={item.title} />
</a>
</div>