171 lines
2.6 KiB
SCSS
171 lines
2.6 KiB
SCSS
#site-header {
|
|
|
|
z-index: var(--z-header);
|
|
--gap: 3ch;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 100vw;
|
|
height: var(--header-h);
|
|
background-color: var(--color-bg);
|
|
padding: 0 var(--padding-body);
|
|
|
|
box-shadow: -1px 4px 10px 0px var(--color-bg);
|
|
|
|
.site-header__inner{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: calc(var(--gap)*0.25);
|
|
}
|
|
|
|
|
|
a{
|
|
text-decoration: none;
|
|
&:hover{
|
|
color: var(--grey-200);
|
|
}
|
|
}
|
|
|
|
|
|
#site-title {
|
|
position: relative;
|
|
top: -3px;
|
|
|
|
width: 140px;
|
|
|
|
svg{
|
|
width: 100px;
|
|
@media #{$small}{
|
|
width: 80px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
#nav-highlight,
|
|
#nav-investigation{
|
|
flex-grow: 2;
|
|
ul{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--gap);
|
|
list-style-type: none;
|
|
|
|
}
|
|
}
|
|
#nav-highlight ul{
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
|
#nav-investigation{
|
|
position: absolute;
|
|
// transition: top var(--transition-scroll);
|
|
top: 10%;
|
|
left: 0;
|
|
display: flex;
|
|
opacity: 0;
|
|
// transform: translateY(-10px);
|
|
transition: top 0.3s ease;
|
|
pointer-events: none;
|
|
|
|
li{
|
|
color: var(--color-txt-light);
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
li.is-selected{
|
|
color: var(--color-txt);
|
|
&:hover{
|
|
color: var(--color-txt);
|
|
pointer-events: none;
|
|
a:hover{
|
|
color: var(--color-txt);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&.has-nav-investigation{
|
|
#nav-highlight{
|
|
display: none;
|
|
}
|
|
#nav-investigation{
|
|
position: relative;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
top: 0px;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
#theme-toggle{
|
|
width: var(--h-block);
|
|
height: var(--h-block);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
svg{
|
|
width: 18px;
|
|
position: relative;
|
|
top: -2px;
|
|
|
|
}
|
|
}
|
|
|
|
#lang-toggle{
|
|
display: flex;
|
|
gap: 0.75ch;
|
|
padding-right: 1.5ch;
|
|
a{
|
|
font-size: var(--fs-small);
|
|
font-weight: 500;
|
|
}
|
|
button:disabled{ color: var(--color-txt-light); }
|
|
}
|
|
|
|
#menu-toggle{
|
|
cursor: pointer;
|
|
svg{
|
|
width: 30px;
|
|
fill: var(--color-txt);
|
|
}
|
|
.close{ display: none; }
|
|
|
|
}
|
|
|
|
button{
|
|
|
|
&:hover{
|
|
svg{ fill: var(--grey-200)!important; }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media #{$medium}{
|
|
#nav-highlight{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|