From 8422cccb14cd4d93b7392840ecfc7b8ea208f5e2 Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Fri, 4 Aug 2023 08:51:48 -0700 Subject: [PATCH 1/2] improve typography, spacing, and accordions Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/_accordion.scss | 27 +++++++++++++- themes/geekboot/assets/scss/_content.scss | 39 +++++++++++++++++++-- themes/geekboot/assets/scss/dark-mode.scss | 31 ++++++++++++++++ themes/geekboot/assets/scss/light-mode.scss | 30 ++++++++++++++++ 4 files changed, 124 insertions(+), 3 deletions(-) diff --git a/themes/geekboot/assets/scss/_accordion.scss b/themes/geekboot/assets/scss/_accordion.scss index 06d32d156..bc35b4e62 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 c0dd679fc..d887ad45c 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 5cc9467a9..e143c6bc7 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 dad68c149..4cf4b09c8 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 From 6621db6010b3a674659f6710fef58bd631c969ba Mon Sep 17 00:00:00 2001 From: Shane Miller Date: Fri, 4 Aug 2023 09:07:19 -0700 Subject: [PATCH 2/2] fix extra space in right nav from font spacing work Signed-off-by: Shane Miller --- themes/geekboot/assets/scss/_content.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/themes/geekboot/assets/scss/_content.scss b/themes/geekboot/assets/scss/_content.scss index d887ad45c..d740c178c 100644 --- a/themes/geekboot/assets/scss/_content.scss +++ b/themes/geekboot/assets/scss/_content.scss @@ -91,6 +91,9 @@ h3, h4, h5, h6 { 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 {