wip - hamburger menu

layouts/partials/nav.html

@@ -2,10 +2,23 @@
 			<input class="menu-btn" type="checkbox" id="menu-btn" />
 			<ul class="menu" >
 				<li>
-			<label class="menu-icon" for="menu-btn">
 				<a href="/" class="logo" >{{ .Site.Title }}</a>
+			<label class="menu-icon" for="menu-btn">
+
+<div class="hamburger" onclick="myFunction(this)">
+  <div class="bar1"></div>
+  <div class="bar2"></div>
+  <div class="bar3"></div>
+</div>
+
+<script>
+function myFunction(x) {
+  x.classList.toggle("change");
+}
+</script>
 			</label>
 
+					
 					<span class="menu-entries">
 					<a href="/" class="home-link" >Home</a>
        					{{ range.Site.Menus.main }}

static/css/style.css

@@ -1,4 +1,4 @@
-@import url('./colors.css'); /* Include colorscheme */
+@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
 
 /* Globals  */
 html, body {
@@ -36,6 +36,10 @@ a{
 
 }
 
+.hamburger {
+	display: none;
+}
+
 .menu-entries a:hover{
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
@@ -105,6 +109,59 @@ a.logo {
 	color: var(--alt-bg);
 	transition: 400ms;
 	}
+
+
+
+
+
+
+
+.hamburger {
+  display: block;
+	float: right;
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	margin-top: 12px;
+	margin-right: 12px;
+  cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+  width: 35px;
+  height: 5px;
+	background-color: var(--acc-1);
+  margin: 6px 0;
+  transition: 0.4s;
+}
+
+.change .bar1 {
+	background-color: var(--alt-bg);
+  transform: translate(0, 11px) rotate(-45deg);
+}
+
+.change .bar2 {
+	opacity: 0;
+}
+
+.change .bar3 {
+  transform: translate(0, -11px) rotate(45deg);
+	background-color: var(--alt-bg);
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
 }
 
 @media screen and (min-width: 1040px) {
@@ -132,3 +189,5 @@ a.logo {
 		box-shadow: inset -22px 0 20px -20px var(--shadow);
 	}
 }
+
+