From b99b6a8750599c6bf885badabc2d7917f4b6efdb Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Tue, 18 Jan 2022 17:26:46 +1100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20scroll=20to=20top=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 +- assets/css/compiled/main.css | 103 +++++++++++++++++------- config/_default/params.toml | 1 + exampleSite/config/_default/params.toml | 1 + i18n/de.yaml | 7 +- i18n/en.yaml | 7 +- i18n/es.yaml | 7 +- i18n/fr.yaml | 7 +- i18n/pt-BR.yaml | 7 +- i18n/zh.yaml | 7 +- layouts/_default/baseof.html | 25 +++++- layouts/partials/footer.html | 7 +- 12 files changed, 128 insertions(+), 53 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6359de93..91065d1d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Tables of Contents on article pages - Taxonomies on article and list pages - Author `headline` parameter -- Skip to content links +- Skip to content and Scroll to top links ### Changed diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index edcc3118..57493d22 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1413,6 +1413,14 @@ body a, body button { text-decoration-line: underline; } +.pointer-events-none { + pointer-events: none; +} + +.pointer-events-auto { + pointer-events: auto; +} + .invisible { visibility: hidden; } @@ -1429,6 +1437,11 @@ body a, body button { position: relative; } +.sticky { + position: -webkit-sticky; + position: sticky; +} + .inset-0 { top: 0px; right: 0px; @@ -1436,6 +1449,26 @@ body a, body button { left: 0px; } +.top-\[100vh\] { + top: 100vh; +} + +.right-0 { + right: 0px; +} + +.bottom-16 { + bottom: 4rem; +} + +.-bottom-4 { + bottom: -1rem; +} + +.top-\[calc\(100vh-5rem\)\] { + top: calc(100vh - 5rem); +} + .top-20 { top: 5rem; } @@ -1602,6 +1635,10 @@ body a, body button { height: 100vh; } +.h-12 { + height: 3rem; +} + .h-24 { height: 6rem; } @@ -1610,10 +1647,6 @@ body a, body button { height: 2rem; } -.h-12 { - height: 3rem; -} - .h-full { height: 100%; } @@ -1630,6 +1663,10 @@ body a, body button { min-height: 0px; } +.w-12 { + width: 3rem; +} + .w-36 { width: 9rem; } @@ -1765,14 +1802,14 @@ body a, body button { scroll-behavior: smooth; } -.rounded-md { - border-radius: 0.375rem; -} - .rounded-full { border-radius: 9999px; } +.rounded-md { + border-radius: 0.375rem; +} + .rounded { border-radius: 0.25rem; } @@ -1837,6 +1874,10 @@ body a, body button { background-color: rgba(var(--color-primary-200), var(--tw-bg-opacity)); } +.bg-neutral\/50 { + background-color: rgba(var(--color-neutral), 0.5); +} + .bg-neutral-500\/50 { background-color: rgba(var(--color-neutral-500), 0.5); } @@ -1928,16 +1969,16 @@ body a, body button { padding-bottom: 2.5rem; } -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } +.py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -1995,6 +2036,11 @@ body a, body button { line-height: 1.25rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -2005,11 +2051,6 @@ body a, body button { line-height: 1.5rem; } -.text-xl { - font-size: 1.25rem; - line-height: 1.75rem; -} - .text-xs { font-size: 0.75rem; line-height: 1rem; @@ -2074,16 +2115,16 @@ body a, body button { color: rgba(var(--color-primary-600), var(--tw-text-opacity)); } -.text-neutral-700 { - --tw-text-opacity: 1; - color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); -} - .text-neutral-500 { --tw-text-opacity: 1; color: rgba(var(--color-neutral-500), var(--tw-text-opacity)); } +.text-neutral-700 { + --tw-text-opacity: 1; + color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); +} + .text-primary-500 { --tw-text-opacity: 1; color: rgba(var(--color-primary-500), var(--tw-text-opacity)); @@ -2134,6 +2175,12 @@ body a, body button { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.backdrop-blur { + --tw-backdrop-blur: blur(8px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} + .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -2185,16 +2232,16 @@ body a, body button { background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)) !important; } -.hover\:text-primary-700:hover { - --tw-text-opacity: 1; - color: rgba(var(--color-primary-700), var(--tw-text-opacity)); -} - .hover\:text-primary-500:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-500), var(--tw-text-opacity)); } +.hover\:text-primary-700:hover { + --tw-text-opacity: 1; + color: rgba(var(--color-primary-700), var(--tw-text-opacity)); +} + .hover\:text-primary-400:hover { --tw-text-opacity: 1; color: rgba(var(--color-primary-400), var(--tw-text-opacity)); diff --git a/config/_default/params.toml b/config/_default/params.toml index f271555e..1cc85e8d 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -13,6 +13,7 @@ enableSearch = false # description = "My awesome website" # mainSections = ["section1", "section2"] # robots = "" +showScrollToTop = true [homepage] layout = "page" # valid options: page, profile, custom diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 8bed8c36..74392afb 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -13,6 +13,7 @@ enableSearch = true # description = "My awesome website" mainSections = ["samples"] # robots = "" +showScrollToTop = true [homepage] layout = "custom" # valid options: page, profile, custom diff --git a/i18n/de.yaml b/i18n/de.yaml index bbb922e4..b0a7470c 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -24,13 +24,14 @@ footer: light_appearance: "Zum hellen Erscheinungsbild wechseln" powered_by: "Erstellt mit {{ .Hugo }} & {{ .Congo }}" -# header: -# skip_to_main: "Skip to main content" - list: externalurl_title: "Link zu einer externen Seite" no_articles: "Es gibt hier noch keine Beiträge." +# nav: +# scroll_to_top_title: "Scroll to top" +# skip_to_main: "Skip to main content" + # search: # open_button_title: "Search (/)" # close_button_title: "Close (Esc)" diff --git a/i18n/en.yaml b/i18n/en.yaml index f80eb850..2be6fc30 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -24,13 +24,14 @@ footer: light_appearance: "Switch to light appearance" powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}" -header: - skip_to_main: "Skip to main content" - list: externalurl_title: "Link to external site" no_articles: "There's no articles to list here yet." +nav: + scroll_to_top_title: "Scroll to top" + skip_to_main: "Skip to main content" + search: open_button_title: "Search (/)" close_button_title: "Close (Esc)" diff --git a/i18n/es.yaml b/i18n/es.yaml index 59430b00..44cb5c22 100644 --- a/i18n/es.yaml +++ b/i18n/es.yaml @@ -24,13 +24,14 @@ footer: light_appearance: "Cambiar a modo claro" powered_by: "Desarrollada con {{ .Hugo }} & {{ .Congo }}" -# header: -# skip_to_main: "Skip to main content" - list: externalurl_title: "Link a página externa" no_articles: "Aún no hay artículos para listar aquí." +# nav: +# scroll_to_top_title: "Scroll to top" +# skip_to_main: "Skip to main content" + # search: # open_button_title: "Search (/)" # close_button_title: "Close (Esc)" diff --git a/i18n/fr.yaml b/i18n/fr.yaml index f1cf5cfc..d9e0c286 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -24,13 +24,14 @@ footer: # light_appearance: "Switch to light appearance" powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}" -# header: -# skip_to_main: "Skip to main content" - list: externalurl_title: "Lien d'article externe." no_articles: "Il n'y a pas encore d'articles ici." +# nav: +# scroll_to_top_title: "Scroll to top" +# skip_to_main: "Skip to main content" + # search: # open_button_title: "Search (/)" # close_button_title: "Close (Esc)" diff --git a/i18n/pt-BR.yaml b/i18n/pt-BR.yaml index 05a79866..a0085376 100644 --- a/i18n/pt-BR.yaml +++ b/i18n/pt-BR.yaml @@ -24,13 +24,14 @@ footer: light_appearance: "Mudar para modo claro" powered_by: "Movido por {{ .Hugo }} & {{ .Congo }}" -# header: -# skip_to_main: "Skip to main content" - list: externalurl_title: "Link para site externo" no_articles: "Não tem artigos para lista aqui ainda." +# nav: +# scroll_to_top_title: "Scroll to top" +# skip_to_main: "Skip to main content" + # search: # open_button_title: "Search (/)" # close_button_title: "Close (Esc)" diff --git a/i18n/zh.yaml b/i18n/zh.yaml index dbf0ea1a..58056784 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -23,13 +23,14 @@ footer: light_appearance: "切换为浅色模式" powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动" -# header: -# skip_to_main: "Skip to main content" - list: externalurl_title: "链接到外部网站" no_articles: "这里还没有任何文章可以列出。" +# nav: +# scroll_to_top_title: "Scroll to top" +# skip_to_main: "Skip to main content" + # search: # open_button_title: "Search (/)" # close_button_title: "Close (Esc)" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d027a553..2e279fa9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,17 +14,36 @@ -
+
↓{{ i18n "header.skip_to_main" }}{{ i18n "nav.skip_to_main" }}
{{- partial "header.html" . -}} -
{{- block "main" . }}{{- end }}
+
+ {{- block "main" . }}{{- end }} + {{ if .Site.Params.showScrollToTop | default true }} +
+ ↑ +
+ {{ end }} +
{{ if .Site.Params.enableSearch | default false }} {{- partial "search.html" . -}} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 64ea2725..5af75b16 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -32,7 +32,8 @@ {{ if .Site.Params.attribution | default true }}

{{ $hugo := printf `Hugo` }} + href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Hugo` + }} {{ $congo := printf `Congo` }} {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }}

@@ -43,14 +44,14 @@