Sticky footer

This commit is contained in:
John O'Nolan 2014-07-20 17:27:20 +02:00
parent fe888da667
commit 3242e72cfc
2 changed files with 26 additions and 7 deletions

View File

@ -179,6 +179,14 @@ body {
color: #3A4145; color: #3A4145;
} }
/*Make a sticky footer*/
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -28px; /*exact height of .site-footer*/
}
::-moz-selection { ::-moz-selection {
background: #D6EDFF; background: #D6EDFF;
} }
@ -542,6 +550,16 @@ margin on the iframe, cause it breaks stuff. */
animation: fade-in-up-subtle 2s; animation: fade-in-up-subtle 2s;
} }
.content {
padding-bottom: 8rem;
}
@media (max-width: 900px) {
.content { padding-bottom: 6rem; }
}
@media (max-width: 500px) {
.content { padding-bottom: 3rem; }
}
/* Every post, on every page, gets this style on its <article> tag */ /* Every post, on every page, gets this style on its <article> tag */
.post { .post {
position: relative; position: relative;
@ -997,8 +1015,11 @@ margin on the iframe, cause it breaks stuff. */
========================================================================== */ ========================================================================== */
.site-footer { .site-footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative; position: relative;
margin: 8rem 0 0 0; height: 28px;
padding: 0.5rem 35px; padding: 0.5rem 35px;
border-top: #EBF2F6 1px solid; border-top: #EBF2F6 1px solid;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -1361,10 +1382,6 @@ margin on the iframe, cause it breaks stuff. */
display: block; display: block;
} }
.site-footer {
margin-top: 3rem;
}
} }

View File

@ -23,8 +23,10 @@
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
<div class="site-wrapper">
{{! Everything else gets inserted here }} {{! Everything else gets inserted here }}
{{{body}}} {{{body}}}
</div>
<footer class="site-footer clearfix"> <footer class="site-footer clearfix">
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section> <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>