improve typography, spacing, and accordions

themes/geekboot/assets/scss/_accordion.scss

@@ -1,4 +1,29 @@
 button.bd-accordion {
     background-color: var(--nav-highlight-color) !important;
+}
 
-}
+// Override Bootstrap accordion colors in the body
+.accordion {
+    --bs-accordion-border-color: #{$fog-200};
+    --bs-accordion-active-bg: #{$fog-0};
+    --bs-accordion-btn-focus-border-color: #{$aqua-400};
+    --bs-accordion-button-focus-border-color: #{$aqua-400};
+    --bs-accordion-btn-focus-box-shadow: 0 0 0 2px #{$fog-400};
+  }
+  // Override Bootstrap accordion general properties
+  .accordion-header {
+    margin-top: 0px;
+  }
+  // Improve spacing and top-border on open Bootstrap accordions
+  .accordion-body {
+    border-top: 2px solid #{$fog-200};
+  }
+  .accordion-button:hover, .accordion-button:not(.collapsed):hover {
+    outline: 2px solid #{$fog-400};
+  }
+  .accordion-button:not(.collapsed) {
+    color: #{$fog-1000} !important;
+  }
+  .accordion-button:not(.collapsed)::after {
+    background-image: var(--bs-accordion-btn-icon);
+  }

themes/geekboot/assets/scss/_content.scss

@@ -9,7 +9,7 @@ body {
 
 .bd-content {
   font-size: $body-font-size;
-  line-height: 1.8em;
+  line-height: 1.5em;
 
   code {
     background-color: var(--code-background);
@@ -42,8 +42,9 @@ body {
 }
 
 .bd-title {
-  @include font-size(2.25rem);
+  font-size: 2rem;
   font-weight: 600;
+  line-height: 2.75rem;
 }
 
 
@@ -63,11 +64,48 @@ blockquote {
 
 h1,h2,h3,h4,h5,h6 {
   padding-top: 1rem;
+  font-weight: 900;
+  line-height: 1.25;
 
   &.accordion-header {
     padding-top: 0 !important;
   }
 }
+// H1s when manually added
+h1 {
+  font-size: 2rem !important;
+}
+// Section titles
+h2 {
+  margin-top: 3rem !important;
+  margin-bottom: 1.5rem !important;
+  font-size: 1.5rem !important;
+}
+h2.accordion-header {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+// Subhead titles
+h3, h4, h5, h6 {
+  margin-top: 2.5rem !important;
+  margin-bottom: 1.25rem !important;
+  font-size: 1.25rem !important;
+}
+.d-none.d-md-block.h6.my-2 {
+  margin-top: 0px !important;
+}
+
+// These accordion stylings do not apply correctly when in _accordion
+.accordion-button {
+  font-weight: 900;
+}
+.accordion-item {
+  border-width: 2px;
+}
+// Improve spacing and top-border on open Bootstrap accordions
+.accordion-body > .highlight {
+  margin: 0px !important;
+}
 
 // Color theme toggle
 .form-check-input:checked {

themes/geekboot/assets/scss/dark-mode.scss

@@ -49,6 +49,37 @@
     --search-box-background: var(--body-background);
     --result-path: var(--body-background);
 
+    // Override Bootstrap accordion colors in the body
+    .accordion {
+        --bs-accordion-border-color: #{$fog-800};
+        --bs-accordion-active-bg: #{$fog-1000};
+        --bs-accordion-btn-focus-border-color: #{$fog-600};
+        --bs-accordion-button-focus-border-color: #{$fog-600};
+        --bs-accordion-btn-focus-box-shadow: 0 0 0 2px #{$fog-600};
+    }
+    // Improve spacing and top-border on open Bootstrap accordions
+    .accordion-body {
+        border-top: 2px solid #{$fog-800};
+        background-color: #{$fog-1000} !important;
+    }
+    // Add hover border over clickable area
+    .accordion-button:hover, .accordion-button:not(.collapsed):hover {
+        outline: 2px solid #{$fog-600};
+    }
+    // Color text and background
+    .accordion-button {
+        background-color: #{$fog-1000};
+        color: #{$fog-0} !important;
+    }
+    .accordion-item {
+        background-color: #{$fog-1000};
+        color: #{$fog-0};
+    }
+    // Load chevron svg as manually-inputed $fog-400 hex code
+    .accordion-button::after {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239DA0A0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+    }
+
     // Add border to top nav and footer
     .docs-navbar {
         border-bottom: 1px solid #{$fog-850};

themes/geekboot/assets/scss/light-mode.scss

@@ -56,4 +56,34 @@
     //Search Results
     --search-box-background: var(--body-background);
     --result-path: var(--body-background);
+
+    // Override Bootstrap accordion colors in the body
+    .accordion {
+        --bs-accordion-border-color: #{$fog-200};
+        --bs-accordion-active-bg: #{$fog-0};
+        --bs-accordion-btn-focus-border-color: #{$fog-400};
+        --bs-accordion-button-focus-border-color: #{$fog-400};
+        --bs-accordion-btn-focus-box-shadow: 0 0 0 2px #{$fog-400};
+    }
+    // Improve spacing and top-border on open Bootstrap accordions
+    .accordion-body {
+        border-top: 2px solid #{$fog-200};
+    }
+    // Add hover border over clickable area
+    .accordion-button:hover, .accordion-button:not(.collapsed):hover {
+        outline: 2px solid #{$fog-400};
+    }
+    // Color text and background
+    .accordion-button {
+        background-color: #{$fog-0};
+        color: #{$fog-1000} !important;
+    }
+    .accordion-item {
+        background-color: #{$fog-0};
+        color: #{$fog-1000};
+    }
+    // Load chevron svg as manually-inputed $fog-600 hex code
+    .accordion-button::after {
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236C7070'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
+    }
 }