studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Fix Filter-menu
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-05 16:45:55 +02:00
parent 5d6fa47606
commit d20952d2fb
8 changed files with 73 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/css/src/_index.scss
View file

@ -1,19 +1,25 @@
body[data-template="index"] {
.filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
position: sticky;
opacity: 1;
line-height: normal;
pointer-events: all;
margin: 0 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
top: 0;
padding-top: calc(var(--line-height-S) * 3);
z-index: 2;
button.active {
text-decoration: underline;
}
ul {
display: flex;
flex-wrap: wrap;
column-gap: calc(2 * var(--body-margin));
}
}
.projects-index summary {

24
assets/css/src/_mobile.scss
View file

@ -67,26 +67,30 @@
}
body[data-template="index"] {
ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
margin: 0;
padding-top: var(--line-height-S);
.filter-menu {
padding-top: 0;
}
ul.projects-index {
position: absolute;
top: var(--slider-height);
top: 0;
box-sizing: border-box;
width: calc(100vw - calc(var(--body-margin) * 2));
height: calc(100vh - var(--slider-height));
height: 100vh;
overflow: auto;
padding-right: 1.5rem;
padding-top: calc((var(--line-height-S) * 5));
padding-top: calc(var(--font-size-XL) + (var(--line-height-S) * 1));
padding-bottom: calc(var(--font-size-XL));
}
ul.projects-index:has(.selected) {
top: var(--slider-height);
height: calc(100vh - var(--slider-height));
padding-top: var(--line-height-S);
padding-bottom: calc(var(--font-size-XL));
}

43
assets/css/style.css
View file

@ -590,21 +590,26 @@ dialog#mobile-menu-content::backdrop {
}
body[data-template=index] .filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
position: sticky;
opacity: 1;
line-height: normal;
pointer-events: all;
margin: 0 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
top: 0;
padding-top: calc(var(--line-height-S) * 3);
z-index: 2;
}
body[data-template=index] .filter-menu button.active {
text-decoration: underline;
}
body[data-template=index] .filter-menu ul {
display: flex;
flex-wrap: wrap;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
}
body[data-template=index] .projects-index summary {
cursor: pointer;
}
@ -672,22 +677,24 @@ body[data-template=index] .projects-index li.filtered-out {
top: var(--slider-height);
padding-top: 0;
}
body[data-template=index] ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
margin: 0;
padding-top: var(--line-height-S);
body[data-template=index] .filter-menu {
padding-top: 0;
}
body[data-template=index] ul.projects-index {
position: absolute;
top: var(--slider-height);
top: 0;
box-sizing: border-box;
width: calc(100vw - var(--body-margin) * 2);
height: calc(100vh - var(--slider-height));
height: 100vh;
overflow: auto;
padding-right: 1.5rem;
padding-top: calc(var(--line-height-S) * 5);
padding-top: calc(var(--font-size-XL) + var(--line-height-S) * 1);
padding-bottom: calc(var(--font-size-XL));
}
body[data-template=index] ul.projects-index:has(.selected) {
top: var(--slider-height);
height: calc(100vh - var(--slider-height));
padding-top: var(--line-height-S);
padding-bottom: calc(var(--font-size-XL));
}
body[data-template=index] .selected .fix:hover + .toggle {

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

File diff suppressed because one or more lines are too long