Migrate nav bar to Astro

src/fonts.css

@@ -1,16 +1,28 @@
 @font-face {
 	font-family: minecraft;
-	src: url("../fonts/minecraftregular.otf");
+	src: url("/fonts/minecraftregular.otf") format("opentype");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
 }
 @font-face {
 	font-family: minecraft-alt;
-	src: url("../fonts/minecraftregular_backup.ttf");
+	src: url("/fonts/minecraftregular_backup.ttf") format("truetype");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
 }
 @font-face {
 	font-family: minecraft-bold;
-	src: url("../fonts/minecraftbold.otf");
+	src: url("/fonts/minecraftbold.otf") format("opentype");
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
 }
 @font-face {
 	font-family: minecraft-italic;
-	src: url("../fonts/minecraftitalic.otf");
+	src: url("/fonts/minecraftitalic.otf") format("opentype");
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap;
 }

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import "../vars.css";
 import "../fonts.css";
-import "../utils.css";
 import NavBar from "../components/NavBar.astro";
 
 interface Props {
@@ -67,7 +66,26 @@ if (defaultKeywords) {
 	</body>
 </html>
 
-<style>
+<style is:global>
+	/* Global reset and font styles */
+	*,
+	::after,
+	::before {
+		padding: 0;
+		margin: 0;
+		text-decoration: none;
+		border: 0;
+		background: none;
+		font-family: minecraft, minecraft-alt;
+		box-sizing: border-box;
+		color: white;
+		font-size: 100%;
+	}
+
+	*:focus {
+		outline: none;
+	}
+
 	html,
 	body {
 		margin: 0;

src/scripts/mobileNav.js

@@ -0,0 +1,32 @@
+// Mobile navigation functionality
+document.addEventListener('DOMContentLoaded', () => {
+  const mobileNavBtn = document.getElementById('nav-menu-btn');
+  const mobileNavDropdown = document.getElementById('mobile-nav-dropdown');
+  const menuBtnImg = mobileNavBtn?.querySelector('img');
+
+  if (mobileNavBtn && mobileNavDropdown && menuBtnImg) {
+    // Initialize menu as closed
+    mobileNavDropdown.style.display = 'none';
+
+    // Toggle menu function
+    window.togglenav = () => {
+      if (mobileNavDropdown.style.display === 'none') {
+        // Open menu
+        mobileNavDropdown.style.display = 'block';
+        menuBtnImg.src = '/images/icons/close_menu.png';
+      } else {
+        // Close menu
+        mobileNavDropdown.style.display = 'none';
+        menuBtnImg.src = '/images/icons/open_menu.png';
+      }
+    };
+
+    // Close menu on window resize (if screen becomes desktop size)
+    window.addEventListener('resize', () => {
+      if (window.innerWidth > 1050) {
+        mobileNavDropdown.style.display = 'none';
+        menuBtnImg.src = '/images/icons/open_menu.png';
+      }
+    });
+  }
+});

src/styles/navbar.css

@@ -0,0 +1,286 @@
+*,
+::after,
+::before {
+	/* removed default styling */
+	padding: 0;
+	margin: 0;
+	text-decoration: none;
+	border: 0;
+	background: none;
+	font-family: minecraft, minecraft-alt;
+	box-sizing: border-box;
+	color: white;
+	font-size: 100%;
+}
+
+*:focus {
+	/* removed default styling */
+	outline: none;
+}
+
+/* Navbar Styles */
+nav {
+	width: 100vw;
+	height: var(--navBarHeight);
+	background: linear-gradient(
+		180deg,
+		var(--skyDarkBlueTop) 0%,
+		var(--skyDarkBlueBot) 75%
+	);
+	padding: 7px 25px;
+	box-shadow: var(--perspectiveBoxShadow);
+	border-bottom: 2px solid black;
+	position: fixed;
+	top: 0;
+	z-index: 10;
+	overflow: visible;
+}
+
+.nav-content {
+	max-width: 1500px;
+	height: 100%;
+	margin: 0 auto;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+/* Left side of navbar */
+.left {
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+/* Right side of navbar */
+.right {
+	display: flex;
+	height: 100%;
+	align-items: center;
+	justify-content: flex-end;
+	overflow: visible;
+}
+
+/* Logo styling */
+#nav-logo {
+	padding: 0 18px 0 0;
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+#nav-logo img {
+	height: 100%;
+	max-height: 66px;
+	width: auto;
+	object-fit: contain;
+}
+
+#nav-logo:hover {
+	background: none;
+	border: none;
+}
+
+/* Navigation links */
+#nav-links {
+	display: flex;
+	height: 100%;
+	position: relative;
+	align-items: center;
+}
+
+#nav-links a,
+#nav-links .dropdown {
+	padding: 15px 26px;
+	font-size: 1.25em;
+	text-transform: uppercase;
+	text-shadow: var(--mcTextShadow);
+	margin: 0;
+}
+
+#nav-links a:first-child {
+	margin-left: 1px;
+}
+
+#nav-links a:nth-child(2),
+#nav-links a:nth-child(3),
+#nav-links a:nth-child(4),
+#nav-links a:nth-child(5),
+#nav-links .dropdown {
+	margin-left: -2px;
+}
+
+#nav-links a:hover {
+	background: rgba(0, 0, 0, 0.15);
+	border-bottom: solid 5px rgba(0, 0, 0, 0.15);
+}
+
+/* Dropdown menu */
+.dropdown {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+}
+
+#nav-links .dropdown:hover {
+	background: rgba(0, 0, 0, 0.15);
+	position: relative;
+	border-bottom: solid 5px transparent;
+}
+
+#nav-links .dropdown:hover::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	height: 16px;
+	background: rgba(0, 0, 0, 0.15);
+	z-index: 10;
+}
+
+#nav-links .dropdown:hover a:hover {
+	background: rgba(0, 0, 0, 0.15);
+	border-bottom: none;
+}
+
+.dropdown-content {
+	display: none;
+	position: absolute;
+	top: calc(100% + 16px);
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	min-width: 100%;
+	text-wrap: nowrap;
+	z-index: 11;
+	padding-bottom: 30px;
+}
+
+.dropdown-content a {
+	display: block;
+	padding: 12px 20px;
+	font-size: 1em !important;
+	text-transform: none;
+	text-shadow: none;
+	text-decoration: none;
+	margin-bottom: 5px;
+}
+
+.dropdown-content a:hover {
+	background: rgba(0, 0, 0, 0.25);
+	border-bottom: none;
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}
+
+/* Play Now button */
+#join-now-button {
+	background: linear-gradient(
+		180deg,
+		var(--logoLimeGreen) 0%,
+		var(--logoLimeGreen2) 100%
+	);
+	height: 100%;
+	margin-top: -8px;
+	margin-bottom: -9px;
+	padding: 0 30px;
+	color: var(--logoDarkGreen);
+	font-weight: bold;
+	font-size: 1.75em;
+	border: 2px solid var(--logoDarkGreen);
+	box-shadow: var(--centeredBoxShadow);
+	font-family: minecraft-bold, minecraft, sans-serif;
+	display: flex;
+	align-items: center;
+	position: relative;
+	z-index: 11;
+}
+
+/* Play button container */
+.play-button-container {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	overflow: visible;
+}
+
+/* Play Now button class */
+.play-now-button {
+	height: 91% !important;
+	margin-top: -8px !important;
+	margin-bottom: -8px !important;
+}
+
+#join-now-button:hover {
+	cursor: pointer;
+	background: var(--logoDarkGreen);
+	color: var(--logoLimeGreen);
+	border: 2px solid var(--logoLimeGreen);
+}
+
+/* Mobile menu button */
+#nav-menu-btn {
+	display: none;
+	height: 100%;
+}
+
+#nav-menu-btn img {
+	height: 100%;
+	padding: 10px;
+}
+
+#nav-menu-btn:hover {
+	cursor: pointer;
+}
+
+/* Mobile dropdown menu */
+#mobile-nav-dropdown {
+	display: none;
+	position: absolute;
+	text-align: center;
+	top: var(--navBarHeight);
+	right: 0;
+	background-image: url("/images/backgrounds/mobile_nav_bg.png");
+	background-size: 64px;
+	height: calc(100vh - var(--navBarHeight));
+	padding: 15px 0;
+	border-left: 2px solid black;
+	box-shadow: var(--perspectiveBoxShadow);
+	z-index: 9;
+	max-height: 100vh;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+#mobile-nav-dropdown a {
+	display: block;
+	height: auto;
+	line-height: calc(var(--navBarHeight) / 1.35);
+	padding: 0 40px;
+	font-size: 1.25em;
+	text-transform: uppercase;
+	text-shadow: var(--mcTextShadow);
+}
+
+#mobile-nav-dropdown a:hover {
+	background: rgba(0, 0, 0, 0.25);
+	border-bottom: none;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 1050px) {
+	.desktop-only {
+		display: none;
+	}
+
+	.mobile-only {
+		display: block;
+	}
+
+	#nav-logo {
+		flex-grow: 1;
+	}
+}