Add the sticky footer plugin, rip a lot of unnecessary styles out of the nav , add some better defaults to the nav, add some padding to the top of the body to space against the nav, give some default styles for the subscription box, and improve the contact page a bit

bower.json

@@ -13,6 +13,7 @@
     "Sortable": "~1.4.2",
     "simplemde": "~1.9.0",
     "datetimepicker": "~2.4.5",
-    "SpinKit": "~1.2.5"
+    "SpinKit": "~1.2.5",
+    "jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3"
   }
 }

gulpfile.js

@@ -32,6 +32,7 @@ var jsLocal = [
 var jsBower = [
     'jquery/dist/jquery.min.js',
     'bootstrap/dist/js/bootstrap.min.js',
+    'jQuery.stickyFooter/assets/js/jquery.stickyfooter.js'
 ];
 
 var jsDashboardBower = [

resources/assets/js/app.js

@@ -1,5 +1,8 @@
 // run once the document is ready
 $(document).ready(function() {
+    $('footer').stickyFooter({ content: '#page-content' });
+    $(window).load(function() { $(this).trigger('resize'); });
+
     switch (SiteVars.page) {
         case '':
             subscriptionFormInit();

resources/assets/less/app.less

@@ -21,12 +21,9 @@ html, body {
 html.no-scroll { overflow-y: hidden; }
 
 body {
-    min-width: 300px;
-    margin: 0;
-    padding: 0;
-    line-height: 1.5;
-    font-weight: 100;
     color: @c_text;
+    padding-top: @nav_height;
+    @media (max-width: @grid-float-breakpoint-max) { padding-top: @mobile_nav_height; }
 }
 
 * {
@@ -35,32 +32,3 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
-body.index {
-    .container {
-        .content {
-            text-align: center;
-
-            .title {
-                position: relative;
-                top: ~"calc(50vh - 131px)";
-                font-size: 96px;
-
-                @media (max-width: 1225px) {
-                    top: ~"calc(50vh - 119px)";
-                    font-size: 82px;
-                }
-
-                @media (max-width: 1025px) {
-                    top: ~"calc(50vh - 97px)";
-                    font-size: 58px;
-                }
-
-                @media (max-width: (@screen-sm - 1)) {
-                    top: ~"calc(50vh - 83px)";
-                    font-size: 42px;
-                }
-            }
-        }
-    }
-}

resources/assets/less/elements/footer.less

@@ -3,7 +3,12 @@ footer {
     height: 32px;
     line-height: 32px;
     padding-left: 10px;
-    background-color: #000;
+    background-color: @c_base;
     color: @c_text_light;
-    font-size: 11px;
+
+    &.sticky-footer {
+        width: 100%;
+        position: absolute;
+        bottom: 0px;
+    }
 }

resources/assets/less/elements/nav.less

@@ -2,53 +2,27 @@ nav.navbar {
     height: @nav_height;
     margin-bottom: 0px;
     padding-right: 10px;
-    background: linear-gradient(to right, transparent 0%, fade(@c_base, 40%) 25%, fade(@c_base, 50%) 50%, @c_base 100%);
+    background-color: @c_base;
     border: none;
     border-radius: 0px;
     z-index: 1;
-
+    @media (max-width: @grid-float-breakpoint-max) { height: @mobile_nav_height; }
-    @media (max-width: @grid-float-breakpoint-max) {
-        height: @mobile_nav_height;
-        background: fade(@c_base, 55%);
-    }
 
     .navbar-logo {
-        position: fixed;
+        position: absolute;
-        top: 45px;
+        top: 5px;
-        left: 63px;
+        left: 10px;
-        width: 145px;
+        width: (@nav_height - 10);
-        height: 145px;
+        height: (@nav_height - 10);
         background-image: url('/img/logo.png');
         background-size: contain;
         background-position: center center;
         background-repeat: no-repeat;
         cursor: pointer;
-        transition: transform 200ms;
-        &:hover { transform: scale(1.03); }
-
-        &:active {
-            transition: transform 100ms;
-            transform: scale(1.01);
-        }
 
         @media (max-width: @grid-float-breakpoint-max) {
-            top: 5px;
+            width: (@mobile_nav_height - 10);
-            left: 10px;
+            height: (@mobile_nav_height - 10);
-            width: 40px;
-            height: 40px;
-        }
-
-        @media (min-width: @grid-float-breakpoint) {
-            @logoAnimSpeed: 400ms;
-            transition: transform 200ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed;
-            &:active { transition: transform 100ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed; }
-
-            &.scaled {
-                top: 10px;
-                left: 15px;
-                width: @nav_height - 20;
-                height: @nav_height - 20;
-            }
         }
     }
 
@@ -64,34 +38,10 @@ nav.navbar {
                     color: @c_text_light;
                     text-decoration: none;
                     text-transform: uppercase;
-                    font-size: 36px;
-                    font-weight: 500;
-                    font-stretch: ultra-condensed;
                     line-height: @nav_height;
-                    transition: color 100ms;
+                    font-size: 24px;
-                    @media (max-width: 1250px) { font-size: 28px; }
-                    @media (max-width: 1050px) { font-size: 24px; }
-
-                    &:after {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        bottom: calc(50% ~"-" 0.8em);
-                        left: 50%;
-                        transform: translateX(-50%);
-                        width: calc(100% ~"-" 20px);
-                        height: 3px;
-                        background-color: @c_text_light;
-                        opacity: 0;
-                        transition: opacity 200ms;
-                        @media (max-width: @grid-float-breakpoint-max) { bottom: 0px; }
                 }
             }
-
-                &.active a, &.active:hover a, &:hover a, &:focus a { background-color: transparent; }
-                &:hover a { color: darken(@c_text_light, 25%); }
-                &.active a:after { opacity: 1; }
-            }
         }
 
         @media (max-width: @grid-float-breakpoint-max) {
@@ -99,7 +49,7 @@ nav.navbar {
             bottom: 4px;
             width: 100vw;
             padding-bottom: 5px;
-            background-color: fade(@c_base, 55%);
+            background-color: @c_base;
 
             ul.nav li a {
                 line-height: 40px;
@@ -119,9 +69,6 @@ nav.navbar {
             width: 27px;
             height: 4px;
             background-color: @c_text_light;
-            transition: background-color 150ms;
+        }
-        }
-
-        &:hover .icon-bar { background-color: darken(@c_text_light, 25%); }
     }
 }

resources/assets/less/elements/subscription.less

@@ -0,0 +1,16 @@
+#subscription-form {
+    position: absolute;
+    top: 50%;
+    left: 0px;
+    right: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    transform: translateY(-50%);
+    width: 200px;
+
+    input {
+        width: calc(100% ~"-" 10px);
+        padding: 3px;
+        margin: 5px;
+    }
+}

resources/assets/less/var.less

@@ -26,5 +26,5 @@
 @c_dashboard_delete: #87483e;
 
 // Sizes
-@nav_height: 96px;
+@nav_height: 60px;
 @mobile_nav_height: 50px;

resources/views/elements/nav.blade.php

@@ -11,7 +11,8 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
-                <li class="navlink navlink-section-contact"><a href="/contact" title="Contact">Contact</a></li>
+                <li class="navlink"><a href="/" title="Home">Home</a></li>
+                <li class="navlink"><a href="/contact" title="Contact">Contact</a></li>
             </ul>
         </div>
     </div>

resources/views/layouts/base.blade.php

@@ -14,11 +14,7 @@
     </head>
     <body class="{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}">
         @yield('page-top')
-
+        <div id="page-content">@yield('content')</div>
-        <div id="page-content">
-            @yield('content')
-        </div>
-
         @yield('page-bottom')
     </body>
 </html>

resources/views/website/contact.blade.php

@@ -3,7 +3,7 @@
 @section('content')
     <div class="container">
         <div class="row">
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-md-8 col-md-offset-2">
                 <h1>Contact</h1>
             </div>
         </div>