adds better accesssible jumps on page load

edelstone · Sep 22, 2024 · 498ce1c · 498ce1c
1 parent 8db9701
commit 498ce1c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/_includes/header.html b/src/_includes/header.html
@@ -1,6 +1,10 @@
 <header class="header">
 	<div class="preface">
+		{% if main %}
 		<a href="#color-values" class="offscreen">Jump to the form</a>
+		{% else %}
+		<a href="#main" class="offscreen">Jump to main content</a>
+		{% endif %}
 		<div class="dark-mode-selector">
 			<label for="darkmode-toggle" class="switch" tabindex="0">
 				<input id="darkmode-toggle" class="darkmode-toggle" type="checkbox" tabindex="-1">

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -7,7 +7,7 @@
 
 <body>
   {% include "header.html" %}
-  <main class="main {% if docs %}docs{% endif %}">
+  <main id="main" class="main {% if docs %}docs{% endif %}">
     {{ content | safe }}
   </main>
   {% include "footer.html" %}