From ac9d5ecda808c71c8d3ed8029c3eef5889f20eda Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 3 Dec 2013 22:44:00 +0100 Subject: [PATCH] topbar and footer as fixed site background --- _src/_layouts/base.html | 2 +- _src/assets/less/scaffolding.less | 49 +++++++++++++++++++++++++++++-- _src/assets/less/sticky.less | 1 + 3 files changed, 48 insertions(+), 4 deletions(-) diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html index 2c0368e0..068c2d74 100644 --- a/_src/_layouts/base.html +++ b/_src/_layouts/base.html @@ -7,7 +7,7 @@ {% include header.html %} -
+
{{ content }} diff --git a/_src/assets/less/scaffolding.less b/_src/assets/less/scaffolding.less index c8b0417d..f6c43711 100644 --- a/_src/assets/less/scaffolding.less +++ b/_src/assets/less/scaffolding.less @@ -4,15 +4,19 @@ html { } body { - background: @body-bg; + background-color: @body-bg; } + // // Topbar // .topbar { .clearfix; - background: #f1f4f7; + background: fade(@brand-dark, 3%); + border-bottom: 1px solid rgba(255,255,255,.7); + box-shadow: inset 0 1px 4px fade(@brand-dark, 20%), inset 0 -1px 4px fade(@brand-dark, 20%); + .row { margin-top: @line-height-computed/2; margin-bottom: @line-height-computed/2; @@ -29,7 +33,7 @@ body { float: left; @media @breakpoint2 { - margin-left: -55px + margin-left: -54px } .banner-title { @@ -107,6 +111,8 @@ a.close, .footer { text-align: center; background: fade(@brand-dark, 5%); + border-top: 1px solid rgba(255,255,255,.7); + box-shadow: inset 0 1px 4px fade(@brand-dark, 20%); .footer-description { .h5; @@ -175,4 +181,41 @@ a.close, .footer:hover .subscribe .facebook i:before { color: #3b5998; +} + + +// +// topbar and footer as fixed +// site background +// + +@media @breakpoint2 { + section[role=document] { + background-color: @body-bg; + margin-top: 71px; + margin-bottom: 380px; + position: relative; + z-index: 2; + border-top: 1px solid rgba(255,255,255,.7); + border-bottom: 1px solid rgba(255,255,255,.7); + box-shadow: 0 1px 4px fade(@brand-dark, 20%), 0 -1px 4px fade(@brand-dark, 20%); + } + .topbar, + .footer { + position: fixed; + z-index: 1; + border: none; + } + .topbar { + height: 71px; + top: 0; + box-shadow: inset 0 1px 4px fade(@brand-dark, 20%); + border: none; + } + + .footer { + height: 380px; + bottom: 0; + box-shadow: none; + } } \ No newline at end of file diff --git a/_src/assets/less/sticky.less b/_src/assets/less/sticky.less index 74b9704a..72ef6783 100644 --- a/_src/assets/less/sticky.less +++ b/_src/assets/less/sticky.less @@ -4,6 +4,7 @@ .sticky { .divider-bottom; + padding-top: @line-height-computed; padding-bottom: @line-height-computed; @media @breakpoint2 {