Merge pull request #108 from hiwye/landing-page-work

Created a landing page #98

.env.example

@@ -13,4 +13,4 @@ SESSION_DRIVER=file
 GITHUB_TOKEN=your-github-token
 GITHUB_CLIENT_ID=your-github-client-id
 GITHUB_CLIENT_SECRET=your-github-client-secret
-GITHUB_URL=http://host/auth/github/callback
+GITHUB_URL=http://host/auth/github/callback

app/Http/Controllers/HomeController.php

@@ -3,12 +3,22 @@
 class HomeController extends Controller
 {
     /**
-     * Show the application dashboard to the user.
+     * Show the landing page to the user.
      *
      * @return Response
      */
     public function index()
     {
-        return view('home');
+        return view('landing.landing');
+    }
+
+    /**
+     * Show the application dashboard to the user.
+     *
+     * @return Response
+     */
+    public function createForm()
+    {
+        return view('create');
     }
 }

app/Http/routes.php

@@ -7,6 +7,7 @@
 Route::get('auth/github', 'Auth\AuthController@redirectToProvider');
 Route::get('auth/github/callback', 'Auth\AuthController@handleProviderCallback');
 
+Route::get('posts/create', 'HomeController@createForm');
 Route::post('posts/create', 'GistsController@storeAndRedirect');
 Route::post('comment/{gistId}', ['middleware' => ['auth', 'csrf'], 'uses' => 'GistsController@postComment', 'as' => 'comments.store']);
 

gulpfile.js

@@ -12,5 +12,7 @@ var elixir = require('laravel-elixir');
  */
 
 elixir(function(mix) {
-    mix.less('app.less');
+    mix
+        .less('app.less')
+        .less('landing.less');
 });

resources/assets/less/landing.less

@@ -0,0 +1,38 @@
+/*
+GISTLOG LANDING PAGE CSS
+*/
+
+@mobile:    ~"only screen and (max-width: 720px)";
+@tablet:    ~"only screen and (max-width: 1100px)";
+
+@highlight-background-color:  #648EC6;
+@secondary-background-color:  #E4E7EC;
+
+@nav-margin:                  50px; // Margin around nav area
+@content-margin:              20%;  // Horizontal margin around content
+@section-spacing:             50px; // Vertical padding around sections
+@font-size:                   20px; // 1em font size
+
+@nav-links-spacing:           15px; // Horizontal spacing between nav links
+@intro-headroom:              50px; // Spacing between nav and intro content
+@intro-gutter:                50px; // Spacing between intro screenshot and claim
+@claim-spacing:               15px; // Spacing between claim items
+@features-spacing:            20px; // Vertical spacing between features
+@footer-spacing:              20px; // Padding around footer items
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  font-size: @font-size;
+}
+
+@import "landing/nav";
+@import "landing/intro";
+@import "landing/instructions";
+@import "landing/features";
+@import "landing/footer";

resources/assets/less/landing/features.less

@@ -0,0 +1,65 @@
+section.features {
+  padding: @section-spacing @content-margin;
+  background: @secondary-background-color;
+
+  display: flex;
+  align-items: center;
+
+  @media @tablet {
+    & {
+      flex-direction: column;
+      padding: @section-spacing @content-margin/6;
+
+      & .screenshot {
+        display: none;
+      }
+
+      & .list {
+        text-align: center !important;
+        padding: 0 !important;
+        display: flex;
+
+        & .feature {
+          margin: 5px;
+          border-radius: 5px;
+          background: white;
+          flex: 1;
+
+          & .icon {
+            padding-bottom: 10px;
+          }
+        }
+      }
+    }
+  }
+
+  & .list {
+    text-align: right;
+    padding: @features-spacing;
+
+    flex: 4;
+
+    &.right {
+      text-align: left;
+    }
+
+    & .feature {
+      padding: @features-spacing 0;
+
+      & .icon {
+        color: grey;
+        margin-bottom: 5px;
+        font-size: 2em;
+      }
+    }
+  }
+
+  & .screenshot {
+    flex: 7;
+
+    & img {
+      width: 100%;
+      display: block;
+    }
+  }
+}

resources/assets/less/landing/footer.less

@@ -0,0 +1,15 @@
+footer.footer {
+  background: @highlight-background-color;
+  text-align: center;
+  padding: @footer-spacing;
+
+  & a {
+    color: white;
+    text-decoration: none;
+    padding: 0 @footer-spacing;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}