From f110669e31b0ff698fa3473711c2e6975e3bc2c4 Mon Sep 17 00:00:00 2001 From: Xanazf Date: Thu, 17 Oct 2024 23:46:54 +0300 Subject: [PATCH] added dedicated style for overflow: hidden on body --- .../navigation/sidebars/nav/index.tsx | 3 ++- .../navigation/sidebars/toc/index.tsx | 3 ++- src/styles/global.css | 19 +++++++++++-------- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/navigation/sidebars/nav/index.tsx b/src/components/navigation/sidebars/nav/index.tsx index 12559c0..ef12817 100644 --- a/src/components/navigation/sidebars/nav/index.tsx +++ b/src/components/navigation/sidebars/nav/index.tsx @@ -57,10 +57,11 @@ const NavComponent: Component = props => { if (open()) { window.addEventListener("click", handleClickOutside); document.body.style.overflow = "hidden"; + document.body.classList.add("overflow-nav"); document.body.classList.add("dim-content-nav"); } else { window.removeEventListener("click", handleClickOutside); - document.body.style.overflow = "auto"; + document.body.classList.remove("overflow-nav"); document.body.classList.remove("dim-content-nav"); } }); diff --git a/src/components/navigation/sidebars/toc/index.tsx b/src/components/navigation/sidebars/toc/index.tsx index 2e8f1e0..02db574 100644 --- a/src/components/navigation/sidebars/toc/index.tsx +++ b/src/components/navigation/sidebars/toc/index.tsx @@ -49,11 +49,12 @@ const TableOfContents: Component = props => { createEffect(() => { if (open()) { window.addEventListener("click", handleClickOutside); - document.body.style.overflow = "hidden"; + document.body.classList.add("overflow-toc"); document.body.classList.add("dim-content-toc"); } else { window.removeEventListener("click", handleClickOutside); document.body.style.overflow = "auto"; + document.body.classList.remove("overflow-toc"); document.body.classList.remove("dim-content-toc"); } }); diff --git a/src/styles/global.css b/src/styles/global.css index cce1e2a..c09fe7b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -56,6 +56,11 @@ html.dark { all: unset; } +.overflow-nav, +.overflow-toc { + overflow: hidden; +} + .search { display: none; } @@ -133,12 +138,10 @@ footer { left: -1rem; height: 1px; width: calc(100% + 1rem); - background: linear-gradient( - 90deg, - transparent 0%, - hsl(var(--footer-bkg-border)) 50%, - transparent 100% - ); + background: linear-gradient(90deg, + transparent 0%, + hsl(var(--footer-bkg-border)) 50%, + transparent 100%); } & a { @@ -177,12 +180,12 @@ footer { gap: 0.127rem; color: hsl(var(--text-dark)); - & > p { + &>p { margin-bottom: 0.2rem; color: hsl(0 0 40); } - & > a { + &>a { text-decoration: none; } }