From ecef4c9abf3dfdb743f194112a900fecc46ee9a7 Mon Sep 17 00:00:00 2001
From: Joseph Hutchinson <hutch7995@gmail.com>
Date: Tue, 1 May 2018 13:35:00 -0400
Subject: [PATCH] Add classes to hamburger menu elements and fix scrollbar on
 overlay menu

---
 layouts/partials/nav-bar.html |  6 +++---
 static/css/style.css          | 27 +++++++++------------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/layouts/partials/nav-bar.html b/layouts/partials/nav-bar.html
index 970897c..aea93d4 100644
--- a/layouts/partials/nav-bar.html
+++ b/layouts/partials/nav-bar.html
@@ -4,10 +4,10 @@
 		<input type="checkbox" onclick="hamburgerMenuPressed()"/>
 		<span></span>
 		<span></span>
-    <ul class="hamburger-menu-view">
-			<li><a href="/">Home</a></li>
+    <ul class="hamburger-menu-overlay">
+			<li><a href="/" class="hamburger-menu-overlay-link">Home</a></li>
       {{ range $key, $value := .Site.Taxonomies.categories }}
-			<li><a href="/categories/{{ $key | urlize  }}">{{ $key | humanize }}</a></li>
+			<li><a href="/categories/{{ $key | urlize  }}" class="hamburger-menu-overlay-link">{{ $key | humanize }}</a></li>
 			{{ end }}
     </ul>
   </div>
diff --git a/static/css/style.css b/static/css/style.css
index 02e652c..51dd894 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -58,61 +58,52 @@ strong {
   width: 33px;
   height: 4px;
   position: relative;
-  background: #3A3B3C;
+  background-color: #3A3B3C;
   border-radius: 3px;
   z-index: 105;
   transform-origin: center;
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
-              opacity 0.55s ease;
+              background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 .hamburger-menu span:first-of-type {
   margin-bottom: 5px;
 }
 .hamburger-menu input:checked ~ span {
-    opacity: 1;
-    background: white;
+    background-color: white;
     transform: rotate(45deg) translate(3.2px , 3.2px);
 }
 .hamburger-menu input:checked ~ span:nth-last-child(2) {
     transform: rotate(-45deg) translate(3.2px , -3.2px);
 }
-.hamburger-menu input ~ ul {
+.hamburger-menu-overlay {
     display: block;
     position: fixed;
     box-sizing: border-box;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 100%;
     z-index: 100;
     text-align: center;
     visibility: hidden;
-    overflow-y: hidden;
+    overflow-y: auto;
     margin: 0;
     padding: 3em 0 0 0;
-    background-color: rgb(0, 0, 0);
+    background-color: #000;
     opacity: 0;
     transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
 }
-.hamburger-menu input:checked ~ ul {
+input:checked ~ .hamburger-menu-overlay {
     visibility: visible;
     opacity: 0.9;
-    overflow-y: scroll;
 }
-.hamburger-menu > ul > li > a {
+.hamburger-menu-overlay-link {
     text-decoration: none;
     text-transform: uppercase;
     font-size: 2em;
     line-height: 1.7;
     color: white;
-    transition: all 0.5s ease-out;
-    /* opacity: 0; */
 }
-/* .hamburger-menu input:checked ~ ul li a {
-    font-size: 1.8em;
-    opacity: 1;
-} */
 .post {
     margin: 0 0 1em 0;
     line-height: 1.5;