Add a skip to content link (#745)

StackExchange · Aug 27, 2021 · 142b661 · 142b661
1 parent ab8cd68
commit 142b661
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -1,4 +1,6 @@
 <header class="bg-black-050 ps-fixed h64 t0 l0 r0 z-nav-fixed bb bc-black-3 js-stacks-topbar print:d-none">
+    <a class="s-btn l12 ps-absolute z-modal stacks-skip-link" href="#content">Skip to content</a>
+
     <div class="d-flex ai-center px16 h100 mx-auto wmx12">
         <button class="s-btn__unset c-pointer d-flex flex__center p8 mr8 fc-black-300 d-none md:d-block js-hamburger-btn">
             {% icon "Hamburger", "js-hamburger-icon" %}

diff --git a/docs/_includes/layouts/page.html b/docs/_includes/layouts/page.html
@@ -9,7 +9,7 @@
     <div class="d-flex mx-auto w100 wmx12">
         {% include navigation.html %}
 
-        <main id="content" class="d-flex fl-grow1 ps-relative t64 py24 pl48 md:pl24 sm:pl16 sm:pr16">
+        <main class="d-flex fl-grow1 ps-relative t64 py24 pl48 md:pl24 sm:pl16 sm:pr16">
             {% if menu %}
                 <div class="flex--item order-last ml32 sm:d-none print:d-none" style="width: 14rem;">
                     <div class="ps-fixed t64 b0 py12 overflow-y-auto" style="width: 14rem;">
@@ -22,7 +22,7 @@ <h5 class="mt16 mb8 fw-bold tt-uppercase fs-fine fc-theme-primary mnl1">Sections
                 This container’s .fl-grow1 doesn't behave properly unless we add an explicit width.
                 https://stackoverflow.com/questions/38723559/flex-item-exceeds-its-container
             {% endcomment %}
-            <div class="flex--item fl-grow1 ws1">
+            <div id="content" class="flex--item fl-grow1 ws1 pt128 mtn128">
                 {% if js %}
                     <div class="stacks-badged d-flex ai-center sm:jc-space-between">
                         <h1 class="stacks-h1 flex--item mb0">{{ title }}</h1>

diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
@@ -22,6 +22,14 @@
     margin-bottom: 0.75em;
 }
 
+.stacks-skip-link {
+    transform: translateY(-100%);
+}
+
+.stacks-skip-link:focus {
+    transform: translateY(@su12);
+}
+
 .stacks-intro-crane {
     position: absolute;
     top: -15%;
@@ -176,16 +184,16 @@
 //  --  Section Title
 .stacks-h2 {
     font-size: @fs-headline1;
-    padding-top: @su64 + @su24; // Hack for #anchor positioning
-    margin-top: -@su64 + -@su24; // Hack for #anchor positioning
+    padding-top: @su96; // Hack for #anchor positioning
+    margin-top: -@su96; // Hack for #anchor positioning
 }
 
 //  --  Sub-section Title
 .stacks-h3 {
     font-size: @fs-subheading;
     color: var(--fc-medium);
-    padding-top: @su64 + @su24; // Hack for #anchor positioning
-    margin-top: -@su64 + -@su24; // Hack for #anchor positioning
+    padding-top: @su96; // Hack for #anchor positioning
+    margin-top: -@su96; // Hack for #anchor positioning
 }
 
 .stacks-h4 {