m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-05 11:25:07 +01:00
Code

topbar and footer as fixed site background

Browse Source
This commit is contained in:
Matthias Kretschmann 2013-12-03 22:44:00 +01:00
parent 3d4b49a91f
commit ac9d5ecda8
3 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_src/_layouts/base.html
View File

@ -7,7 +7,7 @@
{% include header.html %} {% include header.html %}
<section role="document" class="container"> <section role="document" class="document container">
{{ content }} {{ content }}

49
_src/assets/less/scaffolding.less
View File

@ -4,15 +4,19 @@ html {
} }
body { body {
background: @body-bg; background-color: @body-bg;
} }
// //
// Topbar // Topbar
// //
.topbar { .topbar {
.clearfix; .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 { .row {
margin-top: @line-height-computed/2; margin-top: @line-height-computed/2;
margin-bottom: @line-height-computed/2; margin-bottom: @line-height-computed/2;
@ -29,7 +33,7 @@ body {
float: left; float: left;
@media @breakpoint2 { @media @breakpoint2 {
margin-left: -55px margin-left: -54px
} }
.banner-title { .banner-title {
@ -107,6 +111,8 @@ a.close,
.footer { .footer {
text-align: center; text-align: center;
background: fade(@brand-dark, 5%); 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 { .footer-description {
.h5; .h5;
@ -175,4 +181,41 @@ a.close,
.footer:hover .subscribe .facebook i:before { .footer:hover .subscribe .facebook i:before {
color: #3b5998; 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;
}
} }

1
_src/assets/less/sticky.less
View File

@ -4,6 +4,7 @@
.sticky { .sticky {
.divider-bottom; .divider-bottom;
padding-top: @line-height-computed;
padding-bottom: @line-height-computed; padding-bottom: @line-height-computed;
@media @breakpoint2 { @media @breakpoint2 {