From 3fd3554a1b27101b40ddb8f3b6598039ea0ae137 Mon Sep 17 00:00:00 2001
From: Chris <chris062689@gmail.com>
Date: Sat, 6 Jan 2018 01:48:28 -0500
Subject: [PATCH] Changed navbar from is-light to is-dark, updated SCSS to use
 dark theme.

---
 site/layouts/partials/header_homepage.html |  2 +-
 src/js/hero.js                             |  8 ++++----
 src/scss/shared.scss                       | 24 +++++++++++-----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/site/layouts/partials/header_homepage.html b/site/layouts/partials/header_homepage.html
index 05be010ec..a43714f8d 100644
--- a/site/layouts/partials/header_homepage.html
+++ b/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>
diff --git a/src/js/hero.js b/src/js/hero.js
index 9fc01f71d..cc0c44ced 100644
--- a/src/js/hero.js
+++ b/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');
         }
     });
 }
diff --git a/src/scss/shared.scss b/src/scss/shared.scss
index 8e0dd7f34..da1c24652 100644
--- a/src/scss/shared.scss
+++ b/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;
 }