WIP: add skip links
This commit is contained in:
parent
f2c7629ba6
commit
1fccceee9b
6 changed files with 66 additions and 2 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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" }}
|
||||||
|
|
|
@ -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 */ -}}
|
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
Loading…
Reference in a new issue