Changed navbar from is-light to is-dark, updated SCSS to use dark theme.

site/layouts/partials/header_homepage.html

@@ -1,6 +1,6 @@
 <section id="homepage-hero" class="hero is-medium is-info is-bold">
     <div class="hero-head">
-        <nav class="navbar is-fixed-top" id="hero-navbar">
+        <nav id="hero-navbar" class="navbar is-dark is-size-6 is-fixed-top" role="navigation" aria-label="main navigation">
             {{ partial "nav_contents" . }}
         </nav>
     </div>

src/js/hero.js

@@ -1,11 +1,11 @@
-let navbar = document.getElementById("hero-navbar");
+const navbar = document.getElementById('hero-navbar');
 
 if (navbar) {
-    window.addEventListener('scroll', function (e) {
+    window.addEventListener('scroll', () => {
         if (window.scrollY > 0) {
-            navbar.classList.add("is-freestanding");
+            navbar.classList.add('is-freestanding');
         } else {
-            navbar.classList.remove("is-freestanding");
+            navbar.classList.remove('is-freestanding');
         }
     });
 }

src/scss/shared.scss

@@ -1,20 +1,20 @@
-// Used to smoothly change background colors
-#hero-navbar {
-    transition: background-color 0.2s ease;
-}
-
-// Used to distinguish the hero navbar when the page has been scrolled
-.hero .navbar.is-freestanding {
-    background: $info;
-}
-
-// Used as helper
+// Center a column's content vertically.
 .columns .column.is-centered-vertically {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
+// Used to smoothly change background colors when transitioning on the homepage.
+.navbar {
+    transition: background-color 0.2s ease;
+}
+
+// TODO: $navbar-background-color is the wrong variable to use here, as it's a dark theme?
+.hero .navbar.is-freestanding {
+    background: #363636;
+}
+
 // https://github.com/jgthms/bulma/issues/935
 .navbar-dropdown {
     a.navbar-item {
@@ -27,7 +27,7 @@
     }
 }
 
-// Works around incorrect coloring on navbar dropdown, related to above
+// Works around incorrect coloring on navbar dropdown, related to above.
 .is-info div {
   color: inherit !important;
 }