Permalink
Browse files

Merge pull request #110 from yimingzhaomath/master

Added sticky footer
  • Loading branch information...
staeiou committed Jul 3, 2018
2 parents 63f279a + 8068eb5 commit b428556759adf0ee4896e0258deb81021b46fe54
Showing with 47 additions and 6 deletions.
  1. +7 −1 _sass/_base.scss
  2. +24 −5 _sass/_footer.scss
  3. +16 −0 assets/js/_main.js
@@ -1,10 +1,16 @@
/* ==========================================================================
BASE ELEMENTS
========================================================================== */
html {
/* sticky footer fix */
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
padding-bottom: 9em;
color: $text-color;
font-family: $global-font-family;
line-height: 1.5;
@@ -306,4 +312,4 @@ nav {
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
-webkit-transition: $global-transition;
transition: $global-transition;
}
}
@@ -3,8 +3,17 @@
========================================================================== */
.page__footer {
@include full();
@include clearfix;
float: left;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;
/* sticky footer fix start */
position: absolute;
bottom: 0em;
height: auto;
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
-webkit-animation: intro 0.3s both;
@@ -15,9 +24,11 @@
border-top: 1px solid $light-gray;
footer {
@include container;
@include clearfix;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
max-width: 100%;
padding: 0 1em 2em;
@include breakpoint($x-large) {
@@ -34,7 +45,10 @@
}
}
.fa {
.fas,
.fab,
.far,
.fal {
color: mix(#fff, $gray, 25%);
}
}
@@ -45,7 +59,6 @@
}
.page__footer-follow {
ul {
margin: 0;
padding: 0;
@@ -70,4 +83,10 @@
padding-right: 10px;
font-weight: bold;
}
}
.social-icons {
a {
white-space: nowrap;
}
}
}
@@ -3,7 +3,23 @@
========================================================================== */
$(document).ready(function(){
// Sticky footer
var bumpIt = function() {
$("body").css("margin-bottom", $(".page__footer").outerHeight(true));
},
didResize = false;
bumpIt();
$(window).resize(function() {
didResize = true;
});
setInterval(function() {
if (didResize) {
didResize = false;
bumpIt();
}
}, 250);
// FitVids init
$("#main").fitVids();

0 comments on commit b428556

Please sign in to comment.