docs tweaks for responsive

docs/assets/scss/_featurettes.scss

@@ -4,7 +4,7 @@
   font-size: 1rem;
   line-height: 1.5;
   color: #555;
-  // text-align: center;
+  text-align: center;
   background-color: #fff;
   border-top: 1px solid #eee;
 
@@ -12,6 +12,10 @@
     text-align: left;
   }
 
+  @include media-breakpoint-up(sm) {
+    text-align: left;
+  }
+
   @include media-breakpoint-up(md) {
     .col-sm-6:first-child {
       padding-right: ($grid-gutter-width * 1.5);
@@ -29,13 +33,18 @@
   color: #333;
 
   + .lead {
-    font-size: 1.5rem;
+    font-size: 1rem;
     margin-bottom: 2rem;
   }
 }
 .half-rule {
   width: 6rem;
-  margin: 2.5rem 0;
+  margin: 2.5rem auto;
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
 }
 .bd-featurette h4 {
   margin-top: 1rem;
@@ -69,11 +78,13 @@
   }
   .bd-featurette-title {
     font-size: 2.5rem;
+
+    + .lead {
+      font-size: 1.5rem;
+    }
   }
   .bd-featurette .lead {
     max-width: 80%;
-    // margin-right: auto;
-    // margin-left: auto;
   }
   .bd-featurette .img-responsive {
     margin-top: 0;

docs/assets/scss/_masthead.scss

@@ -1,6 +1,6 @@
 .bd-masthead {
   position: relative;
-  padding: ($grid-gutter-width / 2);
+  padding: 3rem ($grid-gutter-width / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
   background: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
@@ -21,7 +21,7 @@
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 2rem;
-    font-size: 1rem;
+    font-size: 1.25rem;
     color: #fff;
   }
 

docs/assets/scss/_page-header.scss

@@ -1,5 +1,5 @@
 .bd-pageheader {
-  padding: 2rem .75rem;
+  padding: 2rem ($grid-gutter-width / 2);
   margin-bottom: 1.5rem;
   color: $bd-purple-light;
   text-align: center;
@@ -17,7 +17,8 @@
 
   p {
     margin-bottom: 0;
-    font-size: 1.5rem;
+    font-size: 1.25rem;
+    font-weight: 300;
   }
 
   @include media-breakpoint-up(sm) {
@@ -35,6 +36,10 @@
     h1 {
       font-size: 4rem;
     }
+
+    p {
+      font-size: 1.5rem;
+    }
   }
 
   @include media-breakpoint-up(lg) {

docs/index.html

@@ -21,14 +21,14 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
     <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
 
     <div class="row">
-      <div class="col-sm-6">
+      <div class="col-sm-6 m-b-lg">
         <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-bs btn-outline" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
         </p>
       </div>
-      <div class="col-sm-6">
+      <div class="col-sm-6 m-b-lg">
         <h4>Bootstrap CDN</h4>
         <p>When you just need to include Bootstrap's compiled CSS and JS, use the Bootstrap CDN, free from the Max CDN folks.</p>
 {% comment %}
@@ -41,7 +41,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
       </div>
     </div>
 
-    <hr class="half-rule">
+    <hr class="half-rule m-t-0">
 
     <p><strong>Looking for something simpler?</strong> Customized builds of Bootstrap's CSS and JS are also available.</p>
     <a href="{{ site.baseurl }}/getting-started/download/#custom-builds" class="btn btn-bs btn-outline">More download options</a>
@@ -54,24 +54,24 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
     <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
 
     <div class="row">
-      <div class="col-sm-4">
+      <div class="col-sm-4 m-b-lg">
         <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
         <h4>Preprocessors</h4>
         <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
       </div>
-      <div class="col-sm-4">
+      <div class="col-sm-4 m-b-lg">
         <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
         <h4>One framework, every device.</h4>
         <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
       </div>
-      <div class="col-sm-4">
+      <div class="col-sm-4 m-b-lg">
         <img src="assets/img/components.png" alt="Components" class="img-responsive">
         <h4>Full of features</h4>
         <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
       </div>
     </div>
 
-    <hr class="half-rule">
+    <hr class="half-rule m-t-0">
 
     <p><strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
     <a href="{{ site.repo }}" class="btn btn-bs btn-outline">View the GitHub project</a>