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

Feat: variables z-index + header au-dessus du menu

Browse source 
- style.css : plage z-index (--z-base, --z-content, --z-menu, --z-header, --z-cursor)
- Menu : show() au lieu de showModal() pour sortir du top-layer natif,
  Escape géré manuellement via keydown, z-index: var(--z-menu), position: fixed
- Header : z-index: var(--z-header) sur navbar, logo et toggle (toujours au-dessus du menu)
- Cursor/cursor.css : z-index: var(--z-cursor)
- Home : z-index: var(--z-content) sur home-text

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-19 13:59:19 +01:00
parent 3e9657430f
commit b7d825b2f0
6 changed files with 98 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/layout/Cursor.svelte
View file

@ -39,7 +39,7 @@
top: 0; top: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
z-index: 9999; z-index: var(--z-cursor);
} }
.cursor { .cursor {

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

@ -63,7 +63,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 50; z-index: var(--z-header);
font-family: "Danzza"; font-family: "Danzza";
font-size: var(--font-size-paragraph); font-size: var(--font-size-paragraph);
font-weight: normal; font-weight: normal;
@ -82,7 +82,7 @@
left: 5vh; left: 5vh;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 60; z-index: var(--z-header);
} }
.wg-logo { .wg-logo {
@ -112,7 +112,7 @@
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
z-index: 5; z-index: var(--z-content);
color: white; color: white;
transition: color 0.3s; transition: color 0.3s;
} }
@ -128,7 +128,7 @@
right: 5vh; right: 5vh;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 60; z-index: var(--z-header);
background: none; background: none;
border: none; border: none;
padding: 0; padding: 0;

142
src/components/layout/Menu.svelte
View file

