new headers, ad placements, intro paragraphs on several pages, etc

docs/_layouts/default.html

@@ -11,47 +11,7 @@
       </div>
     </a>
 
-    {% include nav-docs.html %}
-
-    <div class="bs-docs-header" id="content">
-      <div class="bs-docs-container">
-        {% if page.url contains "getting-started" %}
-          <h1>Getting started</h1>
-          <p class="lead">Learn how to quickly start a new project with Bootstrap with downloads, basic templates and examples, and more.</p>
-        {% elsif page.url contains "layout" %}
-          <h1>Layout</h1>
-          <p class="lead">Grid system, containers, media object, and responsive utilities for organization pages.</p>
-          {% elsif page.url contains "content" %}
-          <h1>Components</h1>
-          <p class="lead">
-            Styles and patterns for common HTML elements like typography, tables, forms, and more.
-          </p>
-          {% elsif page.url contains "components" %}
-          <h1>Components</h1>
-          <p class="lead">
-            Custom design patterns built as reusable components, including dropdowns, input groups, navigation, alerts, and more.
-          </p>
-          {% elsif page.url contains "javascript" %}
-          <h1>JavaScript</h1>
-          <p class="lead">Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.</p>
-        {% elsif page.url contains "examples" %}
-          <h1>Examples</h1>
-          <p class="lead">Build on the basic template above with Bootstrap's many components. Customize and adapt Bootstrap to suit your individual project's needs.</p>
-        {% elsif page.url contains "about" %}
-          <h1>About</h1>
-          <p class="lead">Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.</p>
-        {% elsif page.url contains "migration" %}
-          <h1>Migration</h1>
-          <p class="lead">Bootstrap 4 is not backwards compatible with v3.x.x. Use this section as a general guide to upgrading from v3.x.x to v4.0.0.</p>
-        {% endif %}
-
-        {% include ads.html %}
-      </div>
-    </div>
-
-    <div class="bs-docs-container bs-docs-content">
     {{ content }}
-    </div>
 
     {% include footer.html %}
   </body>

docs/_layouts/page.html

@@ -2,6 +2,10 @@
 layout: default
 ---
 
-<h1>{{ page.title }}</h1>
+{% include nav-docs.html %}
 
-{{ content }}
+<div class="bs-docs-container bs-docs-content">
+  {% include ads.html %}
+  <h1 class="bs-docs-title">{{ page.title }}</h1>
+  {{ content }}
+</div>

docs/assets/scss/docs.scss

