background only transparent on large screens at the top

HackAtUCI · Nov 2, 2024 · 8f90a3b · 8f90a3b
1 parent 131f11f
commit 8f90a3b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -4,15 +4,21 @@
 .nav {
 	width: 100%;
 	z-index: 101;
-	background-color: rgba(20, 20, 20, 0.7);
-	mix-blend-mode: hard-light;
-	@include utils.media-breakpoint-up(lg) {
-		backdrop-filter: none;
-	}
 	backdrop-filter: blur(7px);
 	position: fixed;
 	text-align: right;
 	transition: background-color 0.2s ease;
+	background-color: rgba(20, 20, 20, 0.7);
+
+	@include utils.media-breakpoint-up(lg) {
+		backdrop-filter: none;
+	}
+}
+
+.bg-no-scroll {
+	@include utils.media-breakpoint-up(lg) {
+		background-color: transparent !important;
+	}
 }
 
 .navbar {
@@ -60,12 +66,3 @@
 	text-underline-offset: 0.3rem;
 	text-decoration-thickness: 0.14rem;
 }
-
-.bg-transparent {
-	background-color: transparent;
-}
-
-.bg-scrolled {
-	background-color: rgba(20, 20, 20, 0.7);
-	mix-blend-mode: hard-light;
-}
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -30,7 +30,7 @@ export default function NavBar() {
 
 	return (
 		<div
-			className={`${styles.nav} fixed-top ${hasScrolled ? "bg-scrolled" : "bg-transparent"}`}
+			className={`${styles.nav} fixed-top ${hasScrolled ? "" : styles["bg-no-scroll"]}`}
 		>
 			<Navbar variant="dark" expand="lg" className={`${styles.navbar}`}>
 				<Container fluid>
@@ -68,20 +68,20 @@ export default function NavBar() {
 							>
 								SCHEDULE
 							</Link>
-							{/* <Link
+							<Link
 								href="https://forms.gle/cCixQqKR2gDXAUMLA"
 								className={styles.notActive}
 								target="_blank"
 							>
 								INCIDENT FORM
 							</Link>
 							<Link
-								href="https://zothacks-2023.devpost.com/"
+								href="https://zothacks-2024.devpost.com/"
 								className={styles.notActive}
 								target="_blank"
 							>
 								DEVPOST
-							</Link>	 */}
+							</Link>
 						</Nav>
 					</Navbar.Collapse>
 				</Container>