added dedicated style for overflow: hidden on body

This commit is contained in:
Xanazf 2024-10-17 23:46:54 +03:00
parent 48650545bd
commit f110669e31
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
3 changed files with 15 additions and 10 deletions

View file

@ -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");
} }
}); });

View file

@ -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");
} }
}); });

View file

@ -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;
} }
} }