Bug fixes + New Elements

** Fixed 404 pages on mobile
** Colored links when on correct page for Nav (probably, a better way
to handle this..but it works for now)
** Changed horizontal parallax to vertical
** Per Kaiv’s request slowed down grid animation
** Per Kaiv’s request added a little “code snippet” preview when plus
icon on homepage is clicked.

www/source/community.html.slim

@@ -6,7 +6,7 @@ description: This is where you interact with the InSpec open source community -
 .row.margin-both-offset
   .columns.large-6.medium-6
 
-    h2#icon-trigger data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground" 
+    h2#icon-trigger data-enllax-ratio=".1" data-enllax-type="foreground"
 
       | Inspec is better with friends.
       br/

www/source/images/open-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 30"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="15" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#955af2"/><stop offset="1" stop-color="#3ab3ce"/></linearGradient></defs><title>open-close</title><g id="Layer_2" data-name="Layer 2"><g id="polys"><polygon class="cls-1" points="30 14 16 14 16 0 14 0 14 14 0 14 0 16 14 16 14 30 16 30 16 16 30 16 30 14"/></g></g></svg>

www/source/index.html.slim

@@ -14,15 +14,28 @@ header.blue-gradient.margin-top-offset
    canvas.particles-js-canvas-el /
   /! style for callout icons
   .row
-    .icon.shadow
-      img src="/images/circ-arrow.svg" /
+    .icon.shadow.code-trigger
+      img src="/images/open-close.svg" /
+      
+/! Surprise Code example
+.code-pop
+  .strict-center
+    p.code.code-demo.code-pop-animate
+      span.code-attribute
+        | describe 
+      | code
+      span.code-attribute
+        |  do it
+      |  {should be_inspec} 
+      span.code-attribute
+        | end
 
       
 /! Second Content
 .row.margin-both
-  .large-9.medium-9.columns data-enllax-direction="horizontal" data-enllax-ratio=".1" data-enllax-type="foreground" 
+  .large-9.medium-9.columns data-enllax-ratio=".1" data-enllax-type="foreground"
 
-    h2 Automated testing, codified
+    h2  Automated testing, codified
     p#icon-trigger
       | InSpec is an open-source testing framework for infrastructure with a human-readable language for specifying compliance, security and other policy requirements. Easily integrate automated tests that check for adherence to policy into any stage of your deployment pipeline.
 
@@ -115,7 +128,7 @@ header.blue-gradient.margin-top-offset
             |  'compliance guide, section 2.1'
             br/
             br/
-            span.code-attribute.indent   describe
+            span.code-attribute describe
 
             |  sshd_config 
 

www/source/layouts/_nav.slim

@@ -12,56 +12,56 @@ nav#main-nav
 
     ul.main-nav--links
       li.main-nav--link.hide-docs
-        a href="/tutorials"
-          span.main-nav--link-text Tutorials
+        <a href="/tutorials" class="#{'t-purple' if current_page.url == '/tutorials'}" <span class="main-nav--link-text">Tutorials</span>
+        </a>
       li.main-nav--link
-        a href="/docs"
-          span.main-nav--link-text.docs Docs
+        <a href="/docs" class="#{'t-purple' if current_page.url == '/docs'}" <span class="main-nav--link-text">Docs</span>
+        </a>
         span.fa.fa-angle-right.t-purple.toggle.mobile-show
 
           
             
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/cli.html"
+        a href="/docs/reference/cli/"
           span.main-nav--link-text inspec executable
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/profiles.html"
+        a href="/docs/reference/profiles/"
           span.main-nav--link-text Profiles
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/resources.html"
+        a href="/docs/reference/resources/"
           span.main-nav--link-text Resources
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/matchers.html"
+        a href="/docs/reference/matchers/"
           span.main-nav--link-text Matchers
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/dsl_inspec.html"
+        a href="/docs/reference/dsl_inspec/"
           span.main-nav--link-text InSpec DSL
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/dsl_resource.html"
+        a href="/docs/reference/dsl_resource/"
           span.main-nav--link-text Resource DSL
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/plugin_kitchen_inspec.html"
+        a href="/docs/reference/plugin_kitchen_inspec/"
           span.main-nav--link-text kitchen-inspec
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/shell.html"
+        a href="/docs/reference/shell/"
           span.main-nav--link-text inspec shell
           
       li.main-nav--link.docs--inside--link
