start topbar revamp

app/styles/app.scss

@@ -64,4 +64,5 @@
 @import "app/layouts/sidebar";
 @import "app/layouts/build-job";
 @import "app/layouts/sidebar";
-@import "app/top";
+@import "app/layouts/top";
+// @import "app/top";

app/styles/app/layouts/top.sass

@@ -0,0 +1,21 @@
+$top-height: 55px
+
+
+
+.topbar
+  background-color: $cream-light
+  color: $grey1
+
+  a
+    color: $grey1
+
+  @media #{$medium-up}
+    height: $top-height
+
+    .burger
+      display: none
+
+
+    .navigation
+      li
+        @extend %inline-block

app/templates/top.hbs

@@ -1,16 +1,11 @@
-<div class="row">
-  {{#link-to "main"}}
-    <div id="logo" class="logo">
-      <h1>Travis</h1>
-    </div>
-  {{/link-to}}
-
+<div class="row topbar">
+  <h1 id="logo" class="logo">{{#link-to "main"}}Travis{{/link-to}}</h1>
   <div class="burger">
     <button type="button" id="burger" class="burger-btn" {{action 'toggleBurgerMenu'}}>&equiv;</button>
   </div>
 
   <ul id="navigation" {{bind-attr class=":navigation is-open"}}>
-    <li class="home">
+    <li class="home navigation--home">
       {{#link-to "main"}}Home{{/link-to}}
     </li>
     {{#if config.pro}}
@@ -27,11 +22,11 @@
       </li>
     {{/if}}
     {{#unless config.pro}}
-      <li class="menu community">
-        <p class="handle">
+      <li class="menu community navigation-sub navigation--community">
+        <p class="handle navigation-handle">
           <a href="#">Help</a>
         </p>
-        <ul>
+        <ul class="navigation-nested">
           <li><a href="http://docs.travis-ci.com">Docs</a></li>
           <li><a href="http://stackoverflow.com/questions/ask?tags=travis-ci">Ask a Question</a></li>
           <li><a href="irc://irc.freenode.net/#travis">IRC</a></li>
@@ -42,11 +37,11 @@
     {{/unless}}
 
     {{#if config.pagesEndpoint}}
-      <li class="menu legal">
-        <p class="handle">
+      <li class="menu legal navigation-sub navigation--legal">
+        <p class="handle navigation-handle">
           <a {{bind-attr href="config.url_legal"}}>Legal</a>
         </p>
-        <ul>
+        <ul class="navigation-nested">
           <li>
             <a {{bind-attr href="config.url_imprint"}}>Imprint</a>
           </li>
@@ -61,13 +56,13 @@
     {{/if}}
 
     {{#unless config.pro}}
-      <li class="traviscicom">
+      <li class="traviscicom navigation--traviscicom">
         <a href="http://travis-ci.com">Travis CI for Private Repositories</a>
       </li>
     {{/unless}}
 
     <li {{bind-attr class="view.classProfile"}}>
-      <p class="handle">
+      <p class="handle navigation-handle">
         {{#if auth.signedOut}}
           <button class="signed-out button--signin" {{action "signIn" target="auth"}}>Sign in with GitHub</button>
         {{/if}}
@@ -78,7 +73,7 @@
           <button class="signing-in button--signingin">Signing In <span class="sync-spinner"><i></i><i></i><i></i></span></button>
         {{/if}}
       </p>
-      <ul>
+      <ul class="navigation-nested">
         <li>
           {{#link-to "profile" class="signed-in"}}Accounts{{/link-to}}
         </li>