feat: add 'back-to-top' link to site footer (#167)
* feat: add 'back-to-top' link to site footer * add aria-label to linkuci-hugo-doc
parent
4bdf727cea
commit
8abe25f3cb
Binary file not shown.
Before Width: | Height: | Size: 715 KiB |
|
@ -94,6 +94,9 @@ enableGitInfo = true
|
||||||
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
||||||
# bright spots while using the dark mode.
|
# bright spots while using the dark mode.
|
||||||
geekdocDarkModeDim = false
|
geekdocDarkModeDim = false
|
||||||
|
|
||||||
|
# (Optional, default true) Display a "Back to top" link in the site footer.
|
||||||
|
geekdocBackToTop = true
|
||||||
```
|
```
|
||||||
|
|
||||||
{{< /tab >}}
|
{{< /tab >}}
|
||||||
|
@ -190,6 +193,9 @@ params:
|
||||||
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
# (Optional, default false) Auto-decrease brightness of images and add a slightly grayscale to avoid
|
||||||
# bright spots while using the dark mode.
|
# bright spots while using the dark mode.
|
||||||
geekdocDarkModeDim: false
|
geekdocDarkModeDim: false
|
||||||
|
|
||||||
|
# (Optional, default true) Display a "Back to top" link in the site footer.
|
||||||
|
geekdocBackToTop: true
|
||||||
```
|
```
|
||||||
|
|
||||||
{{< /tab >}}
|
{{< /tab >}}
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
<footer class="gdoc-footer">
|
<footer class="gdoc-footer flex">
|
||||||
<div class="container flex flex-wrap">
|
<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
|
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>
|
<svg class="icon gdoc_heart"><use xlink:href="#gdoc_heart"></use></svg>
|
||||||
</span>
|
</span>
|
||||||
{{ with .Site.Params.GeekdocLegalNotice }}
|
{{ 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>
|
<a href="{{ . | relURL }}" class="gdoc-footer__link">Legal Notice</a>
|
||||||
</span>
|
</span>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Site.Params.GeekdocPrivacyPolicy }}
|
{{ 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>
|
<a href="{{ . | relURL }}" class="gdoc-footer__link">Privacy Policy</a>
|
||||||
</span>
|
</span>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</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>
|
</footer>
|
||||||
|
|
|
@ -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 |
|
@ -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 |
|
@ -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 |
|
@ -385,7 +385,7 @@ img {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
border-top: 1px dashed $gray-600;
|
border-top: 1px dashed $gray-600;
|
||||||
padding: $padding-32 0;
|
padding: $padding-32 0;
|
||||||
line-height: 1.5;
|
line-height: 1.5em;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
@ -446,9 +446,19 @@ img {
|
||||||
background: var(--footer-background);
|
background: var(--footer-background);
|
||||||
color: var(--footer-font-color);
|
color: var(--footer-font-color);
|
||||||
|
|
||||||
|
.fake-link:hover {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
var(--footer-link-color),
|
||||||
|
var(--footer-link-color)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
&__item {
|
&__item {
|
||||||
margin-right: 1em;
|
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
|
|
||||||
|
&--row {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.gdoc-footer {
|
.gdoc-footer {
|
||||||
&__item {
|
&__item--row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,6 +6,10 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-25 {
|
||||||
|
flex: 1 1 25%;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-inline {
|
.flex-inline {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue