add translucent overlay

static/js/init.js

@@ -60,4 +60,12 @@ $(document).ready(function() {
         })
     }
 
+    // unload overlay
+    // CSS spinner courtesy of http://tobiasahlin.com/spinkit/
+    var spinner = '<div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';
+    $(window).on("beforeunload", function(e){
+       var fullHeight = $(document).height();
+       $('body').prepend('<div class="unloading">' + spinner + '</div>'); 
+       $('.unloading').height(fullHeight);
+    });
 });

static/styles/_components/_footer.scss

@@ -1,32 +1,33 @@
 footer {
-	@include clearfix();
-	@include rem(height, 10rem);
-	  padding: 2em;
-	  background-color: $licorice-2;
-	  color: #fff;
+    @include clearfix();
+    @include rem(height, 10rem);
+    min-height: 20%;
+    padding: 2em;
+    background-color: $licorice-2;
+    color: #fff;
 
   a,
   a:hover,
   a:active {
-  	color: #fff;
+    color: #fff;
   }
 }
 
 .footer__left {
-	@include span-columns(12);
-	img {
-		margin-right: 1.25em;
-	}
+    @include span-columns(12);
+    img {
+        margin-right: 1.25em;
+    }
 }
 
 .footer__right {
-	@include span-columns(12);
-	text-align: right;
+    @include span-columns(12);
+    text-align: right;
 }
 
 .footer__nav {
-	li {
-		display: inline-block;
-		padding: 0 .625em;
-	}
+    li {
+        display: inline-block;
+        padding: 0 .625em;
+    }
 }

static/styles/_components/_icons.scss

@@ -2,4 +2,60 @@
 .category-icon {
   	margin-right: 10px; margin-right: 1.0rem; 
   	vertical-align: text-bottom;
+}
+
+// Spinner
+// Source: http://tobiasahlin.com/spinkit/
+.spinner {
+  margin: 100px auto;
+  width: 80px;
+  height: 50px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.spinner > div {
+  background-color: $blue;
+  height: 100%;
+  width: 6px;
+  margin-right: 2px;
+  display: inline-block;
+
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }

static/styles/_components/_states.scss

@@ -2,3 +2,28 @@ section[aria-hidden="true"],
 .hidden {
   display: none;
 }
+
+@include keyframes(fadeIn) {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.unloading {
+  @include animation(fadeIn .2s ease-in);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,0.4);
+  z-index: 10000;
+
+  .spinner {
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    margin-left: -40px;
+  }
+}

static/styles/_layout/_layout.scss

@@ -12,10 +12,11 @@ html {
 body {
   padding: 0;
   margin: 0;
+  position: relative;
 }
 
 .page-wrap {
-  min-height: 100%;
+  min-height: 90%;
 
   &:after {
     content: "";