From b6b96c174bff4b27800fb9ddec75328d1ef30322 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Fri, 30 Aug 2019 23:32:12 +0300
Subject: [PATCH] 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
---
 site/content/docs/4.3/about/brand.md          | 34 ++++++------
 site/content/docs/4.3/content/typography.md   | 22 ++------
 site/layouts/partials/footer.html             |  2 +-
 site/layouts/partials/home/masthead.html      |  2 +-
 site/static/docs/4.3/assets/scss/_ads.scss    |  4 +-
 .../static/docs/4.3/assets/scss/_algolia.scss |  2 +-
 site/static/docs/4.3/assets/scss/_brand.scss  | 27 ++--------
 .../docs/4.3/assets/scss/_callouts.scss       |  2 +-
 .../docs/4.3/assets/scss/_clipboard-js.scss   |  4 +-
 .../4.3/assets/scss/_component-examples.scss  | 53 ++-----------------
 site/static/docs/4.3/assets/scss/_footer.scss |  6 ---
 .../docs/4.3/assets/scss/_masthead.scss       | 26 +--------
 .../static/docs/4.3/assets/scss/_sidebar.scss |  9 +---
 site/static/docs/4.3/assets/scss/_subnav.scss |  2 +-
 site/static/docs/4.3/assets/scss/_toc.scss    |  2 +-
 .../docs/4.3/assets/scss/_variables.scss      |  1 +
 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 9d44edf9c4..0b251574fe 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 c8f5c1a695..aa7247e6b8 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 8f8efe5e91..c48e913f79 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 1b6c488ffe..8aa3cff68c 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 da682b952f..026d1a17a7 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 23781da12a..f86d2fb4b9 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 c3ba73c3e3..be6aa91ffb 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 da7cf87303..a468235573 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 569094321b..c893533973 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 41aa04fb71..71822578f8 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 29d31df3a2..c5f9c1b100 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 261f37eb49..71121746cd 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 bd88c1cb27..5cb25bbc36 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 38cb628ae4..7f9696b279 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 c4f26e67a7..2ad4f8338d 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 a71fd77c9b..b558796544 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.