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 {
|
||||||
|
@ -177,12 +180,12 @@ footer {
|
||||||
gap: 0.127rem;
|
gap: 0.127rem;
|
||||||
color: hsl(var(--text-dark));
|
color: hsl(var(--text-dark));
|
||||||
|
|
||||||
& > p {
|
&>p {
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
color: hsl(0 0 40);
|
color: hsl(0 0 40);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > a {
|
&>a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue