added dedicated style for overflow: hidden on body
This commit is contained in:
parent
48650545bd
commit
f110669e31
|
@ -57,10 +57,11 @@ const NavComponent: Component<NavProps> = props => {
|
||||||
if (open()) {
|
if (open()) {
|
||||||
window.addEventListener("click", handleClickOutside);
|
window.addEventListener("click", handleClickOutside);
|
||||||
document.body.style.overflow = "hidden";
|
document.body.style.overflow = "hidden";
|
||||||
|
document.body.classList.add("overflow-nav");
|
||||||
document.body.classList.add("dim-content-nav");
|
document.body.classList.add("dim-content-nav");
|
||||||
} else {
|
} else {
|
||||||
window.removeEventListener("click", handleClickOutside);
|
window.removeEventListener("click", handleClickOutside);
|
||||||
document.body.style.overflow = "auto";
|
document.body.classList.remove("overflow-nav");
|
||||||
document.body.classList.remove("dim-content-nav");
|
document.body.classList.remove("dim-content-nav");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -49,11 +49,12 @@ const TableOfContents: Component<TOCProps> = props => {
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
if (open()) {
|
if (open()) {
|
||||||
window.addEventListener("click", handleClickOutside);
|
window.addEventListener("click", handleClickOutside);
|
||||||
document.body.style.overflow = "hidden";
|
document.body.classList.add("overflow-toc");
|
||||||
document.body.classList.add("dim-content-toc");
|
document.body.classList.add("dim-content-toc");
|
||||||
} else {
|
} else {
|
||||||
window.removeEventListener("click", handleClickOutside);
|
window.removeEventListener("click", handleClickOutside);
|
||||||
document.body.style.overflow = "auto";
|
document.body.style.overflow = "auto";
|
||||||
|
document.body.classList.remove("overflow-toc");
|
||||||
document.body.classList.remove("dim-content-toc");
|
document.body.classList.remove("dim-content-toc");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -56,6 +56,11 @@ html.dark {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overflow-nav,
|
||||||
|
.overflow-toc {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -133,12 +138,10 @@ footer {
|
||||||
left: -1rem;
|
left: -1rem;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
width: calc(100% + 1rem);
|
width: calc(100% + 1rem);
|
||||||
background: linear-gradient(
|
background: linear-gradient(90deg,
|
||||||
90deg,
|
|
||||||
transparent 0%,
|
transparent 0%,
|
||||||
hsl(var(--footer-bkg-border)) 50%,
|
hsl(var(--footer-bkg-border)) 50%,
|
||||||
transparent 100%
|
transparent 100%);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& a {
|
& a {
|
||||||
|
|
Loading…
Reference in a new issue