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

animations investigations
All checks were successful
Deploy / Deploy to Production (push) Successful in 17s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 14:02:26 +01:00
parent 6020ea8c5b
commit 99ccc15ba9
10 changed files with 285 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

112
assets/css/style.css
View file

@ -56,6 +56,7 @@
--spacing: 30px;
--h-block: 30px;
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--transition-scroll: .5s ease-in-out;
}
@media screen and (max-width: 768px) {
@ -81,6 +82,7 @@
--color-bg: #efefef;
--color-txt: #161616;
--color-txt-light: var(--grey-400);
--border-light: 1px solid var(--grey-800);
--color-accent: #ff00ff;
--color-accent-50: #ffe9ff;
--color-accent-100: #fdd8fd;
@ -144,12 +146,12 @@ body.menu-open,
body.is-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,
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 {
body.is-hidden .bottom-bar__inner {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
@ -199,6 +201,7 @@ body.is-hidden .bottom-bar {
}
#site-header #nav-highlight ul,
#site-header #nav-investigation ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -210,8 +213,38 @@ body.is-hidden .bottom-bar {
text-transform: uppercase;
}
#site-header #nav-investigation {
position: absolute;
top: 10%;
left: 0;
display: flex;
opacity: 0;
transition: top 0.3s ease;
pointer-events: none;
}
#site-header #nav-investigation li {
color: var(--color-txt-light);
transition: color 0.3s ease;
}
#site-header #nav-investigation li.is-selected {
color: var(--color-txt);
}
#site-header #nav-investigation li.is-selected:hover {
color: var(--color-txt);
pointer-events: none;
}
#site-header #nav-investigation li.is-selected:hover a:hover {
color: var(--color-txt);
}
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);
@ -2048,60 +2081,76 @@ button.sort[data-sort-type=up] .arrow {
box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
}
.bottom-bar {
#bottom-bar {
position: fixed;
bottom: 0;
left: 0;
bottom: calc(var(--header-h) * -0.75);
}
#bottom-bar.is-visible {
bottom: 0px;
}
#bottom-bar {
z-index: calc(var(--z-header) - 10);
height: calc(var(--header-h) * 0.75);
width: 100vw;
background-color: var(--color-bg);
padding-left: var(--padding-body);
padding-right: var(--padding-body);
border-top: 2px solid var(--grey-800);
transition: bottom var(--transition-scroll);
}
.bottom-bar .bottom-bar__inner {
#bottom-bar .progress-container {
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 100vw;
background-color: var(--grey-800);
}
#bottom-bar .progress-container .progress-bar {
height: 2px;
background-color: var(--color-txt);
width: 40%;
}
#bottom-bar .bottom-bar__inner {
height: calc(var(--header-h) * 0.75);
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--padding-inner);
}
.bottom-bar .btn--back-to-top .icon {
#bottom-bar .btn--back-to-top .icon {
display: flex;
width: 20px;
height: 20px;
}
.bottom-bar .btn--back-to-top .icon svg {
#bottom-bar .btn--back-to-top .icon svg {
width: 20px;
height: 20px;
}
.bottom-bar .btn--back-to-top {
#bottom-bar .btn--back-to-top {
position: relative;
top: -3px;
width: 100px;
}
.bottom-bar .btn--back-to-top a {
#bottom-bar .btn--back-to-top a {
justify-content: flex-end;
}
.bottom-bar .btn--back-to-top .icon {
#bottom-bar .btn--back-to-top .icon {
transform: rotate(-90deg);
transform-origin: center;
}
.bottom-bar .title-group {
#bottom-bar .title-group {
font-size: var(--fs-small);
display: flex;
color: var(--color-txt-light);
flex-grow: 1;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottom-bar .title-group .type {
#bottom-bar .title-group .type {
text-transform: uppercase;
}
.bottom-bar .title-group .type::after {
#bottom-bar .title-group .type::after {
content: "/";
padding-left: 1ch;
padding-right: 1ch;
@ -2152,6 +2201,7 @@ button.sort[data-sort-type=up] .arrow {
}
#site-header #nav-highlight ul,
#site-header #nav-investigation ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -2163,8 +2213,38 @@ button.sort[data-sort-type=up] .arrow {
text-transform: uppercase;
}
#site-header #nav-investigation {
position: absolute;
top: 10%;
left: 0;
display: flex;
opacity: 0;
transition: top 0.3s ease;
pointer-events: none;
}
#site-header #nav-investigation li {
color: var(--color-txt-light);
transition: color 0.3s ease;
}
#site-header #nav-investigation li.is-selected {
color: var(--color-txt);
}
#site-header #nav-investigation li.is-selected:hover {
color: var(--color-txt);
pointer-events: none;
}
#site-header #nav-investigation li.is-selected:hover a:hover {
color: var(--color-txt);
}
#site-header.has-nav-investigation #nav-highlight {
display: none;
}
#site-header.has-nav-investigation #nav-investigation {
position: relative;
opacity: 1;
transform: translateY(0);
top: 0px;
pointer-events: auto;
}
#site-header #theme-toggle {
width: var(--h-block);
height: var(--h-block);