Layout changes in header/footer

www/source/index.html.slim

@@ -69,7 +69,7 @@ header.blue-gradient
     #particles-second
      canvas.particles-js-canvas-el
     .row
-      .large-5.medium-5.columns.margin-under
+      .large-5.medium-5.columns.margin-under-xs
         h3.t-white
           i.fa.fa-angle-right.t-dk
           |  Codify agreements
@@ -86,7 +86,8 @@ header.blue-gradient
         p.t-white
           | Combine profiles and customize them with overlays. Pick controls and define exceptions as code.
       /! code
-      .large-6.medium-6.columns.code-example.shadow.relative-top
+      .large-6.medium-6.columns
+        .code-example.shadow.relative-top.margin-under
           code.code-demo
             span.code-attribute control
             | 'sshd-21'
@@ -122,7 +123,7 @@ header.blue-gradient
         h2.t-white
           | Solve your infrastructure testing needs simply and efficiently
     .row
-      .large-5.medium-5.columns.margin-under-xl
+      .large-5.medium-5.columns.margin-under-xs
         h3.t-white
           i.fa.fa-angle-right.t-dk
           |  Test the desired state
@@ -143,7 +144,8 @@ header.blue-gradient
         p.t-white
           | Easily create custom resources and share them.
         /! code
-      .large-6.medium-6.columns.code-example.shadow.relative-top
+      .large-6.medium-6.columns
+        .code-example.shadow.relative-top.margin-under
           code.code-demo
             span.code-attribute describe
             |  file('/etc/myap.conf')
@@ -177,4 +179,3 @@ header.blue-gradient
             br/
             span.code-attribute   end
           a.btn.strict-right.t-white.try-demo Try the Demo
-

www/source/layouts/_footer.slim

@@ -7,14 +7,18 @@ footer#main-footer.dark-bg
       a.btn.t-white href="https://downloads.chef.io/inspec"
         i.fa.fa-cloud-download
         span Download
-  .row
+
-    .footer--logos
+  .columns.large-4.medium-4
+    ul.footer--logos
+      li
         a.footer--logo.inspec href="/"
           img src="/images/inspec-by-chef-logo.png"
+      li
         a.footer--logo.chef href="http://www.chef.io"
             img src="/images/chef-logo.png"
 
-    ul.footer--links
+  .columns.large-8.medium-8
+    ul.footer--links.strict-right
       li
         a.footer--link href="/legal/licensing" Licensing
       li
@@ -24,5 +28,5 @@ footer#main-footer.dark-bg
       li
         a.footer--link href="/legal/privacy-policy" Privacy Policy
 
-  p.strict-center
+  p.strict-center.clear
     small © Chef Software 2016

www/source/stylesheets/_buttons.scss

@@ -48,6 +48,13 @@ a {
 			background-color : $color_purple;
 		}
 	}
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	float: initial;
+	padding     : 0.8rem 1.6rem;
+	margin     : 0 auto;
+	text-align : center;
+	}
 }
 
 // Form Buttons

www/source/stylesheets/_footer.scss

@@ -1,17 +1,10 @@
 
 #main-footer {
-  padding-right : 40px;
+  padding-right : 40px; // Same margins as nav
   padding-left  : 40px;
   background    : $color_heading;
-  // Same margins as nav
 }
 
-#main-footer > .row {
-  display        : flex;
-  max-width      : 100%;
-  vertical-align : middle;
-  align-items    : center;
-}
 
 footer > #dlmsg {
   // Download Message
@@ -24,8 +17,17 @@ footer a.btn:last-child {
 }
 
 footer span {
-  margin-left : 6px;
+  margin-left : 6px;// Icon
-  // Icon
+}
+
+ul.footer--logos {
+  margin-left: 0!important;
+}
+
+ul.footer--logos li {
+  display: inline-block;
+  margin-left: 0!important;
+
 }
 
 .footer--logo  {

www/source/stylesheets/_homepage.scss

@@ -13,6 +13,7 @@ header {
 	margin-top       : -500px;
 	overflow         : hidden;
 	background-color : transparent;
+
 }
 
 #particles-second {
@@ -23,6 +24,12 @@ header {
 	height           : 80%;
 	overflow         : hidden;
 	background-color : transparent;
+
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	height : 100%;
+	}
+
 }
 
 .h-top {
@@ -42,6 +49,11 @@ header {
 			// Diamond
 			height     : 220px;
 			margin-top : 55px;
+			//mobile
+			@media only screen and (max-width: 40.063em) {
+			height     : 200px;
+			margin-top : 65px;
+			}
 		}
 	}
 
@@ -50,6 +62,10 @@ header {
 		z-index    : 10;
 		position   : absolute;
 		margin-top : 280px;
+		//mobile
+		@media only screen and (max-width: 40.063em) {
+		margin-top : 260px;
+		}
 	}
 }
 

www/source/stylesheets/_layout.scss

@@ -10,6 +10,14 @@
 .strict-right {
 	float      : right;
 	text-align : right;
+
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	float: initial;
+	margin     : 0 auto;
+	text-align : center;
+	}
+
 }
 
 .strict-left {
@@ -37,14 +45,28 @@
 .margin-both-xl {
 	margin-top    : $percent_lg;
 	margin-bottom : $percent_lg;
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	margin-top    : $percent_md;
+	margin-bottom : $percent_md;
+	}
+
 }
 
 .margin-top-xl {
 	margin-top : $percent_lg;
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	margin-top    : $percent_md;
+	}
 }
 
 .margin-under-xl {
 	margin-bottom : $percent_lg;
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	margin-bottom : $percent_md;
+	}
 }
 
 // default
@@ -147,6 +169,11 @@
 	background : $color_triangle_block;
 	-webkit-clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
 	clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);
+	//mobile
+	@media only screen and (max-width: 40.063em) {
+	-webkit-clip-path: initial;
+	clip-path: initial;
+		}
 }
 
 .purp-shade {