From b1f382e6fb5b61b97153134adda9f7824d015040 Mon Sep 17 00:00:00 2001
From: "Peter J. Holzer" <hjp@hjp.at>
Date: Fri, 1 Jun 2018 14:50:28 +0200
Subject: [PATCH] Fix side menu and rename variables

---
 luga.css | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/luga.css b/luga.css
index 2803e35..a7093d6 100644
--- a/luga.css
+++ b/luga.css
@@ -1,6 +1,7 @@
 body {
-  --yellow-light: #fecc04;
-  --yellow-dark: #feb204;
+  --color-accent-light: #fecc04;
+  --color-accent-dark: #feb204;
+  --width-column-left: auto
 }
 
 @font-face {
@@ -16,7 +17,7 @@ body {
 }
 
 header {
-    background-color: var(--yellow-light);
+    background-color: var(--color-accent-light);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -27,7 +28,7 @@ header {
 @media only screen and (min-width: 65rem) {
   body {
     display: grid;
-    grid-template-columns: 13rem auto 20rem;
+    grid-template-columns: var(--width-column-left) auto 20rem;
     grid-template-rows: 3rem auto auto auto;
   }
 
@@ -62,7 +63,7 @@ header {
 @media only screen and (min-width: 40rem) and (max-width: 65rem) {
   body {
     display: grid;
-    grid-template-columns: 13rem auto;
+    grid-template-columns: var(--width-column-left) auto;
     grid-template-rows: auto auto auto auto auto;
   }
 
@@ -97,14 +98,14 @@ header {
 @media only screen and (max-width: 40rem) {
   body {
     display: grid;
-    grid-template-columns: 3rem auto;
+    grid-template-columns: var(--width-column-left) auto;
     grid-template-rows: auto auto auto auto auto;
   }
 
   #logo {
     grid-column: 1;
     grid-row: 1 / span 2;
-    height: 3rem;
+    width: 3rem;
   }
 
   header {
@@ -116,11 +117,13 @@ header {
     grid-column: 1;
     grid-row: 3;
     overflow: hidden;
+    width: 3em;
   }
 
   nav:hover {
     overflow: visible;
     z-index: 1;
+    width: auto;
   }
 
   main {
@@ -152,7 +155,7 @@ nav a:hover {
 }
 
 nav a.current {
-    background-color: var(--yellow-dark);
+    background-color: var(--color-accent-dark);
 }
 
 input.leftfield {
@@ -192,11 +195,11 @@ h1 {
 }
 
 footer {
-  /* background-color: var(--yellow-dark); */
+  /* background-color: var(--color-accent-dark); */
   color: #888;
 }
 nav {
-  background-color: var(--yellow-light);
+  background-color: var(--color-accent-light);
   border-radius: 0em 0em 0em 1em;
   margin-right: 1rem;
   margin-top: 1rem;
@@ -206,7 +209,7 @@ nav {
 nav ul {
   list-style-type: none;
   padding-left: 0.7em;
-  background-color: var(--yellow-light);
+  background-color: var(--color-accent-light);
 }
 
 footer ul {
@@ -220,13 +223,13 @@ p, h2, h3, dl {
 }
 
 h2 {
-  border-top: solid 2px var(--yellow-dark);
+  border-top: solid 2px var(--color-accent-dark);
   font-weight: normal;
   font-size: 1.7rem;
 }
 
 h3 {
-  border-top: solid 1px var(--yellow-light);
+  border-top: solid 1px var(--color-accent-light);
   font-weight: normal;
   font-size: 1.5rem;
 }