add sticky header, show nav like sidenotes

This commit is contained in:
error 2024-03-12 13:55:08 +01:00
parent 3a19124497
commit 25d0754bc0

View File

@ -68,6 +68,8 @@ body > header {
border-right-style: solid; border-right-style: solid;
border-right-width: 5px; border-right-width: 5px;
padding-bottom: 1rem; padding-bottom: 1rem;
position: sticky;
top: 2ch;
} }
body > header > a > h1 { body > header > a > h1 {
@ -107,14 +109,19 @@ input[type="checkbox"] {
} }
#shownav + label { #shownav + label {
display: block; display: none;
width: 100%; width: 100%;
text-align: right; text-align: right;
} }
#shownav + label + nav { #shownav + label + nav {
display: none; display: block;
text-align: center; text-align: left;
float: right;
clear: right;
width: 15rem;
margin-right: -16rem;
margin-bottom: 1em;
} }
#shownav:checked + label + nav { #shownav:checked + label + nav {
@ -126,6 +133,10 @@ nav > ul {
color: var(--accent-a); color: var(--accent-a);
} }
#shownav + label + nav > ul {
font-size: 2rem;
}
label[for="shownav"]::before { label[for="shownav"]::before {
content: "" content: ""
} }
@ -311,4 +322,17 @@ label.sidenote-toggle {
body > header > a > h1 { body > header > a > h1 {
font-size: 3rem; font-size: 3rem;
} }
#shownav + label {
display: block;
}
#shownav + label + nav {
display: none;
text-align: center;
float: none;
clear: none;
width: auto;
margin-right: 0rem;
}
} }