Add first half of login process

src/scss/classes.scss

@@ -19,6 +19,10 @@ All rights reserved.
     text-align: center;
 }
 
+.clear {
+    clear: both;
+}
+
 .content {
     background: $color-content;
     box-shadow: 10px 10px 20px #666;
@@ -32,6 +36,11 @@ All rights reserved.
 
 .error-new { background: $color-error-new !important; }
 
+.float-right {
+    float: right;
+    margin-left: 3em;
+}
+
 .hideable {
     opacity: 1;
     transition: opacity $animate-normal;
@@ -111,6 +120,21 @@ All rights reserved.
     }
 }
 
+.slideable {
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height $animate-normal;
+
+    &.closed {
+        max-height: 0;
+    }
+}
+
+.two-thirds-content {
+    position: relative; width: 66%;
+    margin: 5em 16.5%;
+}
+
 .videos {
     .panel {
         text-align: center;

src/scss/main.scss

@@ -77,6 +77,7 @@ $color-footer-text:        #FFFFFF;
 $color-link:               #0000FF;
 $color-link-subtle:        #545A99;
 $color-text:               #000000;
+$color-text-light:         #FFFFFF;
 
 // Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
 

src/scss/tags.scss

@@ -29,6 +29,11 @@ button {
         margin: 2em 0;
         padding: 0.5em 0.5em;
     }
+
+    &.huge {
+        font-size: $font-size-large;
+        padding: 0.5em 3em;
+    }
 }
 
 h1 {

src/scss/templates/index.scss

@@ -17,6 +17,7 @@ All rights reserved.
 @import 'inventory_table';
 @import 'item';
 @import 'item_page';
+@import 'login_page';
 @import 'minimal_recipe';
 @import 'mod';
 @import 'mod_pack';

src/scss/templates/login_page.scss

@@ -0,0 +1,33 @@
+/*
+Crafting Guide - login_page.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__login_page {
+
+    button {
+        outline: none;
+    }
+
+    h1 {
+        font-family: $font-family-header;
+        font-size: $font-size-x-large;
+        padding-top: 2em;
+    }
+
+    p {
+        margin-bottom: 1em;
+    }
+
+    .actions {
+        margin-top: 4em;
+        width: 100%;
+        text-align: center;
+    }
+
+    .read-more {
+        font-size: 75%;
+    }
+}

src/scss/views.scss

@@ -55,6 +55,18 @@ All rights reserved.
     .divider {
         background: $color-brick-dark url('/images/stone_brick.png');
         position: absolute; bottom: 5em; height: 3.2em; width: 100%;
+
+        .login {
+            position: absolute; top: 50%; right: 2em;
+            @include transform(translateY(-50%));
+
+            a {
+                color: $color-text-light;
+                font-family: $font-family-normal;
+                font-size: $font-size-normal;
+                font-weight: bold;
+            }
+        }
     }
 
     .navBar {