Visual design changes to header

The original text over the busy image is a bit hard to read. This
commit moves the tagline below and slightly reduces the size of the
image to make room

website/source/assets/stylesheets/_docs.scss

@@ -99,7 +99,7 @@ body.layout-intro {
         display: block;
 
         li.active a {
-          font-weight: $font-weight-open-sans-b;
+          font-weight: $font-weight-b;
         }
 
         li a {
@@ -123,7 +123,7 @@ body.layout-intro {
           }
 
           li.active a {
-            font-weight: $font-weight-open-sans-b;
+            font-weight: $font-weight-b;
           }
         }
       }
@@ -182,7 +182,6 @@ body.layout-intro {
   p, li, .alert {
     font-size: 20px;
     font-family: $font-family-open-sans;
-    font-weight: $font-weight-open-sans;
     line-height: 1.5em;
     margin: 0 0 18px;
     -webkit-font-smoothing: antialiased;

website/source/assets/stylesheets/_global.scss

@@ -13,10 +13,6 @@ body {
   font-weight: 400;
 }
 
-h1, h2, h3, h4, h5 {
-  font-family: $font-family-klavika;
-}
-
 h1 {
   font-size: 42px;
   line-height: 42px;
@@ -24,7 +20,7 @@ h1 {
 }
 
 h2 {
-  text-transform: uppercase;
+  font-size: 36px;
   margin-top: 70px;
 }
 
@@ -33,13 +29,12 @@ h1 + h2 {
 }
 
 h3 {
-  font-size: 28px;
+  font-size: 24px;
   line-height: 28px;
 }
 
 p, a {
   font-family: $font-family-open-sans;
-  font-family: $font-weight-open-sans-reg;
 }
 
 .highlight{

website/source/assets/stylesheets/_home.scss

@@ -1,11 +1,20 @@
 .page-home {
-  h1 {
+
+  h1, h2, h3, h4, h5 {
+    color: $purple-text;
+    font-family: $font-family-klavika;
+    text-transform: uppercase;
     text-align: center;
   }
 
+  p {
+    color: $purple-text;
+  }
+
   .hero {
     @include padded;
-    background: $gray-background image-url("vagrant_header_background.png") no-repeat center -80px;
+    background: $gray-background image-url("vagrant_header_background.png") no-repeat center -20px;
+    background-size: 1292px 532px;
     text-align: center;
     border-bottom: 1px solid #c6e0f0;
 
@@ -18,19 +27,13 @@
 
         h1 {
           color: $purple-text;
-          font-size: 55px;
-          font-weight: 700;
-          line-height: 60px;
-          margin-bottom: ($baseline * 4);
+          // font-size: 55px;
+          line-height: 1;
+          margin-top: 350px;
         }
 
-        h2 {
-          color: $blue-text;
-          font-size: 28px;
-          font-weight: 100;
-          letter-spacing: 1.6px;
-          line-height: 40px;
-          text-transform: none;
+        p {
+          color: $vagrant-blue;
         }
       }
 
@@ -48,12 +51,8 @@
     @include padded;
     background: $light-blue-background image-url("steps_background.png") center -120px;
 
-    h1 {
+    h2 {
       color: $blue-text;
-      text-transform: uppercase;
-      text-align: center;
-      font-size: 40px;
-      line-height: 50px;
     }
 
     hgroup {
@@ -61,11 +60,8 @@
       // width: 530px;
 
       h3 {
-        text-align: center;
-        text-transform: uppercase;
-        font-size: 40px;
+        font-weight: bold;
         margin-bottom: $baseline;
-        color: $purple-text;
       }
 
       h4 {
@@ -79,7 +75,7 @@
     @include padded;
     @include get-started-bg;
 
-    h1 {
+    h2 {
       color: $white;
     }
 
@@ -96,7 +92,7 @@
     background-color: $black;
     border-bottom: 1px solid #333;
 
-    h1 {
+    h2 {
       color: $dark-gray-text;
     }
 

website/source/index.html.erb

@@ -11,9 +11,9 @@ description: |-
       <div class="hero-content">
 
         <div class="row">
-          <div class="col-md-8 col-md-offset-2">
+          <div class="col-md-12">
             <hgroup>
-            <h1>Development<br>environments<br>made easy.</h1>
+            <h1>Development environments made easy.</h1>
             <p>Create and configure lightweight, reproducible, and portable development environments.</p>
             </hgroup>
           </div>
@@ -39,9 +39,9 @@ description: |-
     <section class="why-vagrant">
     <div class="container">
       <div class="row">
-        <h1 class="col-md-12">
+        <h2 class="col-md-12">
           Vagrant will change how you work
-        </h1>
+        </h2>
       </div>
       <div class="row">
         <div class="col-sm-8 col-sm-offset-2">
@@ -75,9 +75,9 @@ description: |-
       <div class="row">
         <div class="col-md-12">
 
-          <h1 class="all-caps">
+          <h2 class="all-caps">
             See how easy it is
-          </h1>
+          </h2>
           <pre>
 $ vagrant init hashicorp/precise64
 $ vagrant up
@@ -98,9 +98,9 @@ $ vagrant up
       <div class="container">
         <div class="row">
           <div class="customers-content col-md-12">
-            <h1 class="all-caps">
+            <h2 class="all-caps">
               Trusted by
-            </h1>
+            </h2>
             <div class="customer-logos">
               <%= image_tag "customers.png", alt: "customers", width: 941, height: 111 %>
             </div>