Add skip to content button

robdekort · robdekort · commit 896f7145237c · 2021-10-09T14:20:25.000+02:00
diff --git a/dev/app/Console/Commands/stubs/index.antlers.html.stub b/dev/app/Console/Commands/stubs/index.antlers.html.stub
@@ -3,7 +3,7 @@
 	@desc The {{ collection_name }} index template.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <div class="fluid-container grid md:grid-cols-12 gap-12">
         {{ collection:{{ handle }} sort="date:desc" paginate="true" limit="10" as="items" }}
             {{ unless no_results }}
diff --git a/dev/app/Console/Commands/stubs/show.antlers.html.stub b/dev/app/Console/Commands/stubs/show.antlers.html.stub
@@ -3,7 +3,7 @@
 	@desc The {{ collection_name }} show template.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <div class="fluid-container">
         {{ partial:typography/h1 :content="title" }}
     </div>
diff --git a/dev/resources/lang/en/strings.php b/dev/resources/lang/en/strings.php
@@ -34,6 +34,7 @@
     // Navigation
     'close'                             => 'Close',
     'menu'                              => 'Menu',
+    'skip_to_content'                   => 'Skip to content',
 
     // Other
     'dark_mode_on'                      => 'Enable dark mode',
diff --git a/dev/resources/views/default.antlers.html b/dev/resources/views/default.antlers.html
@@ -3,7 +3,7 @@
 	@desc The default template with an outer wrapper grid as defined in tailwind.config.js. It makes sure all blocks on a page get evenly spaced without having to worry about margins or paddings.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     {{ page_builder scope="block" }}
         {{ partial src="page_builder/{type}" }}
     {{ /page_builder }}
diff --git a/dev/resources/views/errors/404.antlers.html b/dev/resources/views/errors/404.antlers.html
@@ -13,11 +13,11 @@
     404
 {{ /section:seo_title }}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <article class="fluid-container grid md:grid-cols-12 gap-y-4">
         <div class="col-span-12">
             {{ partial:typography/h1 class="mb-4" :content="configuration:404_title" }}
             {{ partial:typography/paragraph :content="configuration:404_text" }}
         </div>
     </article>
-</main>
+</main>
diff --git a/dev/resources/views/layout.antlers.html b/dev/resources/views/layout.antlers.html
@@ -19,6 +19,7 @@
         {{ partial:snippets/browser_appearance }}
     </head>
     <body class="flex flex-col min-h-screen bg-white selection:bg-primary selection:text-white">
+        {{ partial:navigation/skip_to_content }}
         {{ partial:components/toolbar }}
 
         {{# Remove the following line if you want to use an addon for SEO. #}}
diff --git a/dev/resources/views/navigation/_skip_to_content.antlers.html b/dev/resources/views/navigation/_skip_to_content.antlers.html
@@ -0,0 +1,3 @@
+<a class="fixed bottom-safe left-8 py-2 px-4 bg-primary text-white text-sm rounded shadow-lg font-bold translate-y-24 opacity-0 focus-visible:translate-y-0 focus-visible:opacity-100 motion-safe:transition-all" href="#content" tabindex="1">
+    {{ trans:strings.skip_to_content }}
+</a>
diff --git a/dev/resources/views/search.antlers.html b/dev/resources/views/search.antlers.html
@@ -8,7 +8,7 @@
     {{ trans:strings.search }}
 {{ /section:seo_title }}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <section class="fluid-container grid grid-cols-12 gap-y-6">
         <div class="col-span-12 md:col-span-8 md:col-start-3">
             {{ partial:typography/h1 class="mb-2" content="{trans:strings.search_results_for} &quot;{get:q}&quot;" }}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<a class="fixed bottom-safe left-8 py-2 px-4 bg-primary text-white text-sm rounded shadow-lg font-bold translate-y-24 opacity-0 focus-visible:translate-y-0 focus-visible:opacity-100 motion-safe:transition-all" href="#content" tabindex="1">`
	`2`	`+ {{ trans:strings.skip_to_content }}`
	`3`	`+</a>`