Merge pull request academicpages#110 from yimingzhaomath/master

Added sticky footer

Author: staeiou

_sass/_base.scss

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

_sass/_footer.scss

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

assets/js/_main.js

@@ -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();