finished main navbar elements

Author: aName2050

src/Client/CSS/home.css

@@ -5,6 +5,10 @@ nav.navbar {
     padding: 0;
     margin: 0;
     top: 0;
+    transition: 0.5s;
+}
+
+nav.navbar.navbar-shadow {
     box-shadow: 0 7.5px 15px;
 }
 
@@ -55,10 +59,6 @@ ul.nav-items > li.nav-item > a:hover {
 }
 
 @media screen and (max-width: 500px) {
-    body {
-        background-color: black;
-    }
-
     ul.nav-items {
         padding: 14px 2px;
     }
@@ -67,3 +67,7 @@ ul.nav-items > li.nav-item > a:hover {
         padding: 19px 2px;
     }
 }
+
+@media screen and (max-width: 310px) {
+    /* coming soon! */
+}

src/Client/JS/home.js

@@ -1,24 +1,28 @@
 window.onload = async () => {
-	// Reload page once to resolve any network issues
-	var reloaded = sessionStorage.getItem("reloaded");
-	if (reloaded == "false" || !reloaded) {
-		sessionStorage.setItem("reloaded", "true");
-		location.reload();
-	}
+    // Reload page once to resolve any network issues
+    var reloaded = sessionStorage.getItem('reloaded');
+    if (reloaded == 'false' || !reloaded) {
+        sessionStorage.setItem('reloaded', 'true');
+        location.reload();
+    }
 
-	// Load buttons
-	// var navButtons = document.getElementById("navButtons");
+    // Load buttons
+    // var navButtons = document.getElementById("navButtons");
 
-	var userStatusRaw = await fetch("/server/api/user/account/status");
-	var userStatus = await userStatusRaw.json();
+    var userStatusRaw = await fetch('/server/api/user/account/status');
+    var userStatus = await userStatusRaw.json();
 
-	console.log(userStatus);
+    console.log(userStatus);
 };
 
-window.addEventListener("scroll", function () {
-	var header = document.getElementById("mainHeader");
-	if (window.scrollY > header.offsetTop + header.offsetHeight) {
-		var navbar = document.getElementById("navbar");
-		navbar.classList.add("navbar-shadow");
-	}
+// Navbar box shadow only appears when scrolling far enough down
+// the page to cover an element
+window.addEventListener('scroll', function () {
+    var header = document.getElementById('mainHeader');
+    var navbar = document.getElementById('navbar');
+    if (window.scrollY + header.style.height > header.offsetHeight) {
+        navbar.classList.add('navbar-shadow');
+    } else {
+        navbar.classList.remove('navbar-shadow');
+    }
 });