m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-01-03 18:35: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 %}
<section role="document" class="container">
<section role="document" class="document container">
{{ content }}

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

@ -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;
}
}

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

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