cleaned up css & added shadows

static/css/colors.css

@@ -3,6 +3,7 @@
 	--fg: #3c3836;
 	--alt-bg: #d5c4a1;
 	--acc-1: #076678;
+	--shadow: #504945;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -11,6 +12,6 @@
 		--fg: #ebdbb2;
 		--alt-bg: #504945;
 		--acc-1: #83a598;
+		--shadow: #1d2021;
 	}
 }
-

static/css/style.css

@@ -1,9 +1,6 @@
 @import url('./colors.css'); /* Include colorscheme */
-/* TODO clean and move all ugly code from old.css into this file */
-/* @import url('./old.css'); */
 
-
+/* Globals  */
-/* Global  */
 html, body {
   margin: 0;
   padding: 0;
@@ -25,147 +22,102 @@ a{
 /* Main Body */
 
 .content {
-  margin: auto 5% auto 5%;
+  margin: 5em 5% auto 5%;
 }
 	
-
+/* Navigation Menu */
-	.menu-entries {
-  	/* display: block; */
-  	/* clear: both; */
-  	/* transition: max-height .2s ease-out; */
-	}
-
-	/* Footer */
-	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;
-	}
-
-
-/* Header */
-
 .header { 
 	width: 100%;
-	/* position: fixed; */
-	/* top: 0; */
 	background-color: var(--alt-bg);
-	/*   z-index: 3; */
+	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
+	position: fixed;
+	top: 0;
+
 
 }
 
-.header .menu {
+.menu-entries a:hover{
+	background-color: var(--acc-1);
+	color: var(--alt-bg);
+	transition: 400ms;
+	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
+
+}
+
+.menu {
   margin: 0;
-  /* position: relative; */
-  /* overflow: auto; */
   padding: 0;
   list-style: none;
 }
+.menu-entries {
+	float: right;
+}
 
-.header .menu a {
+.menu-btn {
+  display: none;
+}
+
+.menu a {
 	display: inline-block;
 	padding: 20px;
 }
 
-	/* Menu */
+
-.header .menu-btn {
+/* Footer */
-  display: none;
+footer {
+	/* position: fixed; */
+
+	width: 100%;
+	text-align: center;
+	padding-bottom: 14px;
+
 }
 
-
 @media screen and (max-width: 755px) {
-  .logo {
+/* Mobile layout - logo now serves as toggle for rest of menu items */
-/*     clear: none; */
-	  pointer-events: none;
-  }
 
-  .menu-icon {
+.logo {
+	pointer-events: none;
+}
+
+.menu-icon {
 	cursor: pointer;
  }
 
-	/* .content { */
+.menu-entries {
-	/* 	margin: auto 5% auto 5%; */
-	/* } */
-.header .menu-btn:checked ~ .menu li .menu-entries, .menu li .menu-entries a{
-  display: block;
-}
-
-.header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover {
-	background-color: var(--acc-1);
-	color: var(--alt-bg);
-  	transition: 400ms;
-
-}
-
-
-	.menu-entries {
 	text-align: center;
 	float: none;
 	display: none;
-	}
+}
 	
-	.menu-icon a.logo {
+a.logo {
+	display: block;
+}
+
+	.menu-btn:checked ~ 
+		.menu li .menu-entries,
+		.menu li .menu-entries a{
 			display: block;
 	}
 
-}
+	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
-
-@media screen and (min-width: 755px) {
-
-	.menu-entries {
-	  	float: right;
-	}
-
-	
-	.header .menu li a {
-	  	/* width: fit-content; */
-		/* padding:15px; */
-	  /* display: inline-block; */
-	}
-	/*  */
-	/* .menu-entries a { */
-	/*   	float: left; */
-	/* } */
-}
-
-@media screen and (min-width: 1040px) {
-  .header {
-    top: 0;
-    width: 15%;
-    height: 100%;
-    position: fixed;
-  }
-
-	.menu {
-		width: 100%;
-		padding: 0;
-		margin: 0;
-	}
-
-.header .menu a {
-	display: block;
-}
-	.header .menu li a{
-		/* width: 100%; */
-		display: block;
-		/* padding: 15px; */
-		margin: 0;
-	}
-
-	.menu .menu-entries a:hover{
 	background-color: var(--acc-1);
 	color: var(--alt-bg);
 	transition: 400ms;
 	}
+}
+
+@media screen and (min-width: 1040px) {
+/* Wide window - links on a left sidebar */	
+	.header {
+		width: 15%;
+		height: 100%;
+		box-shadow: inset -22px 0 20px -20px var(--shadow);
+	}
+
+	.menu a {
+		display: block;
+	}
 
 	.menu-entries{ 
 		float: none;
@@ -173,9 +125,10 @@ a{
 
 	.content { 
 		margin: auto 5% auto 20%;
-	}
-
-  .content, footer {
 		padding: 1px 16px;
 	}
+
+	.menu-entries a:hover{
+		box-shadow: inset -22px 0 20px -20px var(--shadow);
+	}
 }