layouts/partials/nav.html

@@ -2,23 +2,10 @@
 			<input class="menu-btn" type="checkbox" id="menu-btn" />
 			<ul class="menu" >
 				<li>
-				<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>
+				<a href="/" class="logo" >{{ .Site.Title }}</a>
 			</label>
 					
-					
 					<span class="menu-entries">
 					<a href="/" class="home-link" >Home</a>
        					{{ range.Site.Menus.main }}

static/css/old.css

@@ -0,0 +1,261 @@
+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('./colorschemes/gruvbox.css'); /* Include colorscheme */
+@import url('./colors.css'); /* Include colorscheme */
 
 /* Globals  */
 html, body {
@@ -36,10 +36,6 @@ a{
 
 }
 
-.hamburger {
-	display: none;
-}
-
 .menu-entries a:hover{
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
@@ -109,59 +105,6 @@ 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) {
@@ -189,5 +132,3 @@ a.logo {
 		box-shadow: inset -22px 0 20px -20px var(--shadow);
 	}
 }
-
-