more tweaks

5 files changed, 46 insertions, 23 deletions

diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
index 1251ec5e3..3eada3afe 100644
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@@ -5,7 +5,8 @@
   margin-right: auto;
   margin-left: auto;
   overflow: auto;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-border-color);
   border-radius: .25rem;
 
   @media (min-width: 992px) {
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index e5341b0d3..62e925e16 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -117,9 +117,12 @@
 }
 
 .hero {
-  border-bottom: 1px solid rgba(0, 0, 0, .075);
+  background-color: #fafafa;
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  box-shadow: 0 0 0 1px #fff, 0 1rem 2rem rgba(0, 0, 0, .05);
 
   .highlight {
+    padding: 1rem 1.25rem;
     margin-bottom: 0;
     color: var(--bs-gray-200);
     background-color: var(--bs-gray-800);
@@ -134,13 +137,13 @@
   }
 
   .btn-clipboard {
-    top: .625em;
+    top: .4em;
     color: var(--bs-gray-200);
     background-color: var(--bs-gray-800);
   }
 
   .btn {
-    padding: 1rem 1.25rem;
+    padding: .75rem 1.25rem;
     border-radius: .5rem;
   }
 
@@ -158,6 +161,11 @@
 .list {
   font-size: 2rem;
 
+  :target {
+    padding-top: 6rem;
+    margin-top: -6rem;
+  }
+
   // stylelint-disable  declaration-no-important
   a:hover,
   a:focus {
@@ -234,3 +242,11 @@
     overflow-y: auto;
   }
 }
+
+.bd-sidebar-list {
+  --bs-nav-link-padding-y: .375rem;
+  --bs-nav-link-padding-x: .75rem;
+  --bs-nav-link-color: var(--bs-gray-600);
+  --bs-nav-pills-link-active-color: var(--bd-purple);
+  --bs-nav-pills-link-active-bg: rgba(var(--bd-violet-rgb), .05);
+}
diff --git a/docs/layouts/_default/home.html b/docs/layouts/_default/home.html
index b7ae1ed30..fca76b426 100644
--- a/docs/layouts/_default/home.html
+++ b/docs/layouts/_default/home.html
@@ -4,16 +4,29 @@
 
 {{ define "main" }}
   <div class="row g-5">
-    <div class="small" style="width: 20%;">
+    <div class="py-5 small" style="width: 20%;">
       <div class="bd-sidebar">
-        <h4>Categories</h4>
-        <ul class="nav nav-pills flex-column" style="--bs-nav-link-padding-y: .375rem;
-                                                     --bs-nav-link-padding-x: .75rem;
-                                                     --bs-nav-link-color: var(--bs-gray-600);
-                                                     --bs-nav-pills-link-active-color: var(--bs-gray-900);
-                                                     --bs-nav-pills-link-active-bg: var(--bs-gray-100);">
+        <form class="subnav-search d-flex flex-nowrap ms-auto mb-3">
+          <label for="search" class="visually-hidden">Search for icons</label>
+          <input class="form-control search mb-0" id="search" type="search" placeholder="Search icons..." autocomplete="off">
+        </form>
+
+        <h6><a href="/docs">Documentation</a></h6>
+        <ul class="nav nav-pills flex-column bd-sidebar-list d-none">
+          <li class="nav-item">
+            <a class="nav-link" href="">Install</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="">Usage</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="">Styling</a>
+          </li>
+        </ul>
+        <h6><a href="/categories">Categories</a></h6>
+        <ul id="categories" class="nav nav-pills flex-column bd-sidebar-list">
           <li class="nav-item">
-            <a class="nav-link active" href="">All</a>
+            <a class="nav-link active" href="#">All</a>
           </li>
         {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
           {{ if eq "categories" $taxonomyname }}
@@ -27,7 +40,7 @@
         </ul>
       </div>
     </div>
-    <div class="col">
+    <div class="col" data-bs-spy="scroll" data-bs-target="#categories">
       {{ partialCached "icons" . "home" }}
     </div>
   </div>
diff --git a/docs/layouts/partials/home/hero.html b/docs/layouts/partials/home/hero.html
index 36932503f..ac49dfb60 100644
--- a/docs/layouts/partials/home/hero.html
+++ b/docs/layouts/partials/home/hero.html
@@ -12,7 +12,7 @@
           <strong>New in v1.9.0:</strong> 140+ new icons!
         </a>
         <h1 class="f0">Bootstrap Icons</h1>
-        <p class="mb-4 f3 font-weight-normal">Free, high quality, open source icon library with over 1,800 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without <a href="{{ .Site.Params.main }}/">Bootstrap</a> in any project.</p>
+        <p class="mb-4 f3 font-weight-normal">Free, high quality, open source icon library with over 1,800 vector icons. Use them as SVGs, SVG sprite, or web fonts—with or without <a href="{{ .Site.Params.main }}/">Bootstrap</a>.</p>
 
         <div class="d-flex flex-column flex-md-row align-items-stretch justify-content-center justify-content-md-start mb-5 fs-5">
           <div class="fs-5 d-inline-block mb-3 me-md-3 mb-md-0">
@@ -26,9 +26,9 @@
 
         {{ partialCached "ads" . }}
 
-        <hr class="mx-auto mx-lg-0 my-5">
+        <hr class="mx-auto mx-lg-0 my-5 d-none">
 
-        <p class="text-muted">
+        <p class="text-muted d-none">
           Currently <a href="{{ .Site.Params.repo }}/releases/tag/v{{ .Site.Params.version }}">v{{ .Site.Params.version }}</a>
           <span class="px-1">&#8226;</span>
           <a href="#icons">Icons</a>
diff --git a/docs/layouts/partials/icons.html b/docs/layouts/partials/icons.html
index b64693d22..e90a65890 100644
--- a/docs/layouts/partials/icons.html
+++ b/docs/layouts/partials/icons.html
@@ -1,11 +1,4 @@
 <div class="my-5">
-  <div class="d-flex align-items-center mb-4">
-    <h2 id="icons" class="mb-0 h1">Icons</h2>
-    <form class="subnav-search d-flex flex-nowrap ms-auto">
-      <label for="search" class="visually-hidden">Search for icons</label>
-      <input class="form-control search mb-0" id="search" type="search" placeholder="Start typing to filter..." autocomplete="off">
-    </form>
-  </div>
   <ul class="list-unstyled list">
     {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
       {{ if eq "categories" $taxonomyname }}