Create run styling

assets/linker/styles/app.less

@@ -10,6 +10,71 @@ body {
 }
 #page {
     padding-bottom: 20px;
+    section {
+        background-color: transparent;
+        position: relative;
+        overflow: hidden;
+        padding: 40px 0;
+        margin: 20px 0;
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: #fff;
+        box-shadow: 0 0 15px #000;
+
+        .step-num {
+            font-size: 6em;
+            text-align: center;
+            text-shadow: -2px -2px 2px #000;
+            color: orange;
+        }
+
+        h2 {
+            margin-top: 0;
+            color: #fff;
+            text-shadow: 2px 2px 2px #000;
+        }
+
+        input {
+            font-size: 2em;
+            height: auto;
+            margin: 5px 0;
+        }
+
+        &.invitees {
+            input  {
+                margin: 0;
+            }
+            .btn {
+                font-size: 2em;
+            }
+            .invitee {
+                input {
+                    float: left;
+                    width: auto;
+                    margin-right: 5px;
+                }
+                margin-top: 5px;
+                +.btn {
+                    margin-top: 5px;
+                }
+            }
+        }
+
+        >div {
+            position: relative;
+            z-index: 2;
+        }
+        .bg {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 1;
+            background-color: #eee;
+            opacity: 0.5;
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 footer {
     position: absolute;
@@ -22,6 +87,12 @@ footer {
     }
 }
 .create-run-form {
+    h1 {
+        color: #fff;
+        padding: 20px 0;
+        font-size: 3em;
+        text-shadow: 2px 2px 2px #333;
+    }
 }
 .create-order-form {
     textarea {

assets/linker/templates/create-run.jade

@@ -1,33 +1,51 @@
 div.create-run-form(ng-controller='CreateRunCtrl')
-    h2.text-center Create a lunch run
     form(name='form',novalidate,role='form')
-        div.row
-            fieldset.col-xs-12.col-sm-6.col-md-6.col-lg-6
-                legend.text-center You and your run
-                div.form-group
+        h1.text-center start a new lunch run!
+        section
+            .bg  
+            .container
+                .row
+                    .col-xs-1.step-num 1}
+                    .col-xs-11
                         input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
-                div.form-group
+        section
+            .bg  
+            .container
+                h2.text-center who are you?
+                .row
+                    .col-xs-1.step-num 2}
+                    .col-xs-11
                         input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name')
-                div.form-group
                         input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email')
-                div.form-group
+        section
+            .bg  
+            .container
+                h2.text-center where are you going?
+                .row
+                    .col-xs-1.step-num 3}
+                    .col-xs-11
                         input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant')
-                div.form-group
                         input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL')
-            fieldset.col-xs-12.col-sm-6.col-md-6.col-lg-6
-                legend.text-center Who's going?
-                div.row(ng-repeat='i in run.invitees')
-                    .form-group.col-sm-4
+
+        section.invitees
+            .bg  
+            .container
+                h2.text-center who's going?
+                .row
+                    .col-xs-1.step-num 4}
+                    .col-xs-11
+                        .invitee(ng-repeat='i in run.invitees')
                             input.form-control(ng-model='i.name',required,placeholder='Name')
-                    .form-group.col-sm-7
                             input.form-control(ng-model='i.email',required,placeholder='Email')
-                    .form-group.col-sm-1
-                        button.btn.btn-sm.btn-warning(ng-click='removeInvitee($index)') 
+                            button.btn.btn-warning(ng-click='removeInvitee($index)') 
                                 span.glyphicon.glyphicon-remove
+
                         button.btn.btn-default(ng-click='addInvitee()')
                             span.glyphicon.glyphicon-plus
                             | Invite another!
                 
+//
+
         .clearfix
             button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
                 | Create

assets/linker/templates/home.jade

@@ -1,3 +1 @@
-.row
-    .col-xs-12.col-sm-12.col-md-12.col-lg-12
-        include create-run
+include create-run

views/layout.jade

@@ -18,7 +18,7 @@ html(lang="en",ng-app="lunchApp")
         <![endif]-->
     body(ng-controller="BodyCtrl")
         include header
-        #page.container
+        #page
             div(ng-view)
         include footer