diff --git a/scss/_reboot.scss b/scss/_reboot.scss index bd6add3b41..e97725c27b 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -35,22 +35,8 @@ scroll-behavior: smooth; } } - - // Boosted mod: Improve focus visibility when fixed/sticky header is used - // See https://caniuse.com/?search=scroll-padding - // scss-docs-start scroll-offset - @if $enable-fixed-header { - scroll-padding-top: $scroll-offset-top * .5; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $scroll-offset-top; - } - } - // scss-docs-end scroll-offset - // End mod } - // Body // // 1. Remove the margin in all browsers. diff --git a/scss/_variables.scss b/scss/_variables.scss index f709cb9519..2b0212e796 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1945,7 +1945,7 @@ $pre-line-height: 1.25 !default; // //// Scroll margin -$scroll-offset-top: $spacer * 6 !default; // Matching .navbar computed height +$scroll-offset-top: $spacer * 5 !default; // Matching .navbar computed height //// Back to top // scss-docs-start back-to-top diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index 9fcbb51408..e4c17aeca2 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -1,12 +1,4 @@ // stylelint-disable selector-max-id -:root { - scroll-padding-top: $offset-top / 2; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $offset-top; - } -} - html, body { min-height: 100vh; diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 719f35d477..e57de97bb9 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -3,13 +3,23 @@ // .bd-content { - // Offset content from fixed navbar when jumping to headings + // Boosted mod: Offset content from fixed navbar when jumping to headings, values adjusted > :target { - padding-top: 5rem; - margin-top: -5rem; + padding-top: 7.5rem; + margin-top: -7.5rem; + + @include media-breakpoint-up(md) { + padding-top: 10.5rem; + margin-top: -10.5rem; + } + + @include media-breakpoint-up(lg) { + padding-top: 6.875rem; + margin-top: -6.875rem; + } } - > h2:not(:first-child) { + > h2 { margin-top: 3rem; } diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.2/getting-started/accessibility.md index 8f1de6ba90..e6894646fe 100644 --- a/site/content/docs/5.2/getting-started/accessibility.md +++ b/site/content/docs/5.2/getting-started/accessibility.md @@ -71,7 +71,6 @@ When using a fixed (or sticky) header, tabbing backward often hides focused elem 1. `$scroll-offset-top` variable defines the offset, 2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header. -{{< scss-docs name="scroll-offset" file="scss/_reboot.scss" >}} ### Minimum target size