♿️ Add "skip to main content" links

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Automatic Markdown image resizing and srcset generation
 - Performance and Accessibility improvements to achieve perfect Lighthouse scores
 - Author `headline` parameter
+- Skip to content links
 
 ### Changed
 

assets/css/compiled/main.css

@@ -1799,6 +1799,10 @@ body a, body button {
 .chroma .w {
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
@@ -1983,6 +1987,11 @@ body a, body button {
   flex-grow: 1;
 }
 
+.-translate-y-8 {
+  --tw-translate-y: -2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -2023,6 +2032,10 @@ body a, body button {
   place-self: center;
 }
 
+.self-center {
+  align-self: center;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2047,6 +2060,11 @@ body a, body button {
   border-radius: 0.375rem !important;
 }
 
+.rounded-b-lg {
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2118,6 +2136,16 @@ body a, body button {
   padding-right: 1.5rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -2128,11 +2156,6 @@ body a, body button {
   padding-right: 0.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2210,6 +2233,11 @@ body a, body button {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2230,11 +2258,6 @@ body a, body button {
   line-height: 1rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-\[0\.6rem\] {
   font-size: 0.6rem;
 }
@@ -2283,6 +2306,10 @@ body a, body button {
   color: var(--color-neutral-900);
 }
 
+.text-primary-600 {
+  color: var(--color-primary-600);
+}
+
 .text-neutral-700 {
   color: var(--color-neutral-700);
 }
@@ -2384,6 +2411,11 @@ body a, body button {
   text-underline-offset: 2px;
 }
 
+.focus\:translate-y-0:focus {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 [dir="ltr"] .ltr\:ml-2 {
   margin-left: 0.5rem;
 }
@@ -2404,6 +2436,10 @@ body a, body button {
   display: none;
 }
 
+[dir="ltr"] .ltr\:pr-2 {
+  padding-right: 0.5rem;
+}
+
 [dir="ltr"] .ltr\:pr-3 {
   padding-right: 0.75rem;
 }
@@ -2432,6 +2468,10 @@ body a, body button {
   display: none;
 }
 
+[dir="rtl"] .rtl\:pl-2 {
+  padding-left: 0.5rem;
+}
+
 [dir="rtl"] .rtl\:pl-3 {
   padding-left: 0.75rem;
 }
@@ -2555,6 +2595,10 @@ body a, body button {
   background-color: var(--color-neutral-800);
 }
 
+.dark .dark\:bg-neutral-600 {
+  background-color: var(--color-neutral-600);
+}
+
 .dark .dark\:bg-primary-400 {
   background-color: var(--color-primary-400);
 }
@@ -2579,6 +2623,10 @@ body a, body button {
   color: var(--color-neutral);
 }
 
+.dark .dark\:text-primary-400 {
+  color: var(--color-primary-400);
+}
+
 .dark .dark\:text-neutral-300 {
   color: var(--color-neutral-300);
 }
@@ -2587,10 +2635,6 @@ body a, body button {
   color: var(--color-neutral-400);
 }
 
-.dark .dark\:text-primary-400 {
-  color: var(--color-primary-400);
-}
-
 .dark .dark\:text-neutral-800 {
   color: var(--color-neutral-800);
 }

i18n/de.yaml

@@ -23,6 +23,9 @@ footer:
   light_appearance: "Zum hellen Erscheinungsbild wechseln"
   powered_by: "Erstellt mit {{ .Hugo }} & {{ .Congo }}"
 
+# header:
+#   skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "Link zu einer externen Seite"
   no_articles: "Es gibt hier noch keine Beiträge."

i18n/en.yaml

@@ -23,6 +23,9 @@ footer:
   light_appearance: "Switch to light appearance"
   powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}"
 
+header:
+  skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "Link to external site"
   no_articles: "There's no articles to list here yet."

i18n/es.yaml

@@ -23,6 +23,9 @@ footer:
   light_appearance: "Cambiar a modo claro"
   powered_by: "Desarrollada con {{ .Hugo }} & {{ .Congo }}"
 
+# header:
+#   skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "Link a página externa"
   no_articles: "Aún no hay artículos para listar aquí."

i18n/fr.yaml

@@ -23,6 +23,9 @@ footer:
   # light_appearance: "Switch to light appearance"
   powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}"
 
+# header:
+#   skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "Lien d'article externe."
   no_articles: "Il n'y a pas encore d'articles ici."

i18n/pt-BR.yaml

@@ -23,6 +23,9 @@ footer:
   light_appearance: "Mudar para modo claro"
   powered_by: "Movido por {{ .Hugo }} & {{ .Congo }}"
 
+# header:
+#   skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "Link para site externo"
   no_articles: "Não tem artigos para lista aqui ainda."

i18n/zh.yaml

@@ -22,6 +22,9 @@ footer:
   light_appearance: "切换为浅色模式"
   powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动"
 
+# header:
+#   skip_to_main: "Skip to main content"
+
 list:
   externalurl_title: "链接到外部网站"
   no_articles: "这里还没有任何文章可以列出。"

layouts/_default/baseof.html

@@ -14,8 +14,17 @@
   <body
     class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
   >
+    <div class="absolute flex self-center">
+      <a
+        class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0"
+        href="#maincontent"
+        ><span class="font-bold ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400"
+          >&darr;</span
+        >{{ i18n "header.skip_to_main" }}</a
+      >
+    </div>
     {{- partial "header.html" . -}}
-    <main class="grow">{{- block "main" . }}{{- end }}</main>
+    <main id="maincontent" class="grow">{{- block "main" . }}{{- end }}</main>
     {{- partial "footer.html" . -}}
   </body>
 </html>