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

Refactor: header sémantique + backdrop limité à expertise/about/blog

Browse source 
- Header : <nav> enveloppée dans <header> (landmark sémantique)
- Backdrop navbar restreint aux slides about et blog (scroll > 100px)
- Portfolio : $effect navbar backdrop supprimé + import navigation retiré

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-13 09:06:14 +01:00
parent 0a346040a2
commit 4eb495c021
2 changed files with 44 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/layout/Header.svelte
View file

@ -26,9 +26,11 @@
navigation.toggleMenu()
}
const scrollableSlides = new Set(['about', 'blog'])
onMount(() => {
function onScroll(e) {
if (e.target?.classList?.contains('page-scrollable')) {
if (e.target?.classList?.contains('page-scrollable') && scrollableSlides.has(slides.active?.id)) {
navigation.setScrolled(e.target.scrollTop > 100)
}
}
@ -37,44 +39,46 @@
})
</script>
<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>
<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>
<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 />
<Menu />
</header>
<style>
.navbar {

12
src/views/Portfolio.svelte
View file

@ -1,7 +1,6 @@
<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'
@ -18,10 +17,6 @@
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)
@ -241,10 +236,11 @@
color: var(--color-primary);
}
.portfolio-description {
font-size: var(--font-size-subtitle);
line-height: 1.5;
.portfolio-description :global(p) {
font-size: var(--font-size-paragraph-mobile);
line-height: 1.4;
opacity: 0.8;
letter-spacing: -2%;
}
.portfolio-keywords {