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

This commit is contained in:
Robert Kaussow 2021-11-23 21:40:58 +01:00 committed by GitHub
parent 73e3888dcc
commit 17e2455161
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 87 additions and 40 deletions

View File

@ -124,6 +124,9 @@ enableRobotsTXT = true
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekblogDarkModeDim = false geekblogDarkModeDim = false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop = true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
[params.geekblogHostedOn] [params.geekblogHostedOn]
@ -253,6 +256,9 @@ params:
# bright spots while using the dark mode. # bright spots while using the dark mode.
geekblogDarkModeDim: false geekblogDarkModeDim: false
# (Optional, default true) Display a "Back to top" link in the site footer.
geekblogBackToTop: true
# (Optional, default none) Adds a "Hosted on <provider>" line to the footer. # (Optional, default none) Adds a "Hosted on <provider>" line to the footer.
# Could be used if you want to give credits to your hosting provider. # Could be used if you want to give credits to your hosting provider.
geekblogHostedOn: geekblogHostedOn:

View File

@ -14,7 +14,7 @@
{{ $icon := default false .icon }} {{ $icon := default false .icon }}
{{ if eq $target "footer" }} {{ if eq $target "footer" }}
<span class="gblog-footer__item"> <span class="gblog-footer__item gblog-footer__item--row">
{{ if $icon }}<svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>{{ end }} {{ if $icon }}<svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>{{ end }}
<a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}" <a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}"
class="gblog-footer__link"> class="gblog-footer__link">

View File

@ -1,45 +1,56 @@
<footer class="gblog-footer"> <footer class="gblog-footer">
<nav class="container"> <nav class="container flex">
<section class="flex flex-wrap align-center"> <div>
{{ with (.Site.GetPage "home").OutputFormats.Get "atom" }} <section class="flex flex-wrap align-center">
<span class="gblog-footer__item"> {{ with (.Site.GetPage "home").OutputFormats.Get "atom" }}
<svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg> <span class="gblog-footer__item gblog-footer__item--row">
<a href='{{ .Permalink | relURL }}' class="gblog-footer__link">Atom Feed</a> <svg class="icon gblog_rss_feed"><use xlink:href="#gblog_rss_feed"></use></svg>
</span> <a href='{{ .Permalink | relURL }}' class="gblog-footer__link">Atom Feed</a>
</span>
{{ end }}
{{ if .Site.Data.menu.extra.footer }}
{{ partial "menu-extra" (dict "current" . "source" .Site.Data.menu.extra.footer "target" "footer") }}
{{ end }}
{{ with .Site.Params.GeekblogLegalNotice }}
<span class="gblog-footer__item gblog-footer__item--row">
<a href="{{ . | relURL }}" class="gblog-footer__link">Legal Notice</a>
</span>
{{ end }}
{{ with .Site.Params.GeekblogPrivacyPolicy }}
<span class="gblog-footer__item gblog-footer__item--row">
<a href="{{ . | relURL }}" class="gblog-footer__link">Privacy Policy</a>
</span>
{{ end }}
</section>
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Built with <a href="https://gohugo.io/" class="gblog-footer__link">Hugo</a> and
<svg class="icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
</span>
</section>
{{ with .Site.Params.GeekblogHostedOn }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Hosted on <a href="{{ .link }}" class="gblog-footer__link">{{ .name }}</a>
</span>
</section>
{{ end }} {{ end }}
{{ if .Site.Data.menu.extra.footer }} {{ with .Site.Params.GeekblogContentLicense }}
{{ partial "menu-extra" (dict "current" . "source" .Site.Data.menu.extra.footer "target" "footer") }} <section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Content licensed under <a href="{{ .link }}" class="gblog-footer__link no-wrap">{{ .name }}</a>
</span>
</section>
{{ end }} {{ end }}
{{ with .Site.Params.GeekblogLegalNotice }} </div>
<span class="gblog-footer__item"> {{ if (default true .Site.Params.GeekdocBackToTop) }}
<a href="{{ . | relURL }}" class="gblog-footer__link">Legal Notice</a> <div class="flex flex-25 justify-end">
<span class="gblog-footer__item text-right">
<a class="gblog-footer__link fake-link" href="#" aria-label="Back to top">
<svg class="icon gblog_keyborad_arrow_up"><use xlink:href="#gblog_keyborad_arrow_up"></use></svg> <span class="hidden-mobile">Back to top</span>
</a>
</span> </span>
{{ end }} </div>
{{ with .Site.Params.GeekblogPrivacyPolicy }}
<span class="gblog-footer__item">
<a href="{{ . | relURL }}" class="gblog-footer__link">Privacy Policy</a>
</span>
{{ end }}
</section>
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Built with <a href="https://gohugo.io/" class="gblog-footer__link">Hugo</a> and
<svg class="icon gblog_heart"><use xlink:href="#gblog_heart"></use></svg>
</span>
</section>
{{ with .Site.Params.GeekblogHostedOn }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Hosted on <a href="{{ .link }}" class="gblog-footer__link">{{ .name }}</a>
</span>
</section>
{{ end }}
{{ with .Site.Params.GeekblogContentLicense }}
<section class="flex flex-wrap align-center">
<span class="gblog-footer__item">
Content licensed under <a href="{{ .link }}" class="gblog-footer__link no-wrap">{{ .name }}</a>
</span>
</section>
{{ end }} {{ end }}
</nav> </nav>
</footer> </footer>

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-7.27 -7.27 42.55 42.55"><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="-7.27 -7.27 42.55 42.55"><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,4 @@
<!-- 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_down</title>
<path d="M3.281 5.36l10.719 10.719 10.719-10.719 3.281 3.281-14 14-14-14z"></path></svg>

After

Width:  |  Height:  |  Size: 255 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

@ -447,8 +447,19 @@ img {
background: $second-color; background: $second-color;
color: $gray-100; color: $gray-100;
.fake-link {
background-image: linear-gradient(
var(--footer-link-color),
var(--footer-link-color)
);
}
&__item { &__item {
margin: $padding-8 $padding-8 $padding-8 0; line-height: 2em;
&--row {
margin-right: $padding-16;
}
} }
&__link { &__link {

View File

@ -10,6 +10,10 @@
flex: 1 1 auto; flex: 1 1 auto;
} }
.flex-25 {
flex: 1 1 25%;
}
.flex-even { .flex-even {
flex: 1 1; flex: 1 1;
} }
@ -53,6 +57,10 @@
text-align: center; text-align: center;
} }
.text-right {
text-align: right;
}
.no-wrap { .no-wrap {
white-space: nowrap; white-space: nowrap;
} }