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 { .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 { .list-header {
hr {display: none;} hr {display: none;}
.container { .container {

View file

@ -1,6 +1,33 @@
@import "../../mixins/shadow.scss"; @import "../../mixins/shadow.scss";
.layout-_default-single { .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 { .page-header {
hr {display: none;} hr {display: none;}
.container { .container {

View file

@ -1,5 +1,5 @@
<!DOCTYPE html> <!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 */}} {{- /* TODO: more precise type detection */}}
{{- $itemtype := "https://schema.org/WebPage"}} {{- $itemtype := "https://schema.org/WebPage"}}
{{- if isset .Params "date" }} {{- if isset .Params "date" }}

View file

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

View file

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

View file

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