philipp/website-risg
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

sticky headers

Browse Source
This commit is contained in:
philipp 2024-02-19 20:27:45 +01:00
parent 2bc5cb6014
commit d8029e6c5e
1 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/style.css
View File

@ -1,3 +1,5 @@
html { html {
-webkit-hyphens: auto; -webkit-hyphens: auto;
hyphens: auto; hyphens: auto;
@ -50,6 +52,31 @@ details summary {
line-height: unset; line-height: unset;
} }
details > summary {
position: sticky;
top: 0px;
z-index: 99;
background-color: var(--pico-background-color);
}
details details > summary {
top: 1.3rem; /* Height of h2*/
z-index: 98;
}
details details details > summary {
top: calc(1.3rem + 1.2rem);
z-index: 97;
}
details details details details > summary {
top: calc(1.3rem + 1.2rem + 1.1rem);
z-index: 96;
}
details details details details details > summary {
/* make sure to properly style enough levels of sticky headers :^) */
height: 1000px;
background-color:red;
}
.par { .par {
margin-bottom: calc(var(--pico-spacing) * 2); margin-bottom: calc(var(--pico-spacing) * 2);
} }