Docs tweaks

- Simplify display headings example markup
- Simplify footer styles
- Remove z-indices hacks in the docs
- Remove redundant modal styling in docs
- Use `escape-svg()` to escape docs sidebar chevron
- Simplify sidebar chevron code
- Cleanup masthead css & fix column width between `md` & `lg`
- Easier to download logo's with the `download` attribute.
- Changed some color codes into variables
- Cleanup brands css

16 files changed, 43 insertions, 155 deletions

diff --git a/site/content/docs/4.3/about/brand.md b/site/content/docs/4.3/about/brand.md
index 9d44edf9c..0b251574f 100644
--- a/site/content/docs/4.3/about/brand.md
+++ b/site/content/docs/4.3/about/brand.md
@@ -12,7 +12,7 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 
 Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
 
-<div class="bd-brand-logos">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
   <div class="bd-brand-item">
     <img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
   </div>
@@ -20,7 +20,7 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
     <img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
   </div>
 </div>
-<div class="bd-brand-logos">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
   <div class="bd-brand-item">
     <span class="h1">Bootstrap</span>
   </div>
@@ -31,25 +31,25 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
 
 ## Download mark
 
-Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
+Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
 
-<div class="bd-brand-logos">
-  <div class="bd-brand-item">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo">
     <img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
-  </div>
-  <div class="bd-brand-item inverse">
+  </a>
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo">
     <img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
-  </div>
-  <div class="bd-brand-item inverse">
+  </a>
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo">
     <img class="svg" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
-  </div>
+  </a>
 </div>
 
 ## Name
 
 The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
 
-<div class="bd-brand-logos">
+<div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
   <div class="bd-brand-item">
     <span class="h3">Bootstrap</span>
     <strong class="text-success">Right</strong>
@@ -68,11 +68,9 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
 
 Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
 
-<div class="bd-brand">
-  <div class="color-swatches">
-    <div class="color-swatch bd-purple"></div>
-    <div class="color-swatch bd-purple-light"></div>
-    <div class="color-swatch bd-purple-lighter"></div>
-    <div class="color-swatch bd-gray"></div>
-  </div>
+<div class="color-swatches">
+  <div class="color-swatch bd-purple"></div>
+  <div class="color-swatch bd-purple-light"></div>
+  <div class="color-swatch bd-purple-lighter"></div>
+  <div class="color-swatch bd-gray"></div>
 </div>
diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md
index c8f5c1a69..aa7247e6b 100644
--- a/site/content/docs/4.3/content/typography.md
+++ b/site/content/docs/4.3/content/typography.md
@@ -104,23 +104,11 @@ Use the included utility classes to recreate the small secondary heading text fr
 
 Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
 
-<div class="bd-example bd-example-type">
-  <table class="table">
-    <tbody>
-      <tr>
-        <td><span class="display-1">Display 1</span></td>
-      </tr>
-      <tr>
-      <td><span class="display-2">Display 2</span></td>
-      </tr>
-      <tr>
-      <td><span class="display-3">Display 3</span></td>
-      </tr>
-      <tr>
-      <td><span class="display-4">Display 4</span></td>
-      </tr>
-    </tbody>
-  </table>
+<div class="bd-example">
+  <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
+  <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
+  <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
+  <div class="display-4">Display 4</div>
 </div>
 
 {{< highlight html >}}
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 8f8efe5e9..c48e913f7 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="bd-footer p-3 p-md-5 mt-5 text-muted">
+<footer class="bd-footer p-3 p-md-5 mt-5 text-muted bg-light text-center text-sm-left">
   <div class="container">
     <ul class="bd-footer-links">
       <li><a href="{{ .Site.Params.repo }}">GitHub</a></li>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 1b6c488ff..8aa3cff68 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -4,7 +4,7 @@
       <div class="col-6 mx-auto col-md-4 order-md-2 col-lg-5">
         {{ partial "icons/bootstrap-stack.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "512" "height" "430") }}
       </div>
-      <div class="col-md-7 order-md-1 col-lg-6 text-center text-md-left">
+      <div class="col-md-8 order-md-1 col-lg-6 text-center text-md-left">
         <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
         <p class="lead lead-lg">
           Build responsive, mobile-first projects for the web with the world’s most popular open source front-end component library.
diff --git a/site/static/docs/4.3/assets/scss/_ads.scss b/site/static/docs/4.3/assets/scss/_ads.scss
index da682b952..026d1a17a 100644
--- a/site/static/docs/4.3/assets/scss/_ads.scss
+++ b/site/static/docs/4.3/assets/scss/_ads.scss
@@ -17,7 +17,7 @@
   background-color: rgba(0, 0, 0, .05);
 
   a {
-    color: #333;
+    color: $gray-800;
     text-decoration: none;
   }
 
@@ -35,5 +35,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: #777 !important;
+  color: $gray-700 !important;
 }
diff --git a/site/static/docs/4.3/assets/scss/_algolia.scss b/site/static/docs/4.3/assets/scss/_algolia.scss
index 23781da12..f86d2fb4b 100644
--- a/site/static/docs/4.3/assets/scss/_algolia.scss
+++ b/site/static/docs/4.3/assets/scss/_algolia.scss
@@ -128,7 +128,7 @@
     padding: .75rem 1rem 0;
     @include font-size(.75rem, true);
     line-height: 1 !important;
-    color: #767676 !important;
+    color: $gray-600 !important;
     border-top: 1px solid rgba(0, 0, 0, .1);
   }
 
