diff options
| -rw-r--r-- | assets/css/main.css | 30 | ||||
| -rw-r--r-- | i18n/de.toml | 1 | ||||
| -rw-r--r-- | i18n/en.toml | 1 | ||||
| -rw-r--r-- | layouts/_default/single.html | 6 | ||||
| -rw-r--r-- | layouts/partials/single/next-prev.html | 13 |
5 files changed, 48 insertions, 3 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 5a4f7c5..01fa94a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -360,6 +360,10 @@ time { } /* Article */ +.post { + position: relative; /* Needed for post__scroll-top */ +} + .post__header { margin-bottom: var(--gap-large); } @@ -375,6 +379,32 @@ time { } } +.post___scroll-top { + background-color: var(--bg-special); + border-radius: var(--border-radius-max); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.5rem; + width: 2.5rem; + position: absolute; + bottom: 5rem; + right: 0; + z-index: 1000; + + & svg { + height: 2rem; + width: 2rem; + padding-bottom: 0.2rem; + } + + &:hover { + background-color: var(--link-hover); + } +} + .post__tags { margin: var(--margin-padding-Y-big); } diff --git a/i18n/de.toml b/i18n/de.toml index 84f1a47..ee47a2d 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -29,6 +29,7 @@ next = "Nächster Beitrag:" previous = "Vorheriger Beitrag:" recent = "Neueste Beiträge" + top = "Zurück zum Anfang" view_all = "Alle Beiträge" [search] diff --git a/i18n/en.toml b/i18n/en.toml index fad6db0..a053395 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -29,6 +29,7 @@ next = "Next post:" previous = "Previous post:" recent = "Recent Posts" + top = "Back to top" view_all = "View all posts" [search] diff --git a/layouts/_default/single.html b/layouts/_default/single.html index dba5a10..e1728d3 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,9 +4,11 @@ <h1 class="post__headline"> {{ .Title }} </h1> - <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" class="post__publish-date"> - {{ .Date | time.Format ":date_medium" }} + {{- with .Date }} + <time datetime="{{ .Format "2006-01-02T15:04:05Z07:00" }}" class="post__publish-date"> + {{ . | time.Format ":date_medium" }} </time> + {{- end }} </header> <div class="post__content"> diff --git a/layouts/partials/single/next-prev.html b/layouts/partials/single/next-prev.html index 73d48cf..4d6e962 100644 --- a/layouts/partials/single/next-prev.html +++ b/layouts/partials/single/next-prev.html @@ -1,4 +1,4 @@ -{{- /* Navigation for Next and Previous Post */ -}} +{{- /* Navigation for next & previous post and back to top */ -}} {{- if ne .Params.excludeFromLists true }} <nav class="post__navigation" aria-label="{{ lang.Translate "post.navigation" | default "Post navigation" }}"> <ul class="post__navigation-list"> @@ -29,4 +29,15 @@ {{- end }} </ul> </nav> + +<a + href="#" + class="post__scroll-top" + aria-label="{{ lang.Translate "posts.top" | default "Back to top" }}" + title="{{ lang.Translate "posts.top" | default "Back to top" }}" +> + <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="M17 15L12 10L7 15" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> + </svg> +</a> {{- end }} |