studio-variable/index-main
4
0
Fork 0
Code Issues 14 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 {
@ -36,21 +54,6 @@
}
#site-title {
position: relative;
top: -3px;
width: 140px;
svg{
width: 100px;
}
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
}
#nav-highlight,

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

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

20
site/snippets/header.php
View file

@ -29,17 +29,8 @@
<body data-template="<?= $page->template() ?>">
<header id="site-header">
<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">
<ul>
@ -89,4 +80,13 @@
</div>
</header>
<?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>