diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/scss/_skippy.scss | 21 | ||||
| -rw-r--r-- | site/layouts/partials/skippy.html | 12 |
2 files changed, 22 insertions, 11 deletions
diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss index c573e45484..894db70db4 100644 --- a/site/assets/scss/_skippy.scss +++ b/site/assets/scss/_skippy.scss @@ -1,13 +1,20 @@ +// stylelint-disable declaration-no-important + .skippy { - position: fixed; - top: .5rem; - left: .5rem; - z-index: $zindex-fixed; - padding: .5rem; - color: $white; background-color: $bd-purple; - &:hover { + a { color: $white; } + + &:focus-within a { + position: static !important; + width: auto !important; + height: auto !important; + padding: $spacer / 2 !important; + margin: $spacer / 4 !important; + overflow: visible !important; + clip: auto !important; + white-space: normal !important; + } } diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html index 8dce2bc495..e6bf901a9c 100644 --- a/site/layouts/partials/skippy.html +++ b/site/layouts/partials/skippy.html @@ -1,5 +1,9 @@ -<a class="skippy visually-hidden-focusable" href="#content">Skip to main content</a> +<div class="skippy overflow-hidden"> + <div class="container-xl"> + <a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a> -{{ if (eq .Page.Layout "docs") }} - <a class="skippy visually-hidden-focusable d-none d-md-block" href="#bd-docs-nav">Skip to docs navigation</a> -{{- end }} + {{ if (eq .Page.Layout "docs") }} + <a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a> + {{- end }} + </div> +</div> |