From b0dbcb8ff7e9da8a9bb538c2e0122e6235278a61 Mon Sep 17 00:00:00 2001
From: Manos <manos@delkappa.com>
Date: Tue, 31 Dec 2019 15:39:19 +0200
Subject: [PATCH] OCD

---
 css/styles.css | 114 +++++++++++++++++++++++++++----------------------
 index.html     |   8 ++--
 2 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 39c0e09..ee9dddf 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -40,8 +40,72 @@ h1, h2, h3, h4, h5, p {
   text-transform: uppercase;
 }
 
+#nav-mini {
+  position: fixed;
+  top: 0;
+  left: 5%;
+  outline: 0;
+  text-decoration: none;
+  z-index: 1;
+}
+
+#nav-mini .menu {
+  display: none;
+  box-shadow: 0 0 0.5em black;
+  background-color: black;
+  /* margin-left: 5%; */
+}
+
 #nav-mini .menu a {
   text-align: left;
+  padding: 1em 2em;
+}
+
+#nav-mini .menu .first {
+  padding-top: 1.5em;
+}
+
+#nav-mini .menu .last {
+  padding-bottom: 1.5em;
+}
+
+#nav-mini .menu a:hover {
+  color: gray;
+}
+
+#nav-ctrl + label {
+  width: 3em;
+  height: 3em;
+  background-color: white;
+  background-image: url("../img/menu.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 50%;
+  box-shadow: 0 0 0.5em black;
+  cursor: pointer;
+  float: left;
+  margin-right: 0.5em;
+}
+
+/* #nav-ctrl:hover + label {
+  filter: invert(100%);
+  box-shadow: 0 0 0.5em white;
+} */
+
+#nav-ctrl:checked + label {
+  filter: invert(100%);
+  box-shadow: 0 0 0.5em white;
+  background-image: url("../img/close.svg");
+  background-size: 25%;
+}
+
+/* #nav-ctrl:checked:hover + label {
+  filter: invert(0%);
+  box-shadow: 0 0 0.5em black;
+} */
+
+#nav-ctrl:checked + label + .menu {
+  display: inline-block;
 }
 
 #nav a:hover {
@@ -306,58 +370,8 @@ h1, h2, h3, h4, h5, p {
     display: none;
   }
 
-  #nav-mini .menu {
-    display: none;
-    box-shadow: 0 0 0.5em black;
-    background-color: black;
-  }
-
-  #nav-mini .menu a:hover {
-    color: gray;
-  }
-
   #nav-mini {
     display: block;
-    position: fixed;
-    top: 0;
-    left: 5%;
-    outline: 0;
-    text-decoration: none;
-    z-index: 1;
-  }
-
-  #nav-ctrl + label {
-    width: 3em;
-    height: 3em;
-    background-color: white;
-    background-image: url("../img/menu.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 50%;
-    box-shadow: 0 0 0.5em black;
-    display: block;
-    cursor: pointer;
-  }
-
-  /* #nav-ctrl:hover + label {
-    filter: invert(100%);
-    box-shadow: 0 0 0.5em white;
-  } */
-
-  #nav-ctrl:checked + label {
-    filter: invert(100%);
-    box-shadow: 0 0 0.5em white;
-    background-image: url("../img/close.svg");
-    background-size: 25%;
-  }
-
-  /* #nav-ctrl:checked:hover + label {
-    filter: invert(0%);
-    box-shadow: 0 0 0.5em black;
-  } */
-
-  #nav-ctrl:checked + label + .menu {
-    display: inline-block;
   }
 
   /* About */
diff --git a/index.html b/index.html
index 30c9415..6a1785a 100644
--- a/index.html
+++ b/index.html
@@ -23,15 +23,13 @@
     </nav>
     <nav id="nav-mini">
       <input type="checkbox" id="nav-ctrl"/>
-      <label for="nav-ctrl">
-        <!-- <img src="img/menu.svg"/> -->
-      </label>
+      <label for="nav-ctrl"></label>
       <div class="menu">
-        <a href="#home">Home</a>
+        <a href="#home" class="first">Home</a>
         <a href="#about">About</a>
         <a href="#experience">Experience</a>
         <a href="#education">Education</a>
-        <a href="#contact">Contact</a>
+        <a href="#contact" class="last">Contact</a>
       </div>
     </nav>
     <div id="home">