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

2
assets/css/base/_body.scss
View file

@ -137,7 +137,7 @@ body, #site-header, #site-footer{
body.menu-open,
body.is-hidden{
overflow-y: hidden;
main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar{
main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar__inner{
transition: opacity .3s ease-in;
opacity: 0.1;
}

5
assets/css/base/_var.scss
View file

@ -79,6 +79,9 @@
--h-block: 30px;
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--transition-scroll: .5s ease-in-out;
}
@ -112,6 +115,8 @@
--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;

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

@ -1,15 +1,39 @@
.bottom-bar{
#bottom-bar{
position: fixed;
bottom: 0;
left: 0;
z-index: calc(var(--z-header) - 10);
bottom: calc(var(--header-h)*-0.75);
&.is-visible{
bottom: 0px;
}
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);
// border-top: 2px solid var(--grey-800);
.progress-container{
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 100vw;
background-color: var(--grey-800);
.progress-bar{
height: 2px;
background-color: var(--color-txt);
width: 40%;
}
}
.bottom-bar__inner{
height: calc(var(--header-h)*0.75);
@ -45,8 +69,8 @@
flex-grow: 1;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// overflow: hidden;
// text-overflow: ellipsis;
// align-items: center;
@ -59,7 +83,9 @@
padding-left: 1ch;
padding-right: 1ch;
}
}

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

@ -53,6 +53,7 @@
#nav-investigation{
flex-grow: 2;
ul{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
@ -63,17 +64,57 @@
}
#nav-highlight ul{
font-weight: 500;
text-transform: uppercase;
text-transform: uppercase;
}
#nav-investigation{
display: none;
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);
@ -120,12 +161,6 @@
#site-header.is-visible{
// .site-header__inner{
// border-color: var(--grey-800);
// }
}
@media #{$medium}{
#nav-highlight{

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);

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

File diff suppressed because one or more lines are too long