Header and footer styles, rework homepage

assets/linker/styles/app.less

@@ -1,25 +1,21 @@
-@footer-height: 52px;
+@import "variables.less";
+@import "main.less";
+@import "header-footer.less";
+@import "forms.less";
 
-html {
-    position: relative;
-    min-height: 100%;
-}
-body {
-    background-color: #fff;
-    margin-bottom: @footer-height;
-}
 #page {
     padding-bottom: 60px;
     section {
         background-color: transparent;
         position: relative;
         overflow: hidden;
-        padding: 40px 0;
+        padding: 40px;
         margin: 20px 0;
-        border-width: 1px 0;
+        border-width: 1px;
         border-style: solid;
         border-color: #fff;
         box-shadow: 0 0 15px #000;
+        border-radius: 4px;
 
         .step-num {
             text-align: center;
@@ -70,6 +66,7 @@ body {
         &.submit {
             border: none;
             box-shadow: none;
+            padding: 40px 0;
             .btn {
                 font-size: 6em;
             } 
@@ -85,36 +82,12 @@ body {
             top: 0;
             z-index: 1;
             background-color: #eee;
-            opacity: 0.5;
+            opacity: 0.7;
             width: 100%;
             height: 100%;
         }
     }
 }
-footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: @footer-height;
-    overflow: hidden;
-    .navbar {
-        border-radius: 0;
-    }
-}
-.create-run-form {
-    h1 {
-        color: #fff;
-        padding: 20px 0;
-        font-size: 3em;
-        text-shadow: 4px 4px 6px #000;
-        text-transform: uppercase;
-    }
-}
-.create-order-form {
-    textarea {
-        font-size: 1.2em;
-    }
-}
 .run-order-status {
     background-color: #fff;
     border: 1px solid #ddd;

assets/linker/styles/forms.less

@@ -0,0 +1,14 @@
+.create-run-form {
+    h1 {
+        color: #fff;
+        padding: 20px 0;
+        font-size: 3em;
+        text-shadow: 4px 4px 6px #000;
+        text-transform: uppercase;
+    }
+}
+.create-order-form {
+    textarea {
+        font-size: 1.2em;
+    }
+}

assets/linker/styles/header-footer.less

@@ -0,0 +1,27 @@
+header.navbar {
+    border-bottom: 1px solid #eee;
+}
+footer.navbar {
+    border-top: 1px solid #eee;
+    border-radius: 0;
+    margin-bottom: 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: @footer-height;
+    overflow: hidden;
+}
+header, footer {
+    .bg {
+        background-color: white;
+        opacity: 0.5;
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        height: 50px;
+    } 
+    .container {
+        position: relative;
+        z-index: 2;
+    }
+}

assets/linker/styles/main.less

@@ -0,0 +1,8 @@
+html {
+    position: relative;
+    min-height: 100%;
+}
+body {
+    background-color: #fff;
+    margin-bottom: @footer-height;
+}

assets/linker/styles/variables.less

@@ -0,0 +1 @@
+@footer-height: 52px;

assets/linker/templates/create-run.jade

@@ -1,10 +1,9 @@
 div.create-run-form(ng-controller='CreateRunCtrl')
-    form(name='form',novalidate,role='form')
+    form.container(name='form',novalidate,role='form')
         h1.text-center
             | start a new lunch run
         section.name
             .bg  
-            .container
             .row
                 .col-xs-2.step-num
                     span.glyphicon.glyphicon-info-sign
@@ -12,7 +11,6 @@ div.create-run-form(ng-controller='CreateRunCtrl')
                     input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
         section
             .bg  
-            .container
             .row
                 .col-xs-2.step-num
                     span.glyphicon.glyphicon-user
@@ -21,7 +19,6 @@ div.create-run-form(ng-controller='CreateRunCtrl')
                     input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email')
         section
             .bg  
-            .container
             .row
                 .col-xs-2.step-num 
                     span.glyphicon.glyphicon-map-marker
@@ -31,7 +28,6 @@ div.create-run-form(ng-controller='CreateRunCtrl')
 
         section.invitees
             .bg  
-            .container
             .row
                 .col-xs-2.step-num
                     span.glyphicon.glyphicon-list
@@ -47,6 +43,5 @@ div.create-run-form(ng-controller='CreateRunCtrl')
                         | Invite another!
 
         section.submit
-            .container
             button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
                 | Create

tasks/options/less.js

@@ -11,7 +11,7 @@ module.exports = function(config) {
             }, {
                 expand: true,
                 cwd: 'assets/linker/styles/',
-                src: ['*.less'],
+                src: ['app.less'],
                 dest: '.tmp/public/linker/styles/',
                 ext: '.css'
             }]

views/footer.jade

@@ -1,5 +1,5 @@
-footer
+footer.navbar
-    .navbar.navbar-inverse
+    .bg  
     .container
         nav
             ul.nav.navbar-nav.pull-left

views/header.jade

@@ -1,4 +1,5 @@
-header.navbar.navbar-inverse.navbar-static-top
+header.navbar.navbar-static-top
+    .bg  
     .container
         a.navbar-brand(href='/') lunch run me
         small.navbar-text ...where lunch runs are fun