Initial version of header nav bar

src/css/main.scss

@@ -26,6 +26,12 @@ All rights reserved.
 
 // Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
+// Animation Speeds ////////////////////////////////////////////////////////////////////////////////
+
+$animate-fast: 0.1s;
+$animate-normal: 0.25s;
+$animate-slow: 0.6s;
+
 // Font Faces //////////////////////////////////////////////////////////////////////////////////////
 
 $font-family-header: 'Silkscreen';
@@ -73,9 +79,9 @@ $color-text:               #000000;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 
-$layer-normal: 0;
-$layer-screen: 5;
-$layer-dialog: 10;
+$layer-normal: 100;
+$layer-screen: 500;
+$layer-dialog: 1000;
 
 // Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
 

src/css/templates/craft_page.scss

@@ -1,11 +1,11 @@
 /*
-Crafting Guide - crafting_page.scss
+Crafting Guide - craft_page.scss
 
 Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
-.view__crafting_page {
+.view__craft_page {
 
     & > div {
         display: inline-block;

src/css/templates/index.scss

@@ -6,7 +6,7 @@ All rights reserved.
 */
 
 @import 'crafting_grid';
-@import 'crafting_page';
+@import 'craft_page';
 @import 'crafting_table';
 @import 'feedback';
 @import 'full_recipe';

src/css/views.scss

@@ -41,7 +41,7 @@ All rights reserved.
 
 .view__header {
     background: $color-gray-light;
-    position: relative; height: 8em;
+    position: relative; height: 13em;
     margin-top: 3.2em;
 
     h1 {
@@ -54,7 +54,54 @@ All rights reserved.
 
     .divider {
         background: $color-brick-dark url('/images/stone_brick.png');
-        position: absolute; bottom: 0; height: 3.2em; width: 100%;
+        position: absolute; bottom: 5em; height: 3.2em; width: 100%;
+    }
+
+    .navBar {
+        position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;
+
+        a {
+            position: relative; height: 3em; width: 15em;
+            background: $color-gray-faint;
+            border: 0.1em solid $color-gray-medium;
+            border-radius: 0 1.5em 1.5em 0;
+            cursor: pointer;
+            display: inline-block;
+            margin-left: -1.5em;
+
+            transition: background $animate-normal;
+
+            &:first-child {
+                border-radius: 1.5em;
+                margin-left: 0;
+            }
+
+            &:hover {
+                background: $color-background-panel;
+            }
+
+            &.selected {
+                background: $color-active;
+
+                p {
+                    color: $color-background-panel;
+                }
+            }
+
+            p {
+                position: absolute; top: 50%; left: 50%; width: 100%;
+                @include transform(translateX(-50%) translateY(-50%));
+
+                color: $color-active;
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-weight: bold;
+                text-align: center;
+                vertical-align: middle;
+
+                transition: color $animate-normal;
+            }
+        }
     }
 }