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

fix: overlay and menu z-index, site-title back in header

Browse source 
- Restore #site-title inside #site-header
- Overlay below header (z-header - 2), menu below header (z-header - 1)
- Header stays above overlay; when menu-open, dim all header elements
  except #site-title (opacity trick)

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

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

@ -1,21 +1,3 @@
// 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 {
@ -53,7 +35,20 @@
} }
} }
#site-title {
position: relative;
top: -3px;
width: 140px;
svg{
width: 100px;
}
@media #{$small}{
svg{ width: 80px; }
top: -4px;
}
}
#nav-highlight, #nav-highlight,
@ -289,3 +284,15 @@
// } // }
// } // }
// } // }
// Quand le menu est ouvert : on dimme tout sauf le logo
body.menu-open #site-header {
#nav-highlight,
#nav-investigation,
#theme-toggle,
#lang-toggle,
#menu-toggle {
opacity: 0.15;
transition: opacity .3s ease-in;
}
}

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) + 2); z-index: calc(var(--z-header) - 1);
@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) + 1); z-index: calc(var(--z-header) - 2);
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,8 +29,15 @@
<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>
@ -80,13 +87,4 @@
</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>