Docs: add scroll-margin-top for keyboard navigation

diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
new file mode 100644 (file)
index 0000000..dcd9f3d
--- /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 9d71147a80a0d9d1abe9ecf715ff3dc8e1e1d9a1..fb85262e78b567f6e5b1cf027fc2ffa64fd39a6d 100644 (file)
--- 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";