Nav/footer changes to support responsive

www/source/index.html.slim

@@ -5,7 +5,7 @@ title: InSpec - Audit and Test Framework
 /! animated banner
 header.blue-gradient
   .h-top.strict-center.purp-shade
-    h1.center.t-white.strict-center data-enllax-ratio=".1" data-enllax-type="foreground"  InSpec is compliance as code
+    h1.columns.t-white.strict-center data-enllax-ratio=".1" data-enllax-type="foreground"  InSpec is compliance as code
     img.grid-animate.strict-center style="opacity:0.8" src="/images/home/web.svg" /
     /! diamond image
     img.strict-center.bright-animate.3d-animate data-enllax-ratio=".3" data-enllax-type="foreground" src="/images/home/diamond.png" /

www/source/layouts/layout.slim

@@ -40,22 +40,28 @@ html
       $('#sidebar').stick_in_parent();
 
     javascript:
-      //Initiate parallax library
-      $(window).enllax();
+
+      if (window.innerWidth > 760) { //don't parallax on tablet/mobile
+      $(window).enllax(); //initiate parallax on larger screens
+      }
 
     javascript:
+
       //Animate HR on scroll
+
       $(window).scroll(function() {
       var scroll = $(window).scrollTop();
-      var objectSelect = $('#icon-trigger');
+      var objectSelect = $('#icon-trigger'); //parent that triggers scroll
       var objectPosition = objectSelect.offset().top;
       if (scroll > objectPosition) {
-            $('hr.first').addClass('stretch')
+      $('hr.first').addClass('stretch')  //add class animate class to HR
       }
       });
 
     javascript:
+
       //Animating progress bar for header
+
       $(document).ready(function(){
 
       var getMax = function(){
@@ -135,6 +141,7 @@ html
      });
 
     javascript:
+
       $(document).foundation();
       $('.try-demo').click(function(event){
         event.stopPropagation();

www/source/stylesheets/_footer.scss

@@ -35,25 +35,26 @@ footer span {
 
   &.chef {
     width        : 80px;
-    padding-left : 1.6em;
+    padding-left : 1.6em; //same as default li margin
     border-left  : 1px solid $color_white;
   }
 
   &.inspec {
     width         : 130px;
-    padding-right : 1.6em;
+    padding-right : 1.6em; //same as default li margin
   }
 }
 
-.footer--links {
+ul.footer--links {
   @extend       .no-bullet;
   display     : inline-flex;
   margin-left : auto;
 }
 
-.footer--link {
+li a.footer--link {
   color       : $color_gray;
   font-family : $heading-font;
+  font-weight: 400;
 
   &:active,
   &:focus,

www/source/stylesheets/_homepage.scss

@@ -27,21 +27,21 @@ header {
 
 .h-top {
 	// Container for homepage header art
-	height : 360px;
+	height : 360px; //same as header height
 
 	img {
 		&:first-of-type {
 			// Grid Art
 			z-index  : 10;
 			position : absolute;
-			top      : 100px;
+			top      : 90px;
 			height   : 360px;
 		}
 
 		&:nth-child(3) {
 			// Diamond
 			height     : 220px;
-			margin-top : 85px;
+			margin-top : 55px;
 		}
 	}
 
@@ -49,7 +49,7 @@ header {
 		// Heading
 		z-index    : 10;
 		position   : absolute;
-		margin-top : 290px;
+		margin-top : 280px;
 	}
 }
 

www/source/stylesheets/_nav.scss

@@ -153,6 +153,7 @@ $nav-breakpoint: 730px;
   background: $color_white;
   padding-left: 40px;
   padding-right: 40px;
+  box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
 
   .main-nav--link-text {
     margin-left: 6px;
@@ -196,7 +197,6 @@ $nav-breakpoint: 730px;
 
 nav {
   z-index: 200;
-  box-shadow: 0 0 4px rgba(151, 110, 229, 0.1);
   height: 80px;
 }
 

www/source/stylesheets/site.css.scss

@@ -9,8 +9,8 @@
 @import "footer";
 @import "layout";
 @import "typography";
-@import "icon-block";
-@import "hero";
+//@import "icon-block";
+//@import "hero";
 @import "homepage";
 @import "tutorials-page";
 @import "code";