-        a href="/docs/reference/ruby_usage.html"
+        a href="/docs/reference/ruby_usage/"
           span.main-nav--link-text Ruby usage
           
   
 
       li.main-nav--link.hide-docs
-        a href="/community"
-          span.main-nav--link-text Community
+        <a href="/community" class="#{'t-purple' if current_page.url == '/community'}" <span class="main-nav--link-text">Community</span>
+        </a>
       li.main-nav--link.hide-docs
         a href="https://github.com/chef/inspec"
           i.fa.fa-github-alt
@@ -72,3 +72,4 @@ nav#main-nav
         a.btn href="https://downloads.chef.io/inspec" 
           i.fa.fa-cloud-download
           span.main-nav--link-text Download
+          

www/source/layouts/layout.slim

@@ -51,6 +51,16 @@ html
       $(window).enllax(); //initiate parallax on larger screens
       }
       
+    javascript:
+    
+      //Code pop-up animation on homepage
+      
+      $('.code-trigger').click(function() {
+        $(this).toggleClass('turn-angle');
+        $('.code-pop').slideToggle(500);
+      });
+    
+      
     javascript:
     
       //Animate HR on scroll

www/source/stylesheets/_code.scss

@@ -23,6 +23,14 @@ pre {
 	background    : $color_heading;
 }
 
+// Container for pop-up code example
+
+.code-pop {
+	padding       : $percent_sm/1.5;
+	background    : $color_heading;
+	display:none; //Hide until click trigger
+}
+
 
 // Code Font Colors
 
@@ -50,3 +58,40 @@ pre {
 	padding-left : 1em;
 	word-wrap    : normal;
 }
+
+//Animation for type ahead animation
+
+.code-pop-animate { //Target
+	font-family: Consolas,Liberation Mono,Courier,monospace;
+	overflow: hidden;
+	white-space: nowrap;
+	margin: 0 auto;
+	-webkit-animation-delay: 6s;
+	animation-delay: 6;
+	-moz-animation-delay: 6s;
+	animation: type 6s steps(41, end);
+	-moz-animation: type 6s steps(41, end);
+	-webkit-animation: type 6s steps(41, end);
+}
+
+//Click event trigger {
+.code-trigger{
+	cursor: pointer;
+}
+
+.code-animate { //typing animation for fode
+	animation: type 6s steps(41, end);
+	-moz-animation: type 6s steps(41, end);
+	-webkit-animation: type 6s steps(41, end);
+}
+
+
+@keyframes type {
+  from { width: 0; }
+	to {width:100%;}
+}
+
+@-webkit-keyframes type {
+  from { width: 0; }
+	to {width:100%;}
+}

www/source/stylesheets/_homepage.scss

@@ -161,9 +161,9 @@ img.ball:nth-child(3) {
 // Warping Grid Animation//
 
 .grid-animate {
-	-moz-animation    : g-animate 5s linear infinite both;
-	-webkit-animation : g-animate 5s linear infinite both;
-	animation         : g-animate 5s linear infinite both;
+	-moz-animation    : g-animate 8s linear infinite both;
+	-webkit-animation : g-animate 8s linear infinite both;
+	animation         : g-animate 8s linear infinite both;
 }
 
 @-webkit-keyframes g-animate {
@@ -274,3 +274,13 @@ hr.first {
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
 }
+
+//Rotate 45 Degs
+
+.turn-angle{
+-webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+}

www/source/stylesheets/_nav.scss

@@ -100,18 +100,6 @@
     margin-left: 6px;
   }
 
-  a {
-    color: $color_gray;
-  }
-
-
-  a:hover, a.btn, a:active {
-    color: $color_purple;
-  }
-
-  a.btn:hover {
-    color: white;
-  }
 
 
   @include nav-large {
@@ -130,6 +118,21 @@
 
 //Hannah's Styles'
 
+.main-nav--link {
+  a {
+    color: $color_gray;
+  }
+
+
+  a:hover, a.btn, a:active {
+    color: $color_purple;
+  }
+
+  a.btn:hover {
+    color: white;
+  }
+}
+
 nav {
   z-index: 200;
   height: 80px;

www/source/stylesheets/_typography.scss

@@ -116,5 +116,5 @@ hr {
 }
 
 .t-purple {
-	color : $color_purple;
+	color : $color_purple!important;
 }