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

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;