Compare commits

..

No commits in common. "44912c1d2f8fdcd8b1946a26448719812f118faf" and "0a346040a2ede614836660830863aa8bcbbfe122" have entirely different histories.

4 changed files with 46 additions and 57 deletions

View file

@ -55,7 +55,6 @@ columns:
- strike
- clear
- link
maxlength: 200
playLink:
label: Lien(s) pour jouer
help: Laissez vide pour afficher "à venir / coming soon"

View file

@ -26,11 +26,9 @@
navigation.toggleMenu()
}
const scrollableSlides = new Set(['about', 'blog'])
onMount(() => {
function onScroll(e) {
if (e.target?.classList?.contains('page-scrollable') && scrollableSlides.has(slides.active?.id)) {
if (e.target?.classList?.contains('page-scrollable')) {
navigation.setScrolled(e.target.scrollTop > 100)
}
}
@ -39,46 +37,44 @@
})
</script>
<header>
<nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
<a href="/" class="navbar-logo">
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
</a>
<nav class="navbar" class:navbar--open={isMenuOpen} class:navbar--scrolled={isScrolled && !isMenuOpen}>
<a href="/" class="navbar-logo">
<img src="/assets/img/GIF_world_game_planete.gif" alt="World Game" class="wg-logo" />
</a>
<ul class="navbar-list">
{#each menuItems as slide}
<li>
<a
href={slide.path}
class="navbar-item"
class:active={activeId === slide.id}
>
{getTitle(slide)}
</a>
</li>
{/each}
</ul>
<ul class="navbar-list">
{#each menuItems as slide}
<li>
<a
href={slide.path}
class="navbar-item"
class:active={activeId === slide.id}
>
{getTitle(slide)}
</a>
</li>
{/each}
</ul>
<button
class="navbar-toggle"
onclick={toggleMenu}
aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
</svg>
</button>
</nav>
<button
class="navbar-toggle"
onclick={toggleMenu}
aria-label={isMenuOpen ? t('close_menu') : t('open_menu')}
aria-expanded={isMenuOpen}
aria-controls="main-menu"
>
<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="2" fill="white" class="dot dot-tl" />
<circle cx="17" cy="7" r="2" fill="white" class="dot dot-tr" />
<circle cx="7" cy="17" r="2" fill="white" class="dot dot-bl" />
<circle cx="17" cy="17" r="2" fill="white" class="dot dot-br" />
<line x1="9" y1="9" x2="15" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
<line x1="15" y1="9" x2="9" y2="15" stroke="white" stroke-width="2.5" stroke-linecap="round" class="cross-line" />
</svg>
</button>
</nav>
<Menu />
</header>
<Menu />
<style>
.navbar {

View file

@ -438,21 +438,11 @@
}
.play-featured {
grid-area: 6/4/span 12/span 18;
justify-content: flex-start;
padding: 0 10px;
gap: 0;
}
.play-description {
margin-top: .8rem;
font-size: var(--font-size-paragraph-mobile);
line-height: 1.6;
font-weight: 400;
grid-area: 3/2 / span 12 / span 18;
}
.play-carousel {
grid-area: 14/4 / span 3 / span 13;
grid-area: 16/2 / span 3 / span 18;
}
}

View file

@ -1,6 +1,7 @@
<script>
import { onMount } from 'svelte'
import { slides } from '@state/slides.svelte'
import { navigation } from '@state/navigation.svelte'
import { createScrollNav } from '@composables/useScrollNav.svelte.js'
import GalleryAnimation from '@components/ui/GalleryAnimation.svelte'
import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
@ -17,6 +18,10 @@
const backgroundImage = $derived(data?.backgroundImage ?? null)
const currentProject = $derived(projects[currentIndex] ?? null)
$effect(() => {
if (isActive) navigation.setScrolled(currentIndex > 0)
})
// Capture du hash synchrone avant que tout effect puisse le modifier
const initialHash = window.location.hash.slice(1)
@ -236,11 +241,10 @@
color: var(--color-primary);
}
.portfolio-description :global(p) {
font-size: var(--font-size-paragraph-mobile);
line-height: 1.4;
.portfolio-description {
font-size: var(--font-size-subtitle);
line-height: 1.5;
opacity: 0.8;
letter-spacing: -2%;
}
.portfolio-keywords {