@ -14,16 +14,15 @@
$effect(() => { $effect(() => {
if (!dialogEl) return if (!dialogEl) return
if (isMenuOpen) { if (isMenuOpen) {
dialogEl.showModal() dialogEl.show()
const onKeyDown = (e) => { if (e.key === 'Escape') navigation.closeMenu() }
window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown)
} else if (dialogEl.open) { } else if (dialogEl.open) {
dialogEl.close() dialogEl.close()
} }
}) })
function handleCancel() {
navigation.closeMenu()
}
function handleNavClick() { function handleNavClick() {
navigation.closeMenu() navigation.closeMenu()
// La navigation elle-même est gérée par le router via le <a href> // La navigation elle-même est gérée par le router via le <a href>
@ -50,81 +49,84 @@
<dialog <dialog
bind:this={dialogEl} bind:this={dialogEl}
id="main-menu" id="main-menu"
class="menu golden-grid" class="menu"
aria-label="Menu principal" aria-label="Menu principal"
oncancel={handleCancel}
> >
<div class="vertical-line-start"></div> <div class="menu-inner golden-grid">
<div class="vertical-line vertical-line-col8"></div> <div class="vertical-line-start"></div>
<div class="vertical-line-center"></div> <div class="vertical-line vertical-line-col8"></div>
<div class="vertical-line vertical-line-col14"></div> <div class="vertical-line-center"></div>
<div class="vertical-line-end"></div> <div class="vertical-line vertical-line-col14"></div>
<div class="vertical-line-end"></div>
<!-- Navigation --> <!-- Navigation -->
<nav class="menu-list font-face-terminal" aria-label="Navigation principale"> <nav class="menu-list font-face-terminal" aria-label="Navigation principale">
<p class="menu-title">{t('menu')}</p> <p class="menu-title">{t('menu')}</p>
<ol class="menu-nav-list font-face-danzza-bold"> <ol class="menu-nav-list font-face-danzza-bold">
{#each slides.all as slide, i} {#each slides.all as slide, i}
<li class="menu-nav-item"> <li class="menu-nav-item">
<a <a
href={slide.path} href={slide.path}
onclick={handleNavClick} onclick={handleNavClick}
class="menu-nav-link" class="menu-nav-link"
class:active={activeId === slide.id} class:active={activeId === slide.id}
aria-current={activeId === slide.id ? 'page' : undefined} aria-current={activeId === slide.id ? 'page' : undefined}
> >
<span class="menu-nav-number font-face-danzza-medium"> <span class="menu-nav-number font-face-danzza-medium">
{String(i + 1).padStart(2, '0')} {String(i + 1).padStart(2, '0')}
</span> </span>
<span class="menu-nav-label"> <span class="menu-nav-label">
{getTitle(slide)} {getTitle(slide)}
</span> </span>
</a> </a>
</li> </li>
{/each} {/each}
</ol> </ol>
</nav> </nav>
<!-- Connect --> <!-- Connect -->
<aside class="menu-connect" aria-label="Contact"> <aside class="menu-connect" aria-label="Contact">
<p class="menu-connect-title">{t('connect')}</p> <p class="menu-connect-title">{t('connect')}</p>
{#if contact.address} {#if contact.address}
<p class="menu-connect-label">{t('address')}</p> <p class="menu-connect-label">{t('address')}</p>
<p class="menu-connect-info">{@html contact.address}</p> <p class="menu-connect-info">{@html contact.address}</p>
{/if} {/if}
{#if contact.email} {#if contact.email}
<p class="menu-connect-label">MAIL</p> <p class="menu-connect-label">MAIL</p>
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email"> <a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
{contact.email} {contact.email}
</a>
{/if}
{#if contact.socials?.length}
<p class="menu-connect-label">{t('socials')}</p>
{#each contact.socials as social}
<a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
{social.label}
</a> </a>
{/each} {/if}
{/if}
{#if contact.legalNotice} {#if contact.socials?.length}
<a <p class="menu-connect-label">{t('socials')}</p>
href={contact.legalNotice} {#each contact.socials as social}
download <a href={social.url} class="menu-connect-info menu-connect-social" target="_blank" rel="noopener noreferrer">
class="menu-connect-legal" {social.label}
> </a>
{t('legal')} {/each}
</a> {/if}
{/if}
</aside> {#if contact.legalNotice}
<a
href={contact.legalNotice}
download
class="menu-connect-legal"
>
{t('legal')}
</a>
{/if}
</aside>
</div>
</dialog> </dialog>
<style> <style>
/* Dialog reset + full screen */ /* Dialog reset + full screen */
dialog.menu { dialog.menu {
position: fixed;
inset: 0;
border: none; border: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -132,10 +134,16 @@
max-height: 100vh; max-height: 100vh;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: var(--z-menu);
background-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9);
color: white; color: white;
} }
.menu-inner {
width: 100%;
height: 100%;
}
dialog.menu::backdrop { dialog.menu::backdrop {
display: none; display: none;
} }

17
src/style.css
View file

@ -1,3 +1,18 @@
/* Z-INDEX SCALE
* --z-base : éléments décoratifs (lignes verticales, bg)
* --z-content : contenu de slides (textes, overlays légers)
* --z-menu : overlay menu plein écran
* --z-header : barre de navigation (toujours au-dessus du menu)
* --z-cursor : curseur personnalisé (toujours au-dessus de tout)
*/
:root {
--z-base: 1;
--z-content: 5;
--z-menu: 100;
--z-header: 200;
--z-cursor: 9999;
}
/* FONT SIZING SYSTEM - Consistent typography across the site */ /* FONT SIZING SYSTEM - Consistent typography across the site */
:root { :root {
/* Base font sizes for desktop */ /* Base font sizes for desktop */
@ -224,7 +239,7 @@ body {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 99999; z-index: var(--z-cursor);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
border-radius: 50%; border-radius: 50%;

2
src/styles/cursor.css
View file

@ -5,7 +5,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 99999; z-index: var(--z-cursor);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
border-radius: 50%; border-radius: 50%;

2
src/views/Home.svelte
View file

@ -135,7 +135,7 @@
/* Text overlay */ /* Text overlay */
.home-text { .home-text {
z-index: 5; z-index: var(--z-content);
grid-area: 9/1 / span 6 / span 20; grid-area: 9/1 / span 6 / span 20;
width: 100%; width: 100%;
justify-self: center; justify-self: center;