auth style updates

Author: Nickstr

app/views/auth/signup.blade.php

@@ -1,3 +1,9 @@
-Hi, you'll need an account in order to do whatever you just tried to do. No problem, just authenticate through GitHub and you're done.
+@extends('layouts._one_column')
 
-<a href="{{ action('AuthController@getLogin') }}">Login with GitHub</a>
+@section('content')
+<section class="auth woops">
+    <h1>Woops!</h1>
+    <p>You'll need an account in order to do whatever you just tried to do. No problem, just authenticate through GitHub and you're done.</p>
+    <a class="button full" href="{{ action('AuthController@getLogin') }}">Login with GitHub</a>
+</section>
+@stop

app/views/auth/signupconfirm.blade.php

@@ -1,7 +1,18 @@
-We're going to create an account with this information.
+@extends('layouts._one_column')
 
-<img src="{{ $githubUser['avatar_url'] }}"/>
+@section('content')
+<section class="auth">
+    <h1>We're going to create an account with this information.</h1>
 
-<a href="{{ $githubUser['html_url'] }}">{{ $githubUser['name'] }} {{ $githubUser['email'] }}</a>
+    <div class="user">
+        <img src="{{ $githubUser['avatar_url'] }}"/>
+        <div class="bio">
+            <h2>{{ $githubUser['name'] }}</h2>
+            <h3>{{ $githubUser['email'] }}</h3>
+            <a class="button" href="{{ action('AuthController@getLogin') }}">Create My Laravel.IO Account</a>
+        </div>
+    </div>
 
-<a href="{{ action('AuthController@getLogin') }}">Create My Laravel.IO Account</a>
+
+</section>
+@stop

app/views/layouts/_one_column.blade.php

@@ -0,0 +1,4 @@
+<section class="content center">
+    @section('content')
+    @show
+</section>

public/scss/app.scss

@@ -35,3 +35,4 @@
 @import "modules/dashboard";
 @import "modules/code";
 @import "modules/alert";
+@import "modules/auth";

public/scss/modules/_auth.scss

@@ -0,0 +1,88 @@
+/* ==========================================================================
+   MOBILE FIRST MODULE SKELETON
+   ========================================================================== */
+
+// MOBILE STYLES ////////////////////////////////////////////////////////////
+
+.auth {
+    padding: 2%;
+
+
+    &.woops {
+        text-align: center;
+    }
+
+    .user {
+        @include clearfix;
+    }
+
+    h1 {
+        font-size:30px;
+        font-weight: 600;
+        text-align: center;
+        line-height: 1.3;
+        padding: 0 0 20px 0;
+    }
+
+    img {
+        float: left;
+        @include span-columns(3);
+    }
+
+    .bio {
+        float: left;
+        @include span-columns(9);
+
+            h2 {
+                padding: 0 0 0 10px;
+                font-weight: 600;
+                font-size:22px;
+            }
+
+            h3 {
+                font-size:14px;
+                padding: 0 0 0 10px;
+            }
+
+            .button {
+                font-size:14px;
+                margin: 15px 0 0 10px;
+            }
+        }
+}
+
+
+// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 480px) {
+
+    .auth {
+        width:500px;
+        margin: auto;
+    }
+
+}
+
+
+// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 768px) {
+
+    .module {}
+}
+
+
+// BREAKPOINT 3 (1024) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 1024px) {
+
+    .module {}
+}
+
+
+// BREAKPOINT 4 (1440) ////////////////////////////////////////////////////////////
+
+@media only screen and (min-width: 1440px) {
+
+    .module {}
+}

public/scss/modules/_buttons.scss

@@ -14,4 +14,8 @@
     &.full {
         width: 100%;
     }
+
+    &:hover {
+        background: $lioGrey;
+    }
 }