docs: add skip navigation link

zeroedin · zeroedin · commit 6a6fb6b1a46a · 2023-07-12T10:47:28.000-04:00
diff --git a/docs/_includes/_skip-link.njk b/docs/_includes/_skip-link.njk
@@ -0,0 +1 @@
+<a href="#main" class="skip-to-content-link">Skip to content</a>
diff --git a/docs/_includes/layout-basic.njk b/docs/_includes/layout-basic.njk
@@ -1,8 +1,9 @@
 ---
 layout: layout-base.njk
 ---
+{% include '_skip-link.njk' %}
 {% include '_nav.njk' %}
-<main class="basic">
+<main id="main" class="basic">
   {{ content | safe }}
 </main>
 {% include '_foot.njk' %}
diff --git a/docs/_includes/layout-blog-index.njk b/docs/_includes/layout-blog-index.njk
@@ -1,10 +1,10 @@
 ---
 layout: layout-base.njk
 ---
+{% include '_skip-link.njk' %}
 {% include '_nav.njk' %}
 
-
-<main class="basic">
+<main id="main"class="basic">
   {{ content | safe }}
 
   <div class="posts">
diff --git a/docs/_includes/layout-blog.njk b/docs/_includes/layout-blog.njk
@@ -1,9 +1,10 @@
 ---
 layout: layout-base.njk
 ---
+{% include '_skip-link.njk' %}
 {% include '_nav.njk' %}
 
-<main class="blog">
+<main id="main" class="blog">
   <header class="band header">
     <h1>{{ title }}</h1>
     {% if tagline %}<p class="tagline">{{ tagline }}</p>{% endif %} 
diff --git a/docs/index.html b/docs/index.html
@@ -8,6 +8,7 @@
 <link rel="stylesheet" href="home.css">
 
 <body>
+  <a href="#home-header" class="skip-to-content-link">Skip to content</a>
   {% renderFile "./docs/_snippets/pf-bar-html.md" %}
   <header class="band accent" id="home-header">
     <h1>
diff --git a/docs/main.css b/docs/main.css
@@ -34,6 +34,27 @@ p:empty {
   display: none;
 }
 
+.skip-to-content-link {
+  background: var(--pf-global--BackgroundColor--100, #fff);
+  border-bottom-left-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
+  border-bottom-right-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
+  display: flex;
+  padding-inline: var(--pf-global--spacer--md, 1rem);
+  padding-block: var(--pf-global--spacer--xs, 0.25rem);
+  position: absolute;
+  transform: translateY(-1000%);
+  transition: transform 0.2s;
+  width: max-content;
+  /* Header bar is set to z-index: 300 */
+  z-index: 301;
+}
+
+.skip-to-content-link:focus {
+  transform: translateY(0%);
+  position: fixed;
+  top: 0;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<a href="#main" class="skip-to-content-link">Skip to content</a>`