render logo and navigation correctly

src/js/app.js

@@ -35,7 +35,7 @@ require([
             controller: NavigationCtrl
         });
         $routeProvider.otherwise({
-            redirectTo: '/login'
+            redirectTo: '/desktop'
         });
     });
 

src/sass/_fonts.scss

@@ -14,6 +14,22 @@
     src: local('PT Sans Bold'), local('PTSans-Bold'), url('../font/pt-sans-bold.woff') format('woff');
 }
 
+// Mensch fonts
+// -------------------------
+
+@font-face {
+    font-family: 'Mensch';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Mensch'), local('Mensch-Regular'), url('../font/mensch.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'Mensch Thin';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Mensch Thin'), local('Mensch-Thin'), url('../font/mensch-thin.ttf') format('truetype');
+}
+
 // Icon fonts
 // -------------------------
 

src/sass/_scaffolding.scss

@@ -35,8 +35,4 @@ textarea {
 // Basic layout
 .main-app-view {
     height: 100%;
-}
-
-.column {
-
 }

src/sass/_variables.scss

@@ -19,6 +19,7 @@ $color-black:                       #000;
 $color-white:                       #fff;
 $color-grey:                        #666;
 $color-grey-dark:                   #333;
+$color-grey-medium:                 #aaa;
 $color-grey-light:                  #ccc;
 $color-grey-lighter:                #ddd;
 $color-grey-lightest:               #f9f9f9;
@@ -35,7 +36,7 @@ $content-nav-width:                 344px;
 
 $nav-max-width:                     347px;
 $nav-width:                         80%;
-$nav-padding:                       10px;
+$nav-padding:                       15px;
 
 $lightbox-padding:                  15px;
 $lightbox-max-width:                662px;

src/sass/views/_navigation.scss

@@ -1,20 +1,32 @@
 .nav-menu {
+
+    border: 1px;
+    border-right-style: solid;
+    border-color: $color-grey-medium;
+
     .content {
-        a {
+
+        h1, a {
             color: #fff;
             text-decoration: none;
+            text-shadow: 0 -1px 1px $color-grey-medium;
         }
 
         header {
             padding: 0 $nav-padding;
             height: 84px;
             h1 {
-                //@include hide-text();
-                // TODO: replace with svg background image
-                margin: 0px;
-                padding: 0px;
-                color: #fff;
+                font-family: 'Mensch';
                 font-weight: normal;
+                height: 100px;
+                width: 300px;
+                margin: 0px;
+                padding-top: 10px;
+                color: #fff;
+
+                span {
+                    font-family: 'Mensch Thin';
+                }
             }
         }
 
@@ -50,6 +62,7 @@
                     span.label {
                         line-height: 1.3em;
                         vertical-align: middle;
+                        text-shadow: none;
                     }
                     &:hover, &:focus {
                         background-color: mix($color-blue, $color-white, 80%);

src/tpl/desktop.html

@@ -4,7 +4,7 @@
   <nav class="nav-menu nav-effect">
     <div class="content">
       <header>
-        <h1>WHITEOUT.IO</h1>
+        <h1>WHITEOUT<span>.IO</span></h1>
       </header>
       <ul class="nav-primary">
         <li>