nfreear
diff --git a/‎plugins/mobile-theme/_includes/layouts/page.njk‎
Lines changed: 6 additions & 3 deletions b/‎plugins/mobile-theme/_includes/layouts/page.njk‎
Lines changed: 6 additions & 3 deletions
diff --git a/‎plugins/mobile-theme/css/index.css‎
Lines changed: 1 addition & 0 deletions b/‎plugins/mobile-theme/css/index.css‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎plugins/mobile-theme/css/skip-link.css‎
Lines changed: 36 additions & 0 deletions b/‎plugins/mobile-theme/css/skip-link.css‎
Lines changed: 36 additions & 0 deletions
diff --git a/‎plugins/shortcode/baseUrlShortcodePlugin.js‎
Lines changed: 5 additions & 0 deletions b/‎plugins/shortcode/baseUrlShortcodePlugin.js‎
Lines changed: 5 additions & 0 deletions
@@ -6,10 +6,10 @@ layout: dia_outer_page
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="generator" content="{{ eleventy.generator }}">
-  <base href="{% myBaseUrl %}">
+  <!-- <base href="{% myBaseUrl %}"> -->
 
   <link rel="manifest" href="./manifest.json">
-  <link rel="stylesheet" href="./css/index.css">
+  <link rel="stylesheet" href="/css/index.css">
 
 {% include '../en/dc-metadata.njk' %}
 {# {% include '../head/stylesheets.njk' %} #}
@@ -21,13 +21,16 @@ layout: dia_outer_page
 
 </head>
 <body>
+<skip-link>
+  <a href="#main-content">Skip to main content</a>
+</skip-link>
 {% include '../en/header.njk' %}
 
 <share-button></share-button>
 
 <page-note hidden></page-note>
 
-<main id="main">
+<main id="main-content">
 {{ content | safe }}
 </main>
 
 
@@ -7,6 +7,7 @@
 @import "https://esm.sh/gh/nfreear/fix-title-attr/style.css";
 /* @import "https://esm.sh/fix-title-attr@0.9.5/style.css" */
 @import "custom-elements.css" screen;
+@import "skip-link.css";
 
 /* Print and aural */
 @import "print.css" print;
 
@@ -0,0 +1,36 @@
+:root {
+  --dia-transition: 250ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dia-transition: 0;
+  }
+}
+
+skip-link {
+  position: relative;
+
+  a {
+    background-color: var(--dia-bg-color, white);
+    display: inline-block;
+    position: absolute;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+
+    &:focus {
+      border: 2px solid var(--dia-theme-color, gray);
+      height: auto;
+      min-width: 11rem;
+      padding: .6rem;
+      transition: all var(--dia-transition);
+    }
+  }
+}
+
+main {
+  a.skip {
+    display: none;
+  }
+}
@@ -5,6 +5,9 @@
  * @see https://codepen.io/nfreear/pen/RNRWmpP
  */
 export default function baseUrlShortcodePlugin (eleventyConfig, options) {
+  /**
+   * Used on the 404 error page, "404.html"!
+   */
   eleventyConfig.addShortcode('myBaseUrl', function () {
     // Only use the configurable `buildBaseUrl` option in "build" mode (not "serve" mode)!
     const isBuild = (this.eleventy.env.runMode === 'build');
@@ -13,6 +16,8 @@ export default function baseUrlShortcodePlugin (eleventyConfig, options) {
     return baseUrl;
   });
 
+  /** Used in "sitemap-xml.html"
+   */
   eleventyConfig.addFilter('myAbsoluteUrl', function (path) {
     console.assert(process.env.ABSOLUTE_URL, 'Missing ABSOLUTE_URL environment variable.');
     return `${process.env.ABSOLUTE_URL}${path}`;