Update design to match v5.2.0

15 files changed, 120 insertions, 92 deletions

diff --git a/config.yml b/config.yml
index c4447d91a..999157821 100644
--- a/config.yml
+++ b/config.yml
@@ -52,6 +52,15 @@ params:
   version:              "1.8.1"
   bs_docs_version:      "5.1"
 
+  assets:
+    css:
+      # Use https://www.srihash.org to generate the hash, or use the hash from upstream
+      uri:              "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      sri:              "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+    js:
+      uri:              "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
+      sri:              "sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
+
   main:                 "https://getbootstrap.com"
   github_org:           "https://github.com/twbs"
   repo:                 "https://github.com/twbs/icons"
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
index cdf13c55a..1251ec5e3 100644
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@@ -5,7 +5,7 @@
   margin-right: auto;
   margin-left: auto;
   overflow: auto;
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
   border-radius: .25rem;
 
   @media (min-width: 992px) {
diff --git a/docs/assets/scss/_buttons.scss b/docs/assets/scss/_buttons.scss
index 25bcbbd4b..21765b5a9 100644
--- a/docs/assets/scss/_buttons.scss
+++ b/docs/assets/scss/_buttons.scss
@@ -9,7 +9,7 @@
 
   &:hover,
   &:active {
-    color: $white;
+    color: #fff;
     background-color: $bd-purple-bright;
     border-color: $bd-purple-bright;
   }
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
index fa6e9e161..5d4cbba44 100644
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@@ -24,12 +24,12 @@
   display: block;
   padding: .5em .75em .625em;
   line-height: 1;
-  color: $gray-900;
-  background-color: $gray-100;
+  color: var(--bs-gray-900);
+  background-color: var(--bs-gray-100);
   border: 0;
   border-radius: .25rem;
 
   &:hover {
-    color: $primary;
+    color: var(--bs-primary);
   }
 }
diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
index 297c31135..22d20c969 100644
--- a/docs/assets/scss/_footer.scss
+++ b/docs/assets/scss/_footer.scss
@@ -4,15 +4,15 @@
 
 .bd-footer {
   font-size: .875rem;
-  color: #63707c;
+  color: var(--bs-gray-600);
 
   a {
     font-weight: 600;
-    color: $gray-700;
+    color: var(--bs-gray-700);
 
     &:hover,
     &:focus {
-      color: $blue;
+      color: var(--bs-primary);
     }
   }
 
diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
index 9d814117d..161371391 100644
--- a/docs/assets/scss/_navbar.scss
+++ b/docs/assets/scss/_navbar.scss
@@ -2,30 +2,31 @@
   padding: .75rem 0;
   background-color: $bd-purple-bright;
 
+  @media (max-width: 1024px) {
+    .container-xxl {
+      --bs-gutter-x: #{$bd-gutter-x};
+    }
+  }
+
   .navbar-toggler {
     padding: 0;
     border: 0;
-
-    .bi {
-      width: 2rem;
-      fill: currentcolor;
-    }
   }
 
   .navbar-nav {
     .nav-link {
-      padding-right: $spacer / 4;
-      padding-left: $spacer / 4;
-      color: rgba($white, .85);
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
+      color: rgba(#fff, .85);
 
       &:hover,
       &:focus {
-        color: $white;
+        color: #fff;
       }
 
       &.active {
         font-weight: 600;
-        color: $white;
+        color: #fff;
       }
     }
   }
@@ -34,4 +35,13 @@
     width: 1rem;
     height: 1rem;
   }
+
+  .offcanvas {
+    background-color: $bd-purple-bright;
+    border-left: 0;
+
+    @media (max-width: 1024px) {
+      box-shadow: $box-shadow-lg;
+    }
+  }
 }
