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

@@ -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-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item">
+  <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>
+  </a>
-  <div class="bd-brand-item inverse">
+  <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>
+  </a>
-  <div class="bd-brand-item inverse">
+  <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-swatches">
+  <div class="color-swatch bd-purple"></div>
-    <div class="color-swatch bd-purple"></div>
+  <div class="color-swatch bd-purple-light"></div>
-    <div class="color-swatch bd-purple-light"></div>
+  <div class="color-swatch bd-purple-lighter"></div>
-    <div class="color-swatch bd-purple-lighter"></div>
+  <div class="color-swatch bd-gray"></div>
-    <div class="color-swatch bd-gray"></div>
-  </div>
 </div>

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">
+<div class="bd-example">
-  <table class="table">
+  <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
-    <tbody>
+  <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
-      <tr>
+  <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
-        <td><span class="display-1">Display 1</span></td>
+  <div class="display-4">Display 4</div>
-      </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>
 
 {{< highlight html >}}

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>

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.

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;
 }

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);
   }
 

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;
+  width: 100%;
-  text-align: center;
+  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;

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();
 

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;
   }
 }

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;
+    position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
     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

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 {

site/static/docs/4.3/assets/scss/_masthead.scss

@@ -1,8 +1,7 @@
 // stylelint-disable declaration-no-important
 
 .bd-masthead {
-  position: relative;
+  padding: 3rem 0;
-  padding: 3rem ($grid-gutter-width / 2);
   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: 5rem 0;
-    padding-bottom: 5rem;
-
-    .carbonad {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .carbonad {
-      margin-top: 3rem !important;
-    }
   }
 }
 
@@ -74,7 +56,3 @@
   width: 6rem;
   margin: 2rem 0;
 }
-
-.masthead-followup {
-  .bd-clipboard { display: none; }
-}

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: "";
+    line-height: 0; // Align in the middle
-    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");
+    content: escape-svg($sidebar-colapse-icon);
-    background-repeat: no-repeat;
-    background-position: center center;
-    opacity: .5;
   }
 
   &.active {

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;
     }
   }
 }

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;

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.