studio-variable/index-main
4
0
Fork 0
Code Issues 14 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

18
assets/css/components/_bottom-bar.scss
View file

@ -16,7 +16,6 @@
transition: bottom var(--transition-scroll); transition: bottom var(--transition-scroll);
.progress-container { .progress-container {
position: absolute; position: absolute;
top: 0; top: 0;
@ -40,7 +39,6 @@
gap: var(--padding-inner); gap: var(--padding-inner);
} }
.btn--back-to-top { .btn--back-to-top {
@include icon(20px); @include icon(20px);
position: relative; position: relative;
@ -51,7 +49,6 @@
justify-content: flex-end; justify-content: flex-end;
} }
.icon { .icon {
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: center; transform-origin: center;
@ -61,7 +58,6 @@
} }
} }
.title-group { .title-group {
font-size: var(--fs-small); font-size: var(--fs-small);
display: flex; display: flex;
@ -79,9 +75,6 @@
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
} }
} }
.title { .title {
@ -90,13 +83,9 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
@media #{$small} { @media #{$small} {
// display: flex; // display: flex;
// align-items: center; // align-items: center;
// justify-content: center; // justify-content: center;
@ -106,9 +95,10 @@
align-items: center; align-items: center;
} }
.btn--download,
.btn--back-to-top {
.btn--download, .btn--back-to-top{ display: none; } display: none;
}
} }
@media #{$x-small} { @media #{$x-small} {

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

@ -1,7 +1,4 @@
#site-header { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
--gap: 3ch; --gap: 3ch;
@ -20,14 +17,12 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: calc(var(--gap) * 0.25); gap: calc(var(--gap) * 0.25);
} }
a { a {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -45,12 +40,13 @@
} }
@media #{$small} { @media #{$small} {
svg{ width: 80px; } svg {
width: 80px;
}
top: -4px; top: -4px;
} }
} }
#nav-highlight, #nav-highlight,
#nav-investigation { #nav-investigation {
flex-grow: 2; flex-grow: 2;
@ -65,35 +61,28 @@
li { li {
white-space: nowrap; white-space: nowrap;
} }
} }
} }
#nav-highlight ul { #nav-highlight ul {
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
@media #{$medium} { @media #{$medium} {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
@media screen and (max-width: 890px) { @media screen and (max-width: 890px) {
justify-content: flex-end; justify-content: flex-end;
padding-right: 2ch; padding-right: 2ch;
li{ display: none; } li {
li.support{ display: block; } display: none;
}
li.support {
display: block;
}
} }
} }
#nav-investigation { #nav-investigation {
position: absolute; position: absolute;
@ -106,17 +95,13 @@
transition: top 0.3s ease; transition: top 0.3s ease;
pointer-events: none; pointer-events: none;
min-width: 0; min-width: 0;
.title { .title {
text-transform: uppercase; text-transform: uppercase;
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500; font-weight: 500;
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@ -126,21 +111,16 @@
padding-right: 2ch; padding-right: 2ch;
text-align: center; text-align: center;
color: var(--color-txt-light); color: var(--color-txt-light);
} }
@media #{$medium} { @media #{$medium} {
ul { ul {
font-size: var(--fs-small); font-size: var(--fs-small);
padding-left: 6ch; padding-left: 6ch;
padding-right: 6ch; padding-right: 6ch;
} }
} }
li { li {
color: var(--color-txt-light); color: var(--color-txt-light);
transition: color 0.3s ease; transition: color 0.3s ease;
@ -156,17 +136,8 @@
} }
} }
} }
} }
#theme-toggle { #theme-toggle {
width: var(--h-block); width: var(--h-block);
height: var(--h-block); height: var(--h-block);
@ -177,7 +148,6 @@
width: 18px; width: 18px;
position: relative; position: relative;
top: -2px; top: -2px;
} }
} }
@ -189,7 +159,9 @@
font-size: var(--fs-small); font-size: var(--fs-small);
font-weight: 500; font-weight: 500;
} }
button:disabled{ color: var(--color-txt-light); } button:disabled {
color: var(--color-txt-light);
}
} }
#menu-toggle { #menu-toggle {
@ -198,22 +170,19 @@
width: 30px; width: 30px;
fill: var(--color-txt); fill: var(--color-txt);
} }
.close{ display: none; } .close {
display: none;
}
} }
button { button {
&:hover { &:hover {
svg{ fill: var(--grey-200)!important; } svg {
fill: var(--grey-200) !important;
}
} }
} }
} }
// Animation, change header // Animation, change header
@ -230,20 +199,13 @@
} }
} }
@media #{$small-up} { @media #{$small-up} {
#site-header #nav-investigation .title { #site-header #nav-investigation .title {
display: none; display: none;
} }
} }
@media #{$small} { @media #{$small} {
#site-header #nav-highlight ul { #site-header #nav-highlight ul {
display: none; display: none;
} }
@ -254,13 +216,15 @@
#site-header.has-nav-investigation { #site-header.has-nav-investigation {
#nav-investigation { #nav-investigation {
ul{ display: none; } ul {
.title{ display: block; } display: none;
}
.title {
display: block;
}
} }
} }
} }
// @media #{$x-small}{ // @media #{$x-small}{
// #site-header.has-nav-investigation{ // #site-header.has-nav-investigation{
@ -269,11 +233,8 @@
// } // }
// } // }
// } // }
// @media #{$x-small}{ // @media #{$x-small}{
// [data-template="investigation"] #site-header{ // [data-template="investigation"] #site-header{
@ -293,6 +254,7 @@ body.menu-open #site-header {
#lang-toggle, #lang-toggle,
#menu-toggle { #menu-toggle {
opacity: 0.15; opacity: 0.15;
transition: opacity .3s ease-in; pointer-events: none;
transition: opacity 0.3s ease-in;
} }
} }

49
assets/css/style.css
View file

@ -147,15 +147,6 @@ body.menu-open,
body.is-hidden { body.is-hidden {
overflow-y: hidden; overflow-y: hidden;
} }
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top, body.menu-open .bottom-bar__inner,
body.is-hidden main,
body.is-hidden footer,
body.is-hidden #nav-highlight,
body.is-hidden .btn--back-to-top,
body.is-hidden .bottom-bar__inner {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
#site-header { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
@ -350,6 +341,16 @@ body.is-hidden .bottom-bar__inner {
display: block; display: block;
} }
} }
body.menu-open #site-header #nav-highlight,
body.menu-open #site-header #nav-investigation,
body.menu-open #site-header #theme-toggle,
body.menu-open #site-header #lang-toggle,
body.menu-open #site-header #menu-toggle {
opacity: 0.15;
pointer-events: none;
transition: opacity 0.3s ease-in;
}
button { button {
cursor: pointer; cursor: pointer;
font-family: var(--font); font-family: var(--font);
@ -2590,7 +2591,8 @@ figcaption, .caption {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#bottom-bar .btn--download, #bottom-bar .btn--back-to-top { #bottom-bar .btn--download,
#bottom-bar .btn--back-to-top {
display: none; display: none;
} }
} }
@ -2970,6 +2972,16 @@ figcaption, .caption {
display: block; display: block;
} }
} }
body.menu-open #site-header #nav-highlight,
body.menu-open #site-header #nav-investigation,
body.menu-open #site-header #theme-toggle,
body.menu-open #site-header #lang-toggle,
body.menu-open #site-header #menu-toggle {
opacity: 0.15;
pointer-events: none;
transition: opacity 0.3s ease-in;
}
#site-menu { #site-menu {
position: fixed; position: fixed;
width: var(--menu-w); width: var(--menu-w);
@ -3036,6 +3048,18 @@ figcaption, .caption {
padding-bottom: calc(var(--spacing) * 0.75); padding-bottom: calc(var(--spacing) * 0.75);
} }
#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 0.3s ease-in, visibility 0.3s ease-in;
}
body.menu-open #site-menu { body.menu-open #site-menu {
right: 0; right: 0;
} }
@ -3045,6 +3069,11 @@ body.menu-open #menu-toggle .open {
body.menu-open #menu-toggle .close { body.menu-open #menu-toggle .close {
display: block !important; display: block !important;
} }
body.menu-open #menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#site-footer { #site-footer {
background-color: var(--dark); background-color: var(--dark);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long