Merge pull request #27 from captainill/master

Homepage design

.gitignore

@@ -23,3 +23,7 @@ _testmain.go
 *.test
 bin/
 .vagrant/
+
+
+website/npm-debug.log
+

website/source/Gruntfile.js

@@ -3,17 +3,24 @@ module.exports = function(grunt) {
 	// Configuration goes here
 	grunt.initConfig({
 
+		less: {
+			development:{
+				files: {
+					"stylesheets/main.css": "stylesheets/main.less"
+				}
+			}
+		},
+
   	concat: {
     	options: {
       		separator: ';'
     	},
-
     	site: {
     		src: 	[
                 'javascripts/app/app.js',
                 'javascripts/app/util.js',
-                'javascripts/app/home.js',
-                'javascripts/app/nodes.js'
+                'javascripts/app/homepage.js'
+
     					],
 
   			dest:  'javascripts/app/deploy/site.js'
@@ -29,6 +36,10 @@ module.exports = function(grunt) {
 		},
 
 		watch: {
+			less: {
+				files: 'stylesheets/*.less',
+				tasks: ['less']
+			},
 		  js: {
 		    files: 'javascripts/app/*.js',
 		    tasks: ['concat', 'uglify']
@@ -37,8 +48,8 @@ module.exports = function(grunt) {
 
 	});
 
-
 	// Load plugins here
+	grunt.loadNpmTasks('grunt-contrib-less');
 	grunt.loadNpmTasks('grunt-contrib-clean');
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-connect');
@@ -53,4 +64,6 @@ module.exports = function(grunt) {
   // Full distribution task.
   grunt.registerTask('dist', ['dist-js']);
 
+	grunt.registerTask('default', ['watch']);
+
 };

website/source/index.html.erb

@@ -1,43 +1,71 @@
 <!-- Main jumbotron for a primary marketing message or call to action -->
+<div id="jumbotron-mask">
 	<div id="jumbotron">
 			<div class="container">
-		<div class="jumbo-logo hidden-xs hidden-sm"></div>
-		<div class="col-lg-5 col-md-5">
-			<h2 class="rls-l">Consul is a decentralized solution for service discovery and orchestration that is lightweight, highly available, and fault tolerant.</h2>
+				<div class="col-lg-6 col-md-6">
+					<h2 class="rls-l">Create and configure lightweight, reproducible, and portable development environments.</h2>
+				</div>
+				<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
+					<div class="jumbo-logo"></div>
 				</div>			
 				<!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
 			</div>
+			<div class="jumbotron-dots"></div>
+	</div>
 </div>
 
 <div id="features">
 	<div class="container">
-		<!-- Example row of columns -->
+		
+		<div class="row double-row">
+			<div class="col-lg-6 col-md-6">
 				<div class="row">
 					<div class="col-lg-5 col-md-5">
-				<span class="icn icn1"></span>
+						<span class="icn discovery"></span>
 					</div>
 					<div class="col-lg-7 col-md-7">
-				<h2>Gossip-based Membership</h2>
-				<p>Consul relies on an efficient and lightweight gossip protocol to communicate with nodes. The Serf agents periodically exchange messages with each other in much the same way that a zombie apocalypse would occur: it starts with one zombie but soon infects everyone. In practice, the gossip is <a href="/docs/internals/simulator.html">very fast and extremely efficient.</a></p>
+						<h2>Service Discovery</h2>
+						<p>Consul makes it simple for services to register themselves, and to discover other service</p>
 					</div>
 				</div>
+			</div>
+			<div class="col-lg-6 col-md-6">
 				<div class="row">
+					<div class="col-lg-5 col-md-5">
+						<span class="icn health"></span>
+					</div>
 					<div class="col-lg-7 col-md-7">
 						<h2>Failure Detection</h2>
-				<p>Consul is able to quickly detect failed members and notify the rest of the cluster. This failure detection is built into the heart of the gossip protocol used by Serf. Like humans in a zombie apocalypse, everybody checks their peers for infection and quickly alerts the other living humans. Serf relies on a random probing technique which is proven to efficiently scale to clusters of any size.</p>
-			</div>
-			<div class="col-lg-5 col-md-5">
-				<span class="icn icn2"></span>
+						<p>Pairing service discovery with health checking prevents routing requests to unhealthy hosts, and enables services to easily provide circuit breakers.</p>
 					</div>
 				</div>
+			</div>
+		</div>
+
+		<div class="row double-row">
+			<div class="col-lg-6 col-md-6">
 				<div class="row">
 					<div class="col-lg-5 col-md-5">
-				<span class="icn icn3"></span>
+						<span class="icn multi"></span>
 					</div>
-			<div class="col-lg-7 col-md-5">
-				<h2>Custom Events</h2>
-				<p>In addition to managing membership, Consul can broadcast custom events.  These can be used to trigger deploys, restart processes, spread tales of human heroism, and anything else you may want. The event system is flexible and lightweight, making it easy for application developers and sysadmins alike to leverage.</p>
+					<div class="col-lg-7 col-md-7">
+						<h2>Multi Datacenter</h2>
+						<p>Consul scales to multiple datacenters out of the box, with no complicated configuration.</p>
 					</div>
 				</div>
+			</div>
+			<div class="col-lg-6 col-md-6">
+				<div class="row">
+					<div class="col-lg-5 col-md-5">
+						<span class="icn config"></span>
+					</div>
+					<div class="col-lg-7 col-md-7">
+						<h2>Shared Configuration</h2>
+						<p>Store hierarchical key/value configuration data for services.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
 	</div> <!-- /container -->
 </div> <!-- /features -->

website/source/javascripts/app/app.js

@@ -1,20 +1,15 @@
 //
-// home.js
+// app.js
 //
 
-var Serf = (function() {
+var APP = (function() {
 
 	function initialize (){
-		Serf.Util.runIfClassNamePresent('page-home', initHome);
+		APP.Utils.runIfClassNamePresent('page-home', initHome);
 	}
 
 	function initHome() {
-		if(!Serf.Util.isMobile){
-			Serf.Nodes.init(); 	
-		}else{
-			Serf.Home.mobileHero();
-		}
-		
+		APP.Homepage.init();
 	}
 
   	//api

website/source/javascripts/app/deploy/site.js

@@ -1,20 +1,15 @@
 //
-// home.js
+// app.js
 //
 
-var Serf = (function() {
+var APP = (function() {
 
 	function initialize (){
-		Serf.Util.runIfClassNamePresent('page-home', initHome);
+		APP.Utils.runIfClassNamePresent('page-home', initHome);
 	}
 
 	function initHome() {
-		if(!Serf.Util.isMobile){
-			Serf.Nodes.init(); 	
-		}else{
-			Serf.Home.mobileHero();
-		}
-		
+		APP.Homepage.init();
 	}
 
   	//api
@@ -22,15 +17,16 @@ var Serf = (function() {
 		initialize: initialize
   	}
 
-})();//
+})();
+;//
 // util.js
 //
-var Serf = Serf || {};
-
-(function () {
+var APP = APP || {};
 
+APP.Utils =  (function () {
+	return {
 	//check for mobile user agents
-	var isMobile = (function(){
+	  	isMobile : (function(){
 	           if( navigator.userAgent.match(/Android/i)
 	           || navigator.userAgent.match(/webOS/i)
 	           || navigator.userAgent.match(/iPhone/i)
@@ -44,196 +40,58 @@ var Serf = Serf || {};
 	           else {
 	              return false;
 	            }
-    })()
+	  	})(),
 
-    // calls the given function if the given classname is found
-    function runIfClassNamePresent(selector, initFunction) {
+		runIfClassNamePresent: function(selector, initFunction) {
 	        var elms = document.getElementsByClassName(selector);
 	        if (elms.length > 0) {
 	            initFunction();
 	        }
 	    }
+	}
 
-    Serf.Util = {};
-    Serf.Util.isMobile = isMobile;
-    Serf.Util.runIfClassNamePresent = runIfClassNamePresent;
+}());;//homepage.js
 
-})();//
-// home.js
-//
-var Serf = Serf || {};
+var APP = APP || {};
 
 (function () {
+  APP.Homepage = (function () {
+    return {
 
-    // calls the given function if the given classname is found
-    function mobileHero() {
-    	var jumbo = document.getElementById('jumbotron');
-    	jumbo.className = jumbo.className + ' mobile-hero';
+      ui : null,
+
+      init: function () {
+        var _this = this;
+
+        //cache elements
+        this.ui = {
+          $doc: $(window),
+          $hero: $('#jumbotron'),
+          $pagination: null
         }
         
-    Serf.Home = {};
-    Serf.Home.mobileHero = mobileHero;
+        this.addEventListeners();
 
-})();//
-// node.js
-// animation on the home page
-//
+      },
 
-var Serf = Serf || {};
+      addEventListeners: function(){
+        var _this = this;
 
-(function () {
+        if(APP.Utils.isMobile)
+          return;
         
-    var width = 1400,
-        height = 490,
-		border = 50,
-        numberNodes = 128,
-        linkGroup = 0;
-        //nodeLinks = [];
+        _this.ui.$doc.scroll(function() {
+          var top = _this.ui.$doc.scrollTop(),
+              speedAdj = (top*0.8),
+              speedAdjOffset = speedAdj - top;
 
-	var nodes = [];
-	for (i=0; i<numberNodes; i++) {
-		nodes.push({
-			x: Math.random() * (width - border) + (border / 2),
-			y: Math.random() * (height - border) + (border / 2),
-		});
-	}
-
-    var fill = d3.scale.category20();
-
-    var force = d3.layout.force()
-    .size([width, height])
-        .nodes(nodes)
-    	.linkDistance(60)
-		.charge(-1)
-		.gravity(0.0004)
-        .on("tick", tick);
-
-    var svg = d3.select("#jumbotron").append("svg")
-        .attr('id', 'node-canvas')
-        .attr("width", width)
-        .attr("height", height)
-
-    //set left value after adding to dom
-    resize();
-
-    svg.append("rect")
-        .attr("width", width)
-        .attr("height", height);
-
-    var nodes = force.nodes(),
-        links = force.links(),
-        node = svg.selectAll(".node"),
-        link = svg.selectAll(".link");
-
-    var cursor = svg.append("circle")
-        .attr("r", 30)
-        .attr("transform", "translate(-100,-100)")
-        .attr("class", "cursor");
-
-
-    function createLink(index) {
-        var node = nodes[index];
-        var nodeSelected = svg.select("#id_" + node.index).classed("active linkgroup_"+ linkGroup, true);
-
-		var distMap = {};
-		var distances = [];
-
-		for (var i=0; i<nodes.length; i++) {
-			if (i == index) {
-				continue
-			}
-
-			var target = nodes[i];
-            var selected = svg.select("#id_" + i);
-            var dx = selected.attr('cx') - nodeSelected.attr('cx');
-            var dy = selected.attr('cy') - nodeSelected.attr('cy');
-			var dist = Math.sqrt(dx * dx + dy * dy)
-
-			if (dist in distMap) {
-				distMap[dist].push(target)
-			} else {
-				distMap[dist] = [target]
-			}
-			distances.push(dist)
-		}
-
-		distances.sort(d3.ascending);
-		for (i = 0; i < 3; i++) {
-			var dist = distances[i]
-			var target = distMap[dist].pop()
-			var link  = {
-				source: node,
-				target: target
-			}
-			links.push(link);
-		}
-
-        restart();
-    }
-
-
-    function tick() {
-		link.attr("x1", function(d) { return d.source.x; })
-		    .attr("y1", function(d) { return d.source.y; })
-		    .attr("x2", function(d) { return d.target.x; })
-		    .attr("y2", function(d) { return d.target.y; });
-
-		node.attr("cx", function(d) { return d.x; })
-		    .attr("cy", function(d) { return d.y; });
-    }
-
-
-    function restart() {
-
-        node = node.data(nodes);
-
-        node.enter().insert("circle", ".cursor")
-            .attr("class", "node")
-            .attr("r", 12)
-            .attr("id", function (d, i) {
-                return ("id_" + i)
+          _this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
+          _this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+  speedAdjOffset +'px)');
+          //_this.ui.$pagination.css('webkitTransform', 'translate(0, '+  speedAdjOffset +'px)');
         })
-            .call(force.drag);
-
-        link = link.data(links);
-
-        link.enter().insert("line", ".node")
-            .attr("class", "link active linkgroup_"+ linkGroup);
-
-        force.start();
-
-        resetLink(linkGroup);
-        linkGroup++;
-    }
-
-    function resetLink(num){
-    	setTimeout(resetColors, 700, num)
-    }
-
-    function resetColors(num){
-		svg.selectAll(".linkgroup_"+ num).classed('active', false)
-    }
-
-    window.onresize = function(){
-        resize();
-    }
-
-    function resize() {
-    	var nodeC = document.getElementById('node-canvas');
-    		wW = window.innerWidth;
-
-    	nodeC.style.left = ((wW - width) / 2 ) + 'px';
-    }
-
-    //kick things off
-    function init() {
-	    restart();
-		for (i=0;i<numberNodes;i++) {
-			setTimeout(createLink, 700*i+1000, i);
       }
     }
+  }());
 
-	Serf.Nodes = {};
-    Serf.Nodes.init = init;
+}(jQuery, this));
 
-})();

website/source/javascripts/app/deploy/site.min.js

@@ -0,0 +1 @@
+var APP=function(){function a(){APP.Utils.runIfClassNamePresent("page-home",b)}function b(){APP.Homepage.init()}return{initialize:a}}(),APP=APP||{};APP.Utils=function(){return{isMobile:function(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)?!0:!1}(),runIfClassNamePresent:function(a,b){var c=document.getElementsByClassName(a);c.length>0&&b()}}}();var APP=APP||{};!function(){APP.Homepage=function(){return{ui:null,init:function(){this.ui={$doc:$(window),$hero:$("#jumbotron"),$pagination:null},this.addEventListeners()},addEventListeners:function(){var a=this;APP.Utils.isMobile||a.ui.$doc.scroll(function(){var b=a.ui.$doc.scrollTop(),c=.8*b,d=c-b;a.ui.$hero.css("webkitTransform","translate(0, "+c+"px)"),a.ui.$hero.find(".container").css("webkitTransform","translate(0, "+d+"px)")})}}}()}(jQuery,this);

website/source/javascripts/app/home.js

@@ -1,17 +0,0 @@
-//
-// home.js
-//
-var Serf = Serf || {};
-
-(function () {
-
-    // calls the given function if the given classname is found
-    function mobileHero() {
-    	var jumbo = document.getElementById('jumbotron');
-    	jumbo.className = jumbo.className + ' mobile-hero';
-    }
-
-    Serf.Home = {};
-    Serf.Home.mobileHero = mobileHero;
-
-})();

website/source/javascripts/app/homepage.js

@@ -0,0 +1,45 @@
+//homepage.js
+
+var APP = APP || {};
+
+(function () {
+  APP.Homepage = (function () {
+    return {
+
+      ui : null,
+
+      init: function () {
+        var _this = this;
+
+        //cache elements
+        this.ui = {
+          $doc: $(window),
+          $hero: $('#jumbotron'),
+          $pagination: null
+        }
+        
+        this.addEventListeners();
+
+      },
+
+      addEventListeners: function(){
+        var _this = this;
+
+        if(APP.Utils.isMobile)
+          return;
+        
+        _this.ui.$doc.scroll(function() {
+          var top = _this.ui.$doc.scrollTop(),
+              speedAdj = (top*0.8),
+              speedAdjOffset = speedAdj - top;
+
+          _this.ui.$hero.css('webkitTransform', 'translate(0, '+ speedAdj +'px)');
+          _this.ui.$hero.find('.container').css('webkitTransform', 'translate(0, '+  speedAdjOffset +'px)');
+          //_this.ui.$pagination.css('webkitTransform', 'translate(0, '+  speedAdjOffset +'px)');
+        })
+      }
+    }
+  }());
+
+}(jQuery, this));
+

website/source/javascripts/app/nodes.js

@@ -1,163 +0,0 @@
-//
-// node.js
-// animation on the home page
-//
-
-var Serf = Serf || {};
-
-(function () {
-
-    var width = 1400,
-        height = 490,
-		border = 50,
-        numberNodes = 128,
-        linkGroup = 0;
-        //nodeLinks = [];
-
-	var nodes = [];
-	for (i=0; i<numberNodes; i++) {
-		nodes.push({
-			x: Math.random() * (width - border) + (border / 2),
-			y: Math.random() * (height - border) + (border / 2),
-		});
-	}
-
-    var fill = d3.scale.category20();
-
-    var force = d3.layout.force()
-    .size([width, height])
-        .nodes(nodes)
-    	.linkDistance(60)
-		.charge(-1)
-		.gravity(0.0004)
-        .on("tick", tick);
-
-    var svg = d3.select("#jumbotron").append("svg")
-        .attr('id', 'node-canvas')
-        .attr("width", width)
-        .attr("height", height)
-
-    //set left value after adding to dom
-    resize();
-
-    svg.append("rect")
-        .attr("width", width)
-        .attr("height", height);
-
-    var nodes = force.nodes(),
-        links = force.links(),
-        node = svg.selectAll(".node"),
-        link = svg.selectAll(".link");
-
-    var cursor = svg.append("circle")
-        .attr("r", 30)
-        .attr("transform", "translate(-100,-100)")
-        .attr("class", "cursor");
-
-
-    function createLink(index) {
-        var node = nodes[index];
-        var nodeSelected = svg.select("#id_" + node.index).classed("active linkgroup_"+ linkGroup, true);
-
-		var distMap = {};
-		var distances = [];
-
-		for (var i=0; i<nodes.length; i++) {
-			if (i == index) {
-				continue
-			}
-
-			var target = nodes[i];
-            var selected = svg.select("#id_" + i);
-            var dx = selected.attr('cx') - nodeSelected.attr('cx');
-            var dy = selected.attr('cy') - nodeSelected.attr('cy');
-			var dist = Math.sqrt(dx * dx + dy * dy)
-
-			if (dist in distMap) {
-				distMap[dist].push(target)
-			} else {
-				distMap[dist] = [target]
-			}
-			distances.push(dist)
-		}
-
-		distances.sort(d3.ascending);
-		for (i = 0; i < 3; i++) {
-			var dist = distances[i]
-			var target = distMap[dist].pop()
-			var link  = {
-				source: node,
-				target: target
-			}
-			links.push(link);
-		}
-
-        restart();
-    }
-
-
-    function tick() {
-		link.attr("x1", function(d) { return d.source.x; })
-		    .attr("y1", function(d) { return d.source.y; })
-		    .attr("x2", function(d) { return d.target.x; })
-		    .attr("y2", function(d) { return d.target.y; });
-
-		node.attr("cx", function(d) { return d.x; })
-		    .attr("cy", function(d) { return d.y; });
-    }
-
-
-    function restart() {
-
-        node = node.data(nodes);
-
-        node.enter().insert("circle", ".cursor")
-            .attr("class", "node")
-            .attr("r", 12)
-            .attr("id", function (d, i) {
-                return ("id_" + i)
-            })
-            .call(force.drag);
-
-        link = link.data(links);
-
-        link.enter().insert("line", ".node")
-            .attr("class", "link active linkgroup_"+ linkGroup);
-
-        force.start();
-
-        resetLink(linkGroup);
-        linkGroup++;
-    }
-
-    function resetLink(num){
-    	setTimeout(resetColors, 700, num)
-    }
-
-    function resetColors(num){
-		svg.selectAll(".linkgroup_"+ num).classed('active', false)
-    }
-
-    window.onresize = function(){
-        resize();
-    }
-
-    function resize() {
-    	var nodeC = document.getElementById('node-canvas');
-    		wW = window.innerWidth;
-
-    	nodeC.style.left = ((wW - width) / 2 ) + 'px';
-    }
-
-    //kick things off
-    function init() {
-	    restart();
-		for (i=0;i<numberNodes;i++) {
-			setTimeout(createLink, 700*i+1000, i);
-		}
-    }
-
-	Serf.Nodes = {};
-    Serf.Nodes.init = init;
-
-})();

website/source/javascripts/app/util.js

@@ -1,12 +1,12 @@
 //
 // util.js
 //
-var Serf = Serf || {};
-
-(function () {
+var APP = APP || {};
 
+APP.Utils =  (function () {
+	return {
 	//check for mobile user agents
-	var isMobile = (function(){
+	  	isMobile : (function(){
 	           if( navigator.userAgent.match(/Android/i)
 	           || navigator.userAgent.match(/webOS/i)
 	           || navigator.userAgent.match(/iPhone/i)
@@ -20,18 +20,14 @@ var Serf = Serf || {};
 	           else {
 	              return false;
 	            }
-    })()
+	  	})(),
 
-    // calls the given function if the given classname is found
-    function runIfClassNamePresent(selector, initFunction) {
+		runIfClassNamePresent: function(selector, initFunction) {
 	        var elms = document.getElementsByClassName(selector);
 	        if (elms.length > 0) {
 	            initFunction();
 	        }
 	    }
+	}
 
-    Serf.Util = {};
-    Serf.Util.isMobile = isMobile;
-    Serf.Util.runIfClassNamePresent = runIfClassNamePresent;
-
-})();
+}());

website/source/javascripts/simulator.js

@@ -1,197 +0,0 @@
-function graph_settings() {
-	return {
-		chart: {
-			type: 'spline'
-		},
-		title: {
-			text: null
-		},
-		xAxis: {
-			title: {
-				text: "Time (sec)",
-			}
-		},
-		yAxis: {
-			title: {
-				text: 'Convergence %'
-			},
-			min: 0.0,
-			max: 100.0
-		},
-		tooltip: {
-			formatter: function() {
-				return '<b>'+ (Math.round(this.y*1000.0)/1000.0) +'%</b><br/>'
-			}
-		},
-		legend: {
-			enabled: false
-		},
-		series: [{
-			name: 'Convergence Rate',
-			data: []
-		}]
-	}
-}
-
-function create_graph() {
-	$('#graph').highcharts(graph_settings())
-	return $('#graph').highcharts()
-}
-
-var Simulator = Class.$extend({
-	__init__ : function(graph, bytes, maxConverge) {
-		this.graph = graph
-		this.bytes = bytes
-		this.maxConverge = maxConverge
-		this.interval = 0.2
-		this.fanout = 3
-		this.nodes = 30
-		this.packetLoss = 0
-		this.nodeFail = 0
-	},
-
-	convergenceAtRound: function(x) {
-		var contact = (this.fanout / this.nodes) * (1 - this.packetLoss) * (1 - this.nodeFail) * 0.5
-		var numInf = this.nodes / (1 + (this.nodes+1) * Math.pow(Math.E, -1*contact*this.nodes*x))
-		return numInf / this.nodes
-	},
-
-	roundLength: function() {
-		return this.interval
-	},
-
-	seriesData: function() {
-		var data = []
-		var lastVal = 0
-		var round = 0
-		var roundLength = this.roundLength()
-		while (lastVal < this.maxConverge && round < 100) {
-			lastVal = this.convergenceAtRound(round)
-			data.push([round * roundLength, lastVal*100.0])
-			round++
-		}
-			return data
-	},
-
-	bytesUsed: function() {
-		var roundLength = this.roundLength()
-		var roundsPerSec = 1 / roundLength
-		var packetSize = 1400
-		var send = packetSize * this.fanout * roundsPerSec
-		return send * 2
-	},
-
-	draw: function() {
-		var data = this.seriesData()
-		this.graph.series[0].setData(data, false)
-		this.graph.redraw()
-
-		var kilobits = this.bytesUsed() * 8
-		var used = Math.round((kilobits / 1024) * 10) / 10
-		this.bytes.html(""+used)
-	}
-})
-
-function update_interval(elem, simulator) {
-	var val = elem.value
-	var interval = Number(val)
-	if (isNaN(interval)) {
-		alert("Gossip interval must be a number!")
-		return
-	}
-	if (interval <= 0) {
-		alert("Gossip interval must be a positive value!")
-		return
-	}
-	simulator.interval = interval
-	simulator.draw()
-	console.log("Redraw with interval set to: " + interval)
-}
-
-
-function update_fanout(elem, simulator) {
-	var val = elem.value
-	var fanout = Number(val)
-	if (isNaN(fanout)) {
-		alert("Gossip fanout must be a number!")
-		return
-	}
-	if (fanout <= 0) {
-		alert("Gossip fanout must be a positive value!")
-		return
-	}
-	simulator.fanout = fanout
-	simulator.draw()
-	console.log("Redraw with fanout set to: " + fanout)
-}
-
-function update_nodes(elem, simulator) {
-	var val = elem.value
-	var nodes = Number(val)
-	if (isNaN(nodes)) {
-		alert("Node count must be a number!")
-		return
-	}
-	if (nodes <= 1) {
-		alert("Must have at least one node")
-		return
-	}
-	simulator.nodes = nodes
-	simulator.draw()
-	console.log("Redraw with nodes set to: " + nodes)
-}
-
-function update_packetloss(elem, simulator) {
-	var val = elem.value
-	var pkt = Number(val)
-	if (isNaN(pkt)) {
-		alert("Packet loss must be a number!")
-		return
-	}
-	if (pkt < 0 || pkt >= 100) {
-		alert("Packet loss must be greater or equal to 0 and less than 100")
-		return
-	}
-	simulator.packetLoss = (pkt / 100.0)
-	simulator.draw()
-	console.log("Redraw with packet loss set to: " + pkt)
-}
-
-function update_failed(elem, simulator) {
-	var val = elem.value
-	var failed = Number(val)
-	if (isNaN(failed)) {
-		alert("Failure rate must be a number!")
-		return
-	}
-	if (failed < 0 || failed >= 100) {
-		alert("Failure rate must be greater or equal to 0 and less than 100")
-		return
-	}
-	simulator.nodeFail = (failed / 100.0)
-	simulator.draw()
-	console.log("Redraw with failure rate set to: " + failed)
-}
-
-// wait for dom ready
-$(function(){
-	var bytes = $("#bytes")
-	var graph = create_graph()
-	var simulator = new Simulator(graph, bytes, 0.9999)
-	simulator.draw()
-
-	var interval = $("#interval")
-	interval.change(function() { update_interval(interval[0], simulator) })
-
-	var fanout = $("#fanout")
-	fanout.change(function() { update_fanout(fanout[0], simulator) })
-
-	var nodes = $("#nodes")
-	nodes.change(function() { update_nodes(nodes[0], simulator) })
-
-	var loss = $("#packetloss")
-	loss.change(function() { update_packetloss(loss[0], simulator) })
-
-	var failed = $("#failed")
-	failed.change(function() { update_failed(failed[0], simulator) })
-})

website/source/layouts/_footer.erb

@@ -8,8 +8,8 @@
 			</ul>
 
 			<ul class="buttons nav navbar-nav rls-sb">
-				<li class="first"><a href="/downloads.html">Download</a></li>
-				<li><a href="https://github.com/hashicorp/serf">Github</a></li>
+				<li class="first download outline-btn purple"><a href="/downloads.html">Download</a></li>
+				<li class="github outline-btn purple"><a href="https://github.com/hashicorp/serf">Github</a></li>
 			</ul>
 		</div>
 		<div class="footer-logo">
@@ -17,16 +17,17 @@
 		</div>
 		<div class="footer-hashi os">
 			<span>© 2013. A <a href="http://www.hashicorp.com">HashiCorp</a> Project.</span>
-			<a href="http://www.hashicorp.com"><img src="/images/hashi-logo-s.png"></a>
+			<a href="http://www.hashicorp.com"><img src="/images/footer-hashicorp-logo.png"></a>
 		</div>
 	</div>
 </div>
 
-<script src="javascripts/lib/d3.v3.min.js"></script>
+<script src="javascripts/lib/jquery-2.0.3.min.js"></script>
+<script src="javascripts/lib/bootstrap.min.js"></script>
 <script src="javascripts/app/deploy/site.js"></script>
 
 <script>
-	Serf.initialize();
+	APP.initialize();
 </script>
 
 </body>

website/source/layouts/_header.erb

@@ -7,15 +7,20 @@
 <meta name="author" content="">
 <!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->
 
-<title><%= current_page.data.page_title ? "#{current_page.data.page_title} - " : "" %>Serf</title>
+<title><%= current_page.data.page_title ? "#{current_page.data.page_title} - " : "" %>Consul</title>
 
 <!-- Bootstrap core CSS -->
 <%= stylesheet_link_tag "bootstrap.min" %>
 <%= stylesheet_link_tag "main" %>
 
 <!-- google fonts -->
-<!-- <link href='http://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
+<!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
  -->
+
+ <!-- typekit -->
+ <script type="text/javascript" src="//use.typekit.net/kgv0shi.js"></script>
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
 	<%= javascript_include_tag "html5shiv", "respond.min" %>
@@ -35,23 +40,32 @@
 </script>
 </head>
 <body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>">
-<div id="header">
+<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
 	<div class="container">
+		<div class="navbar-header">
+		    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+	          <span class="sr-only">Toggle navigation</span>
+	          <span class="icon-bar"></span>
+	          <span class="icon-bar"></span>
+	          <span class="icon-bar"></span>
+	        </button>
 			<a class="navbar-brand logo" href="/">
 				<span></span>
 			</a>
-		<a class="navbar-brand text rls-l" href="/">SERF</a>
+		</div>
 
+		<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
 			<ul class="buttons nav navbar-nav navbar-right rls-sb">
-			<li class="first"><a href="/downloads.html">Download</a></li>
-			<li><a href="https://github.com/hashicorp/serf">Github</a></li>
+				<li class="first download outline-btn"><a href="/downloads.html">Download</a></li>
+				<li class="github outline-btn"><a href="https://github.com/hashicorp/consul">Github</a></li>
 			</ul>
 
 			<ul class="main-links nav navbar-nav navbar-right rls-sb">
-			<li><a href="/intro/index.html">Intro</a></li>
+				<li class="first"><a href="/intro/index.html">Intro</a></li>
 				<li><a href="/docs/index.html">Docs</a></li>
 				<li><a href="/community.html">Community</a></li>
 			</ul>
+		</nav>
 
 	</div>
 </div>

website/source/package.json

@@ -1,9 +1,10 @@
 {
-    "name": "serf"
+    "name": "consul"
   , "description": ""
   , "version": "1.0.0"
   , "devDependencies": {
       "grunt": "~0.4.1"
+    , "grunt-contrib-less": "~0.11.0"
     , "grunt-contrib-clean": "~0.5.0"
     , "grunt-contrib-connect": "~0.3.0"
     , "grunt-contrib-concat": "~0.3.0"

website/source/stylesheets/_buttons.less

@@ -0,0 +1,27 @@
+//
+// Button Styles
+// --------------------------------------------------
+
+.outline-btn{
+	background-color: transparent;
+	color: @white;
+	border: 2px solid @white;
+	border-radius: @btn-border-radius;
+	text-decoration: none !important;
+	.transition(background-color .3s ease-in-out);
+
+	&.purple{
+		color: @purple;
+		border: 2px solid @purple;
+	}
+
+	&:hover{	
+		color: @white;
+		background-color: rgba(255, 255, 255, .2);
+		.transition(background-color .3s ease-in-out);
+
+		&.purple{
+			background-color: rgba(255, 255, 255, .5);
+		}			
+	}		
+}

website/source/stylesheets/_docs.less

@@ -55,7 +55,7 @@
 					left: -10px;
 				}
 				> a{
-					font-weight: @font-weight-rales-xb;
+					font-weight: @font-weight-museo-xb;
                     -webkit-font-smoothing: antialiased;
 				}
 
@@ -75,8 +75,8 @@
 
 			> a {
 				text-transform: uppercase;
-				font-family: @font-family-rales;
-				font-weight: @font-weight-rales-sb;
+				font-family: @font-family-museo;
+				font-weight: @font-weight-museo-sb;
                 -webkit-font-smoothing: antialiased;
 			}
 		}

website/source/stylesheets/_fonts.less

@@ -4,20 +4,20 @@
 
 //light
 .rls-l{
-  font-family: @font-family-rales;
-  font-weight: @font-weight-rales-xl;
+  font-family: @font-family-museo;
+  font-weight: @font-weight-museo-xl;
 }
 
 //semibold
 .rls-sb{
-  font-family: @font-family-rales;
-  font-weight: @font-weight-rales-sb;
+  font-family: @font-family-museo;
+  font-weight: @font-weight-museo-sb;
 }
 
 //extrabold
 .rls-xb{
-  font-family: @font-family-rales;
-  font-weight: @font-weight-rales-xb;
+  font-family: @font-family-museo;
+  font-weight: @font-weight-museo-xb;
 }
 
 .os{

website/source/stylesheets/_global.less

@@ -14,16 +14,16 @@ body {
 h1{
 	font-size: 42px;
 	line-height: 42px;
-	font-family: @font-family-rales;
-	font-weight: @font-weight-rales-sb;
+	font-family: @font-family-museo;
+	font-weight: @font-weight-museo-sb;
 	margin-bottom: 24px;
 }
 
 h3{
 	font-size: 28px;
 	line-height: 28px;
-	font-family: @font-family-rales;
-	font-weight: @font-weight-rales-sb;
+	font-family: @font-family-museo;
+	font-weight: @font-weight-museo-sb;
 }
 
 //an alternative color for buttons in the doc body

website/source/stylesheets/_header.less

@@ -4,14 +4,32 @@
 
 #footer,
 #header {
+    .anti-alias();
+    position: relative;
     color: @white;
-  background-color: @black;
     text-rendering: optimizeLegibility;
+    margin-bottom: 0;
+
+    .navbar-collapse{
+        box-shadow: none;
+    }
+
+    &.navbar-static-top{
+        z-index: 1000;
+    }
 
     a{
         color: @white;
     }
 
+    .navbar-toggle{
+        margin-top: 14px;
+        border: 2px solid @white;
+        .icon-bar{
+            border: 1px solid @white;
+        }
+    }  
+
     .navbar-brand {
         &.logo{
             padding: 13px 15px;
@@ -19,27 +37,31 @@
 
             span{
                 display: inline-block;
-        width: 52px;
-        height: 62px;
-        background: url(../images/logo-type-medium.png) 0 0 no-repeat;
-        .img-retina("../images/logo-type-medium.png", "../images/logo-type-medium@2x.png", 52px, 64px);
+                width: 179px;
+                height: 59px;
+                background: url(../images/consul-header-logo.png) 0 0 no-repeat;
+                .img-retina("../images/consul-header-logo.png", "../images/consul-header-logo@2x.png", 179px, 59px);
             }
         }
-
-    &.text{
-      font-size: 36px;
-      line-height: 62px;
-      letter-spacing: 14px;
-      text-shadow: @text-shadow;
-    }
     }
 
     .navbar-nav{
         -webkit-font-smoothing: antialiased;
-    li > a {
-      font-size: 14px;
+            li{
+              position: relative;
+
+              > a {
+                font-size: 12px;
                 text-transform: uppercase;
                 letter-spacing: 3px;
+                padding-left: 22px;
+            }
+
+            &.first{
+                >a{
+                  padding-left: 15px;
+                }
+            }
         }
     }
 
@@ -49,47 +71,208 @@
 
     .main-links.navbar-nav{
         li + li a::before {
-      content: " | ";
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 35px;
+            width: 4px;
+            height: 23px;
+            background: url(../images/nav-dotpipes.png) 0 0 no-repeat;
+            .img-retina("../images/nav-dotpipes.png", "../images/nav-dotpipes@2x.png", 4px, 23px);
             padding-right: 15px;
         }
 
         li > a {
             line-height: 62px;
-      text-shadow: @text-shadow;
         }
 
     }
 
     .buttons.navbar-nav{
-    margin-top: 30px;
+        margin-top: 26px;
         margin-left: 30px;
-    background-color: @red-dark;
-    border-radius: @btn-border-radius;
-    .box-shadow( @shadow );
 
-    li.first{
-      border-right: 2px solid @red-darker;
+        li{
+            &.first{
+                margin-right: 12px;
+            }
+
+            &.download{
+                a{
+                  background: url(../images/icon-download.png)  8px 6px no-repeat;
+                  .img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
+                }
+            }
+
+            &.github{
+                a{
+                  background: url(../images/icon-github.png)  8px 6px no-repeat;
+                  .img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
+                }
+            }
         }
 
         li > a {
             padding-top: 6px;
             padding-bottom: 6px;
+            padding-left: 40px;
         }
     }
 }
 
 #footer{
+    height: 700px;
     text-align: center;
+    color: @purple;
+
     .main-links.navbar-nav{
         float: none;
         display: inline-block;
+        padding-top: 155px;
     }
 
+    .footer-hashi{
+        padding-top: 110px;
+    }
+
+    a{
+        color: @purple;
+    }
 
     .buttons.navbar-nav{
         float: none;
         display: inline-block;
         margin-bottom: 30px;
         margin-top: 0px;
+
+        li{
+            &.first{
+                margin-right: 12px;
+            }
+
+            &.download{
+                a{
+                  background: url(../images/icon-download-purple.png)  8px 6px no-repeat;
+                  .img-retina("../images/icon-download-purple.png", "../images/icon-download-purple@2x.png", 20px, 20px);
                 }
             }
+
+            &.github{
+                a{
+                  background: url(../images/icon-github-purple.png)  8px 6px no-repeat;
+                  .img-retina("../images/icon-github-purple.png", "../images/icon-github-purple@2x.png", 20px, 20px);
+                }
+            }
+        }
+
+        li > a {
+            padding-top: 6px;
+            padding-bottom: 6px;
+            padding-left: 40px;
+        }        
+    }  
+}
+
+
+@media (max-width: 992px) {
+    #header {
+        .navbar-brand {
+            &.logo{
+                span{  
+                    width: 120px;
+                    height: 39px;
+                    margin-top: 12px;
+                    background-size: 120px 39px;
+                }
+            }
+        }
+
+        .buttons.navbar-nav{
+            li{
+                a{        
+                    background: none !important;
+                    padding-left: 15px;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    #header{
+        background: #694a9c; /* Old browsers */
+        background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
+        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
+        background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
+        background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */  
+
+        .navbar-right{
+            float: none !important;
+        }
+
+        .main-links.navbar-nav{
+            padding-bottom: 15px;
+            li{
+                margin-top: 15px;
+            }
+
+            li + li a::before {
+                display: none;
+            }
+
+            li > a {
+                padding: 0;
+                padding-left: 0;
+                line-height: 22px;
+            }
+        }
+
+        .navbar-brand {
+            &.logo{
+                span{ 
+                    margin-top: 0;
+                }
+            }
+        } 
+
+        .navbar-nav > li{
+            float: none;
+        }
+
+        .buttons.navbar-nav{
+            margin-top: 15px;
+            margin-left: 0px;
+      
+            li{
+                a{
+                    padding-left: 40px;
+                }
+                &.first{
+                    margin-right: 0;
+                    margin-bottom: 10px;
+                }
+
+                &.download{
+                    a{
+                        background: url(../images/icon-download.png)  8px 6px no-repeat !important;;
+                        .img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px);
+                    }
+                }
+
+                &.github{
+                    a{
+                        background: url(../images/icon-github.png)  8px 6px no-repeat !important;;
+                        .img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px);
+                    }
+                }
+            }  
+        }    
+    }
+}
+
+@media (max-width: 480px) {
+
+}

website/source/stylesheets/_home.less

@@ -4,47 +4,54 @@
 
 #features{
 	.anti-alias();
-	padding: 90px 0 0 0;
+	padding: 130px 0 0 0;
+	background: #f8f8f8 url(../images/hero-dots-below@2x.png) center top no-repeat;
+	background-size: 1280px 49px;
 
-	.row{
-		padding: 0 0 90px 0;
+	.double-row{
+		padding: 0 0 60px 0;
 	}
 
 	h2{
-		font-size: 32px;
+		font-size: 24px;
 		letter-spacing: 2px;
-		color: @gray;
-		text-transform: uppercase;
-		font-family: @font-family-rales;
-		font-weight: @font-weight-rales-sb;
+		color: @purple;
+		font-family: @font-family-museo;
+		font-weight: @font-weight-museo-xb;
 	}
 	p{
-		font-size: 18px;
+		font-size: 16px;
 		letter-spacing: 1px;
         line-height: 1.5em;
-		color: @gray-darker;
-		font-family: @font-family-open-sans;
-		font-weight: @font-weight-open;
+		color: @consul-gray;
+		font-family: @font-family-museo;
+		font-weight: @font-weight-museo-sb;
 	}
 
 	.icn{
 		display: block;
-		width: 286px;
-		height: 286px;
+		width: 186px;
+		height: 272px;
 		margin: 0 auto;
-		background-size: 286px 286px;
-		background-position: 0 0;
+		background-position: center 0;
 		background-repeat: no-repeat;
 	}
 
-	.icn1{
-		background-image: url( ../images/gossip-proto-icon@2x.png);
+	.discovery{
+		background-image: url( ../images/feature-discovery@2x.png);
+		background-size: 181px 181px;
 	}
-	.icn2{
-		background-image: url( ../images/failure-detect-icon@2x.png);
+	.health{
+		background-image: url( ../images/feature-health@2x.png);
+		background-size: 125px 179px;
 	}
-	.icn3{
-		background-image: url( ../images/custom-event-icon@2x.png);
+	.multi{
+		background-image: url( ../images/feature-multi@2x.png);
+		background-size: 182px 184px;
+	}
+	.config{
+		background-image: url( ../images/feature-config@2x.png);
+		background-size: 157px 179px;
 	}	
 }
 
@@ -119,28 +126,22 @@
 
 #footer{
 	padding: 50px 0;
-	background: @black url(../images/footer-pattern.jpg);
+	background-color: @consul-footer-gray;
+    background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat;
+    .img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);	
 
 	.footer-links{
 		margin-bottom: 20px;
 	}
 
-	.footer-logo{
-		span{
-			  display: inline-block;
-        width: 206px;
-        height: 206px;
-        margin-bottom: 30px;
-        border-radius: 103px;
-        background: @black url(../images/logo-type-medium.png) center center no-repeat;
-        .img-retina("../images/logo-type-medium.png", "../images/logo-type-medium@2x.png", 72px, 94px);
-        .box-shadow( 0px 0px 5px rgba(0, 0, 0, 0.04) );
-		}
-	}
-
 	.footer-hashi{
 		letter-spacing: 2px;
     	margin-bottom: 30px;
+
+    	a{
+    		font-weight: @font-weight-museo-xb;
+    	}
+
 	    span{
 	    	margin-right: 20px;
 	    }
@@ -153,3 +154,21 @@
 }
 
 
+@media (max-width: 992px) {
+	#features{
+		.double-row{
+			padding: 0 0 0 0;
+			.row{
+				padding-bottom: 90px;
+			}
+		}
+
+		.icn{
+			height: 200px;
+		}
+	}
+}
+
+@media (max-width: 768px) {
+
+}

website/source/stylesheets/_jumbotron.less

@@ -2,15 +2,27 @@
 // Jumbotron
 // --------------------------------------------------
 
+#jumbotron-mask{
+  overflow: hidden;
+  height: @jumbotron-total-height;
+  margin-top: -92px;
+}
 
 #jumbotron {
   position: relative;
-  height: @jumbotron-height;
-  color: @jumbotron-color;
-  background-color:  @gray-light;
+  height: @jumbotron-total-height;
   padding-top: 0;
   padding-bottom: 0;
-  overflow: hidden;
+  margin-top: -92px;
+  color: @jumbotron-color;
+  background: #694a9c; /* Old browsers */
+  background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
+  background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */  
 
   &.mobile-hero{
     background:  transparent url( ../images/node-hero-pattern.jpg ) center center;
@@ -18,32 +30,41 @@
     background: -webkit-image-set( url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x );
   }
 
+
+  .jumbotron-dots{
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 632px;
+      width: 100%;
+      margin-top: -92px;
+      background: transparent url('../images/hero-dots.png') center @header-height no-repeat;
+  }
+  
+
   .container{
       position: relative;
       height: 100%;
+      margin-top: @header-height;
+
+      .jumbo-logo-wrap{
+        margin-top: 135px;
 
         .jumbo-logo{
-          position: absolute;
-          bottom: 0;
-          right: -150px;
-          width: 726px;
-          height: 454px;
-          background:  transparent url( ../images/logo-circle-logo@2x.png ) 0 0 no-repeat;
-          background-size: 726px 454px;
+            width: 318px;
+            height: 316px;
+            background:  transparent url( ../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
+            background-size: 318px 316px;
             z-index: 20;
-          pointer-events: none;
         }        
-
-      .col-lg-5{
-          z-index: 20;
-          pointer-events: none;   
       }
 
       h2{
-          margin-top: 140px;
-          font-size: 28px;
-          line-height: 38px;
-          letter-spacing: 2px;
+          margin-top: 190px;
+          font-size: 40px;
+          line-height: 48px;
+          letter-spacing: 1px;
+          margin-left: 40px;
       }
   }
 }

website/source/stylesheets/_nodes.less

@@ -1,53 +0,0 @@
-//
-// Node animation
-// --------------------------------------------------
-
-
-#node-canvas{
-    position: absolute;
-    top: 0;
-    width: 1400px;
-    background-color: transparent;
-
-    rect {
-        fill: none;
-        pointer-events: all;
-    }
-
-    .node {
-        /*fill: #a7a7a7;*/
-        fill: #939393;
-        stroke: #bbb;
-        z-index: 100;
-        transition-property: stroke fill;
-        transition-duration: 1s;
-    }
-
-    .node.active {
-        /*fill: #bbb;  */
-        stroke: #dd4e58;
-        transition-property: stroke fill;
-        transition-duration: 1s;
-    }
-
-    .cursor {
-        fill: none;
-        stroke: brown;
-        pointer-events: none;
-    }
-
-    .link {
-        stroke: #bbb;
-        stroke-width: 1.5;
-        z-index: 0;
-        transition-property: stroke fill;
-        transition-duration: 1s;
-    }
-
-    .link.active{
-        stroke: #dd4e58;
-        transition-property: stroke;
-        transition-duration: 1s;
-    }
-}
-

website/source/stylesheets/_variables.less

@@ -6,7 +6,9 @@
 // Global values
 // --------------------------------------------------
 
-@jumbotron-height:  		490px;
+@jumbotron-height:  		540px;
+@header-height:  		   	92px;
+@jumbotron-total-height: 	542px; //jumbo+header
 @jumbotron-color:  			#fff;
 @btn-border-radius:   		4px;
 @el-border-radius:   		6px;
@@ -23,6 +25,9 @@
 @red-dark:            		#c5454e;
 @red-darker:            	#b03c44;
 @tan:   					#f0f0e5;
+@consul-gray:				#909090;
+@consul-footer-gray:		#d7d4d7;
+@purple:   					#69499a;
 
 @btn-color:  				#4592C5;
 
@@ -39,16 +44,14 @@
 
 // Typography
 // -------------------------
-@font-family-rales:  	 	'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-museo:  	 	'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 @font-family-open-sans:  	'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-weight-rales-xl:  	200;
-@font-weight-rales-reg:  	400;
-@font-weight-rales-sb:  	600;
-@font-weight-rales-xb:  	800;
-@font-weight-open:  		@font-weight-rales-reg;
+@font-weight-museo-xl:  	100;
+@font-weight-museo-reg:    500;
+@font-weight-museo-sb:  	500;
+@font-weight-museo-xb:  	700;
+@font-weight-open:  		@font-weight-museo-reg;
 
 
 @text-shadow: 				1px 1px 1px #000;
 @shadow: 					@text-shadow;
-
-

website/source/stylesheets/main.css

@@ -0,0 +1,782 @@
+.rls-l {
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 100;
+}
+.rls-sb {
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+.rls-xb {
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+}
+.os {
+  font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+/*html{
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}*/
+body {
+  font-size: 15px;
+}
+h1 {
+  font-size: 42px;
+  line-height: 42px;
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  margin-bottom: 24px;
+}
+h3 {
+  font-size: 28px;
+  line-height: 28px;
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+.btn-serf {
+  color: #ffffff !important;
+  background-color: #4592c5;
+  border-radius: 4px;
+}
+.highlight {
+  margin-bottom: 18px;
+}
+pre {
+  background-color: #242424;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: normal;
+  font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+  border: none;
+  padding: 20px;
+  margin-bottom: 0;
+}
+@media (max-width: 992px) {
+  .container {
+    max-width: 970px;
+  }
+}
+.navbar-nav {
+  margin: 0;
+}
+.navbar-right {
+  float: right !important;
+}
+.navbar-nav > li {
+  float: left;
+}
+.navbar-nav > li > a {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+#footer,
+#header {
+  -webkit-font-smoothing: antialiased;
+  position: relative;
+  color: #ffffff;
+  text-rendering: optimizeLegibility;
+  margin-bottom: 0;
+}
+#footer .navbar-collapse,
+#header .navbar-collapse {
+  box-shadow: none;
+}
+#footer.navbar-static-top,
+#header.navbar-static-top {
+  z-index: 1000;
+}
+#footer a,
+#header a {
+  color: #ffffff;
+}
+#footer .navbar-toggle,
+#header .navbar-toggle {
+  margin-top: 14px;
+  border: 2px solid #ffffff;
+}
+#footer .navbar-toggle .icon-bar,
+#header .navbar-toggle .icon-bar {
+  border: 1px solid #ffffff;
+}
+#footer .navbar-brand.logo,
+#header .navbar-brand.logo {
+  padding: 13px 15px;
+  line-height: 0;
+}
+#footer .navbar-brand.logo span,
+#header .navbar-brand.logo span {
+  display: inline-block;
+  width: 179px;
+  height: 59px;
+  background: url(../images/consul-header-logo.png) 0 0 no-repeat;
+  background-image: url("../images/consul-header-logo.png");
+  background-size: 179px 59px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .navbar-brand.logo span,
+  #header .navbar-brand.logo span {
+    background-image: url("../images/consul-header-logo@2x.png");
+    background-size: 179px 59px;
+  }
+}
+#footer .navbar-nav,
+#header .navbar-nav {
+  -webkit-font-smoothing: antialiased;
+}
+#footer .navbar-nav li,
+#header .navbar-nav li {
+  position: relative;
+}
+#footer .navbar-nav li > a,
+#header .navbar-nav li > a {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  padding-left: 22px;
+}
+#footer .navbar-nav li.first > a,
+#header .navbar-nav li.first > a {
+  padding-left: 15px;
+}
+#footer .nav > li > a:hover,
+#header .nav > li > a:hover,
+#footer .nav > li > a:focus,
+#header .nav > li > a:focus {
+  background-color: transparent;
+}
+#footer .main-links.navbar-nav li + li a::before,
+#header .main-links.navbar-nav li + li a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 35px;
+  width: 4px;
+  height: 23px;
+  background: url(../images/nav-dotpipes.png) 0 0 no-repeat;
+  background-image: url("../images/nav-dotpipes.png");
+  background-size: 4px 23px;
+  padding-right: 15px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .main-links.navbar-nav li + li a::before,
+  #header .main-links.navbar-nav li + li a::before {
+    background-image: url("../images/nav-dotpipes@2x.png");
+    background-size: 4px 23px;
+  }
+}
+#footer .main-links.navbar-nav li > a,
+#header .main-links.navbar-nav li > a {
+  line-height: 62px;
+}
+#footer .buttons.navbar-nav,
+#header .buttons.navbar-nav {
+  margin-top: 26px;
+  margin-left: 30px;
+}
+#footer .buttons.navbar-nav li.first,
+#header .buttons.navbar-nav li.first {
+  margin-right: 12px;
+}
+#footer .buttons.navbar-nav li.download a,
+#header .buttons.navbar-nav li.download a {
+  background: url(../images/icon-download.png) 8px 6px no-repeat;
+  background-image: url("../images/icon-download.png");
+  background-size: 20px 20px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .buttons.navbar-nav li.download a,
+  #header .buttons.navbar-nav li.download a {
+    background-image: url("../images/icon-download@2x.png");
+    background-size: 20px 20px;
+  }
+}
+#footer .buttons.navbar-nav li.github a,
+#header .buttons.navbar-nav li.github a {
+  background: url(../images/icon-github.png) 8px 6px no-repeat;
+  background-image: url("../images/icon-github.png");
+  background-size: 20px 20px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .buttons.navbar-nav li.github a,
+  #header .buttons.navbar-nav li.github a {
+    background-image: url("../images/icon-github@2x.png");
+    background-size: 20px 20px;
+  }
+}
+#footer .buttons.navbar-nav li > a,
+#header .buttons.navbar-nav li > a {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 40px;
+}
+#footer {
+  height: 700px;
+  text-align: center;
+  color: #69499a;
+}
+#footer .main-links.navbar-nav {
+  float: none;
+  display: inline-block;
+  padding-top: 155px;
+}
+#footer .footer-hashi {
+  padding-top: 110px;
+}
+#footer a {
+  color: #69499a;
+}
+#footer .buttons.navbar-nav {
+  float: none;
+  display: inline-block;
+  margin-bottom: 30px;
+  margin-top: 0px;
+}
+#footer .buttons.navbar-nav li.first {
+  margin-right: 12px;
+}
+#footer .buttons.navbar-nav li.download a {
+  background: url(../images/icon-download-purple.png) 8px 6px no-repeat;
+  background-image: url("../images/icon-download-purple.png");
+  background-size: 20px 20px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .buttons.navbar-nav li.download a {
+    background-image: url("../images/icon-download-purple@2x.png");
+    background-size: 20px 20px;
+  }
+}
+#footer .buttons.navbar-nav li.github a {
+  background: url(../images/icon-github-purple.png) 8px 6px no-repeat;
+  background-image: url("../images/icon-github-purple.png");
+  background-size: 20px 20px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer .buttons.navbar-nav li.github a {
+    background-image: url("../images/icon-github-purple@2x.png");
+    background-size: 20px 20px;
+  }
+}
+#footer .buttons.navbar-nav li > a {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: 40px;
+}
+@media (max-width: 992px) {
+  #header .navbar-brand.logo span {
+    width: 120px;
+    height: 39px;
+    margin-top: 12px;
+    background-size: 120px 39px;
+  }
+  #header .buttons.navbar-nav li a {
+    background: none !important;
+    padding-left: 15px;
+  }
+}
+@media (max-width: 768px) {
+  #header {
+    background: #694a9c;
+    /* Old browsers */
+    background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+    /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
+    /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+    /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+    /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+    /* IE10+ */
+    background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
+    /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
+    /* IE6-9 */
+  }
+  #header .navbar-right {
+    float: none !important;
+  }
+  #header .main-links.navbar-nav {
+    padding-bottom: 15px;
+  }
+  #header .main-links.navbar-nav li {
+    margin-top: 15px;
+  }
+  #header .main-links.navbar-nav li + li a::before {
+    display: none;
+  }
+  #header .main-links.navbar-nav li > a {
+    padding: 0;
+    padding-left: 0;
+    line-height: 22px;
+  }
+  #header .navbar-brand.logo span {
+    margin-top: 0;
+  }
+  #header .navbar-nav > li {
+    float: none;
+  }
+  #header .buttons.navbar-nav {
+    margin-top: 15px;
+    margin-left: 0px;
+  }
+  #header .buttons.navbar-nav li a {
+    padding-left: 40px;
+  }
+  #header .buttons.navbar-nav li.first {
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+  #header .buttons.navbar-nav li.download a {
+    background: url(../images/icon-download.png) 8px 6px no-repeat !important;
+    background-image: url("../images/icon-download.png");
+    background-size: 20px 20px;
+  }
+  #header .buttons.navbar-nav li.github a {
+    background: url(../images/icon-github.png) 8px 6px no-repeat !important;
+    background-image: url("../images/icon-github.png");
+    background-size: 20px 20px;
+  }
+}
+@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
+  #header .buttons.navbar-nav li.download a {
+    background-image: url("../images/icon-download@2x.png");
+    background-size: 20px 20px;
+  }
+}
+@media (max-width: 768px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 768px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 768px) and only screen and (min-device-pixel-ratio: 2), (max-width: 768px) and only screen and (min-resolution: 192dpi), (max-width: 768px) and only screen and (min-resolution: 2dppx) {
+  #header .buttons.navbar-nav li.github a {
+    background-image: url("../images/icon-github@2x.png");
+    background-size: 20px 20px;
+  }
+}
+#jumbotron-mask {
+  overflow: hidden;
+  height: 542px;
+  margin-top: -92px;
+}
+#jumbotron {
+  position: relative;
+  height: 542px;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: -92px;
+  color: #ffffff;
+  background: #694a9c;
+  /* Old browsers */
+  background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+  /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
+  /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+  /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+  /* Opera 11.10+ */
+  background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
+  /* IE10+ */
+  background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
+  /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
+  /* IE6-9 */
+}
+#jumbotron.mobile-hero {
+  background: transparent url(../images/node-hero-pattern.jpg ) center center;
+  background-size: 320px 320px;
+  background: -webkit-image-set(url('../images/node-hero-pattern.jpg') 1x, url('../images/node-hero-pattern@2x.jpg') 2x);
+}
+#jumbotron .jumbotron-dots {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 632px;
+  width: 100%;
+  margin-top: -92px;
+  background: transparent url('../images/hero-dots.png') center 92px no-repeat;
+}
+#jumbotron .container {
+  position: relative;
+  height: 100%;
+  margin-top: 92px;
+}
+#jumbotron .container .jumbo-logo-wrap {
+  margin-top: 135px;
+}
+#jumbotron .container .jumbo-logo-wrap .jumbo-logo {
+  width: 318px;
+  height: 316px;
+  background: transparent url(../images/consul-hero-logo@2x.png ) 0 0 no-repeat;
+  background-size: 318px 316px;
+  z-index: 20;
+}
+#jumbotron .container h2 {
+  margin-top: 190px;
+  font-size: 40px;
+  line-height: 48px;
+  letter-spacing: 1px;
+  margin-left: 40px;
+}
+@media (min-width: 992px) {
+  .jumbotron .container .jumbo-logo {
+    right: -150px;
+  }
+}
+@media (min-width: 1200px) {
+  .jumbotron .container .jumbo-logo {
+    right: -120px;
+  }
+}
+.outline-btn {
+  background-color: transparent;
+  color: #ffffff;
+  border: 2px solid #ffffff;
+  border-radius: 4px;
+  text-decoration: none !important;
+  -webkit-transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
+}
+.outline-btn.purple {
+  color: #69499a;
+  border: 2px solid #69499a;
+}
+.outline-btn:hover {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.2);
+  -webkit-transition: background-color 0.3s ease-in-out;
+  transition: background-color 0.3s ease-in-out;
+}
+.outline-btn:hover.purple {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+#features {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  padding: 130px 0 0 0;
+  background: #f8f8f8 url(../images/hero-dots-below@2x.png) center top no-repeat;
+  background-size: 1280px 49px;
+}
+#features .double-row {
+  padding: 0 0 60px 0;
+}
+#features h2 {
+  font-size: 24px;
+  letter-spacing: 2px;
+  color: #69499a;
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+}
+#features p {
+  font-size: 16px;
+  letter-spacing: 1px;
+  line-height: 1.5em;
+  color: #909090;
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+}
+#features .icn {
+  display: block;
+  width: 186px;
+  height: 272px;
+  margin: 0 auto;
+  background-position: center 0;
+  background-repeat: no-repeat;
+}
+#features .discovery {
+  background-image: url(../images/feature-discovery@2x.png);
+  background-size: 181px 181px;
+}
+#features .health {
+  background-image: url(../images/feature-health@2x.png);
+  background-size: 125px 179px;
+}
+#features .multi {
+  background-image: url(../images/feature-multi@2x.png);
+  background-size: 182px 184px;
+}
+#features .config {
+  background-image: url(../images/feature-config@2x.png);
+  background-size: 157px 179px;
+}
+#trusted {
+  background-color: #242424;
+  padding: 140px 0;
+}
+#trusted h3 {
+  margin-bottom: 60px;
+  color: #ffffff;
+  text-transform: uppercase;
+  font-size: 18px;
+  text-align: center;
+}
+#trusted .trusted-items {
+  width: 800px;
+  margin: 0 auto;
+}
+#trusted .trusted-items ul {
+  padding: 0;
+}
+#trusted .trusted-items ul > li {
+  display: inline-block;
+  float: left;
+  width: 25%;
+  height: 80px;
+  margin: 12px 0;
+  background: url(../images/trusted-sprite.png ) 0 0 no-repeat;
+}
+#trusted .trusted-items ul > li#i0 {
+  background-position: 0 0;
+}
+#trusted .trusted-items ul > li#i1 {
+  background-position: 0 -80px;
+}
+#trusted .trusted-items ul > li#i2 {
+  background-position: 0 -160px;
+}
+#trusted .trusted-items ul > li#i3 {
+  background-position: 0 -240px;
+}
+#trusted .trusted-items ul > li#i4 {
+  background-position: 0 -320px;
+}
+#trusted .trusted-items ul > li#i5 {
+  background-position: 0 -400px;
+}
+#trusted .trusted-items ul > li#i6 {
+  background-position: 0 -480px;
+}
+#trusted .trusted-items ul > li#i7 {
+  background-position: 0 -560px;
+}
+#trusted .trusted-items ul > li#i8 {
+  background-position: 0 -640px;
+}
+#trusted .trusted-items ul > li#i9 {
+  background-position: 0 -720px;
+}
+#trusted .trusted-items ul > li#i10 {
+  background-position: 0 -800px;
+}
+#trusted .trusted-items ul > li#i11 {
+  background-position: 0 -880px;
+}
+#footer {
+  padding: 50px 0;
+  background-color: #d7d4d7;
+  background: #d7d4d7 url(../images/consul-footer-logo.png) center center no-repeat;
+  background-image: url("../images/consul-footer-logo.png");
+  background-size: 446px 443px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  #footer {
+    background-image: url("../images/consul-footer-logo@2x.png");
+    background-size: 446px 443px;
+  }
+}
+#footer .footer-links {
+  margin-bottom: 20px;
+}
+#footer .footer-hashi {
+  letter-spacing: 2px;
+  margin-bottom: 30px;
+}
+#footer .footer-hashi a {
+  font-weight: 700;
+}
+#footer .footer-hashi span {
+  margin-right: 20px;
+}
+#footer .footer-hashi img {
+  display: inline-block;
+  width: 37px;
+  height: 40px;
+}
+@media (max-width: 992px) {
+  #features .double-row {
+    padding: 0 0 0 0;
+  }
+  #features .double-row .row {
+    padding-bottom: 90px;
+  }
+  #features .icn {
+    height: 200px;
+  }
+}
+.people {
+  margin-top: 30px;
+}
+.people .person {
+  margin-bottom: 40px;
+}
+.people .person h3 {
+  text-transform: none;
+}
+.people .person .bio {
+  padding-left: 150px;
+}
+.docs-sidebar {
+  margin-bottom: 30px;
+  margin-top: 50px;
+  margin-right: 4%;
+  background-color: #f0f0e5;
+  border-radius: 6px;
+}
+.docs-sidebar a {
+  color: #242424;
+}
+.docs-sidebar .docs-sidenav {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.docs-sidebar .docs-sidenav :last-child {
+  border-bottom: none;
+}
+.docs-sidebar .docs-sidenav li {
+  position: relative;
+}
+.docs-sidebar .docs-sidenav li > a {
+  -webkit-transition: color 0.5s ease;
+  transition: color 0.5s ease;
+}
+.docs-sidebar .docs-sidenav li > a:hover,
+.docs-sidebar .docs-sidenav li > a:focus {
+  background-color: transparent !important;
+  color: #c5454e;
+  -webkit-transition: color 0.5s ease;
+  transition: color 0.5s ease;
+}
+.docs-sidebar .docs-sidenav > li {
+  padding: 10px 0;
+  margin: 0 30px;
+  border-bottom: 1px solid #fff;
+}
+.docs-sidebar .docs-sidenav > li.active:before {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #dd4e58;
+  border-radius: 4px;
+  top: 26px;
+  left: -10px;
+}
+.docs-sidebar .docs-sidenav > li.active > a {
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.docs-sidebar .docs-sidenav > li.active > a:hover,
+.docs-sidebar .docs-sidenav > li.active > a:focus {
+  color: #242424;
+}
+.docs-sidebar .docs-sidenav > li.active .nav {
+  display: block;
+}
+.docs-sidebar .docs-sidenav > li.active .nav li.active a {
+  color: #dd4e58;
+}
+.docs-sidebar .docs-sidenav > li > a {
+  text-transform: uppercase;
+  font-family: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+}
+.docs-sidebar .docs-sidenav .nav {
+  display: none;
+  margin-bottom: 15px;
+}
+.docs-sidebar .docs-sidenav .nav > li {
+  margin-left: 20px;
+}
+.docs-sidebar .docs-sidenav .nav > li > a {
+  -webkit-font-smoothing: antialiased;
+  font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding: 6px 15px;
+}
+.bs-docs-section {
+  padding-top: 10px;
+  padding-left: 3%;
+  padding-bottom: 80px;
+}
+.bs-docs-section .lead {
+  margin-bottom: 48px;
+}
+.bs-docs-section .doc-sectional {
+  margin-bottom: 48px;
+}
+.bs-docs-section p,
+.bs-docs-section li,
+.bs-docs-section .alert {
+  font-size: 20px;
+  font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.5em;
+  margin: 0 0 18px;
+  -webkit-font-smoothing: antialiased;
+}
+.bs-docs-section pre {
+  margin: 0 0 18px;
+}
+.bs-docs-section a {
+  color: #b03c44;
+}
+.bs-docs-section a:hover {
+  text-decoration: underline;
+}
+.bs-docs-section h1 {
+  padding-bottom: 24px;
+  margin-top: 40px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #eeeeee;
+}
+.bs-docs-section h2,
+.bs-docs-section h3,
+.bs-docs-section h4 {
+  margin-bottom: 16px;
+}
+.bs-docs-section #graph {
+  margin-top: 30px;
+}
+.downloads {
+  margin-top: 20px;
+}
+.downloads .description {
+  margin-bottom: 20px;
+}
+.downloads .download {
+  border-bottom: 1px solid #b2b2b2;
+  padding-bottom: 15px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.downloads .download .details {
+  padding-left: 95px;
+}
+.downloads .download .details h2 {
+  margin-top: 0px;
+}
+.downloads .download .details ul {
+  padding-left: 0px;
+}
+.downloads .download .details li {
+  display: inline-block;
+}
+.downloads .download .details li:after {
+  content: " | ";
+}
+.downloads .download .details li:last-child:after {
+  content: "";
+}
+.downloads .download .icon img {
+  width: 75px;
+}
+.downloads .download .os-name {
+  font-size: 40px;
+  margin-bottom: -3px;
+}
+.downloads .poweredby {
+  margin-top: 20px;
+}
+.downloads .poweredby img {
+  display: block;
+  margin: 0 auto;
+  width: 122px;
+}
+/*@import "modals.less";*/

website/source/stylesheets/main.less

@@ -14,7 +14,7 @@
 // Components
 @import "_header";
 @import "_jumbotron";
-@import "_nodes";
+@import "_buttons";
 
 // Pages
 @import "_home";
@@ -24,5 +24,3 @@
 
 // Components w/ JavaScript
 /*@import "modals.less";*/
-
-