added dedicated style for overflow: hidden on body
This commit is contained in:
		
							parent
							
								
									48650545bd
								
							
						
					
					
						commit
						f110669e31
					
				
					 3 changed files with 15 additions and 10 deletions
				
			
		| 
						 | 
					@ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue