Merge branch 'new-home' into v4-dev

_includes/footer.html

@@ -1,5 +1,5 @@
 <footer class="bd-footer text-muted">
-  <div class="container">
+  <div class="container-fluid p-3 p-md-5">
     <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
       <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>

_layouts/simple.html

@@ -2,16 +2,11 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-center text-sm-left">
-  <div class="container">
-    <h1>{{ page.title }}</h1>
-    <p class="lead">
-      Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-    </p>
+<div class="container my-5">
+  <main class="bd-content" role="main">
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
+    <p class="bd-lead">{{ page.description }}</p>
     {% include ads.html %}
-  </div>
-</div>
-
-<div class="container bd-content">
-  {{ content }}
+    {{ content }}
+  </main>
 </div>

assets/scss/_ads.scss

@@ -5,38 +5,26 @@
 //
 
 #carbonads {
+  position: static;
   display: block;
+  max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 50px -15px 0;
+  margin: 2rem 0;
   overflow: hidden;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.4;
   text-align: left;
-  border: solid #866ab3;
-  border-width: 1px 0 0;
+  background-color: rgba(0,0,0,.05);
 
   a {
-    color: #fff;
+    color: #333;
     text-decoration: none;
   }
 
   @include media-breakpoint-up(sm) {
     max-width: 330px;
-    margin: 50px auto 0;
-    border-width: 1px;
     border-radius: 4px;
   }
-
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: 0;
-    right: 15px;
-    margin-top: 0;
-
-    .bd-masthead & {
-      position: static;
-    }
-  }
 }
 
 .carbon-img {
@@ -46,24 +34,5 @@
 
 .carbon-poweredby {
   display: block;
-  color: #cdbfe3 !important;
-}
-
-.bd-content {
-  #carbonads {
-    position: static;
-    max-width: 400px;
-    margin: 2rem 0;
-    line-height: 1.4;
-    background-color: #f5f5f5;
-    border: 0;
-
-    a {
-      color: #333;
-    }
-
-    .carbon-poweredby {
-      color: #777 !important;
-    }
-  }
+  color: #777 !important;
 }

assets/scss/_content.scss

@@ -110,3 +110,6 @@
     font-size: 1.5rem;
   }
 }
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }

assets/scss/_footer.scss

@@ -3,8 +3,6 @@
 //
 
 .bd-footer {
-  padding: 4rem 0;
-  margin-top: 4rem;
   font-size: 85%;
   text-align: center;
   background-color: #f7f7f7;

assets/scss/_masthead.scss

@@ -2,83 +2,60 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
-  color: $bd-purple-light;
-  text-align: center;
-  background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
-
-  .bd-booticon {
-    margin: 0 auto 2rem;
-    color: $bd-purple-light;
-    border-color: $bd-purple-light;
-  }
+  padding: 3rem ($grid-gutter-width / 2);
+  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
-    font-weight: 300;
     line-height: 1;
   }
 
-  .lead {
-    margin-right: auto;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    font-size: 1.25rem;
-    color: #fff;
-  }
-
-  .version {
-    margin-top: -1rem;
-    margin-bottom: 2rem;
-  }
-
   .btn {
     width: 100%;
-    padding: 1rem 2rem;
+    padding: .8rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
   }
 
   .carbonad {
-    margin-bottom: -2rem !important;
+    margin-top: 0 !important;
+    margin-bottom: -3rem !important;
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 8rem;
-    padding-bottom: 2rem;
-
-    .btn {
-      width: auto;
-    }
+    padding-top: 5rem;
+    padding-bottom: 5rem;
 
     .carbonad {
       margin-bottom: 0 !important;
     }
   }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 4rem;
-
-    .bd-header {
-      margin-bottom: 4rem;
-    }
-
     h1 {
       font-size: 4rem;
     }
 
-    .lead {
-      font-size: 1.5rem;
-    }
-
     .carbonad {
       margin-top: 3rem !important;
     }
   }
+}
 
-  @include media-breakpoint-up(lg) {
-    .lead {
-      width: 85%;
-      font-size: 2rem;
-    }
+.bd-pretext {
+  overflow: hidden;
+  resize: none;
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+
+.masthead-followup {
+  .bd-clipboard { display: none; }
+
+  .highlight {
+    padding: .5rem 0;
+    background-color: transparent;
   }
 }

assets/scss/_sidebar.scss

@@ -51,7 +51,7 @@
 
 .bd-sidebar {
   order: 0;
-  background-color: #f5f2f9;
+  // background-color: #f5f2f9;
   border-bottom: 1px solid rgba(0,0,0,.1);
 
   @include media-breakpoint-up(md) {

assets/scss/docs.scss

@@ -32,7 +32,6 @@
 @import "variables";
 @import "nav";
 @import "masthead";
-@import "featurettes";
 @import "featured-sites";
 @import "ads";
 @import "content";

docs/4.0/examples/index.md

@@ -1,6 +1,7 @@
 ---
 layout: simple
 title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
 redirect_from:
   - /examples/
 ---

docs/4.0/extend/icons.md

@@ -17,6 +17,7 @@ We've tested and used these icon sets ourselves.
 ## More options
 While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
 
+- [Bytesize](https://github.com/danklammer/bytesize-icons)
 - [Google Material icons](https://material.io/icons/)
 - [Ionicons](http://ionicons.com/)
 - [Feather](http://colebemis.com/feather/)

docs/4.0/utilities/borders.md

@@ -30,6 +30,7 @@ Change the border color using utilities built on our theme colors.
 {% example html %}
 {% for color in site.data.theme-colors %}
 <span class="border border-{{ color.name }}"></span>{% endfor %}
+<span class="border border-white"></span>
 {% endexample %}
 </div>
 

docs/4.0/utilities/colors.md

@@ -23,6 +23,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {% example html %}
 {% for color in site.data.theme-colors %}
 <div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
+<div class="p-3 mb-2 bg-white text-gray-dark">.bg-white</div>
 {% endexample %}
 
 {% callout info %}