From 62ea0e3b974bc921d11f1ba37c12d37f27e53e23 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 2 Feb 2016 23:10:02 +0100
Subject: [PATCH] mobile menu refactor & tweaks

- transition between open/close
- clean up font sizes, spacing
---
 assets/_src/less/ascribe/_header.less | 42 ++++++++++++++-------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/assets/_src/less/ascribe/_header.less b/assets/_src/less/ascribe/_header.less
index 7ac0e66..872b485 100644
--- a/assets/_src/less/ascribe/_header.less
+++ b/assets/_src/less/ascribe/_header.less
@@ -177,22 +177,32 @@
 }
 
 .mobile-nav {
-    display: none;
-    background-color: black;
+    background-color: @blueDeep;
     position: absolute;
     width: 120%;
     left: -10%;
     top: 0;
-    text-align:center;
-    z-index:4;
+    text-align: center;
+    z-index: 4;
+
+    // open/close transition, slide in from top
+    transition: transform .2s ease-out;
+    transform: translate3d(0,-100%,0);
+
+    &.active {
+        transform: translate3d(0,0,0);
+    }
+
+    @media (min-width: @phoneWidth) {
+        display: none;
+    }
 
     ul {
-        padding: 40px 0 20px;
+        padding: 30px 0 20px;
     }
     li {
-        font-weight: 400;
-        padding-bottom: 15px;
-        font-size: 13px;
+        font-weight: @font-weight-normal;
+        padding-bottom: 5px;
 
         a {
             color: @white;
@@ -202,20 +212,12 @@
             }
         }
         &:nth-child(-n+3) {
-            font-size: 16px;
-            padding-bottom: 35px;
+            &:extend(.large);
         }
         &:nth-child(3) {
-            border-bottom:1px solid @white;
-            margin-bottom:25px;
-        }
-    }
-
-    @media screen and (max-width: @phoneWidth) {
-        display:none;
-
-        &.active {
-            display: block;
+            border-bottom: 1px solid @white;
+            margin-bottom: 20px;
+            padding-bottom: 20px;
         }
     }
 }