sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve instance pages, start work on proper toc element
All checks were successful
/ build (push) Successful in 1m19s
Details

Browse source
This commit is contained in:
Ruben 2025-07-01 02:45:02 -05:00
commit a2d12ebead
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
13 changed files with 489 additions and 291 deletions
Download patch file Download diff file Expand all files Collapse all files

93
_includes/styles/toc.css Normal file
View file

@ -0,0 +1,93 @@
/* ╭──────────────────────────────────────╮
/ │ _ │
/ │ _ __ __ ___ _| |__ __ _ _ __ │
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
/ │ | | | | (_| |\ V /| |_) | (_| | | │
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
/ ╰──────────────────────────────────────╯
/ table of contents - styling for the table of contents button and list that appears on some pages */
.toc {
align-content: center;
background-color: var(--accent);
border-radius: 1rem;
color: var(--background);
cursor: pointer;
height: 1.9rem;
margin-left: auto !important;
outline: .13rem solid color-mix(in srgb, var(--accent) 60%, transparent);
position: absolute;
top: 1rem;
right: 1rem;
padding: 0px .2em !important;
/* unset the padding for the button itself so the button can take the padding to make the entire button clickable */
input[type="checkbox"]#toc-menu {
left: -100vw;
position: absolute;
}
input[type="checkbox"]#toc-menu:focus-visible {
left: unset !important;
}
label[data-toggle="toc"] {
cursor: pointer;
overflow: hidden !important;
padding: .3rem .5rem !important;
position: relative;
.icon {
padding: 0 .5rem !important;
pointer-events: none;
transform: translateY(.1rem) scale(1.5);
}
}
ul {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
cursor: initial !important;
/* reset the cursor otherwise it uses the pointer cursor */
margin-top: 1.2rem !important;
max-height: 27rem;
max-width: 17rem;
min-height: 27rem;
min-width: 17rem;
overflow: scroll;
position: absolute;
right: .4rem;
visibility: hidden;
/* inital "hidden" state, used for providing animation when activated */
opacity: 0;
scale: .5;
transform-origin: top right;
transition: opacity .3s, scale .3s, visibility .3s;
li {
border-radius: 1rem;
color: var(--foreground);
list-style-type: none;
margin-left: -2rem;
padding: .4rem;
span {
padding: .1rem 0px .1rem 0px !important;
}
h2 {
margin: 0 !important;
}
}
}
input[type="checkbox"]#toc-menu:checked~ul {
/* makes the menu visibile when activated and makes it appear from the top right */
opacity: 1;
scale: 1;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: visible;
}
}