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

Compare commits

base: studio-variable:0a346040a2ede614836660830863aa8bcbbfe122
Branches Tags
studio-variable:main
...
compare: studio-variable:44912c1d2f8fdcd8b1946a26448719812f118faf
Branches Tags
studio-variable:main

2 commits
0a346040a2 ... 44912c1d2f

Author SHA1 Message Date
isUnknown
44912c1d2f Fix: Play mobile layout adjustments
All checks were successful
Deploy / Deploy to Production (push) Successful in 23s
Details 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-03-13 09:21:50 +01:00
isUnknown
4eb495c021 Refactor: header sémantique + backdrop limité à expertise/about/blog 
- 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>
 2026-03-13 09:06:14 +01:00
4 changed files with 57 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

1
site/blueprints/pages/game.yml
View file

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

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 {

14
src/views/Play.svelte
View file

@ -438,11 +438,21 @@
}
.play-featured {
grid-area: 3/2 / span 12 / span 18;
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;
}
.play-carousel {
grid-area: 16/2 / span 3 / span 18;
grid-area: 14/4 / span 3 / span 13;
}
}

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 {