From 77c9bf3c6aff19b86d211f26fef1e0c9e8b4652b Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Thu, 28 Jan 2016 22:28:05 -0500 Subject: [PATCH] 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 | 3 +- gulpfile.js | 1 + resources/assets/js/app.js | 3 + resources/assets/less/app.less | 36 +-------- resources/assets/less/elements/footer.less | 9 ++- resources/assets/less/elements/nav.less | 77 +++---------------- .../assets/less/elements/subscription.less | 16 ++++ resources/assets/less/var.less | 2 +- resources/views/elements/nav.blade.php | 3 +- resources/views/layouts/base.blade.php | 6 +- resources/views/website/contact.blade.php | 2 +- 11 files changed, 48 insertions(+), 110 deletions(-) create mode 100644 resources/assets/less/elements/subscription.less diff --git a/bower.json b/bower.json index 8df5d81..e2b1794 100644 --- a/bower.json +++ b/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" } } diff --git a/gulpfile.js b/gulpfile.js index a1cd65a..5283c96 100644 --- a/gulpfile.js +++ b/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 = [ diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 21938e0..a767c80 100644 --- a/resources/assets/js/app.js +++ b/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(); diff --git a/resources/assets/less/app.less b/resources/assets/less/app.less index 84b37fb..9067a1c 100644 --- a/resources/assets/less/app.less +++ b/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; - } - } - } - } -} diff --git a/resources/assets/less/elements/footer.less b/resources/assets/less/elements/footer.less index 7a13e37..f8894c8 100644 --- a/resources/assets/less/elements/footer.less +++ b/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; + } } diff --git a/resources/assets/less/elements/nav.less b/resources/assets/less/elements/nav.less index 9f8d423..f7bcdba 100644 --- a/resources/assets/less/elements/nav.less +++ b/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; - background: fade(@c_base, 55%); - } + @media (max-width: @grid-float-breakpoint-max) { height: @mobile_nav_height; } .navbar-logo { - position: fixed; - top: 45px; - left: 63px; - width: 145px; - height: 145px; + position: absolute; + top: 5px; + left: 10px; + width: (@nav_height - 10); + 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; - left: 10px; - 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; - } + width: (@mobile_nav_height - 10); + height: (@mobile_nav_height - 10); } } @@ -64,33 +38,9 @@ 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; - @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; } - } + font-size: 24px; } - - &.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; } } } @@ -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%); } - } + } } diff --git a/resources/assets/less/elements/subscription.less b/resources/assets/less/elements/subscription.less new file mode 100644 index 0000000..e26547a --- /dev/null +++ b/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; + } +} diff --git a/resources/assets/less/var.less b/resources/assets/less/var.less index 40f30f1..46a06d7 100644 --- a/resources/assets/less/var.less +++ b/resources/assets/less/var.less @@ -26,5 +26,5 @@ @c_dashboard_delete: #87483e; // Sizes -@nav_height: 96px; +@nav_height: 60px; @mobile_nav_height: 50px; diff --git a/resources/views/elements/nav.blade.php b/resources/views/elements/nav.blade.php index 711b4ca..5e90446 100644 --- a/resources/views/elements/nav.blade.php +++ b/resources/views/elements/nav.blade.php @@ -11,7 +11,8 @@ diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 152e10e..297ec78 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -14,11 +14,7 @@ @yield('page-top') - -
- @yield('content') -
- +
@yield('content')
@yield('page-bottom') diff --git a/resources/views/website/contact.blade.php b/resources/views/website/contact.blade.php index 2bf818d..8aa40f0 100644 --- a/resources/views/website/contact.blade.php +++ b/resources/views/website/contact.blade.php @@ -3,7 +3,7 @@ @section('content')
-
+

Contact