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 {
|
||||
.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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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" }}
|
||||
|
|
|
@ -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 */ -}}
|
|
@ -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>
|
||||
|
|
|
@ -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 }}
|
||||
|
|
Loading…
Reference in a new issue