feat: add skip-to-content link to improve accessability (#985)
This commit is contained in:
parent
3d695d85a0
commit
b6d6abe239
|
@ -22,6 +22,10 @@
|
|||
</head>
|
||||
|
||||
<body itemscope itemtype="https://schema.org/WebPage">
|
||||
<div class="w-full flex justify-center">
|
||||
<a href="#main-content" id="gdoc-to-main" class="gdoc-markdown__link">Skip to main content</a>
|
||||
</div>
|
||||
|
||||
{{ partial "svg-icon-symbols" . }}
|
||||
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
<article
|
||||
class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
|
||||
id="main-content" tabindex="-1"
|
||||
>
|
||||
<h1>{{ partial "utils/title" . }}</h1>
|
||||
{{ partial "utils/content" . }}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
<article
|
||||
class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
|
||||
id="main-content" tabindex="-1"
|
||||
>
|
||||
<h1>{{ partial "utils/title" . }}</h1>
|
||||
{{ partial "page-metadata" . }}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<div id="main-content" tabindex="-1">
|
||||
{{ range .Paginator.Pages }}
|
||||
<article class="gdoc-post">
|
||||
<header class="gdoc-post__header">
|
||||
|
@ -31,6 +32,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<div id="main-content" tabindex="-1">
|
||||
{{ range .Paginator.Pages.ByTitle }}
|
||||
<article class="gdoc-post">
|
||||
<header class="gdoc-post__header">
|
||||
|
@ -28,5 +29,6 @@
|
|||
</footer>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<div id="main-content" tabindex="-1">
|
||||
{{ range .Paginator.Pages }}
|
||||
<article class="gdoc-markdown gdoc-post">
|
||||
<header class="gdoc-post__header">
|
||||
|
@ -29,6 +30,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ partial "pagination.html" . }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<article class="gdoc-post">
|
||||
<article class="gdoc-post" id="main-content" tabindex="-1">
|
||||
<header class="gdoc-post__header">
|
||||
<h1 class="gdoc-post__title">{{ partial "utils/title" . }}</h1>
|
||||
<div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">
|
||||
|
|
|
@ -105,6 +105,24 @@ body {
|
|||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
#gdoc-to-main {
|
||||
position: absolute;
|
||||
margin: defaults.$padding-8 0;
|
||||
padding: defaults.$padding-8;
|
||||
|
||||
display: inline-block;
|
||||
background-color: var(--accent-color-lite);
|
||||
border-radius: defaults.$border-radius;
|
||||
border: defaults.$border-1 solid var(--accent-color);
|
||||
|
||||
transform: translateY(0);
|
||||
transition: transform 250ms ease-in;
|
||||
|
||||
&:not(:focus) {
|
||||
transform: translateY(-#{defaults.$padding-64});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
|
@ -101,3 +101,7 @@
|
|||
display: inline-block;
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue