Clean up scss

website/source/assets/stylesheets/_api.scss

@@ -36,6 +36,10 @@
       font-size: 15px;
       font-family: $font-family-open-sans;
 
+      &:last-child {
+        padding-bottom: 0;
+      }
+
       span.param {
         font-weight: bold;
       }

website/source/assets/stylesheets/_buttons.scss

@@ -7,6 +7,7 @@
 	background-color: $white;
 	color: $black;
 	border: 1px solid $black;
+	text-decoration: none;
 	@include transition(color .3s ease-in-out);
 	@include btn-shadow();
 
@@ -43,7 +44,7 @@
 		margin-bottom: 12px;
 	}
 
-	&:hover{
+	&:hover, &:active, &:focus {
 		text-decoration: none;
 		@include transition(color .3s ease-in-out);
 

website/source/assets/stylesheets/_community.scss

@@ -4,10 +4,6 @@
   .person {
     margin-bottom: 40px;
 
-        h3 {
-            text-transform: none;
-        }
-
     img {
       width: 125px;
       margin: auto auto;

website/source/assets/stylesheets/_demo.scss

@@ -1,9 +1,3 @@
-html,
-body {
-    height: 100%;
-    min-height: 100%;
-}
-
 .demo-active {
   background: #000;
 
@@ -14,7 +8,7 @@ body {
   #header,
   #sidebar,
   #hero,
-    #content,
+  #container,
   #footer,
   .sidebar-overlay {
     display: none;
@@ -31,9 +25,9 @@ body {
   color: #DDDDDD;
   display: block;
   font-size: 15px;
-    font-family: 'Ubuntu Mono', 'Monaco', monospace;
+  font-family: $font-family-monospace;
   @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
-    z-index: 1000;
+  z-index: 50;
 }
 
 .instruction-wrapper {
@@ -42,7 +36,7 @@ body {
   padding: 20px;
   position: fixed;
   top: 0;
-    z-index: 5;
+  z-index: 100;
 }
 
 .instruction {
@@ -76,7 +70,6 @@ body {
   li {
     list-style-type: none;
   }
-
 }
 
 .close-terminal{
@@ -89,10 +82,10 @@ body {
   color: #8B8A8F;
   text-align: center;
   line-height: 60px;
-    font-size: 30px;
+  font-size: 40px;
   transition: all 250ms ease-in;
   cursor: pointer;
-    z-index: 10;
+  z-index: 100;
 
   &:hover{
     text-decoration: none;
@@ -112,7 +105,7 @@ body {
   display: block;
   overflow: auto;
   position: relative;
-    z-index: 1;
+  z-index: 90;
 
   &.fullscreen {
     min-height: 300px;

website/source/assets/stylesheets/_docs.scss

@@ -2,28 +2,15 @@
 // Docs
 // --------------------------------------------------
 
-body.layout-atlas,
+$docs-font-size: 15px;
-body.layout-consul,
+
-body.layout-dnsimple,
-body.layout-dme,
-body.layout-cloudflare,
-body.layout-cloudstack,
-body.layout-google,
-body.layout-heroku,
-body.layout-mailgun,
-body.layout-digitalocean,
-body.layout-aws,
 body.layout-docs,
 body.layout-inner,
 body.layout-downloads,
 body.layout-intro {
-  display: flex;
-  flex-direction: column;
-
   >.container{
-    flex: 1 0 auto;
-
     .col-md-8[role=main]{
+      min-height: 800px;
       background-color: white;
 
       >div{
@@ -32,192 +19,138 @@ body.layout-intro{
       }
     }
   }
+
+  *:focus {
+    outline: none;
+  }
+
+  h1 > code,
+  h2 > code,
+  h3 > code,
+  h4 > code,
+  h5 > code
+  h6 > code,
+  li > code,
+  table code,
+  p code,
+  tt,
+  .alert code {
+    font-family: $font-family-monospace;
+    font-size: 90%;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+  }
 }
 
 .docs-sidebar {
-  	position: relative;
-  	z-index: 20;
   margin-bottom: 30px;
   margin-top: 50px;
-	margin-right: 4%;
-	@include open();
 
-	a{
+  ul.nav.docs-sidenav {
-		color: $dark-blue;
+    display: block;
-	}
-
-	.nav.docs-sidenav{
     padding-bottom: 15px;
 
-		:last-child{
-			border-bottom: none;
-		}
-
-		//all li
     li {
-			position: relative;
+      a {
-
+        color: $sidebar-link-color;
-			> a{
-				padding: 10px 0 10px 8px;
         font-size: 13px;
+        padding: 10px 0 10px 15px;
+
+        &:before {
           color: $dark-blue;
+          content: '\203A';
+          font-size: $docs-font-size;
+          left: 0;
+          line-height: 100%;
+          opacity: 0.4;
+          position: absolute;
 
-				&:before{
+          height: 100%;
-					@include bez-1-transition();
+          width: 8px
         }
 
+        &:focus,
         &:hover {
-					background-color: transparent !important;
+          background-color: transparent;
+          color: $sidebar-link-color-hover;
 
           &:before {
-						@include bez-1-transition();
+            opacity: 1;
           }
         }
       }
     }
 
-		$parent-active-state: -14px;
+    li.active {
-		$parent-default-state: -10px;
-		$child-active-state: -4px;
-		$child-default-state: 0px;
-
-		//first teir li
-		> li {
-			margin: 0 0 0 10px;
-
-			&.active {
       > a {
-          			color: lighten($black, 4%);
+        color: $sidebar-link-color-active;
-
-					&:hover{
-						&:before{
-							left: $parent-default-state;
-						}
-					}
 
         &:before {
-						background: image-url("triangle-sprite.png") 0 0 no-repeat;
+          opacity: 1;
-						@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 7px, 25px);
         }
       }
 
-				.nav {
+      // Open nested navigations
+      ul.nav {
         display: block;
       }
     }
 
-			> a {
+    // subnav
-        		-webkit-font-smoothing: antialiased;
+    ul.nav {
-
-				&:hover{
-					&:before{
-						left: $parent-active-state;
-					}
-				}
-
-				&:before{
-					content: '';
-					position: absolute;
-			        width: 7px;
-			        height: 8px;
-					top: 15px;
-					left: $parent-default-state;
-					overflow: hidden;
-					background: image-url("triangle-sprite.png") 0 -9px no-repeat;
-					@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 7px, 25px);
-				}
-			}
-		}
-
-		//nested ul.nav
-		.nav {
       display: none;
-			margin-bottom: 15px;
+      margin: 10px;
 
-			> li{
+      li {
         margin-left: 10px;
 
-				&.active{
+        a {
-					> a{
-		            	color: $black;
-
-						&:hover{
-							&:before{
-								left: $child-default-state;
-							}
-						}
-
-						&:before{
-							background: image-url("triangle-sprite.png") 0 0 no-repeat;
-							@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px);
-						}
-					}
-				}
-
-				> a{
-          			-webkit-font-smoothing: antialiased;
           padding: 6px 15px;
-
-					&:hover{
-						&:before{
-							left: $child-active-state;
-						}
-					}
-
-					&:before{
-						opacity: .75;
-						content: '';
-						position: absolute;
-				        width: 5px;
-				        height: 7px;
-						top: 12px;
-						left: $child-default-state;
-						overflow: hidden;
-						background: image-url("triangle-sprite.png") 0 -13px no-repeat;
-						@include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px);
         }
       }
     }
   }
-
-        .nav-visible {
-            display: block;
 }
-	}
-}
-
 
 .bs-docs-section {
   padding-top: 10px;
   padding-left: 3%;
   padding-bottom: 80px;
 
-	.lead{
-		margin-bottom: 48px
-	}
-
-	.doc-sectional{
-		margin-bottom: 48px;
-	}
-
   p, li, .alert {
-		font-size: 18px;
+    font-size: $docs-font-size;
     font-family: $font-family-open-sans;
     font-weight: $font-weight-reg;
-    line-height: 1.5em;
+    line-height: 1.84em;
-		margin: 0 0 18px;
+    margin: 0 0 $docs-font-size;
     -webkit-font-smoothing: antialiased;
   }
 
   pre {
-        margin: 0 0 18px;
+    font-size: ($docs-font-size - 3);
+    margin: 0 0 $docs-font-size;
+
+    // This will force the code to scroll horizontally on small screens
+    // instead of wrapping.
+    code {
+      overflow-wrap: normal;
+      white-space: pre;
+    }
   }
 
   a {
     color: $dark-blue;
+    text-decoration: none;
+
     &:hover {
       text-decoration: underline;
     }
+
+    code {
+      background: inherit;
+      color: $dark-blue;
+    }
   }
 
   img {
@@ -226,28 +159,18 @@ body.layout-intro{
     margin-bottom: 25px;
   }
 
-	h1{
+  h1,
-		color: $black;
+  h2,
-    font-weight: $font-weight-b;
+  h3,
-		font-size: 36px;
+  h4 {
-		margin-top: 50px;
+    color: $body-font-color;
-		margin-bottom: 24px;
+    margin-top: 54px;
-	}
+    margin-bottom: $docs-font-size;
-
+    line-height: 1.3;
-	h2, h3, h4{
-		margin-bottom: 16px;
-    font-weight: $font-weight-b;
-
-	}
-
-    #graph {
-        margin-top: 30px;
   }
 }
 
-
 @media (max-width: 992px) {
-
   .bs-docs-section {
     padding-left: 0;
   }
@@ -256,23 +179,13 @@ body.layout-intro{
 @media (max-width: 768px) {
   .bs-docs-section {
     padding-top: 0;
-		h1{
-			margin-top: 0;
   }
 }
-}
-
-
-
 
 @media (max-width: 480px) {
   .bs-docs-section {
     img {
       max-width: 450px;
     }
-
-		h1{
-			font-size: 32px;
-		}
   }
 }

website/source/assets/stylesheets/_global.scss

@@ -2,47 +2,33 @@
 // Global Site
 // --------------------------------------------------
 
-/*html{
+html {
+  height: 100%;
+  min-height: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-}*/
-html{
-  min-height: 100%;
 }
 
 body {
-    min-height: 100%;
   -webkit-font-smoothing: antialiased;
-    color: $black;
+  color: $body-font-color;
   background-color: $white;
-    font-size: 16px;
+  font-size: $font-size;
   font-family: $font-family-open-sans;
-    font-weight: 400;
+  font-weight: $font-weight-reg;
+  height: 100%;
+  min-height: 100%;
 }
 
-
 h1, h2, h3, h4, h5 {
+  font-family: $font-family-klavika;
   -webkit-font-smoothing: antialiased;
 }
+
 h1 {
-	font-size: 42px;
-	line-height: 42px;
   margin-bottom: 24px;
 }
 
-h3{
-	font-size: 28px;
-	line-height: 28px;
-}
-
-//an alternative color for buttons in the doc body
-.btn-serf{
-	color: $white !important;
-	background-color: $btn-color;
-	border-radius: $btn-border-radius;
-	//@include box-shadow( $shadow );
-}
-
 .highlight{
   margin-bottom: 18px;
 }
@@ -52,20 +38,12 @@ pre {
   color: $white;
   font-size: 14px;
   font-weight: normal;
-	font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+  font-family: $font-family-monospace;
   border: none;
   padding: 20px;
   margin-bottom: 0;
 }
 
-
-//fixed grid below 992 to prevent smaller responsive sizes
-@media (max-width: 992px) {
-	.container{
-		max-width: 970px;
-	}
-}
-
 //all below styles are overriding corrections for below (min-width: 992px)
 //below (min-width: 992px) these styles change
 .navbar-nav {
@@ -89,14 +67,29 @@ pre {
   text-align: center;
 }
 
-.hcaret{
+.alert p:last-child {
-  display: inline-block;
+  margin-bottom: 0;
-  -moz-transform: translate(0, -1px) rotate(135deg);
+}
-  -webkit-transform: translate(0, -1px) rotate(135deg);
+
-  transform: translate(0, -1px) rotate(135deg);
+//Typekit utilites for hiding FOUC
-  width: 7px;
+.wf-loading {
-  height: 7px;
+  visibility: hidden;
-  border-top: 1px solid $blue;
+}
-  border-left: 1px solid $blue;
+
-  @include transition(all .1s ease-in);
+.wf-active, .wf-inactive {
+  visibility: visible;
+}
+
+//fixed grid below 992 to prevent smaller responsive sizes
+@media (min-width: 768px) and (max-width: 992px) {
+  .container{
+    width: 100%;
+  }
+}
+
+//guarantees nav list fits at tablet viewport size
+@media (min-width: 768px) and (max-width: 800px) {
+  #header .navbar-nav a {
+    font-size: 12px !important;
+  }
 }

website/source/assets/stylesheets/_header.scss

@@ -33,11 +33,6 @@
     .navbar-brand {
       .logo {
         width: $project-logo-width * .8;
-
-        img{
-          //width: 72px;
-          //height: 14px;
-        }
       }
     }
   }

website/source/assets/stylesheets/_home.scss

@@ -1,224 +1,100 @@
-//
+#page-home {
-// Home
+  #container {
-// --------------------------------------------------
+    margin-top: 140px;
-
-#hero{
-	/* opacity: 0;
-	@include translate3d(0, -10px, 0); */
-	text-align: center;
-
-    /* &.showit{
-        opacity: 1;
-        @include translate3d(0, 0px, 0);
-        transition: all 1s ease;
-    } */
-
-	#logo-lockup{
     position: relative;
-		display: inline-block;
+    text-align: center;
-		width: 228px;
+    z-index: 1;
-		height: 43px;
-		margin-top: 120px;
-	    background: image-url('logo-lockup.png') 0 0 no-repeat;
-	   	@include img-retina("logo-lockup.png", "logo-lockup@2x.png", 228px, 43px);
-
-	   	.keys{
-	   		position: absolute;
-	   		left: 15px;
-	   		top: 8px;
-	   		width: 12px;
-
-	   		span{
-	   			width: 3px;
-	   			height: 3px;
-	   			border-radius: 2px;
-	   			float: left;
-	   			margin-left: 1px;
-	   			margin-bottom: 1px;
-	   			background-color: $blue;
-	   			transition: all 250ms ease-in;
-
-	   			&:nth-child(1){
-	   				opacity: .85;
-	   			}
-
-	   			&:nth-child(2){
-	   				opacity: .4;
-	   			}
-
-	   			&:nth-child(3){
-	   				opacity: .8;
-	   			}
-
-	   			&:nth-child(4){
-	   				opacity: .9;
-	   			}
-
-	   			&:nth-child(5){
-	   				opacity: .8;
-	   			}
-
-	   			&:nth-child(6){
-	   				opacity: .5;
-	   			}
-
-	   			&:nth-child(7){
-	   				opacity: .65;
-	   			}
-
-	   			&:nth-child(8){
-	   				opacity: .7;
-	   			}
-
-	   			&:nth-child(9){
-	   				opacity: 1;
-	   			}
-
-	   			&:nth-child(10){
-	   				opacity: 1;
-	   				margin-left: 5px;
-	   			}
-
-	   			&.full{
-	   				opacity: 1;
-	   				transition: all 250ms ease-in;
-	   			}
-
-	   			&.full.off{
-	   				opacity: .55;
-	   				transition: all 250ms ease-in;
-	   			}
-
-	   			&.full.press{
-
-					animation-name: press;
-					-webkit-animation-name: press;
-
-					animation-duration: 600ms;
-					-webkit-animation-duration: 600ms;
-
-					animation-timing-function: ease;
-					-webkit-animation-timing-function: ease;
-	   			}
-	   		}
-	   	}
-	}
 
     #tag-line {
-		margin: 15px 0 20px 0;
+      display: block;
       font-size: 24px;
       font-weight: 300;
+      margin: 15px 0 40px 0;
     }
 
     #diagram {
-		display: inline-block;
+      background-image: image-url("hero@2x.png");
-		width: 490px;
+      background-origin: content-box;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      display: block;
+      margin: 60px 0;
+      padding: 15px;
+
       height: 193px;
-		margin-top: 120px;
+      width: 100%;
-	    background: image-url('hero.png') 0 0 no-repeat;
+    }
-	   	@include img-retina("hero.png", "hero@2x.png", 490px, 193px);
+
+    h2.features-header {
+      color: $blue;
+      display: inline-block;
+      font-size: 44px;
+      font-weight: 600;
+      letter-spacing: 2px;
+      margin: 120px auto 40px auto;
+      text-transform: uppercase;
+    }
+
+    h3.feature-header {
+      color: $black;
+      font-size: 36px;
+      font-weight: 300;
+      margin: 30px 0;
+      text-transform: none;
     }
 
     p {
-		margin-top: 60px;
+      font-size: 18px;
+      font-weight: 300;
+      line-height: 36px;
+      margin: 25px 0;
+      padding: 15px;
       text-align: left;
-		line-height: 2em;
-
-		.strong{
-			font-size: 20px;
-			font-weight: 600;
-		}
-	}
-}
-
-#content{
-	margin-top: 180px;
-	text-align: center;
-
-	h2{
-		margin-bottom: 120px;
-		color: $blue;
-		font-family: $font-family-klavika;
-		font-size: 44px;
-		text-transform: uppercase;
-		letter-spacing: 2px;
     }
 
     .feature {
       margin-bottom: 150px;
 
+      .graphic {
+        background-origin: content-box;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: block;
+        margin: 60px 0;
+        padding: 15px;
+
+        height: 160px;
+        width: 100%;
+      }
+
       &#crud {
         .graphic {
-				width: 335px;
+          background-image: image-url("graphic-crud@2x.png");
-				height: 128px;
-			    background: image-url('graphic-crud.png') 0 0 no-repeat;
-			   	@include img-retina("graphic-crud.png", "graphic-crud@2x.png", 335px, 128px);
         }
       }
 
       &#key {
         .graphic {
-				width: 243px;
+          background-image: image-url("graphic-key@2x.png");
-				height: 140px;
-			    background: image-url('graphic-key.png') 0 0 no-repeat;
-			   	@include img-retina("graphic-key.png", "graphic-key@2x.png", 243px, 140px);
         }
       }
 
       &#audit {
         .graphic {
-				width: 491px;
+          background-image: image-url("graphic-audit@2x.png");
-				height: 129px;
-			    background: image-url('graphic-audit.png') 0 0 no-repeat;
-			   	@include img-retina("graphic-audit.png", "graphic-audit@2x.png", 491px, 129px);
-			}
-		}
-
-		.graphic{
-			display: inline-block;
-		}
-
-		h3{
-			font-family: $font-family-klavika;
-			margin: 30px 0;
-			color: $black;
-			font-size: 34px;
-			font-weight: 600;
-			line-height: 34px;
-			text-transform: uppercase;
-		}
-
-		p{
-			margin-bottom: 30px;
-			text-align: left;
-			font-size: 16px;
-			line-height: 1.75em;
-		}
-
-		.feature-footer{
-			a{
-				margin-bottom: 15px;
-				margin-left: 15px;
-
-				&:first-child{
-					margin-left: 0;
-				}
         }
       }
     }
 
     #cta {
-		position: relative;
-		padding: 160px 0;
-		background: image-url('bg-icons.png') center center no-repeat;
       @include img-retina("bg-icons.png", "bg-icons@2x.png", 669px, 260px);
+      background: image-url("bg-icons.png") center center no-repeat;
       background-position: center center;
       border-top: 1px solid $faint-gray;
       border-bottom: 1px solid $faint-gray;
-
+      padding: 140px 0;
-		a{
-			margin-bottom: 5px;
-		}
 
       p {
         margin-top: 10px;
@@ -226,353 +102,8 @@
         font-size: 14px;
         font-weight: 600;
         line-height: 1.5esm;
-
-	    	&.cta-gray{
-	    		color: $gray;
-	    	}
-		}
-
-		.outline-btn {
-			padding: 16px 40px;
-			display: inline-block;
-			&:focus {
-		    	outline: 0;
-			}
-		}
-	}
-}
-
-#demos{
-	position: relative;
-	padding: 180px 0 60px;
-	margin-top: -80px;
-
-	>.container{
-		z-index: 31;
-	}
-
-	#demo-bg{
-		background-color: #000;
-		@include skewY(-3deg);
-		z-index: 30;
-	}
-
-	.explantion {
-		margin: 40px 0 60px 15px;
-		border-left: 8px solid #1e1e1e;
-
-		h2 {
-			margin-top: 0;
-			font-size: 28px;
-			color: lighten($purple, 8%);
-		}
-
-		p{
-			margin-bottom: 0;
-			font-size: 16px;
-			letter-spacing: 1px;
-			line-height: 1.5em;
-			color: $gray-light;
-			font-weight: 400;
-		}
-	}
-
-	.terminals{
-		margin-bottom: 80px;
-
-		.terminal-item{
-			margin-bottom: 120px;
-
-			&.last{
-				border-bottom: none;
-			}
-			>header{
-				.left{
-					span.icn{
-						display: inline-block;
-						width: 83px;
-						height: 74px;
-					}
-				}
-
-				.right{
-					padding-left: 25px;
-
-					h2{
-						margin-top: 0;
-						font-size: 28px;
-						text-transform: uppercase;
-					}
-
-					p{
-						font-size: 16px;
-					}
-				}
-			}
-
-			.terminal{
-				border: 2px solid #1e1e1e;
-				//border-radius: 4px;
-
-				header{
-					position: relative;
         text-align: center;
-					padding: 3px;
-					//background-color: #1e1e1e;
-					border-bottom: 2px solid #1e1e1e;
-
-					h4{
-						font-size: 14px;
-						letter-spacing: 1px;
-						color: white;
       }
-
-					ul.shell-dots{
-						position: absolute;
-						top: 10px;
-						left: 8px;
-						padding-left: 0;
-
-						li{
-							&.d1{
-								background-color: #4a08a7;
     }
-							&.d2{
-								background-color: #6517cf;
-							}
-							&.d3{
-								background-color: #7b29ee;
-							}
-
-							display: inline-block;
-							width: 12px;
-							height: 12px;
-							border-radius: 6px;
-							margin-left: 6px;
-						}
-					}
-				}
-
-				.terminal-window{
-					min-height: 140px;
-					padding: 20px;
-					font-size: 15px;
-					font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-					color: $white;
-					background-color: transparent;
-					overflow:auto;
-					font-weight: 500;
-					-webkit-font-smoothing: antialiased;
-
-					.txt-spe {
-						color: lighten($blue, 5%);
-						font-weight: 600;
-					}
-
-					.txt-var {
-						color: lighten($purple, 8%);
-						font-weight: 600;
-					}
-
-					.txt-str {
-						color: lighten($green, 2%);
-					}
-
-					.txt-int {
-						color: lighten($orange, 2%);
-						font-weight: 600;
-					}
-
-					p{
-						margin-bottom: 2px;
-						white-space: pre-wrap;
-					}
-					.cursor {
-						background-color: lighten($purple, 5%);
-					}
-				}
-			}
-
-			.feature-bullets{
-				list-style-type: none;
-				padding-left: 35px;
-
-				li{
-					padding: 5px 0 5px 45px;
-				}
-			}
-		}
-	}
-}
-
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-	#demos{
-		.terminals{
-			.terminal-item{
-				.feature-bullets{
-					li{
-						background-size: 12px 12px;
-					}
-				}
-			}
-		}
-	}
-}
-
-
-@media (min-width: 1200px) {
-
-}
-
-
-@media (max-width: 1200px) {
-
-}
-
-@media (min-width: 992px) and (max-width:1200px) {
-	#cta a {
-		margin-top: 15px;
-		font-size: 18px;
-	}
-}
-
-@media (min-width: 768px) and (max-width:992px) {
-	#cta a {
-		margin-top: 10px;
-	}
-}
-
-@media (max-width: 992px) {
-
-	#demos{
-		.terminals{
-			.terminal-item{
-				>header{
-					.left{
-						span.icn{
-						}
-					}
-
-					.right{
-						padding-left: 54px;
-					}
-				}
-			}
-		}
-	}
-}
-
-@media (max-width: 768px) {
-
-	#demos{
-		.explantion {
-			margin: 40px 0 60px 0;
-		}
-
-		.terminals{
-			.terminal-item{
-				>header{
-					.left{
-						span.icn{
-							padding-bottom: 15px;
-						}
-					}
-
-					.right{
-						padding-left: 15px;
-					}
-				}
-			}
-		}
-	}
-
-	#cta{
-		.intro{
-			text-align: center;
-			p{
-				text-align: center;
-				margin-bottom: 15px;
-			}
-		}
-	}
-}
-
-
-@media (max-width: 480px) {
-
-
-	#hero{
-		#diagram{
-			width: 100%;
-			height: 132px;
-		    background: image-url('hero.png') center 0 no-repeat;
-		   	@include img-retina("hero.png", "hero@2x.png", 320px, 132px);
-		}
-	}
-
-	#content{
-		.feature{
-			&#audit{
-				.graphic{
-					width: 100%;
-					height: 84px;
-				    background: image-url('graphic-audit.png') center 0 no-repeat;
-				   	@include img-retina("graphic-audit.png", "graphic-audit@2x.png", 320px, 84px);
-				}
-			}
-		}
-	}
-
-	.feature-footer{
-		text-align: center;
-		a{
-			margin-bottom: 15px;
-			margin-left: 0 !important;
-		}
-	}
-}
-
-
-@media (max-width: 320px) {
-
-	#hero{
-		#diagram{
-			width: 100%;
-			height: 132px;
-		    background: image-url('hero.png') center 0 no-repeat;
-		   	@include img-retina("hero.png", "hero@2x.png", 320px, 132px);
-		}
-	}
-
-	#content{
-		.feature{
-			&#crud{
-				.graphic{
-					width: 100%;
-					height: 111px;
-				    background: image-url('graphic-crud.png') center 0 no-repeat;
-				   	@include img-retina("graphic-crud.png", "graphic-crud@2x.png", 290px, 111px);
-				}
-			}
-
-			&#audit{
-				.graphic{
-					width: 100%;
-					height: 76px;
-				    background: image-url('graphic-audit.png') center 0 no-repeat;
-				   	@include img-retina("graphic-audit.png", "graphic-audit@2x.png", 290px, 76px);
-				}
-			}
-		}
-	}
-
-	#demos .explantion{
-		border-left: 8px solid transparent;
-	}
-
-	#cta a {
-		font-size: 14px;
-		font-weight: 400;
   }
 }

website/source/assets/stylesheets/_sidebar.scss

@@ -1,17 +1,7 @@
-//
-// Sidebar
-// - Project Specific
-// - Make sidebar edits here
-// --------------------------------------------------
-
 .sidebar {
   .sidebar-nav {
-    // Links
-    //----------------
     li {
       a {
-        font-family: $header-font-family;
-        font-weight: 400;
         color: $black;
 
         svg{

website/source/assets/stylesheets/_variables.scss

@@ -1,69 +1,39 @@
-//
-// Variables
-// --------------------------------------------------
-
-
 // Global values
-// --------------------------------------------------
-
 $header-height:     90px;
 $btn-border-radius: 4px;
 $el-border-radius:  6px;
-// colors
-// -------------------------
 
-$white: 					#fff;
+// Colors
-$black:                 	#000;
+$white:        #FFFFFF;
+$black:        #000000;
 $gray:         #929199;
 $light-gray:   #C2C1C7;
 $faint-gray:   #E3E3EA;
 $dark-blue:    #00ABE0;
 $blue:         #00BFE0;
 $light-black:  #242424;
-$orange:               		#e78c5b;
+$orange:       #E78C5B;
-$green:                 	#5be764;
+$green:        #5BE764;
-$gray-darker: 				#555;
+$gray-darker:  #555555;
-$gray: 						#777;
+$gray:         #777777;
 $gray-light:   #939393;
 $gray-lighter: #979797;
-$red: 						#dd4e58;
+$red:          #DD4E58;
-$red-dark:           		#c5454e;
+$red-dark:     #C5454E;
-$purple:   				    #822ff7;
+$purple:       #822FF7;
-$light-purple:				#f7f3f9;
-$btn-color:  				#4592C5;
-
-
-// Scaffolding
-// -------------------------
-$body-bg:               	#fff;
-$text-color:            	$gray;
-
-// Links
-// -------------------------
-$link-color:            	$red-dark;
-$link-hover-color:      	darken($link-color, 15%);
 
 // Typography
-// -------------------------
 $font-family-klavika:   'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
-$font-weight-xl:  		    300;
+$font-family-monospace: 'Fira Mono', monospace;
+$font-size:             15px;
 $font-weight-reg:       400;
-$font-weight-b:  		      600;
+$font-weight-bold:      600;
 
-$text-shadow: 				1px 1px 1px #000;
+// Body
-$shadow: 					    $text-shadow;
+$body-font-color: $gray-darker;
 
-
+// Sidebar
-//
+$sidebar-link-color: $body-font-color;
-// ----
+$sidebar-link-color-hover: $black;
-$imagePath: "atlas/";
+$sidebar-link-color-active: $dark-blue;
-
-//margin + padding
-$xsmall-pad: 20px;
-$small-pad: 30px;
-$med-pad: 70px;
-$large-pad: 120px;
-$xl-pad: 150px;
-
-$light-outline: #f7f7f7;

website/source/assets/stylesheets/application.scss

@@ -1,7 +1,9 @@
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 
-@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Open+Sans:300,600,400|Ubuntu+Mono");
+// Remote fonts
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
+@import url('https://fonts.googleapis.com/css?family=Fira+Mono');
 
 // Core variables and mixins
 @import '_variables';
@@ -19,7 +21,6 @@
 @import '_announcement-bnr';
 @import '_header';
 @import '_footer';
-@import '_jumbotron';
 @import '_buttons';
 @import '_sidebar';
 

website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss

@@ -47,9 +47,11 @@ $sidebar-icon-height: 20px;
   li > a {
     background-color: $link-bg;
   }
+
   li:hover > a {
     background-color: $link-hover-bg;
   }
+
   li:focus > a, li > a:focus {
     background-color: $link-bg;
   }

website/source/index.html.erb

@@ -1,31 +1,21 @@
 <%= partial "layouts/sidebar" %>
 
-<div id="hero">
+<div id="demo-app"></div>
-	<div class="container">
+
+<div id="container" class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
   <div class="row">
-			<div class="col-md-offset-3 col-md-6">
+    <img src="<%= image_path("logo-header.svg") %>" alt="Vault" height="80">
-				<div id="logo-lockup">
+    <span id="tag-line">A tool for managing secrets</span>
-					<div class="keys">
+
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-						<span></span>
-					</div>
-				</div>
-				<h2 id="tag-line">A tool for managing secrets.</h2>
     <div>
       <a class="v-btn blue lrg started" href="/intro">Get Started</a>
       <a class="v-btn black lrg terminal" href="/#/demo/0">Launch Interactive Tutorial</a>
     </div>
+
     <div id="diagram"></div>
+
     <p>
-				<span class="strong">Vault</span> secures, stores, and tightly
+      <strong>Vault</strong> secures, stores, and tightly
       controls access to tokens, passwords, certificates, API keys,
       and other secrets in modern computing. Vault handles leasing,
       key revocation, key rolling, and auditing. Through a unified
@@ -35,21 +25,13 @@
       more.
     </p>
   </div>
-		</div>
-	</div>
-</div>
 
-<div id="demo-app"></div>
-
-<div id="content">
-	<div class="container">
   <div class="row">
-			<div class="col-md-offset-3 col-md-6">
+    <h2 class="features-header">Features</h2>
-				<h2 class="featuer-header">Features</h2>
 
     <div id="crud" class="feature">
       <div class="graphic"></div>
-					<h3 class="">Secret Storage</h3>
+      <h3 class="feature-header">Secret Storage</h3>
       <p>
         Vault can store your existing secrets, or it can
         dynamically generate new secrets to control access to
@@ -64,11 +46,13 @@
       <div class="feature-footer">
         <a class="v-btn black sml" href="/intro/use-cases.html">Learn more</a>
       </div>
-				</div> <!-- .feature -->
+    </div>
+  </div>
 
+  <div class="row">
     <div id="key" class="feature">
       <div class="graphic"></div>
-					<h3 class="">Key Rolling</h3>
+      <h3 class="feature-header">Key Rolling</h3>
       <p>
         Secrets you store within Vault can be updated at any time.
         If using Vault's encryption-as-a-service functionality, the
@@ -81,11 +65,13 @@
       <div class="feature-footer">
         <a class="v-btn black sml" href="/docs/concepts/lease.html">Learn more</a>
       </div>
-				</div> <!-- .feature -->
+    </div>
+  </div>
 
+  <div class="row">
     <div id="audit" class="feature">
       <div class="graphic"></div>
-					<h3 class="">Audit Logs</h3>
+      <h3 class="feature-header">Audit Logs</h3>
       <p>
         Vault stores a detailed audit log of all authenticated
         client interaction: authentication, token creation, secret
@@ -97,18 +83,13 @@
       <div class="feature-footer">
         <a class="v-btn black sml" href="/docs/audit/index.html">Learn more</a>
       </div>
-				</div> <!-- .feature -->
+    </div>
-
+  </div>
-			</div> <!-- .col -->
-		</div> <!-- .row -->
 
   <div class="row">
-			<div class="col-sm-offset-1 col-sm-10 col-xs-12">
     <div id="cta">
       <a class="v-btn black sml" href="/intro/index.html">Get Started with Vault</a>
       <p class="cta-black">Completely free and open source.</p>
-				</div><!-- #cta -->
+    </div>
-			</div> <!-- .col -->
+  </div>
-		</div> <!-- .row -->
+</div>
-	</div> <!-- /container -->
-</div> <!-- #features -->