closes #22
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
875e4d63f5
commit
4803390a1f
25 changed files with 75 additions and 366 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue