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

style: reformat SCSS + add pointer-events: none on dimmed header elements

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 12:03:15 +01:00
parent 03032dcda8
commit e8bd478338
4 changed files with 270 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,4 @@
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -14,23 +11,21 @@
background-color: var(--color-bg);
padding: 0 var(--padding-body);
box-shadow: -1px 4px 10px 0px var(--color-bg);
box-shadow: -1px 4px 10px 0px var(--color-bg);
.site-header__inner{
.site-header__inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: calc(var(--gap)*0.25);
gap: calc(var(--gap) * 0.25);
}
a{
a {
text-decoration: none;
&:hover{
&:hover {
color: var(--grey-200);
}
}
@ -40,240 +35,206 @@
top: -3px;
width: 140px;
svg{
svg {
width: 100px;
}
@media #{$small}{
svg{ width: 80px; }
@media #{$small} {
svg {
width: 80px;
}
top: -4px;
}
}
#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,
#nav-investigation{
flex-grow: 2;
ul{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap);
list-style-type: none;
li {
white-space: nowrap;
}
}
}
li{
white-space: nowrap;
}
#nav-highlight ul {
font-weight: 500;
text-transform: uppercase;
@media #{$medium} {
font-size: var(--fs-small);
}
@media screen and (max-width: 890px) {
justify-content: flex-end;
padding-right: 2ch;
li {
display: none;
}
li.support {
display: block;
}
}
}
#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;
min-width: 0;
.title {
text-transform: uppercase;
font-size: var(--fs-small);
font-weight: 500;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2ch;
padding-right: 2ch;
text-align: center;
color: var(--color-txt-light);
}
@media #{$medium} {
ul {
font-size: var(--fs-small);
padding-left: 6ch;
padding-right: 6ch;
}
}
#nav-highlight ul{
font-weight: 500;
text-transform: uppercase;
@media #{$medium}{
font-size: var(--fs-small);
}
@media screen and (max-width: 890px){
justify-content: flex-end;
padding-right: 2ch;
li{ display: none; }
li.support{ display: block; }
}
li {
color: var(--color-txt-light);
transition: color 0.3s ease;
}
#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;
li.is-selected {
color: var(--color-txt);
&:hover {
color: var(--color-txt);
pointer-events: none;
min-width: 0;
.title{
text-transform: uppercase;
font-size: var(--fs-small);
font-weight: 500;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 2ch;
padding-right: 2ch;
text-align: center;
color: var(--color-txt-light);
}
@media #{$medium}{
ul{
font-size: var(--fs-small);
padding-left: 6ch;
padding-right: 6ch;
}
}
li{
color: var(--color-txt-light);
transition: color 0.3s ease;
}
li.is-selected{
a:hover {
color: var(--color-txt);
&:hover{
color: var(--color-txt);
pointer-events: none;
a:hover{
color: var(--color-txt);
}
}
}
}
}
}
}
#theme-toggle{
#theme-toggle {
width: var(--h-block);
height: var(--h-block);
display: flex;
align-items: center;
justify-content: center;
svg{
svg {
width: 18px;
position: relative;
top: -2px;
}
}
#lang-toggle{
#lang-toggle {
display: flex;
gap: 0.75ch;
padding-right: 1.5ch;
a{
a {
font-size: var(--fs-small);
font-weight: 500;
}
button:disabled{ color: var(--color-txt-light); }
button:disabled {
color: var(--color-txt-light);
}
}
#menu-toggle{
#menu-toggle {
cursor: pointer;
svg{
svg {
width: 30px;
fill: var(--color-txt);
}
.close{ display: none; }
}
button{
&:hover{
svg{ fill: var(--grey-200)!important; }
.close {
display: none;
}
}
button {
&:hover {
svg {
fill: var(--grey-200) !important;
}
}
}
}
// Animation, change header
#site-header.has-nav-investigation{
#nav-highlight{
display: none;
}
#nav-investigation{
position: relative;
opacity: 1;
#site-header.has-nav-investigation {
#nav-highlight {
display: none;
}
#nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
}
}
@media #{$small-up} {
#site-header #nav-investigation .title {
display: none;
}
}
@media #{$small-up}{
#site-header #nav-investigation .title{
@media #{$small} {
#site-header #nav-highlight ul {
display: none;
}
}
#site-header #nav-investigation .title {
display: none;
}
@media #{$small}{
#site-header #nav-highlight ul{
#site-header.has-nav-investigation {
#nav-investigation {
ul {
display: none;
}
#site-header #nav-investigation .title{
display: none;
}
#site-header.has-nav-investigation{
#nav-investigation{
ul{ display: none; }
.title{ display: block; }
}
.title {
display: block;
}
}
}
}
// @media #{$x-small}{
// #site-header.has-nav-investigation{
// #nav-investigation{
// .title{ display: none; }
// }
// }
// }
// @media #{$x-small}{
// [data-template="investigation"] #site-header{
@ -293,6 +254,7 @@ body.menu-open #site-header {
#lang-toggle,
#menu-toggle {
opacity: 0.15;
transition: opacity .3s ease-in;
pointer-events: none;
transition: opacity 0.3s ease-in;
}
}
}