feat: add 'back-to-top' link to site footer (#167)

* feat: add 'back-to-top' link to site footer

* add aria-label to link
This commit is contained in:
Robert Kaussow 2021-07-20 09:58:56 +02:00 committed by GitHub
parent 4bdf727cea
commit 8abe25f3cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 41 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 715 KiB

View file

@ -94,6 +94,9 @@ enableGitInfo = true
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode.
geekdocDarkModeDim = false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekdocBackToTop = true
```
{{< /tab >}}
@ -190,6 +193,9 @@ params:
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
# bright spots while using the dark mode.
geekdocDarkModeDim: false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekdocBackToTop: true
```
{{< /tab >}}

View file

@ -1,18 +1,25 @@
<footer class="gdoc-footer">
<footer class="gdoc-footer flex">
<div class="container flex flex-wrap">
<span class="gdoc-footer__item">
<span class="gdoc-footer__item gdoc-footer__item--row">
Built with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
<svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
</span>
{{ with .Site.Params.GeekdocLegalNotice }}
<span class="gdoc-footer__item">
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="{{ . | relURL }}" class="gdoc-footer__link">Legal Notice</a>
</span>
{{ end }}
{{ with .Site.Params.GeekdocPrivacyPolicy }}
<span class="gdoc-footer__item">
<span class="gdoc-footer__item gdoc-footer__item--row">
<a href="{{ . | relURL }}" class="gdoc-footer__link">Privacy Policy</a>
</span>
{{ end }}
</div>
{{ if (default true .Site.Params.GeekdocBackToTop) }}
<div class="container flex flex-25 justify-end">
<span class="gdoc-footer__item">
<a class="gdoc-footer__link fake-link" href="#" aria-label="Back to top"><svg class="icon gdoc_keyborad_arrow_up"><use xlink:href="#gdoc_keyborad_arrow_up"></use></svg> <span class="hidden-mobile">Back to top</span></a>
</span>
</div>
{{ end }}
</footer>

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M3.281 5.36L14 16.079 24.719 5.36 28 8.641l-14 14-14-14z"/></svg>

After

Width:  |  Height:  |  Size: 171 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-2.29 -2.29 32.57 32.57"><path d="M24.719 22.64L14 11.921 3.281 22.64 0 19.359l14-14 14 14z"/></svg>

After

Width:  |  Height:  |  Size: 172 B

View file

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 28 28">
<title>keyboard_arrow_up</title>
<path d="M24.719 22.64l-10.719-10.719-10.719 10.719-3.281-3.281 14-14 14 14z"></path>
</svg>

After

Width:  |  Height:  |  Size: 257 B

View file

@ -385,7 +385,7 @@ img {
word-wrap: break-word;
border-top: 1px dashed $gray-600;
padding: $padding-32 0;
line-height: 1.5;
line-height: 1.5em;
&:first-of-type {
padding-top: 0;
@ -446,9 +446,19 @@ img {
background: var(--footer-background);
color: var(--footer-font-color);
.fake-link:hover {
background-image: linear-gradient(
var(--footer-link-color),
var(--footer-link-color)
);
}
&__item {
margin-right: 1em;
line-height: 2em;
&--row {
margin-right: 1em;
}
}
&__link {

View file

@ -50,7 +50,7 @@
}
.gdoc-footer {
&__item {
&__item--row {
width: 100%;
}
}

View file

@ -6,6 +6,10 @@
flex: 1 1 auto;
}
.flex-25 {
flex: 1 1 25%;
}
.flex-inline {
display: inline-flex;
}