diff --git a/themes/geekboot/assets/scss/_accordion.scss b/themes/geekboot/assets/scss/_accordion.scss index 06d32d15..bc35b4e6 100644 --- a/themes/geekboot/assets/scss/_accordion.scss +++ b/themes/geekboot/assets/scss/_accordion.scss @@ -1,4 +1,29 @@ button.bd-accordion { background-color: var(--nav-highlight-color) !important; +} -} \ No newline at end of file +// 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); + } \ No newline at end of file diff --git a/themes/geekboot/assets/scss/_content.scss b/themes/geekboot/assets/scss/_content.scss index c0dd679f..d887ad45 100644 --- a/themes/geekboot/assets/scss/_content.scss +++ b/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,45 @@ 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; +} + +// 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 { diff --git a/themes/geekboot/assets/scss/dark-mode.scss b/themes/geekboot/assets/scss/dark-mode.scss index 5cc9467a..e143c6bc 100644 --- a/themes/geekboot/assets/scss/dark-mode.scss +++ b/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}; diff --git a/themes/geekboot/assets/scss/light-mode.scss b/themes/geekboot/assets/scss/light-mode.scss index dad68c14..4cf4b09c 100644 --- a/themes/geekboot/assets/scss/light-mode.scss +++ b/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; + } } \ No newline at end of file