enhance mobile navigation

4 files changed, 51 insertions, 18 deletions

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 9e467b0..43ed174 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -21,5 +21,4 @@
         </li>
         {{ end }}
     </ul>
-    {{ partial "social" . }}
 </nav>
diff --git a/static/css/style.css b/static/css/style.css
index 3066933..bb61016 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -494,7 +494,6 @@ html {
 .header-wrapper .headline,
 .header-wrapper .menu {
     display: table-cell;
-    height: 80px;
     vertical-align: middle;
 }
 
@@ -537,6 +536,10 @@ html {
     margin-top: 3em;
 }
 
+.post--preview .post__title {
+    margin-bottom: .25em;
+}
+
 .legal {
     color: #77201C;
     margin-top: 3em;
@@ -549,6 +552,22 @@ html {
     width: 100%;
 }
 
+.post__meta a {
+    color: #52616D;
+}
+
+.post__meta a:hover {
+    color: #2C343B;
+}
+
+.post__meta a:focus {
+    color: #C44741;
+}
+
+.post__meta a:active {
+    color: #77201C;
+}
+
 .post__meta [class^=post__meta__] {
     display: table-cell;
     vertical-align: middle;
@@ -566,10 +585,10 @@ html {
 }
 
 .post__meta [class^=post__meta__] li + li::before {
-    color: #C44741;
+    color: #52616D;
     content: "•";
     display: inline-block;
-    margin-right: .25em;
+    margin-right: .5em;
 }
 
 .post__meta .post__meta__infos {
@@ -591,10 +610,12 @@ html {
 
 .headline__title {
     color: #C44741;
+    display: block;
     font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
     font-size: 1.5em;
     font-weight: bold;
     margin: 0;
+    padding: .5em 0;
 }
 
 h1, h3, h5 {
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 5d0cd1e..06a3c5a 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -21,7 +21,6 @@ html {
     .headline,
     .menu {
         display: table-cell;
-        height: 80px;
         vertical-align: middle;
     }
 
@@ -67,6 +66,13 @@ html {
     }
 }
 
+// Post preview
+.post--preview {
+    .post__title {
+        margin-bottom: .25em;
+    }
+}
+
 // Footer
 .legal {
     color: $shadow;
@@ -80,27 +86,32 @@ html {
     display: table;
     width: 100%;
 
-   [class^=post__meta__] {
+    a { color: $light; }
+    a:hover { color: $base; }
+    a:focus { color: $contrast; }
+    a:active { color: $shadow; }
+
+    [class^=post__meta__] {
         display: table-cell;
         vertical-align: middle;
         margin: 0;
         padding-left: 0;
         list-style-type: none;
 
-        > * {
-            display: inline-block;
-        }
+    > * {
+        display: inline-block;
+    }
 
-        li + li {
-            margin-left: .25em;
-        }
+    li + li {
+        margin-left: .25em;
+    }
 
-        li + li::before {
-            color: $contrast;
-            content:"•";
-            display: inline-block;
-            margin-right: .25em;
-        }
+    li + li::before {
+        color: $light;
+        content:"•";
+        display: inline-block;
+        margin-right: .5em;
+    }
     }
 
     .post__meta__infos {
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index 35108c2..83d79b7 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -13,10 +13,12 @@ html {
 
 .headline__title {
     color: $contrast;
+    display: block;
     font-family: $fontFamily;
     font-size: $fontSize * 1.5;
     font-weight: bold;
     margin: 0;
+    padding: .5em 0;
 }
 
 h1, h3, h5 {