diff --git a/site/static/docs/4.3/assets/scss/_brand.scss b/site/static/docs/4.3/assets/scss/_brand.scss
index c3ba73c3e..be6aa91ff 100644
--- a/site/static/docs/4.3/assets/scss/_brand.scss
+++ b/site/static/docs/4.3/assets/scss/_brand.scss
@@ -4,13 +4,7 @@
 
 // Logo series wrapper
 .bd-brand-logos {
-  display: table;
-  width: 100%;
-  margin-bottom: 1rem;
-  overflow: hidden;
   color: $bd-purple;
-  background-color: #f9f9f9;
-  @include border-radius();
 
   .inverse {
     color: $white;
@@ -20,32 +14,18 @@
 
 // Individual items
 .bd-brand-item {
-  padding: 4rem 0;
-  text-align: center;
+  width: 100%;
+  padding: 4rem 1rem;
 
   + .bd-brand-item {
     border-top: 1px solid $white;
   }
 
-  // Heading content within
-  h1,
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
   @include media-breakpoint-up(md) {
-    display: table-cell;
-    width: 1%;
-
     + .bd-brand-item {
       border-top: 0;
       border-left: 1px solid $white;
     }
-
-    h1 {
-      @include font-size(4rem);
-    }
   }
 }
 
@@ -55,8 +35,8 @@
 //
 
 .color-swatches {
+  display: flex;
   margin: 0 -5px;
-  overflow: hidden; // clearfix
 
   // Docs colors
   .bd-purple {
@@ -74,7 +54,6 @@
 }
 
 .color-swatch {
-  float: left;
   width: 4rem;
   height: 4rem;
   margin-right: .25rem;
diff --git a/site/static/docs/4.3/assets/scss/_callouts.scss b/site/static/docs/4.3/assets/scss/_callouts.scss
index da7cf8730..a46823557 100644
--- a/site/static/docs/4.3/assets/scss/_callouts.scss
+++ b/site/static/docs/4.3/assets/scss/_callouts.scss
@@ -6,7 +6,7 @@
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid #eee;
+  border: 1px solid $gray-200;
   border-left-width: .25rem;
   @include border-radius();
 
diff --git a/site/static/docs/4.3/assets/scss/_clipboard-js.scss b/site/static/docs/4.3/assets/scss/_clipboard-js.scss
index 569094321..c89353397 100644
--- a/site/static/docs/4.3/assets/scss/_clipboard-js.scss
+++ b/site/static/docs/4.3/assets/scss/_clipboard-js.scss
@@ -24,13 +24,13 @@
   display: block;
   padding: .25rem .5rem;
   @include font-size(.75em);
-  color: #818a91;
+  color: $gray-800;
   background-color: transparent;
   border: 0;
   @include border-radius();
 
   &:hover {
     color: $white;
-    background-color: #027de7;
+    background-color: $primary;
   }
 }
diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss
index 41aa04fb7..71822578f 100644
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/site/static/docs/4.3/assets/scss/_component-examples.scss
@@ -125,29 +125,6 @@
   }
 }
 
-// Typography
-.bd-example-type {
-  .table {
-    td {
-      padding: 1rem 0;
-      border-color: #eee;
-    }
-    tr:first-child td {
-      border-top: 0;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
 // Images
 .bd-example {
   > svg + svg,
@@ -172,6 +149,7 @@
 .bd-example > .list-group {
   max-width: 400px;
 }
+
 .bd-example > [class*="list-group-horizontal"] {
   max-width: 100%;
 }
@@ -183,6 +161,7 @@
     position: static;
     margin: -1rem -1rem 1rem;
   }
+
   .fixed-bottom {
     position: static;
     margin: 1rem -1rem -1rem;
@@ -205,38 +184,13 @@
   margin-bottom: .5rem;
 }
 
-// Example modals
-.modal {
-  z-index: 1072;
-
-  .tooltip,
-  .popover {
-    z-index: 1073;
-  }
-}
-
-.modal-backdrop {
-  z-index: 1071;
-}
-
 .bd-example-modal {
   background-color: #fafafa;
 
   .modal {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
+    position: static;
     display: block;
   }
-
-  .modal-dialog {
-    left: auto;
-    margin-right: auto;
-    margin-left: auto;
-  }
 }
 
 // Tooltips
@@ -308,6 +262,7 @@
     background-color: transparent;
     border: 0;
   }
+
   pre code {
     @include font-size(inherit);
     color: $gray-900; // Effectively the base text color
diff --git a/site/static/docs/4.3/assets/scss/_footer.scss b/site/static/docs/4.3/assets/scss/_footer.scss
index 29d31df3a..c5f9c1b10 100644
--- a/site/static/docs/4.3/assets/scss/_footer.scss
+++ b/site/static/docs/4.3/assets/scss/_footer.scss
@@ -4,8 +4,6 @@
 
 .bd-footer {
   @include font-size(.875rem);
-  text-align: center;
-  background-color: #f7f7f7;
 
   a {
     font-weight: 600;
@@ -20,10 +18,6 @@
   p {
     margin-bottom: 0;
   }
-
-  @include media-breakpoint-up(sm) {
-    text-align: left;
-  }
 }
 
 .bd-footer-links {
diff --git a/site/static/docs/4.3/assets/scss/_masthead.scss b/site/static/docs/4.3/assets/scss/_masthead.scss
index 261f37eb4..71121746c 100644
--- a/site/static/docs/4.3/assets/scss/_masthead.scss
+++ b/site/static/docs/4.3/assets/scss/_masthead.scss
@@ -1,8 +1,7 @@
 // stylelint-disable declaration-no-important
 
 .bd-masthead {
-  position: relative;
-  padding: 3rem ($grid-gutter-width / 2);
+  padding: 3rem 0;
   background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
@@ -17,27 +16,10 @@
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
-    @include font-size(1.25rem);
-  }
-
-  .carbonad {
-    margin-top: 0 !important;
-    margin-bottom: -3rem !important;
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-
-    .carbonad {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .carbonad {
-      margin-top: 3rem !important;
-    }
+    padding: 5rem 0;
   }
 }
 
@@ -74,7 +56,3 @@
   width: 6rem;
   margin: 2rem 0;
 }
-
-.masthead-followup {
-  .bd-clipboard { display: none; }
-}
diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index bd88c1cb2..5cb25bbc3 100644
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -40,14 +40,9 @@
 .bd-sidenav-group {
   &.has-children .bd-sidenav-group-link::before {
     display: inline-block;
-    width: .875rem;
-    height: .875rem;
     margin-right: .25rem;
-    content: "";
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center center;
-    opacity: .5;
+    line-height: 0; // Align in the middle
+    content: escape-svg($sidebar-colapse-icon);
   }
 
   &.active {
diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss
index 38cb628ae..7f9696b27 100644
--- a/site/static/docs/4.3/assets/scss/_subnav.scss
+++ b/site/static/docs/4.3/assets/scss/_subnav.scss
@@ -18,7 +18,7 @@
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: 1071; // over everything in bootstrap
+      z-index: $zindex-sticky;
     }
   }
 }
diff --git a/site/static/docs/4.3/assets/scss/_toc.scss b/site/static/docs/4.3/assets/scss/_toc.scss
index c4f26e67a..2ad4f8338 100644
--- a/site/static/docs/4.3/assets/scss/_toc.scss
+++ b/site/static/docs/4.3/assets/scss/_toc.scss
@@ -3,7 +3,7 @@
 .bd-toc nav {
   padding-top: .125em;
   padding-bottom: .125em;
-  border-left: .25em solid #eee;
+  border-left: .25em solid $gray-200;
 
   > ul {
     padding-left: .5rem;
diff --git a/site/static/docs/4.3/assets/scss/_variables.scss b/site/static/docs/4.3/assets/scss/_variables.scss
index a71fd77c9..b55879654 100644
--- a/site/static/docs/4.3/assets/scss/_variables.scss
+++ b/site/static/docs/4.3/assets/scss/_variables.scss
@@ -10,6 +10,7 @@ $bd-info:          #5bc0de;
 $bd-warning:       #f0ad4e;
 $bd-danger:        #d9534f;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$sidebar-colapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
 
 // Enable responsive font sizes for font sizes defined in the docs
 // The weird if test is made as a workaround to prevent a false fusv error.