Cool, I like the responsive idea! Iterated on mine, treating it a little more like a “minimap” in an IDE.
nav.table-of-contents>ul {
top: 0;
right: 0;
position: fixed;
z-index: var(--z-toc);
background: var(--dark-grey);
padding: var(--base-size-8);
border-radius: var(--base-size-4);
max-width: 15%;
font-size: var(--base-size-10);
max-height: var(--base-size-272);
overflow: scroll;
opacity: 0.6;
}
nav.table-of-contents ul {
list-style-type: none;
margin-left: var(--base-size-4);
}
nav.table-of-contents li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
}
nav.table-of-contents li a {
padding: 0;
}
@media all and (min-width: 920px) {
nav.table-of-contents>ul {
height: 100%;
max-height: 100%;
}
#rendered-md {
width: 75%;
}
}