tweak homepage copy and layout

docs/assets/css/docs.min.css

@@ -254,11 +254,14 @@
 .bd-masthead {
   position: relative;
   padding: 0.75rem;
-  text-align: center; }
+  color: #8e869d;
+  text-align: center;
+  background: -webkit-linear-gradient(to bottom, #2a2730, #3c3845);
+  background: linear-gradient(to bottom, #2a2730, #3c3845); }
   .bd-masthead .bd-booticon {
     margin: 0 auto 2rem;
-    color: #563d7c;
-    border-color: #563d7c; }
+    color: #9062d7;
+    border-color: #9062d7; }
   .bd-masthead h1 {
     font-weight: 300;
     line-height: 1; }
@@ -275,16 +278,17 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
-    color: #55595c;
-    border-color: #55595c; }
+    color: #ffe484;
+    border-color: #ffe484; }
     .bd-masthead .btn:hover {
-      color: #fff;
-      background-color: #55595c; }
+      color: #2a2730;
+      background-color: #ffe484;
+      border-color: #ffe484; }
   .bd-masthead .carbonad {
     margin-bottom: -2rem !important; }
   @media (min-width: 34em) {
     .bd-masthead {
-      padding-top: 2rem;
+      padding-top: 8rem;
       padding-bottom: 2rem; }
       .bd-masthead .btn {
         width: auto; }
@@ -312,7 +316,6 @@
   font-size: 1rem;
   line-height: 1.5;
   color: #555;
-  text-align: center;
   background-color: #fff;
   border-top: 1px solid #eee; }
   .bd-featurette .highlight {
@@ -323,10 +326,13 @@
   font-size: 2rem;
   font-weight: normal;
   color: #333; }
+  .bd-featurette-title + .lead {
+    font-size: 1.5rem;
+    margin-bottom: 2rem; }
 
 .half-rule {
   width: 6rem;
-  margin: 2.5rem auto; }
+  margin: 2.5rem 0; }
 
 .bd-featurette h4 {
   margin-top: 1rem;
@@ -358,9 +364,7 @@
   .bd-featurette-title {
     font-size: 2.5rem; }
   .bd-featurette .lead {
-    max-width: 80%;
-    margin-right: auto;
-    margin-left: auto; }
+    max-width: 80%; }
   .bd-featurette .img-responsive {
     margin-top: 0; } }
 

docs/assets/scss/_homepage.scss

@@ -92,12 +92,15 @@
 .bd-masthead {
   position: relative;
   padding: ($grid-gutter-width / 2);
+  color: $bd-graphite-light;
   text-align: center;
+  background: -webkit-linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
+  background: linear-gradient(to bottom, $bd-graphite, lighten($bd-graphite, 7.5%));
 
   .bd-booticon {
     margin: 0 auto 2rem;
-    color: $bd-purple;
-    border-color: $bd-purple;
+    color: $bd-purple-bright;
+    border-color: $bd-purple-bright;
   }
 
   h1 {
@@ -122,12 +125,13 @@
     padding: 1rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
-    color: $gray;
-    border-color: $gray;
+    color: $bd-yellow;
+    border-color: $bd-yellow;
 
     &:hover {
-      color: #fff;
-      background-color: $gray;
+      color: $bd-graphite;
+      background-color: $bd-yellow;
+      border-color: $bd-yellow;
     }
   }
 
@@ -136,7 +140,7 @@
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 2rem;
+    padding-top: 8rem;
     padding-bottom: 2rem;
 
     .btn {
@@ -187,7 +191,7 @@
   font-size: 1rem;
   line-height: 1.5;
   color: #555;
-  text-align: center;
+  // text-align: center;
   background-color: #fff;
   border-top: 1px solid #eee;
 
@@ -201,10 +205,15 @@
   font-size: 2rem;
   font-weight: normal;
   color: #333;
+
+  + .lead {
+    font-size: 1.5rem;
+    margin-bottom: 2rem;
+  }
 }
 .half-rule {
   width: 6rem;
-  margin: 2.5rem auto;
+  margin: 2.5rem 0;
 }
 .bd-featurette h4 {
   margin-top: 1rem;
@@ -241,8 +250,8 @@
   }
   .bd-featurette .lead {
     max-width: 80%;
-    margin-right: auto;
-    margin-left: auto;
+    // margin-right: auto;
+    // margin-left: auto;
   }
   .bd-featurette .img-responsive {
     margin-top: 0;

docs/assets/scss/docs.scss

@@ -28,6 +28,7 @@
 
 // Local docs variables
 $bd-purple:         #563d7c;
+$bd-purple-bright:  lighten(saturate($bd-purple, 25%), 25%);
 $bd-purple-light:   #cdbfe3;
 $bd-graphite:       #2a2730;
 $bd-graphite-light: lighten($bd-graphite, 40%);

docs/index.html

@@ -18,32 +18,29 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
 
 <div class="bd-featurette">
   <div class="container">
-    <h2 class="bs-docs-featurette-title">Easy to get started.</h2>
+    <h2 class="bd-featurette-title">Easy to get started.</h2>
     <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the <a href="#">Bootstrap CDN</a>.</p>
 
-    <hr class="half-rule">
+    <!-- <hr class="half-rule"> -->
 
     <div class="row">
-      <div class="col-sm-4">
-        <h4>Package managers</h4>
-        <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm.</p>
-{% highlight bash %}
-$ npm install bootstrap
-$ bower install bootstrap
-$ meteor add twbs:bootstrap
-$ composer require twbs/bootstrap
-{% endhighlight %}
+      <div class="col-sm-6">
+        <h4>Managed dependencies</h4>
+        <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our Gruntfile and readme.</p>
+        <p>
+          <a class="btn btn-primary" href="">View install methods</a>
+        </p>
       </div>
-      <div class="col-sm-4">
+      <!-- <div class="col-sm-4">
         <h4>Custom builds</h4>
         <p>Need just a part of Bootstrap? Download a custom build of the compiled CSS and JS.</p>
         <a class="btn btn-secondary" href="#">Reboot</a>
         <a class="btn btn-secondary" href="#">Grid system</a>
         <a class="btn btn-secondary" href="#">Flexbox</a>
-      </div>
-      <div class="col-sm-4">
+      </div> -->
+      <div class="col-sm-6">
         <h4>Bootstrap CDN</h4>
-        <p>Use the free Bootstrap CDN to hotlink the compiled CSS and JS.</p>
+        <p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
 {% highlight html %}
 <link rel="stylesheet" href="{{ site.cdn.css }}">
 <script src="{{ site.cdn.js }}"></script>