fix: no navigation on 768px width

src/app.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 * {
 	box-sizing: inherit;
@@ -35,7 +35,7 @@ body {
 
 :root {
 	/* TODO properly name these */
-    --main-font: "Manrope", sans-serif;
+	--main-font: 'Manrope', sans-serif;
 	--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
 	--white: hsl(206, 100%, 94%);
 	--accent-color: hsl(206, 100%, 81%);
@@ -114,7 +114,7 @@ p {
 	line-height: 1.75rem;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 767px) {
 	h1 {
 		font-size: 2.6rem;
 		line-height: 3.75rem;

src/layout/Hero/HeroSection.svelte

@@ -43,7 +43,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.hero {
 			padding-bottom: 0;
 		}

src/layout/Hero/SocialHost.svelte

@@ -23,7 +23,7 @@
 		left: 0;
 	}
 
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.social-host {
 			left: 0;
 			width: 100%;

src/layout/Navbar/NavButton.svelte

@@ -72,7 +72,7 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		li {
 			padding: 0.75rem 1.25rem;
 			text-align: left;

src/layout/Navbar/NavHost.svelte

@@ -232,7 +232,7 @@
 		}
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.nav-wrapper {
 			flex-direction: column;
 			gap: 0.5rem;

src/routes/+page.svelte

@@ -43,7 +43,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.wrappezoid {
 			display: flex;
 			justify-content: center;

src/routes/contributors/+page.svelte

@@ -91,7 +91,7 @@
 	a:hover::after {
 		transform: translateX(5px);
 	}
-	@media screen and (max-width: 768px) {
+	@media screen and (max-width: 767px) {
 		.text-container {
 			padding: 2rem 1.75rem;
 			margin-bottom: 2rem;

src/routes/contributors/ContributorPerson.svelte

@@ -48,7 +48,7 @@
 		user-select: none;
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		h5 {
 			display: none;
 		}

src/routes/contributors/ContributorSection.svelte

@@ -93,7 +93,7 @@
 		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.contrib-host {
 			padding: 0.75rem;
 			gap: 0.25rem;

src/routes/patches/+page.svelte

@@ -219,7 +219,7 @@
 			display: none;
 		}
 	}
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		main {
 			grid-template-columns: none;
 			flex-direction: column;

src/routes/patches/Package.svelte

@@ -63,7 +63,7 @@
 		color: var(--white);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.package {
 			border-radius: 0px;
 			font-size: 0.9rem;

src/routes/patches/PackageMenu.svelte

@@ -1,6 +1,6 @@
 <div class="menu">
 	<h6>Packages</h6>
-	<hr/>
+	<hr />
 	<div class="slot">
 		<slot />
 	</div>
@@ -40,13 +40,14 @@
 		color: var(--accent-color);
 	}
 
-	@media (max-width: 768px) {
+	@media (max-width: 767px) {
 		.menu {
 			padding: 0.75rem;
 			height: unset;
 		}
 
-		h6, hr {
+		h6,
+		hr {
 			display: none;
 		}
 	}