studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

fix: overlay above header, site-title above overlay

Browse source 
Move #site-title out of #site-header to its own stacking context,
enabling independent z-index control. Z-index order:
- #site-header: --z-header (2000)
- #menu-overlay: --z-header + 1
- #site-menu: --z-header + 2
- #site-title: --z-header + 3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 11:54:32 +01:00
parent da2abad099
commit b954824e41
3 changed files with 30 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

33
assets/css/partials/_site-header.scss
View file

@ -1,3 +1,21 @@
// Sorti du header pour pouvoir passer au-dessus de l'overlay
#site-title {
position: fixed;
top: 0;
left: var(--padding-body);
height: var(--header-h);
width: 140px;
display: flex;
align-items: center;
z-index: calc(var(--z-header) + 3);
svg { width: 100px; }
@media #{$small} {
svg { width: 80px; }
}
}
#site-header { #site-header {
@ -36,21 +54,6 @@
} }
#site-title {
position: relative;
top: -3px;
width: 140px;
svg{
width: 100px;
}
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
}
#nav-highlight, #nav-highlight,

4
assets/css/partials/_site-menu.scss
View file

@ -12,7 +12,7 @@
background-color: var(--color-bg); background-color: var(--color-bg);
border-left: var(--border-light); border-left: var(--border-light);
padding: var(--padding-body); padding: var(--padding-body);
z-index: calc(var(--z-header) - 1); z-index: calc(var(--z-header) + 2);
@media #{$x-small}{ @media #{$x-small}{
width: 100vw; width: 100vw;
@ -78,7 +78,7 @@
#menu-overlay{ #menu-overlay{
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: calc(var(--z-header) - 2); z-index: calc(var(--z-header) + 1);
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
opacity: 0; opacity: 0;

20
site/snippets/header.php
View file

@ -29,17 +29,8 @@
<body data-template="<?= $page->template() ?>"> <body data-template="<?= $page->template() ?>">
<header id="site-header"> <header id="site-header">
<div class="site-header__inner"> <div class="site-header__inner">
<h1 id="site-title">
<a
href="<?= $site->url() ?>"
aria-label="Retour à l’accueil"
title="aller au site d'Index"
>
<?= svg('assets/images/index-logo.svg') ?>
</a>
</h1>
<nav id="nav-highlight"> <nav id="nav-highlight">
<ul> <ul>
@ -89,4 +80,13 @@
</div> </div>
</header> </header>
<?php snippet('nav') ?> <?php snippet('nav') ?>
<h1 id="site-title">
<a
href="<?= $site->url() ?>"
aria-label="Retour à l'accueil"
title="aller au site d'Index"
>
<?= svg('assets/images/index-logo.svg') ?>
</a>
</h1>
<div id="menu-overlay"></div> <div id="menu-overlay"></div>