Add skip-link

This one is simpler than the last attempt, since it doesn't overlap with
any content except the navbar links' empty padding.

assets/css/main.css

@@ -145,9 +145,9 @@ html {
 		margin: -.75em -.25em;
 	}
 
+	header a[href="#main"],
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
-	header > nav,
 	/* List items with direct hyperlink children should only have one hyperlink. */
 	li > a,
 	aside > a,
@@ -156,6 +156,12 @@ html {
 		display: inline-block;
 	}
 
+	/* The nav has to be distant-enough from the top to make room for a skip-link. */
+	header > nav {
+		margin: .75em 0 0 -.25em;
+		display: block;
+	}
+
 	/* Multiple consecutive <dt> that share a <dd> shouldn't have tap targets overlap */
 	dt + dt > a {
 		padding-top: 0;
@@ -176,6 +182,16 @@ html {
 	section[role="doc-endnotes"] li {
 		margin-bottom: 1.75em;
 	}
+
+	header a[href="#main"] {
+		position: absolute;
+		top: -2em;
+		padding: 0 .25em;
+	}
+
+	header a[href="#main"]:focus {
+		top: 0;
+	}
 }
 
 /* narrow screens: reduce list indentation, hyphenate nested lists

assets/css/print.css

@@ -7,7 +7,7 @@
 	}
 
 	/* Hide screen-only content */
-
+	header a[href="#main"], /* Skip link */
 	aside:not([role="note"]),
 	/* An un-opened summary inside an article has no use in print.
 	 * Outside an article it's used in my webring list where it has some

layouts/_default/bookmarks.html

@@ -1,5 +1,6 @@
 {{ define "main" -}}
-<main itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
 	<h1 id="bookmarks" class="p-name" itemprop="name headline">My book&#173;marks</h1>
 	{{ partial "processed-content.html" . }}
 	<p role="doc-tip">

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "main" -}}
-<main itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
 	{{ partial "processed-content.html" . }}
 	<p role="doc-tip">
 		Timestamp format: <code>YYYY-MM-DD HH:MM</code>, as per <cite><a href="https://www.ietf.org/rfc/rfc3339.txt">RFC 3339</a></cite>. Sorted newest to oldest.

layouts/_default/search.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main >
+<main id="main" tabindex="-1">
 	<h1>Search</h1>
 	<p role="note">This page is an unfinished work-in-progress.</p>
 	{{ partial "search.html" . }}

layouts/_default/single.html

@@ -1,6 +1,7 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+	itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	{{ partial "full-article.html" . }}
 </main>
 {{ end }}

layouts/about/list.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main>
+<main id="main" tabindex="-1">
 	{{- $articleTag := printf `<article class="h-entry hentry" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="%s%s">` .Site.Params.CanonicalBaseURL $canonicalRelPermalink -}}
 	{{ partial "full-article.html" . | replaceRE `<article class="h-entry hentry">` $articleTag | safeHTML }}
 <hr />

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "main" -}}
-<main>
+<main id="main" tabindex="-1">
 {{ partial "processed-content.html" . }}
 {{ partial "posts.html" . }}
 {{ partial "webrings.html" . }}

layouts/notes/single.html

@@ -1,6 +1,7 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main itemprop="hasPart" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+ itemprop="hasPart" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}
 	{{ partial "webmentions.html" . }}

layouts/partials/header.html

@@ -1,4 +1,5 @@
 	<header>
+		<a href="#main">Skip to content</a>
 		<nav aria-label="Global">
 			<ul>
 				{{- $currentPage := . -}}

layouts/posts/single.html

@@ -1,7 +1,8 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
 {{- .Scratch.Set "codeIndex" 1 -}}
-<main itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ with .Params.articleType }} https://schema.org/{{ . }}{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+<main id="main" tabindex="-1"
+ itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ with .Params.articleType }} https://schema.org/{{ . }}{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}
 	{{ partial "webmentions.html" . }}