Revamp header, headings, aside spacing

Gradients caused artifacts in Safari, layout was feeling a little loose

4 files changed, 18 insertions, 42 deletions

diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
index c5561272f2..51a07eafa0 100644
--- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
@@ -11,15 +11,15 @@ direction: rtl
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
-    <h1 class="d-flex align-items-center text-white mb-0">
+    <h1 class="d-flex align-items-center fs-4 text-white mb-0">
       <img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
       ورقة غش
     </h1>
     <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-3 px-xl-0">
-  <h2 class="h6 d-block pt-3 pt-xl-5 pb-2 pb-xl-3 border-bottom">على هذه الصفحة</h2>
+<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+  <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
       <li class="my-2">
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css
index a67becc5c9..fba8fd0a45 100644
--- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css
+++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css
@@ -94,12 +94,11 @@ body {
     /* rtl:end:ignore */
     z-index: 1030;
     grid-column: 1 / span 3;
-    min-height: 6rem;
   }
 
   .bd-aside,
   .bd-cheatsheet {
-    padding-top: 6rem;
+    padding-top: 4rem;
   }
 
   /**
@@ -117,34 +116,23 @@ body {
 
   .bd-aside {
     grid-area: 1 / 3;
-    scroll-margin-top: 6rem;
+    scroll-margin-top: 4rem;
   }
 
   .bd-cheatsheet section,
   .bd-cheatsheet section > h2 {
-    top: 6rem;
-    scroll-margin-top: 6rem;
+    top: 2rem;
+    scroll-margin-top: 2rem;
   }
 
   .bd-cheatsheet section > h2 {
-    background-image: linear-gradient(to bottom, #fff, transparent);
     grid-column: 1 / span 2;
   }
 
-  .bd-cheatsheet section > h2::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: -1;
-    width: 17.5%;
-    content: "";
-    background-image: linear-gradient(to bottom, #fff calc(100% - 2rem), transparent);
-  }
-
   .bd-cheatsheet article,
   .bd-cheatsheet .bd-heading {
-    top: 12rem;
-    scroll-margin-top: 12rem;
+    top: 8rem;
+    scroll-margin-top: 8rem;
   }
 
   .bd-cheatsheet .bd-heading {
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css
index 91572b3235..8794e9571f 100644
--- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css
+++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css
@@ -92,12 +92,11 @@ body {
     left: 0;
     z-index: 1030;
     grid-column: 1 / span 3;
-    min-height: 6rem;
   }
 
   .bd-aside,
   .bd-cheatsheet {
-    padding-top: 6rem;
+    padding-top: 4rem;
   }
 
   /**
@@ -115,34 +114,23 @@ body {
 
   .bd-aside {
     grid-area: 1 / 3;
-    scroll-margin-top: 6rem;
+    scroll-margin-top: 4rem;
   }
 
   .bd-cheatsheet section,
   .bd-cheatsheet section > h2 {
-    top: 6rem;
-    scroll-margin-top: 6rem;
+    top: 2rem;
+    scroll-margin-top: 2rem;
   }
 
   .bd-cheatsheet section > h2 {
-    background-image: linear-gradient(to bottom, #fff, transparent);
     grid-column: 1 / span 2;
   }
 
-  .bd-cheatsheet section > h2::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: -1;
-    width: 17.5%;
-    content: "";
-    background-image: linear-gradient(to bottom, #fff calc(100% - 2rem), transparent);
-  }
-
   .bd-cheatsheet article,
   .bd-cheatsheet .bd-heading {
-    top: 12rem;
-    scroll-margin-top: 12rem;
+    top: 8rem;
+    scroll-margin-top: 8rem;
   }
 
   .bd-cheatsheet .bd-heading {
diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html
index 52828fba41..d51f929f96 100644
--- a/site/content/docs/5.0/examples/cheatsheet/index.html
+++ b/site/content/docs/5.0/examples/cheatsheet/index.html
@@ -10,15 +10,15 @@ body_class: "bg-light"
 
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
-    <h1 class="d-flex align-items-center text-white mb-0">
+    <h1 class="d-flex align-items-center fs-4 text-white mb-0">
       <img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
       Cheatsheet
     </h1>
     <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
   </div>
 </header>
-<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-3 px-xl-0">
-  <h2 class="h6 d-block pt-3 pt-xl-5 pb-2 pb-xl-3 border-bottom">On this page</h2>
+<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2">
+  <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
   <nav class="small" id="toc">
     <ul class="list-unstyled">
       <li class="my-2">