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

diff --git a/site/content/docs/4.3/about/brand.md b/site/content/docs/4.3/about/brand.md
index 9d44edf9c41124d8cdb2a6bcf65c09cd8cb525f7..0b251574fe3901d3dd561e370d4b9b4b3ef09a40 100644 (file)
--- 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 c8f5c1a69531c89e5846312b553ae76c8a673bd7..aa7247e6b84bf90f111d5c5cae16bc85491000ac 100644 (file)
--- 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 8f8efe5e918cba35000eec544139944e97e1879c..c48e913f79de8d010ac65cbede7ef68965f57c7a 100644 (file)
--- 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 1b6c488ffe8b2c0f3d50b81e6a68b626a5debbc3..8aa3cff68ce23a8a9aa1c27c3bcb2e89b7cbbb1b 100644 (file)
--- 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 da682b952f81d5f87f40ecc59576f1d938fb0676..026d1a17a7a172b17f4965a443eabf5f419f4ece 100644 (file)
--- 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 23781da12ab392a6d86ef121291ebc066ef3fb41..f86d2fb4b9c47ca798b68c670ce4faa63569e54e 100644 (file)
--- 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 c3ba73c3e3a67990c9de6e2dd91c13844077e509..be6aa91ffbabbe0478881129a8ce0599d928f121 100644 (file)
--- 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 da7cf8730358e37c3089a2de895beb09eff743b0..a4682355735b12700ad3feaf951eb7332a78befb 100644 (file)
--- 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 569094321b47449cbef13eaae9195a5bcedacdd1..c893533973008d1143f4703fd7c5762e4970a6b5 100644 (file)
--- 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 41aa04fb7156ee084f550afe4d4ebd55f410ce59..71822578f875dfb054539ea806d8a8b04cefbce8 100644 (file)
--- 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 29d31df3a2289d485a6a1ccb573c389f1d37b26b..c5f9c1b1007b6794166e442d78f5f0a1ea895eed 100644 (file)
--- 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 261f37eb49fbeb1d521ebaea0cef3c0536c92e1a..71121746cd4ea2b71d4430dbc022463f9a88d1b2 100644 (file)
--- 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 bd88c1cb27f224034ca034081e464941403a6e1d..5cb25bbc368c739220a9f38ec50a8de5502883a0 100644 (file)
--- 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 38cb628ae4622420946f0735d285bb9e9f4f0c82..7f9696b2790c6bdf55cc99be9a97dfdcad933f2f 100644 (file)
--- 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 c4f26e67a7614429d9ad5a9e54fb2e18f4e8d3f6..2ad4f8338d189158b936965d43732473357fde44 100644 (file)
--- 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 a71fd77c9b7ab84f1c13c138448b7f06a906a587..b558796544f8979b9e56a3f672b489e65ff5713a 100644 (file)
--- 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.