Initial app creation with top nav

package.json

@@ -52,8 +52,9 @@
     "merge-stream": "^1.0.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
-    "scss-base": "^1.0.0",
+    "scss-base": "^1.1.0",
     "systemjs": "^0.19.26",
     "zone.js": "^0.6.12"
   }
 }
+

src/app/app.template.html

@@ -1,3 +1,2 @@
-<div>
-    So it begins...
-</div>
+<top-nav></top-nav>
+

src/app/app.ts

@@ -3,10 +3,13 @@ import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
 
 import 'rxjs/Rx'; // Import all of RxJs
 
+import { TopNav } from './top-nav/top-nav.component';
+
 @Component({
     selector: 'app-component',
-    directives: [ ROUTER_DIRECTIVES ],
+    directives: [ ROUTER_DIRECTIVES, TopNav ],
     templateUrl: 'app/app.template.html'
 })
 export class AppComponent {
 }
+

src/app/top-nav/top-nav.component.ts

@@ -0,0 +1,16 @@
+import { Component } from 'angular2/core';
+
+@Component({
+    selector: 'top-nav',
+    templateUrl: 'app/top-nav/top-nav.template.html'
+})
+export class TopNav {
+    pageName: string;
+    version: string;
+
+    constructor() {
+        this.pageName = 'Testing';
+        this.version = 'v1.0.0';
+    }
+}
+

src/app/top-nav/top-nav.template.html

@@ -0,0 +1,10 @@
+<nav class="nav-top">
+    <h1>TaskBoard<span><small>- {{ pageName }} <small class="dark">({{ version }})</small></small></span></h1>
+
+    <div class="buttons">
+        <button class="flat active">Boards</button>
+        <button class="flat">Settings</button>
+        <button class="flat">Logout (username)</button>
+    </div>
+</nav>
+

src/scss/_core.scss

@@ -0,0 +1,20 @@
+html {
+    background-color: $color-background;
+    height: 100%;
+}
+
+body {
+    background-image: url('../images/bg.png');
+    height: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 500;
+    margin: 0;
+}
+

src/scss/_nav-top.scss

@@ -0,0 +1,27 @@
+.nav-top {
+    border-bottom: 1px solid lighten($color-border, 10%);
+    padding: .5em;
+
+    h1 {
+        margin-top: 3px;
+    }
+
+    .dark {
+        color: $color-text;
+    }
+
+    .buttons {
+        float: right;
+        margin-top: -2.2em;
+
+        .flat {
+            color: $color-primary;
+        }
+
+        .active {
+            background: $color-primary;
+            color: $color-text-button;
+        }
+    }
+}
+

src/scss/_scss-base-settings.scss

@@ -1,7 +1,8 @@
-$color-primary: #2b87d8;
+$color-background: #e6e6e6;
+$color-primary: #1d7faf;
 $color-text-button: #fff;
 
-$font-url: 'https://fonts.googleapis.com/css?family=Oxygen:400,700';
-$font-name: 'Oxygen';
-$font-name-mono: 'Oxygen';
+$font-url: 'https://fonts.googleapis.com/css?family=Raleway:400,500|Fira+Mono';
+$font-name: 'Raleway';
+$font-name-mono: 'Fira Mono';
 

src/scss/main.scss

@@ -8,4 +8,6 @@
 @import 'scss-base';
 
 // Local styles
+@import 'core';
+@import 'nav-top';