Add topbar, move account info to top-right corner

app/controllers/application.js

@@ -1,4 +1,6 @@
 import Controller from '@ember/controller';
+import { inject as injectService } from '@ember/service';
 
 export default Controller.extend({
+  kredits: injectService(),
 });

app/styles/_colors.scss

@@ -6,3 +6,8 @@ $yellow: #fbe468;
 $red: #fb6868;
 
 $primaryColor: $blue;
+
+#topbar {
+  background-color: rgba(255,0,255,.2);
+}
+

app/styles/_layout.scss

@@ -1,4 +1,7 @@
-section {
+#topbar {
+}
+
+main section {
   @include outer-container;
   margin-bottom: 8rem;
   &:first-of-type {

app/styles/app.scss

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-size: 14px;
 }
 
 *:hover, *:active, *:focus {
@@ -24,7 +25,6 @@ body {
   background-repeat: none;
   background-attachment: fixed;
   font-family: $font-family-sans;
-  font-size: 14px;
   font-weight: 300;
   color: #fff;
 }
@@ -100,6 +100,7 @@ button, input[type=submit] {
   }
 }
 
+@import "components/topbar";
 @import "components/loading-spinner";
 @import "components/contributor-list";
 @import "components/add-contributor";

app/styles/components/_topbar.scss

@@ -0,0 +1,15 @@
+#topbar {
+  padding: 0 1rem;
+  line-height: 3rem;
+  background-color: rgba(0,0,0,.3);
+
+  h1 {
+    display: inline-block;
+    text-transform: uppercase;
+  }
+
+  section#user-account {
+    display: inline-block;
+    float: right;
+  }
+}

app/templates/application.hbs

@@ -1,3 +1,17 @@
-<main>
+<header id="topbar">
+  <h1>Kosmos Kredits</h1>
+
+  <section id="user-account">
+    {{#if kredits.hasAccounts }}
+      {{#if kredits.currentUser}}
+        {{kredits.currentUser.name}}
+        {{#if kredits.currentUserIsCore}}(core){{/if}}
+      {{/if}}
+    {{else}}
+      Anonymous
+    {{/if}}
+  </section>
+</header>
+<main id="content">
   {{outlet}}
 </main>

app/templates/index.hbs

@@ -1,15 +1,3 @@
-{{#if kredits.hasAccounts }}
-  <section id="user-account">
-    {{#if kredits.currentUser }}
-      {{ kredits.currentUser.name }}
-      {{#if kredits.currentUserIsCore }}
-        (core)
-      {{/if}}
-      Account: {{kredits.currentUser.account}}
-    {{/if}}
-  </section>
-{{/if}}
-
 <section id="contributors">
   <header>
     <h2>Kosmos Contributors</h2>