style for mobile first nav

4 files changed, 131 insertions, 58 deletions

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 43ed174..70a0266 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -2,21 +2,21 @@
     <ul class="menu__items">
         {{ if .Site.Menus.main }}
         {{ range .Site.Menus.main }}
-        <li class="item"><a href="{{.URL}}">{{ .Name }}</a></li>
+        <li><a href="{{.URL}}">{{ .Name }}</a></li>
         {{ end }}
         {{ end }}
         {{ if .Site.Params.twitter }}
-        <li class="item twitter">
+        <li class="twitter">
             <a href="https://twitter.com/{{ .Site.Params.twitter }}" title="Follow me">Twitter</a>
         </li>
         {{ end }}
         {{ if .Site.Params.github }}
-        <li class="item github">
+        <li class="github">
             <a href="https://github.com/{{ .Site.Params.github }}" title="Fork me">GitHub</a>
         </li>
         {{ end }}
         {{ if .Site.Params.linkedin }}
-        <li class="item linkedin">
+        <li class="linkedin">
             <a href="https://fr.linkedin.com/in/{{ .Site.Params.linkedin }}" title="About me">LinkedIn</a>
         </li>
         {{ end }}
diff --git a/static/css/style.css b/static/css/style.css
index 924f140..bb965aa 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -480,50 +480,31 @@ html {
     background-color: #FFFFFF;
 }
 
-.header-wrapper {
+.header-wrapper .headline {
     background-color: #E5E1D1;
-    display: table;
     padding: .5em 1.5em;
-    width: 100%;
 }
 
 .header-wrapper a {
     text-decoration: none;
 }
 
-.header-wrapper .headline,
-.header-wrapper .menu {
-    display: table-cell;
-    vertical-align: middle;
-}
-
-.header-wrapper .headline {
-    text-align: left;
-}
-
-.header-wrapper .menu {
-    text-align: right;
-}
-
 .menu__items {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
-.menu__items .item {
-    display: inline-block;
-}
-
-.menu__items .item + .item {
-    margin-left: .5em;
+.menu__items a {
+    background-color: #C44741;
+    color: #E5E1D1;
+    display: block;
+    padding: .5em 1.5em;
+    text-decoration: none;
 }
 
-.menu__items .item + .item::before {
-    color: #FFFFFF;
-    content: "|";
-    display: inline-block;
-    margin-right: 0.5em;
+.menu__items a:hover {
+    background-color: #77201C;
 }
 
 .content {
@@ -706,6 +687,54 @@ h2, h4, h6 {
     h6 {
         font-size: 1em;
     }
+    .header-wrapper {
+        background-color: #E5E1D1;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+    }
+    .header-wrapper .headline {
+        padding: 0;
+    }
+    .header-wrapper .headline,
+    .header-wrapper .menu {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .header-wrapper .headline {
+        text-align: left;
+    }
+    .header-wrapper .menu {
+        text-align: right;
+    }
+    .menu__items {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .menu__items li {
+        display: inline-block;
+    }
+    .menu__items li + li {
+        margin-left: .5em;
+    }
+    .menu__items li + li::before {
+        color: #FFFFFF;
+        content: "|";
+        display: inline-block;
+        margin-right: 0.5em;
+    }
+    .menu__items a {
+        background-color: transparent;
+        color: #C44741;
+        display: inline;
+        padding: 0;
+        text-decoration: none;
+    }
+    .menu__items a:hover {
+        background-color: transparent;
+        color: #77201C;
+    }
 }
 
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index a3b109c..fd25ab0 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -21,4 +21,61 @@
     h4 { font-size: $fontSize * 2; }
     h5 { font-size: $fontSize * 1.5; }
     h6 { font-size: $fontSize * 1; }
+
+    // header
+    .header-wrapper {
+        background-color: $neutral;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+        .headline {
+            padding: 0;
+        }
+
+        .headline,
+        .menu {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .headline {
+            text-align: left;
+        }
+
+        .menu {
+            text-align: right;
+        }
+    }
+
+    // Menu
+    .menu__items {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            display: inline-block;
+        }
+
+        li + li {
+            margin-left: .5em;
+        }
+
+        li + li::before {
+            @include  _separator-before($white, "|");
+        }
+
+        a {
+            background-color: transparent;
+            color: $contrast;
+            display: inline;
+            padding: 0;
+            text-decoration: none;
+        }
+
+        a:hover {
+            background-color: transparent;
+            color: $shadow;
+        }
+    }
 }
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 6a99b84..113b61c 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -9,27 +9,12 @@ html {
 
 // header
 .header-wrapper {
-    background-color: $neutral;
-    display: table;
-    padding: .5em 1.5em;
-    width: 100%;
-
-    a {
-        text-decoration: none;
-    }
-
-    .headline,
-    .menu {
-        display: table-cell;
-        vertical-align: middle;
-    }
-
     .headline {
-        text-align: left;
+        background-color: $neutral;
+        padding: .5em 1.5em;
     }
-
-    .menu {
-        text-align: right;
+    a {
+        text-decoration: none;
     }
 }
 
@@ -39,19 +24,21 @@ html {
     margin: 0;
     padding: 0;
 
-    .item {
-        display: inline-block;
+    a {
+        background-color: $contrast;
+        color: $neutral;
+        display: block;
+        padding: .5em 1.5em;
+        text-decoration: none;
     }
 
-    .item + .item {
-        margin-left: .5em;
-    }
+    a:hover {
+        background-color: $shadow;
 
-    .item + .item::before {
-        @include  _separator-before($white, "|");
     }
 }
 
+
 // Content
 .content {
     margin: 0 auto;