Community Edits and progress bar

www/source/community.html.slim

@@ -9,45 +9,55 @@ description: This is where you interact with the InSpec open source community -
       | Inspec is better with friends.
       br/
       | Let’s build together.
-    hr.text-left/
+    hr.strict-left
     h3.margin-top
       | Join us on Slack and get answers fast
     P
       | Is something unclear or are you just feeling stuck?  We're here to help keep you moving. Chat with us on Slack, so we can help you keep moving.
-    p.margin-both-xs
+    p
       | <a href="https://slack.com/">Sign in</a> to slack or request an invite below:
     input
+
   .columns.large-6.medium-6.relative
     img.grid.strict-right src="/images/community/blue-web.svg" /
     img.ball src="/images/community/glow-ball.png" /
     img.ball.bright-animate src="/images/community/glow-ball.png" /
     img.ball src="/images/community/glow-ball.png" /
 
-.row.strict-center.margin-top
-  .large-6.medium-6.columns.strict-center
+.row
+  .icon.shadow
+    img src="/images/circ-arrow.svg" /
+.block-angl.blue-gradient.relative
+  .section.purp-shade
+    #particles-second
+     canvas.particles-js-canvas-el
+    .row
+      .large-6.medium-6.strict-center.column.margin-top-xl.margin-under
+        .box-white.shadow
           img.icon-art src="/images/community/contribute.svg" /
           h3 Contribute to InSpec
           p
             | InSpec is an open source project created and supported by active and
               passionate users. If you would like to contribute, we would love to have you.
-  .large-6.medium-6.columns.strict-center
+          br/
+          a.btn.margin-top-xs href="https://github.com/chef/inspec" Start Contributing
+          p
+
+      .large-6.medium-6.strict-center.column.margin-top-xl.margin-under
+        .box-white.shadow
           img.icon-art src="/images/community/bugs.svg" /
           h3 Report Bugs and Request Features
           p
             | We rely on your feedback to improve InSpec. <br>Whether you found a bug
               or have a great idea for an improvement, join us on GitHub.
-.row.margin-under
-  .columns.medium-6.strict-center
+          br/
+          a.btn.margin-top-xs href="https://github.com/chef/inspec/issues" Give Feedback
           p
-    a.btn href="https://github.com/chef/inspec" Start Contributing
-  .columns.medium-6.strict-center
-    p
-    a.btn href="https://github.com/chef/inspec/issues" Give Feedback
 
 
     /.row
-  .icon.shadow
-    img src="/images/circ-arrow.svg" /
+    /  .icon.shadow
+    /    img src="/images/circ-arrow.svg" /
     /.block-angl.blue-gradient
     /  .section.purp-shade
     /    .row.triangle-shade

www/source/index.html.slim

@@ -1,6 +1,7 @@
 ---
 title: InSpec - Audit and Test Framework
 ---
+
 /! animated banner
 header.blue-gradient
   .h-top.strict-center.purp-shade
@@ -21,12 +22,12 @@ header.blue-gradient
     h4#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.
 /! Third Content
-.row.strict-center.margin-under-xs
+#icon-trigger.row.strict-center.margin-under-xs
   .large-12.columns
-    hr/
+    hr.first/
     small FEATURES OF INSPEC
     h2 InSpec is compliance by design
-    hr/
+    hr.first/
 /! images with text - grid of 4
 .row.strict-center.margin-under
   .large-3.medium-3.columns.strict-center

www/source/javascripts/app.js

@@ -16,7 +16,7 @@ particlesJS('particles-second',
 {
   "particles": {
     "number": {
-      "value": 15,
+      "value": 20,
       "density": {
         "enable": true,
         "value_area": 500
@@ -64,7 +64,7 @@ particlesJS('particles-second',
       "enable": true,
       "distance": 150,
       "color": "#ffffff",
-      "opacity": 0.5,
+      "opacity": 0.6,
       "width": 1
     },
     "move": {
@@ -137,7 +137,7 @@ particlesJS('particles-js',
   {
     "particles": {
       "number": {
-        "value": 30,
+        "value": 31,
         "density": {
           "enable": true,
           "value_area": 500

www/source/javascripts/jquery.drawsvg.js

@@ -0,0 +1,352 @@
+
+window.addEventListener("load", windowLoadHandler, false);
+var sphereRad = 280;
+var radius_sp=1;
+//for debug messages
+var Debugger = function() { };
+Debugger.log = function(message) {
+	try {
+		console.log(message);
+	}
+	catch (exception) {
+		return;
+	}
+}
+
+function windowLoadHandler() {
+	canvasApp();
+}
+
+function canvasSupport() {
+	return Modernizr.canvas;
+}
+
+function canvasApp() {
+	if (!canvasSupport()) {
+		return;
+	}
+
+	var theCanvas = document.getElementById("canvasOne");
+	var context = theCanvas.getContext("2d");
+
+	var displayWidth;
+	var displayHeight;
+	var timer;
+	var wait;
+	var count;
+	var numToAddEachFrame;
+	var particleList;
+	var recycleBin;
+	var particleAlpha;
+	var r,g,b;
+	var fLen;
+	var m;
+	var projCenterX;
+	var projCenterY;
+	var zMax;
+	var turnAngle;
+	var turnSpeed;
+	var sphereCenterX, sphereCenterY, sphereCenterZ;
+	var particleRad;
+	var zeroAlphaDepth;
+	var randAccelX, randAccelY, randAccelZ;
+	var gravity;
+	var rgbString;
+	//we are defining a lot of variables used in the screen update functions globally so that they don't have to be redefined every frame.
+	var p;
+	var outsideTest;
+	var nextParticle;
+	var sinAngle;
+	var cosAngle;
+	var rotX, rotZ;
+	var depthAlphaFactor;
+	var i;
+	var theta, phi;
+	var x0, y0, z0;
+
+	init();
+
+	function init() {
+		wait = 1;
+		count = wait - 1;
+		numToAddEachFrame = 8;
+
+		//particle color
+		r = 70;
+		g = 255;
+		b = 140;
+
+		rgbString = "rgba("+r+","+g+","+b+","; //partial string for color which will be completed by appending alpha value.
+		particleAlpha = 1; //maximum alpha
+
+		displayWidth = theCanvas.width;
+		displayHeight = theCanvas.height;
+
+		fLen = 320; //represents the distance from the viewer to z=0 depth.
+
+		//projection center coordinates sets location of origin
+		projCenterX = displayWidth/2;
+		projCenterY = displayHeight/2;
+
+		//we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
+		zMax = fLen-2;
+
+		particleList = {};
+		recycleBin = {};
+
+		//random acceleration factors - causes some random motion
+		randAccelX = 0.1;
+		randAccelY = 0.1;
+		randAccelZ = 0.1;
+
+		gravity = -0; //try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.
+
+		particleRad = 2.5;
+
+		sphereCenterX = 0;
+		sphereCenterY = 0;
+		sphereCenterZ = -3 - sphereRad;
+
+		//alpha values will lessen as particles move further back, causing depth-based darkening:
+		zeroAlphaDepth = -750;
+
+		turnSpeed = 2*Math.PI/1200; //the sphere will rotate at this speed (one complete rotation every 1600 frames).
+		turnAngle = 0; //initial angle
+
+		timer = setInterval(onTimer, 10/24);
+	}
+
+	function onTimer() {
+		//if enough time has elapsed, we will add new particles.
+		count++;
+			if (count >= wait) {
+
+			count = 0;
+			for (i = 0; i < numToAddEachFrame; i++) {
+				theta = Math.random()*2*Math.PI;
+				phi = Math.acos(Math.random()*2-1);
+				x0 = sphereRad*Math.sin(phi)*Math.cos(theta);
+				y0 = sphereRad*Math.sin(phi)*Math.sin(theta);
+				z0 = sphereRad*Math.cos(phi);
+
+				//We use the addParticle function to add a new particle. The parameters set the position and velocity components.
+				//Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
+				//it becomes unstuck).
+				var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002*x0, 0.002*y0, 0.002*z0);
+
+				//we set some "envelope" parameters which will control the evolving alpha of the particles.
+				p.attack = 50;
+				p.hold = 50;
+				p.decay = 100;
+				p.initValue = 0;
+				p.holdValue = particleAlpha;
+				p.lastValue = 0;
+
+				//the particle will be stuck in one place until this time has elapsed:
+				p.stuckTime = 90 + Math.random()*20;
+
+				p.accelX = 0;
+				p.accelY = gravity;
+				p.accelZ = 0;
+			}
+		}
+
+		//update viewing angle
+		turnAngle = (turnAngle + turnSpeed) % (2*Math.PI);
+		sinAngle = Math.sin(turnAngle);
+		cosAngle = Math.cos(turnAngle);
+
+		//background fill
+		context.fillStyle = "rgba(255,255,255, 0)";
+		context.fillRect(0,0,displayWidth,displayHeight);
+
+		//update and draw particles
+		p = particleList.first;
+		while (p != null) {
+			//before list is altered record next particle
+			nextParticle = p.next;
+
+			//update age
+			p.age++;
+
+			//if the particle is past its "stuck" time, it will begin to move.
+			if (p.age > p.stuckTime) {
+				p.velX += p.accelX + randAccelX*(Math.random()*2 - 1);
+				p.velY += p.accelY + randAccelY*(Math.random()*2 - 1);
+				p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1);
+
+				p.x += p.velX;
+				p.y += p.velY;
+				p.z += p.velZ;
+			}
+
+			/*
+			We are doing two things here to calculate display coordinates.
+			The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
+			x and z (but the y coordinate will not change).
+			Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
+			*/
+			rotX =  cosAngle*p.x + sinAngle*(p.z - sphereCenterZ);
+			rotZ =  -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ;
+			m =radius_sp* fLen/(fLen - rotZ);
+			p.projX = rotX*m + projCenterX;
+			p.projY = p.y*m + projCenterY;
+
+			//update alpha according to envelope parameters.
+			if (p.age < p.attack+p.hold+p.decay) {
+				if (p.age < p.attack) {
+					p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue;
+				}
+				else if (p.age < p.attack+p.hold) {
+					p.alpha = p.holdValue;
+				}
+				else if (p.age < p.attack+p.hold+p.decay) {
+					p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue;
+				}
+			}
+			else {
+				p.dead = true;
+			}
+
+			//see if the particle is still within the viewable range.
+			if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) {
+				outsideTest = true;
+			}
+			else {
+				outsideTest = false;
+			}
+
+			if (outsideTest||p.dead) {
+				recycle(p);
+			}
+
+			else {
+				//depth-dependent darkening
+				depthAlphaFactor = (1-rotZ/zeroAlphaDepth);
+				depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor);
+				context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")";
+
+				//draw
+				context.beginPath();
+				context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false);
+				context.closePath();
+				context.fill();
+			}
+
+			p = nextParticle;
+		}
+	}
+
+	function addParticle(x0,y0,z0,vx0,vy0,vz0) {
+		var newParticle;
+		var color;
+
+		//check recycle bin for available drop:
+		if (recycleBin.first != null) {
+			newParticle = recycleBin.first;
+			//remove from bin
+			if (newParticle.next != null) {
+				recycleBin.first = newParticle.next;
+				newParticle.next.prev = null;
+			}
+			else {
+				recycleBin.first = null;
+			}
+		}
+		//if the recycle bin is empty, create a new particle (a new ampty object):
+		else {
+			newParticle = {};
+		}
+
+		//add to beginning of particle list
+		if (particleList.first == null) {
+			particleList.first = newParticle;
+			newParticle.prev = null;
+			newParticle.next = null;
+		}
+		else {
+			newParticle.next = particleList.first;
+			particleList.first.prev = newParticle;
+			particleList.first = newParticle;
+			newParticle.prev = null;
+		}
+
+		//initialize
+		newParticle.x = x0;
+		newParticle.y = y0;
+		newParticle.z = z0;
+		newParticle.velX = vx0;
+		newParticle.velY = vy0;
+		newParticle.velZ = vz0;
+		newParticle.age = 0;
+		newParticle.dead = false;
+		if (Math.random() < 0.5) {
+			newParticle.right = true;
+		}
+		else {
+			newParticle.right = false;
+		}
+		return newParticle;
+	}
+
+	function recycle(p) {
+		//remove from particleList
+		if (particleList.first == p) {
+			if (p.next != null) {
+				p.next.prev = null;
+				particleList.first = p.next;
+			}
+			else {
+				particleList.first = null;
+			}
+		}
+		else {
+			if (p.next == null) {
+				p.prev.next = null;
+			}
+			else {
+				p.prev.next = p.next;
+				p.next.prev = p.prev;
+			}
+		}
+		//add to recycle bin
+		if (recycleBin.first == null) {
+			recycleBin.first = p;
+			p.prev = null;
+			p.next = null;
+		}
+		else {
+			p.next = recycleBin.first;
+			recycleBin.first.prev = p;
+			recycleBin.first = p;
+			p.prev = null;
+		}
+	}
+}
+
+
+$(function() {
+    $( "#slider-range" ).slider({
+      range:false,
+      min: 20,
+      max: 500,
+      value: 280,
+      slide: function( event, ui ) {
+         console.log(ui.value);
+        sphereRad = ui.value;
+      }
+    });
+  });
+
+$(function() {
+    $( "#slider-test" ).slider({
+      range:false,
+      min: 1.0,
+      max: 2.0,
+      value: 1,
+      step:0.01,
+      slide: function( event, ui ) {
+        radius_sp = ui.value;
+      }
+    });
+  });

www/source/layouts/_nav.slim

@@ -28,6 +28,8 @@ nav#main-nav class="sidebar-layout-#{locals[:sidebar_layout]}"
         = partial "layouts/sidebar"
     - else
 
+  <progress value="0"></progress>
+
 nav#main-nav-ctas
   a.main-nav--logo href="/"
     img src="/images/inspec-by-chef-logo.svg" onerror="this.src='/images/inspec-by-chef-logo.png'"

www/source/layouts/layout.slim

@@ -44,10 +44,65 @@ html
       var objectSelect = $('#icon-trigger');
       var objectPosition = objectSelect.offset().top;
       if (scroll > objectPosition) {
-            $('hr').addClass('stretch')
+            $('hr.first').addClass('stretch')
       }
       });
 
+    javascript:
+      $(document).ready(function(){
+
+      var getMax = function(){
+          return $(document).height() - $(window).height();
+      }
+
+      var getValue = function(){
+          return $(window).scrollTop();
+      }
+
+      if('max' in document.createElement('progress')){
+          // Browser supports progress element
+          var progressBar = $('progress');
+
+          // Set the Max attr for the first time
+          progressBar.attr({ max: getMax() });
+
+          $(document).on('scroll', function(){
+              // On scroll only Value attr needs to be calculated
+              progressBar.attr({ value: getValue() });
+          });
+
+          $(window).resize(function(){
+              // On resize, both Max/Value attr needs to be calculated
+              progressBar.attr({ max: getMax(), value: getValue() });
+          });
+      }
+      else {
+          var progressBar = $('.progress-bar'),
+              max = getMax(),
+              value, width;
+
+          var getWidth = function(){
+              // Calculate width in percentage
+              value = getValue();
+              width = (value/max) * 100;
+              width = width + '%';
+              return width;
+          }
+
+          var setWidth = function(){
+              progressBar.css({ width: getWidth() });
+          }
+
+          $(document).on('scroll', setWidth);
+          $(window).on('resize', function(){
+              // Need to reset the Max attr
+              max = getMax();
+              setWidth();
+          });
+          }
+        });
+
+
     javascript:
       $(document).foundation();
       $('.try-demo').click(function(event){
@@ -60,7 +115,6 @@ html
         })
       });
 
-
      javascript:
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
          analytics.load("2NpoxZS2fnBmOgGdnQOymLNm6wuij13X");

www/source/stylesheets/_homepage.scss

@@ -16,6 +16,7 @@ header {
 
 #particles-second{
 	width:100%;
+	max-width: 100%;
 	overflow: hidden;
 	position: absolute;
 	background-color: transparent;
@@ -165,12 +166,17 @@ img.ball:nth-child(3){
       }
   }
 
-	//Warping Grid Animation//
+	//Growing HR//
+
+
+	hr.first {
+		width: 0px;
+	}
 
 	.stretch{
-	  -webkit-animation: grow 1.2s linear 1 both;
-	  animation: grow 1.2s linear 1  both;
-	  -moz-animation: grow 1.2s linear 1 both;
+	  -webkit-animation: grow 0.8s linear 1 both;
+	  animation: grow 0.8s linear 1  both;
+	  -moz-animation: grow 0.8s linear 1 both;
 	}
 	@-webkit-keyframes grow {
 	  from { width:0px;}

www/source/stylesheets/_layout.scss

@@ -62,6 +62,12 @@
 	margin-bottom: $percent_sm;
 }
 
+//White Box
+.box-white{
+	border-radius: 7px;
+	padding: 2em;
+	background-color: white;
+}
 //Art
 
 .icon-art {
@@ -112,3 +118,46 @@
 	  background: linear-gradient(170deg, rgba(99, 206, 153, 1) 0%, rgba(91, 201, 163, 1) 8.33%, rgba(67, 185, 194, 1) 36.64%, rgba(58, 179, 206, 1) 52.48%, rgba(58, 175, 206, 1) 67.93%, rgba(58, 162, 206, 1) 83.94%, rgba(58, 142, 206, 1) 100%);
 	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63CE99',endColorstr='#3A8ECE' , GradientType=1);
 	}
+
+	//Proogress bar
+
+	progress {
+  /* Positioning */
+  position: fixed;
+  left: 0;
+  top: 0;
+
+  /* Dimensions */
+  width: 100%;
+  height: 1.3px;
+
+  /* Reset the appearance */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+
+  /* Get rid of the default border in Firefox/Opera. */
+  border: none;
+
+  /* Progress bar container for Firefox/IE10+ */
+  background-color: transparent;
+
+  /* Progress bar value for IE10+ */
+  color: $color_link;
+}
+
+progress[value]::-webkit-progress-bar {
+  background-color: white;
+}
+
+progress[value]::-webkit-progress-value {
+  background-color:$color_link;
+}
+
+progress[value]::-moz-progress-bar {
+  background-color: white;
+}
+
+progress[value]::-moz-progress-value {
+  background-color:$color_link;
+}

www/source/stylesheets/_typography.scss

@@ -38,7 +38,7 @@ small {
 hr {
 	margin-top: 6px;
 	margin-bottom: 6px;
-	width: 0px;
+	width: 150px;
 	border: 0;
 	height: 1px;
 	background-color: $color_hr;