mobile menu refactor & tweaks

- transition between open/close
- clean up font sizes, spacing

assets/_src/less/ascribe/_header.less

@@ -177,8 +177,7 @@
 }
 
 .mobile-nav {
-    display: none;
-    background-color: black;
+    background-color: @blueDeep;
     position: absolute;
     width: 120%;
     left: -10%;
@@ -186,13 +185,24 @@
     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;
+            margin-bottom: 20px;
+            padding-bottom: 20px;
         }
     }
 }