fix: overlay above header, site-title above overlay
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:
parent
da2abad099
commit
b954824e41
3 changed files with 30 additions and 27 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue