WIP: add skip links

This commit is contained in:
a 2024-10-16 02:34:56 -05:00
parent f2c7629ba6
commit 1fccceee9b
6 changed files with 66 additions and 2 deletions

View file

@ -1,4 +1,32 @@
@import "../../mixins/shadow.scss";
.layout-_default-list {
.skip-to-items {
position: absolute;
inset-block-start: -5em;
inset-inline-start: 1em;
transition: all 0.25s ease-in;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 1em;
@include shadow-low;
&:focus {
inset-block-start: 1em;
}
}
.back-to-top {
position: absolute;
inset-block-end: 1em;
inset-inline-start: -10em;
transition: all 0.25s ease-in;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 1em;
@include shadow-low;
&:focus {
inset-inline-start: 1em;
}
}
.list-header {
hr {display: none;}
.container {

View file

@ -1,6 +1,33 @@
@import "../../mixins/shadow.scss";
.layout-_default-single {
position: relative;
.skip-to-end-of-header {
position: absolute;
inset-block-start: -5em;
inset-inline-start: 1em;
transition: 0.25s all ease-in;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 1em;
@include shadow-low;
&:focus {
inset-block-start: 1em;
}
}
.back-to-top {
position: absolute;
inset-block-end: 1em;
inset-inline-start: -10em;
transition: 0.25s all ease-in;
background: var(--ui-overlay);
color: var(--ui-overlay-text);
padding: 1em;
@include shadow-low;
&:focus {
inset-inline-start: 1em;
}
}
.page-header {
hr {display: none;}
.container {

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{.Site.Language.Lang }}" xml:lang="{{.Site.Language.Lang }}">
<html{{with (or .Language.Lang .Site.Language.Lang) }} lang="{{.}}"{{end}}>
{{- /* TODO: more precise type detection */}}
{{- $itemtype := "https://schema.org/WebPage"}}
{{- if isset .Params "date" }}

View file

@ -14,6 +14,7 @@
<div class="list-content e-content hugo-content">
{{- .Content }}
</div>
<a href="#items" class="skip-to-items">Skip to the feed items</a>
<p class="list-permalink">h-feed URL: <a href="{{.Permalink}}" rel="self" class="u-url">{{.Permalink}}</a></p>
{{- with .AlternativeOutputFormats }}
<div class="list-alt-formats">
@ -29,7 +30,7 @@
</div>
</header>
{{ "<!-- list the pages in this section/taxonomy/term/etc -->" | safeHTML }}
<section class="list-pages section">
<section class="list-pages section" id="items">
<div class="container">
<ol class="pages-list">
{{- range .Pages }}
@ -75,6 +76,9 @@
</ol>
</div>
</section>
<footer>
<a href="#main" class="back-to-top">Go back to the top</a>
</footer>
</main>
</body>
{{ end }}{{/* end define-body */ -}}

View file

@ -37,6 +37,7 @@
</p>
{{- end }}
{{- end }}
<a href="#end-of-header" class="skip-to-end-of-header">Skip syndication information</a>
{{- with .Permalink }}
<p class="page-permalink">h-entry URL: <a class="u-url url" href="{{.}}">{{.}}</a></p>
{{- end }}
@ -64,6 +65,7 @@
{{ end }} */}}
</div>
<hr />
<a id="end-of-header"></a>
</header>
{{- if .Params.series }}
{{ "<!-- article aside: this article is part of a series -->" | safeHTML }}
@ -121,6 +123,7 @@
</div>
</footer>
</article>
<a href="#main" class="back-to-top">Back to top</a>
{{ "<!-- end article -->" | safeHTML }}
</main>
</body>

View file

@ -8,6 +8,8 @@
<img class="author-card__avatar u-photo u-logo photo logo"
src="{{.}}"
alt=""
width="48"
height="48"
aria-hidden="true"
/>
{{- end }}