From d0fece932072872eb0e6aa688849f80465cfe6b6 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 21 Jan 2023 22:55:38 +0000 Subject: [PATCH] Docs: add scroll-margin-top for keyboard navigation --- site/assets/scss/_scrolling.scss | 5 +++++ site/assets/scss/docs.scss | 1 + 2 files changed, 6 insertions(+) create mode 100644 site/assets/scss/_scrolling.scss diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss new file mode 100644 index 0000000000..dcd9f3d395 --- /dev/null +++ b/site/assets/scss/_scrolling.scss @@ -0,0 +1,5 @@ +// When navigating with the keyboard, prevent focus from landing behind the sticky header + +main *:focus { + scroll-margin-top: 100px; +} diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 9d71147a80..fb85262e78 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default @import "colors"; @import "clipboard-js"; @import "placeholder-img"; +@import "scrolling"; // Load docs dependencies @import "syntax";