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/old.css

@@ -1,261 +0,0 @@
-body {
-}
-
-a {
-}
-
-
-.menu-entries a:hover,
-.header .menu-btn:hover {
- 	background-color: var(--alt-bg);
- 	color: var(--acc-1);
-}
-
-.header .menu-btn:checked ~ .menu .logo {
- 	background-color: var(--acc-1);
- 	color: var(--alt-bg);
-}
-
-
-a.home-link{
-    display: none;
-}
-
-.logo img, .logo {
-    height: 24px;
-}
-
-.content {
-  overflow: none;
-  margin: auto 5% auto 5%;
-  word-wrap: break-word;
-  /* padding-bottom: 15%; */
-/* display: inline-grid; */
-/*   max-width: 45rem; */
-/*   margin-bottom: 2rem; */
-/*   margin: 2rem auto; */
-  /* padding-top: 100px; */
-
-}
-/* Lists */
-.post-snippet {
-  margin-bottom: 1rem;
-}
-
-.post-snippet h3 {
-  margin-bottom: 0.25rem;
-}
-
-/* header */
-
-.header {
-  z-index: 3;
-}
-
-.header .menu {
-/*   /1* width: 100%; *1/ */
-/*   height: auto; */
-  /* overflow: hidden; */
-  /* background-color: #a89984; */
-}
-
-
-
-
-
-
-.header .logo {
-  /* float: left; */
-}
-
-/* menu */
-
-.menu-entries {
-  /* display: none; */
-}
-
-.header .menu {
-}
-
-/* menu icon */
-
-.logo {
-  cursor: pointer;
-}
-
-.header .menu-icon {
-/*   cursor: pointer; */
-/*   float: right; */
-/*   padding: 28px 20px; */
-/*   position: relative; */
-/*   user-select: none; */
-}
-
-/* menu btn */
-
-.header .menu-btn {
-  display: none;
-}
-
-
-.menu .logo {
-  transition: 400ms;
-}
-
-footer {
-   /* position: fixed; */
-   left: 0;
-   /* bottom: 0; */
-   /* width: 100%; */
-   text-align: center;
-   /* max-height: 15%; */
-
-  padding-top; 10px;
-  padding-bottom: 10px;
-}
-
-footer .buttons {
-  margin-top: 5px;
-}
-
-footer .buttons img {
-  /* margin: 5px; */
-  display: inline-block;
-  max-height: 25em;
-  max-width: 100%;
-}
-
-/* div.content, footer{ */
-/*   margin-left: 0; */
-/*   /1* height: 1000px; *1/ */
-/* } */
-
-/* @media screen and (max-width: 900px) { */
-/*   ul.menu { width: 100%; */
-/*     height: auto; */
-/*     position: relative; */
-/*   } */
-  
-/*   ul.menu li a { */
-/*     padding: 15px; */
-/*   } */
-  
-/*   div.content, footer {margin-left: 0;} */
-/* } */
-
-/* .menu a { */
-/*     padding: 20px 30px; */
-/* } */
-/*   ul.menu li a { */
-/*     float: left; */
-/*   } */
-
-/*   .menu-entries { */
-/* 	float: right; */
-/*   } */
-
-/*   .header .menu li .menu-entries{ */
-/*     clear: none; */
-/*     align-self: right; */
-/*     width: auto; */
-/*     max-height: none; */
-/*   } */
-
-/*   .header .menu-icon { */
-/*     display: none; */
-/*   } */
-
-/* } */
-@media screen and (max-width: 750px) {
-
-
-  .menu-entries {
-    text-align: center;
-    float: none;
-    display: none;
-  }
-
-  .logo {
-/*     clear: none; */
-	  pointer-events: none;
-  }
-
-  .menu-icon {
-    cursor: pointer;
-  }
-
-.menu {
-  overflow: auto;
-}
-
-
-.content {
-	margin: auto 5% auto 5%;
-}
-
-}
-
-
-@media screen and (min-width: 1040px) {
-  /* ul.menu { */
-  .header {
-    top: 0;
-    width: 15%;
-    height: 100%;
-    position: fixed;
-  }
-
-  .menu {
-    height: 100%;
-  }
-  
-/*   .header .logo { */
-/*     float: none; */
-/*   } */
-/*   .header .menu { */
-/*     clear: both; */
-/*   } */
-
-  .menu-entries{ 
-	  float: none;
-  }
-
-.menu-entries a:hover,
-.header .menu-btn:hover {
-  color: #83a598; 
-  background-color: #504945;
-}
-
-/*   ul.menu li a { */
-/*     float: none; */
-/*     padding: 20px; */
-/*   } */
-  .content, footer {
-    /* margin: auto; */
-    padding: 1px 16px;
-  }
-  
-
-  .header .menu li a {
-    display: block;
-    /* width: 100%; */
-    float: none;
-  }
-
-.content { 
-  margin: auto 5% auto 20%;
-}
-
-}
-
-
-/*   .logo { */
-/*     height: 28px; */
-/*     width: fit-content; */
-/*   } */
-/* } */
-
-
-
-/* .header .logo { */
-/*   display: block; */

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);
 	}
 }
+
+