Adjust sidebar ToC style
This commit is contained in:
parent
25c6146034
commit
d49c135c71
|
@ -1,3 +1,4 @@
|
||||||
|
/* Article Table of Contents */
|
||||||
.toc {
|
.toc {
|
||||||
background-color: var(--clr-quote-bg);
|
background-color: var(--clr-quote-bg);
|
||||||
max-width: max-content;
|
max-width: max-content;
|
||||||
|
@ -38,6 +39,11 @@
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Sidebar Table of Contents */
|
||||||
|
.left-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar__toc {
|
.sidebar__toc {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 5rem;
|
top: 5rem;
|
||||||
|
@ -64,3 +70,9 @@
|
||||||
padding-left: 1.25rem;
|
padding-left: 1.25rem;
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 43.75rem) {
|
||||||
|
.left-sidebar {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
16
js/toc.js
16
js/toc.js
|
@ -60,20 +60,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
const windowWidth = window.innerWidth;
|
const windowWidth = window.innerWidth;
|
||||||
if (windowWidth < 480) {
|
if (windowWidth < 480) {
|
||||||
toc.removeAttribute('open');
|
toc.removeAttribute('open');
|
||||||
leftSidebar.classList.add('hidden');
|
|
||||||
} else {
|
} else {
|
||||||
toc.setAttribute('open', true);
|
toc.setAttribute('open', true);
|
||||||
leftSidebar.classList.remove('hidden');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't make the sidebar ToC sticky if it is larger than screen height
|
// Hide the left sidebar if the ToC is larger than screen height
|
||||||
function preventSidebarOverflow() {
|
function preventSidebarOverflow() {
|
||||||
if (
|
if (document.documentElement.clientHeight < tocSidebar.offsetHeight + 50) {
|
||||||
document.documentElement.clientHeight <
|
// tocSidebar.style.marginTop = "0";
|
||||||
tocSidebar.offsetHeight + 50
|
// tocSidebar.style.position = "static";
|
||||||
) {
|
leftSidebar.style.display = "none";
|
||||||
tocSidebar.style.marginTop = "0";
|
} else {
|
||||||
tocSidebar.style.position = "static";
|
leftSidebar.style.display = "flex";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
preventSidebarOverflow();
|
preventSidebarOverflow();
|
||||||
|
|
Loading…
Reference in New Issue