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

design bottom bar
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-20 14:09:25 +01:00
parent f1ace8cc05
commit a1eda42d87
13 changed files with 288 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -118,6 +118,21 @@ body, #site-header, #site-footer{
}
@mixin icon($size){
.icon{
display: flex;
width: $size;
height: $size;
svg{
width: $size;
height: $size;
}
}
}
body.menu-open,
body.is-hidden{

66
assets/css/components/_bottom-bar.scss Normal file
View file

@ -0,0 +1,66 @@
.bottom-bar{
position: fixed;
bottom: 0;
left: 0;
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);
.bottom-bar__inner{
height: calc(var(--header-h)*0.75);
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--padding-inner);
}
.btn--back-to-top{
@include icon(20px);
position: relative;
top: -3px;
width: 100px;
a{
justify-content: flex-end;
}
.icon{
transform: rotate(-90deg);
transform-origin: center;
}
}
.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;
// align-items: center;
.type{
text-transform: uppercase;
&::after{
content: "/";
padding-left: 1ch;
padding-right: 1ch;
}
}
}
}

46
assets/css/components/_buttons.scss
View file

@ -92,6 +92,42 @@ button:disabled{
a{ color: var(--color-bg); }
svg{ fill: var(--color-bg); }
}
.btn--simple{
height: calc(var(--h-block)*1);
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
@include icon(20px);
.icon{
position: relative;
top: -2px;
}
a{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
white-space: nowrap;
}
&.no-link{
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 2ch;
padding-top: 4px;
}
}
.btn--bold,
.btn--bold-inline{
@ -264,5 +300,11 @@ button:disabled{
}
.btn--support{
color: var(--color-accent);
&:hover{
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
}

108
assets/css/style.css
View file

@ -344,6 +344,47 @@ button:disabled {
fill: var(--color-bg);
}
.btn--simple {
height: calc(var(--h-block) * 1);
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
}
.btn--simple .icon {
display: flex;
width: 20px;
height: 20px;
}
.btn--simple .icon svg {
width: 20px;
height: 20px;
}
.btn--simple .icon {
position: relative;
top: -2px;
}
.btn--simple a {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
width: 100%;
height: 100%;
padding: 0 2ch;
padding-top: 4px;
white-space: nowrap;
}
.btn--simple.no-link {
display: flex;
align-items: center;
justify-content: center;
gap: 1ch;
padding: 0 2ch;
padding-top: 4px;
}
.btn--bold,
.btn--bold-inline {
display: block;
@ -480,6 +521,15 @@ button:disabled {
fill: var(--grey-100);
}
.btn--support {
color: var(--color-accent);
}
.btn--support:hover {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.category {
height: calc(var(--h-block) * 0.75);
border-radius: var(--radius-small);
@ -1994,6 +2044,64 @@ button.sort[data-sort-type=up] .arrow {
box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
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);
}
.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 {
display: flex;
width: 20px;
height: 20px;
}
.bottom-bar .btn--back-to-top .icon svg {
width: 20px;
height: 20px;
}
.bottom-bar .btn--back-to-top {
position: relative;
top: -3px;
width: 100px;
}
.bottom-bar .btn--back-to-top a {
justify-content: flex-end;
}
.bottom-bar .btn--back-to-top .icon {
transform: rotate(-90deg);
transform-origin: center;
}
.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 {
text-transform: uppercase;
}
.bottom-bar .title-group .type::after {
content: "/";
padding-left: 1ch;
padding-right: 1ch;
}
#site-header {
z-index: var(--z-header);
--gap: 3ch;

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

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -29,6 +29,7 @@
@import "components/card-open-graph";
@import "components/swiper";
@import "components/slider-before-after";
@import "components/bottom-bar";
@import "partials/site-header";
@import "partials/site-menu";