diff --git a/docs/assets/scss/_skippy.scss b/docs/assets/scss/_skippy.scss
index ab59339d0..459c203a5 100644
--- a/docs/assets/scss/_skippy.scss
+++ b/docs/assets/scss/_skippy.scss
@@ -1,13 +1,13 @@
 .skippy {
   display: block;
   padding: 1em;
-  color: $white;
+  color: #fff;
   text-align: center;
   background-color: $bd-purple;
   outline: 0;
 
   &:hover {
-    color: $white;
+    color: #fff;
   }
 }
 
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
index a7148c999..5c272c3d0 100644
--- a/docs/assets/scss/_syntax.scss
+++ b/docs/assets/scss/_syntax.scss
@@ -88,7 +88,7 @@
   .language-bash,
   .language-sh {
     &::before {
-      color: $gray-500;
+      color: var(--bs-gray-100);
       content: "$ ";
       user-select: none;
     }
diff --git a/docs/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss
index d4b484334..a4745d85d 100644
--- a/docs/assets/scss/_variables.scss
+++ b/docs/assets/scss/_variables.scss
@@ -1,16 +1,12 @@
-$white:    #fff;
-$blue:     #007bff;
-$gray-100: #f8f9fa;
-$gray-500: #adb5bd;
-$gray-700: #495057;
-$gray-900: #212529;
-$primary:  #0d6efd;
 $teal-100: #d2f4ea;
 
 // Local docs variables
-$bd-purple:        #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // #7952b3
+$bd-purple:        #4c0bce;
+$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
 $bd-dark:          #2a2730;
 $bd-download:      #ffe484;
 
+$bd-gutter-x: 1.25rem;
+
 $spacer: 1rem;
+$box-shadow-lg: 0 1rem 3rem rgba(#000, .175) !default;
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 0e81de2b6..7d93dc92d 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -23,7 +23,7 @@
 .highlight {
   padding: 1.25rem;
   margin-bottom: 1.5rem;
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
   border-radius: .25rem;
 
   pre {
@@ -112,10 +112,10 @@
     padding: 100px 2rem;
     margin-right: 15px;
     margin-left: 15px;
-    color: $gray-500;
+    color: var(--bs-gray-500);
     text-align: center;
     content: "Nothing found, try searching again.";
-    background-color: $gray-100;
+    background-color: var(--bs-gray-100);
     border-radius: .5rem;
   }
 }
diff --git a/docs/layouts/partials/favicons.html b/docs/layouts/partials/favicons.html
index 420c38057..520b61a12 100644
--- a/docs/layouts/partials/favicons.html
+++ b/docs/layouts/partials/favicons.html
@@ -3,6 +3,6 @@
 <link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
 <link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
 <link rel="manifest" href="/assets/img/favicons/manifest.json">
-<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
+<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
 <link rel="icon" href="/assets/img/favicons/favicon.ico">
-<meta name="theme-color" content="#7952b3">
+<meta name="theme-color" content="#712cf9">
diff --git a/docs/layouts/partials/icons/hamburger.svg b/docs/layouts/partials/icons/hamburger.svg
new file mode 100644
index 000000000..955d8a651
--- /dev/null
+++ b/docs/layouts/partials/icons/hamburger.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+</svg>
diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
index df7b42566..1d2b45606 100644
--- a/docs/layouts/partials/navbar.html
+++ b/docs/layouts/partials/navbar.html
@@ -1,67 +1,75 @@
 <header class="navbar navbar-expand-md navbar-dark bd-navbar">
-  <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
-    <a class="navbar-brand p-0 me-2" href="{{ .Site.Params.main }}/" aria-label="Bootstrap">
-      {{ partialCached "icons/bootstrap-white-fill.svg" (dict "class" "d-block" "width" "40" "height" "32") }}
+  <nav class="container-xxl flex-wrap" aria-label="Main navigation">
+    <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
+      {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
     </a>
 
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
-      <svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-      </svg>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
+      {{ partial "icons/hamburger.svg" (dict "width" "32" "height" "32") }}
     </button>
 
-    <div class="collapse navbar-collapse" id="bdNavbar">
-      <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.main }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.bs_docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.bs_docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2 active" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.themes }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.blog }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
-        </li>
-      </ul>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
+      <div class="offcanvas-header pb-0">
+        <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
 
-      <hr class="d-md-none text-white-50">
+      <div class="offcanvas-body pt-0">
+        <hr class="d-md-none text-white-50">
+        <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.main }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.bs_docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.main }}/docs/{{ .Site.Params.bs_docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2 active" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.themes }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.blog }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+          </li>
+        </ul>
 
-      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
-            {{ partialCached "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ms-2">GitHub</small>
-          </a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
-            {{ partialCached "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ms-2">Twitter</small>
-          </a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.slack }}/" target="_blank" rel="noopener">
-            {{ partialCached "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ms-2">Slack</small>
-          </a>
-        </li>
-        <li class="nav-item col-6 col-md-auto">
-          <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}/" target="_blank" rel="noopener">
-            {{ partialCached "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ms-2">Open Collective</small>
-          </a>
-        </li>
-      </ul>
+        <hr class="d-md-none text-white-50">
 
-      <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" href="{{ .Site.Params.repo }}/archive/v{{ .Site.Params.version }}.zip">Download</a>
+        <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener" aria-label="GitHub">
+              {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+              <small class="d-md-none ms-2">GitHub</small>
+            </a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Social.twitter }}" target="_blank" rel="noopener" aria-label="Twitter">
+              {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+              <small class="d-md-none ms-2">Twitter</small>
+            </a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener" aria-label="Slack">
+              {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+              <small class="d-md-none ms-2">Slack</small>
+            </a>
+          </li>
+          <li class="nav-item col-6 col-md-auto">
+            <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" aria-label="Open Collective">
+              {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+              <small class="d-md-none ms-2">Open Collective</small>
+            </a>
+          </li>
+        </ul>
+
+        <hr class="d-md-none text-white-50">
+
+        <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="{{ .Site.Params.repo }}/archive/v{{ .Site.Params.version }}.zip">Download</a>
+      </div>
     </div>
   </nav>
 </header>
diff --git a/docs/layouts/partials/scripts.html b/docs/layouts/partials/scripts.html
index ef11a9eb3..f8418b612 100644
--- a/docs/layouts/partials/scripts.html
+++ b/docs/layouts/partials/scripts.html
@@ -1,3 +1,5 @@
+<script src="{{ .Site.Params.assets.js.uri }}" {{ printf "integrity=%q" .Site.Params.assets.js.sri | safeHTMLAttr }} crossorigin="anonymous"></script>
+
 {{- if .IsHome }}
 <script src="/assets/js/list.min.js"></script>
 <script>
diff --git a/docs/layouts/partials/stylesheet.html b/docs/layouts/partials/stylesheet.html
index ef2880ab1..0617e9316 100644
--- a/docs/layouts/partials/stylesheet.html
+++ b/docs/layouts/partials/stylesheet.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
+<link href="{{ .Site.Params.assets.css.uri }}" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.assets.css.sri | safeHTMLAttr }} crossorigin="anonymous">
 <link rel="stylesheet" href="/assets/font/bootstrap-icons.css">
 
 {{- $sassOptions := dict "targetPath" "assets/css/docs.css" "precision" 6 -}}