@@ -329,11 +329,12 @@ body {
   overflow: hidden; /* clearfix */
   font-size: .8rem !important;
   line-height: 1rem !important;
-  color: $bs-purple-light !important;
+  color: $gray !important;
   text-align: left;
-  background: transparent !important;
+  background: #f5f5f5 !important;
-  border: solid #866ab3 !important;
+  border: 0 !important;
-  border-width: 1px 0 !important;
+  // border: solid #e5e5e5 !important;
+  // border-width: 1px 0 !important;
 }
 .carbonad-img {
   margin: 0 !important;
@@ -356,7 +357,11 @@ body {
 }
 .carbonad-text a,
 .carbonad-tag a {
-  color: #fff !important;
+  color: $gray !important;
+
+  &:hover {
+    color: $brand-primary !important;
+  }
 }
 .carbonad #azcarbon > img {
   display: none; // hide what I assume are tracking images
@@ -394,15 +399,22 @@ body {
 
 @media (min-width: 992px) {
   .carbonad {
-    position: absolute;
+    float: right;
-    top: 2rem;
-    right: 4rem;
     width: 330px !important;
     padding: 1rem !important;
-    margin: 0 !important;
+    margin: .5rem 0 1rem 2rem !important;
+  }
+  .bs-docs-masthead {
+    .carbonad {
+      float: none;
+      margin: 0 !important;
+      color: $bs-purple-light !important;
+      border-color: #866ab3 !important;
+    }
+    .carbonad-text a,
+    .carbonad-tag a {
+      color: #fff !important;
     }
-  .bs-docs-masthead .carbonad {
-    position: static;
   }
 }
 
@@ -548,7 +560,7 @@ body {
   }
 
   @media (min-width: 992px) {
-    padding: 2rem 4rem;
+    padding: 4rem;
   }
 
   > table {
@@ -776,26 +788,9 @@ body {
 //
 
 .bs-docs-content {
-  > h1 {
-    padding-top: 2rem;
-    margin-top: 3rem;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-     + p {
-      font-size: 1.25rem;
-      font-weight: 300;
-    }
-  }
-
   > h2 {
     margin-top: 3rem;
-    margin-bottom: 1.5rem;
     font-weight: normal;
-    padding-bottom: 1rem;
-    border-bottom: .065rem solid #eee;
   }
 
   > h3 {
@@ -803,6 +798,16 @@ body {
   }
 }
 
+.bs-docs-title {
+  margin-right: 23rem;
+
+  + p {
+    margin-right: 23rem;
+    font-size: 1.25rem;
+    font-weight: 300;
+  }
+}
+
 
 //
 // Callouts

docs/components/button-dropdown.md

@@ -3,7 +3,7 @@ layout: page
 title: Button dropdown
 ---
 
-Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper menu markup.
+Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.
 
 <div class="bs-callout bs-callout-danger">
   <h4>Plugin dependency</h4>

docs/components/jumbotron.md

@@ -5,6 +5,8 @@ title: Jumbotron
 
 A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
 
+## Example
+
 {% example html %}
 <div class="jumbotron">
   <h1 class="jumbotron-heading">Hello, world!</h1>

docs/components/page-header.md

@@ -5,6 +5,8 @@ title: Page header
 
 A simple shell for an `h1` to appropriately space out and segment sections of content on a page. It can utilize the `h1`'s default `small` element, as well as most other components (with additional styles).
 
+## Example
+
 {% example html %}
 <div class="page-header">
   <h1>Example page header <small>Subtext for header</small></h1>

docs/content/buttons.md

@@ -3,7 +3,11 @@ layout: page
 title: Buttons
 ---
 
-Use any of the available button classes to quickly create a styled button.
+Buttons are used to execute actions in forms, dialogs, and more. Use any of the available button classes to quickly create a styled button.
+
+## Examples
+
+Bootstrap includes six predefined button styles, each serving its own semantic purpose.
 
 {% example html %}
 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

docs/getting-started/contents.md

@@ -3,7 +3,7 @@ layout: page
 title: Contents
 ---
 
-Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
+Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.
 
 <div class="bs-callout bs-callout-warning" id="jquery-required">
   <h4>jQuery required</h4>

docs/getting-started/quick-start.md

@@ -3,7 +3,9 @@ layout: page
 title: Quick start
 ---
 
-Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks. Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
+Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks.
+
+Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
 
 **Disabled for v4 during alpha releases.**
 

docs/getting-started/support.md

@@ -1,9 +1,9 @@
 ---
 layout: page
-title: Browser and device support
+title: Supported platforms
 ---
 
-Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
+Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.
 
 ### Supported browsers
 

docs/layout/containers.md

@@ -3,11 +3,9 @@ layout: page
 title: Containers
 ---
 
-Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose from one of two containers—fixed width or fluid width—to use in your projects.
+Bootstrap requires a containing element to wrap site contents and house our grid system. Choose from the fixed or fluid width variation.
 
-Containers *can* be nested, but be aware that most layouts don't require it.
+Use `.container` for a responsive fixed width container. This will center content withing the viewport and apply the appropriate `width` for a given device size. **Containers *can* be nested, but be aware that most layouts don't require it.**
-
-Use `.container` for a responsive fixed width container. This will center content withing the viewport and apply the appropriate `width` for a given device size.
 
 {% highlight html %}
 <div class="container">

docs/layout/grid.md

@@ -3,7 +3,9 @@ layout: page
 title: Grid system
 ---
 
-Bootstrap includes a powerful grid system for building layouts of all shapes and sizes. It's based on a 12 column layout and features multiple tiers for different device sizes. Put it to work with our predefined classes or semantic mixins. Plus, it's mobile-first!
+Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout.
+
+There are multiple tiers for different device sizes, available via our predefined classes or semantic mixins.
 
 ### Quick start
 

docs/layout/media-queries.md

@@ -3,9 +3,9 @@ layout: page
 title: Media queries
 ---
 
-Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components. Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices.
+Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.
 
-Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
+Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
 
 {% highlight scss %}
 /* Extra small devices (portrait phones, less than ???px) */

docs/layout/media.md

@@ -3,7 +3,7 @@ layout: page
 title: Media
 ---
 
-Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
+Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
 
 ### Default media