Feat: variables z-index + header au-dessus du menu
- 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
parent
3e9657430f
commit
b7d825b2f0
6 changed files with 98 additions and 75 deletions
|
|
@ -39,7 +39,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
z-index: var(--z-cursor);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
z-index: var(--z-header);
|
||||
font-family: "Danzza";
|
||||
font-size: var(--font-size-paragraph);
|
||||
font-weight: normal;
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
left: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
z-index: var(--z-header);
|
||||
}
|
||||
|
||||
.wg-logo {
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
z-index: var(--z-content);
|
||||
color: white;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
right: 5vh;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 60;
|
||||
z-index: var(--z-header);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -14,16 +14,15 @@
|
|||
$effect(() => {
|
||||
if (!dialogEl) return
|
||||
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) {
|
||||
dialogEl.close()
|
||||
}
|
||||
})
|
||||
|
||||
function handleCancel() {
|
||||
navigation.closeMenu()
|
||||
}
|
||||
|
||||
function handleNavClick() {
|
||||
navigation.closeMenu()
|
||||
// La navigation elle-même est gérée par le router via le <a href>
|
||||
|
|
@ -50,81 +49,84 @@
|
|||
<dialog
|
||||
bind:this={dialogEl}
|
||||
id="main-menu"
|
||||
class="menu golden-grid"
|
||||
class="menu"
|
||||
aria-label="Menu principal"
|
||||
oncancel={handleCancel}
|
||||
>
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line vertical-line-col8"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line vertical-line-col14"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
<div class="menu-inner golden-grid">
|
||||
<div class="vertical-line-start"></div>
|
||||
<div class="vertical-line vertical-line-col8"></div>
|
||||
<div class="vertical-line-center"></div>
|
||||
<div class="vertical-line vertical-line-col14"></div>
|
||||
<div class="vertical-line-end"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="menu-list font-face-terminal" aria-label="Navigation principale">
|
||||
<p class="menu-title">{t('menu')}</p>
|
||||
<ol class="menu-nav-list font-face-danzza-bold">
|
||||
{#each slides.all as slide, i}
|
||||
<li class="menu-nav-item">
|
||||
<a
|
||||
href={slide.path}
|
||||
onclick={handleNavClick}
|
||||
class="menu-nav-link"
|
||||
class:active={activeId === slide.id}
|
||||
aria-current={activeId === slide.id ? 'page' : undefined}
|
||||
>
|
||||
<span class="menu-nav-number font-face-danzza-medium">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="menu-nav-label">
|
||||
{getTitle(slide)}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
<!-- Navigation -->
|
||||
<nav class="menu-list font-face-terminal" aria-label="Navigation principale">
|
||||
<p class="menu-title">{t('menu')}</p>
|
||||
<ol class="menu-nav-list font-face-danzza-bold">
|
||||
{#each slides.all as slide, i}
|
||||
<li class="menu-nav-item">
|
||||
<a
|
||||
href={slide.path}
|
||||
onclick={handleNavClick}
|
||||
class="menu-nav-link"
|
||||
class:active={activeId === slide.id}
|
||||
aria-current={activeId === slide.id ? 'page' : undefined}
|
||||
>
|
||||
<span class="menu-nav-number font-face-danzza-medium">
|
||||
{String(i + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<span class="menu-nav-label">
|
||||
{getTitle(slide)}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Connect -->
|
||||
<aside class="menu-connect" aria-label="Contact">
|
||||
<p class="menu-connect-title">{t('connect')}</p>
|
||||
<!-- Connect -->
|
||||
<aside class="menu-connect" aria-label="Contact">
|
||||
<p class="menu-connect-title">{t('connect')}</p>
|
||||
|
||||
{#if contact.address}
|
||||
<p class="menu-connect-label">{t('address')}</p>
|
||||
<p class="menu-connect-info">{@html contact.address}</p>
|
||||
{/if}
|
||||
{#if contact.address}
|
||||
<p class="menu-connect-label">{t('address')}</p>
|
||||
<p class="menu-connect-info">{@html contact.address}</p>
|
||||
{/if}
|
||||
|
||||
{#if contact.email}
|
||||
<p class="menu-connect-label">MAIL</p>
|
||||
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-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}
|
||||
{#if contact.email}
|
||||
<p class="menu-connect-label">MAIL</p>
|
||||
<a href="mailto:{contact.email}" class="menu-connect-info menu-connect-email">
|
||||
{contact.email}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if contact.legalNotice}
|
||||
<a
|
||||
href={contact.legalNotice}
|
||||
download
|
||||
class="menu-connect-legal"
|
||||
>
|
||||
{t('legal')}
|
||||
</a>
|
||||
{/if}
|
||||
</aside>
|
||||
{#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>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if contact.legalNotice}
|
||||
<a
|
||||
href={contact.legalNotice}
|
||||
download
|
||||
class="menu-connect-legal"
|
||||
>
|
||||
{t('legal')}
|
||||
</a>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
/* Dialog reset + full screen */
|
||||
dialog.menu {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -132,10 +134,16 @@
|
|||
max-height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: var(--z-menu);
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
dialog.menu::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
:root {
|
||||
/* Base font sizes for desktop */
|
||||
|
|
@ -224,7 +239,7 @@ body {
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 99999;
|
||||
z-index: var(--z-cursor);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 99999;
|
||||
z-index: var(--z-cursor);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
|
||||
/* Text overlay */
|
||||
.home-text {
|
||||
z-index: 5;
|
||||
z-index: var(--z-content);
|
||||
grid-area: 9/1 / span 6 / span 20;
|
||||
width: 100%;
|
||||
justify-self: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue