index-main/assets/css/partials/_site-menu.scss

107 lines
2 KiB
SCSS
Raw Normal View History

2026-01-06 11:19:25 +01:00
#site-menu{
position: fixed;
width: var(--menu-w);
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
top: var(--header-h);
right: calc(var(--menu-w)*-1);
transition: right .3s ease-in;
2026-01-25 19:40:55 +01:00
@media #{$small}{
transition: right .4s ease-in;
}
2026-01-06 11:19:25 +01:00
background-color: var(--color-bg);
border-left: var(--border-light);
padding: var(--padding-body);
z-index: calc(var(--z-header) - 1);
2026-01-06 11:19:25 +01:00
2026-01-06 15:43:31 +01:00
@media #{$x-small}{
width: 100vw;
right: -100vw;
}
2026-02-26 17:24:54 +01:00
.site-menu__inner{
height: 100%;
overflow: scroll;
@include hide-scroll();
}
// display: flex;
// flex-direction: column;
2026-01-06 11:19:25 +01:00
2026-01-08 14:53:08 +01:00
.search-form{
2026-01-06 11:19:25 +01:00
margin-top: calc(var(--spacing)*1);
margin-bottom: calc(var(--spacing)*1);
}
2026-02-26 17:24:54 +01:00
2026-01-06 11:19:25 +01:00
nav{
2026-02-26 17:24:54 +01:00
margin-top: calc(var(--spacing)*1.5);
ul{
2026-01-06 11:19:25 +01:00
list-style-type: none;
li{
2026-02-26 17:24:54 +01:00
margin-bottom: calc(var(--spacing)*0.5);
2026-01-06 11:19:25 +01:00
}
2026-02-26 17:24:54 +01:00
a{
text-decoration: none;
font-weight: 500;
2026-01-06 11:19:25 +01:00
}
}
2026-02-26 17:24:54 +01:00
}
#nav-pages{
li{
text-transform: uppercase;
}
}
.support{
text-transform: uppercase;
2026-01-06 11:19:25 +01:00
}
2026-02-07 15:59:34 +01:00
2026-02-26 17:24:54 +01:00
#nav-aside{
margin-top: calc(var(--spacing)*1);
}
2026-02-07 15:59:34 +01:00
.socials{
2026-02-26 17:24:54 +01:00
margin-top: calc(var(--spacing)*2);
2026-02-07 15:59:34 +01:00
padding-bottom: calc(var(--spacing)*0.75);
}
2026-01-06 11:19:25 +01:00
}
#menu-overlay{
position: fixed;
inset: 0;
z-index: calc(var(--z-header) - 2);
cursor: pointer;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease-in, visibility .3s ease-in;
}
2026-01-06 11:19:25 +01:00
body.menu-open{
2026-02-07 15:59:34 +01:00
2026-01-06 11:19:25 +01:00
#site-menu{
right: 0;
}
#menu-toggle{
.open{ display: none; }
.close{ display: block!important; }
}
#menu-overlay{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
2026-01-06 11:19:25 +01:00
}