From a25ea40300125cba6a788217c53f623eca3bd7d6 Mon Sep 17 00:00:00 2001 From: Hoernschen Date: Mon, 8 Jan 2024 10:23:35 +0100 Subject: [PATCH] ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar --- assets/scss/index.scss | 57 +++++++++++++++++++++++--- layouts/_default/list.html | 2 - layouts/partials/components/icon.html | 5 ++- layouts/partials/components/image.html | 21 +++++++++- layouts/partials/footer.html | 3 +- layouts/partials/head.html | 17 +++++--- layouts/partials/header.html | 3 +- static/js/scroll.js | 12 ++++++ static/js/theme.js | 2 + 9 files changed, 105 insertions(+), 17 deletions(-) create mode 100644 static/js/scroll.js diff --git a/assets/scss/index.scss b/assets/scss/index.scss index f8dcdf7..b701dad 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -44,6 +44,12 @@ header, footer { color: white; } +header { + position: sticky; + top: 0; + z-index: 9; +} + html, body { height: 100%; } @@ -146,6 +152,15 @@ a { padding-inline-end: 16px; } +.progress { + background: {{ .Site.Params.color.primary }}; + height: 5px; + width: 0%; + position: fixed; + top: 0; + z-index: 10; +} + /* Footer */ .footer { @@ -196,6 +211,34 @@ a { font-size: small; } +.totop { + display: inline-flex; + background-color: {{ .Site.Params.color.primary }}; + color: #f2f2f2; + width: 40px; + height: 40px; + align-items: center; + justify-content: center; + border-radius: 50%; + margin: 20px; + position: fixed; + bottom: 0px; + right: 0px; + transition: background-color .3s; + z-index: 10; + visibility: hidden; + opacity: 0; +} + +.totop:hover { + filter: brightness(60%); +} + +.totop.show { + visibility: visible; + opacity: 1; +} + /* Sections */ #content { @@ -304,8 +347,8 @@ a { } /* Buttons */ - -button { +/* TODO: test */ +.button { font-family: inherit; font-size: 100%; line-height: inherit; @@ -316,7 +359,11 @@ button { padding: 0; } -.button-filled { +.button:hover { + filter: brightness(60%); +} + +.button.filled { background-color: {{ .Site.Params.color.primary }}; color: white; border: 2px solid {{ .Site.Params.color.primary }}; @@ -328,7 +375,7 @@ button { font-size: 1rem; } -.button-outlined { +.button.outlined { background-color: transparent; color: {{ .Site.Params.color.primary }}; border: 2px solid {{ .Site.Params.color.primary }}; @@ -340,7 +387,7 @@ button { font-size: 1rem; } -.button-outlined:hover { +.button.outlined:hover { background-color: {{ .Site.Params.color.primary }}; color: white; } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1f269df..2f52ab9 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -15,8 +15,6 @@ {{ end }} - {{ else }} -
{{ end }} {{- range $index, $page := .Pages }} {{ $odd := mod $index 2 }} diff --git a/layouts/partials/components/icon.html b/layouts/partials/components/icon.html index ce3aaa1..bbea0ec 100644 --- a/layouts/partials/components/icon.html +++ b/layouts/partials/components/icon.html @@ -3,4 +3,7 @@ type: string - default: link text: string (optional) url: string --> -{{ if .text }} {{ .text }}{{ end }} \ No newline at end of file + + + {{ if .text }} {{ .text }}{{ end }} + \ No newline at end of file diff --git a/layouts/partials/components/image.html b/layouts/partials/components/image.html index b7f07a5..ec0fb6b 100644 --- a/layouts/partials/components/image.html +++ b/layouts/partials/components/image.html @@ -3,8 +3,25 @@ type: string - default url: string alt: string --> - {{ $avatar := "avatar"}} -{{ .alt }} + + + + + {{ .alt }} + + {{/* https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/ */}} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 20b4617..b49021f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -20,4 +20,5 @@

{{ end }} -{{ end }} \ No newline at end of file +{{ end }} + \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 52aac10..9151467 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -27,11 +27,17 @@ {{ end }} {{ end }} - {{- $favIcon := .Site.Params.favIcon }} - - + {{ with .Site.Params.favIcon }} + {{ if .ico }} + + {{ end }} + {{ if .small }} + + {{ end }} + {{ if .big }} + + {{ end }} + {{ end }} {{ with .Site.Params.tracking }} {{ end }} @@ -42,4 +48,5 @@ {{ end }} + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index bd130d4..47615fa 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -12,4 +12,5 @@ -{{ end }} \ No newline at end of file +{{ end }} + \ No newline at end of file diff --git a/static/js/scroll.js b/static/js/scroll.js new file mode 100644 index 0000000..738c470 --- /dev/null +++ b/static/js/scroll.js @@ -0,0 +1,12 @@ +window.addEventListener("scroll", () => { + var winScroll = document.body.scrollTop || document.documentElement.scrollTop; + var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; + var scrolled = (winScroll / height) * 100; + document.getElementById('progress').style.width = scrolled + "%"; + + const toTop = document.getElementById('totop'); + + if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) { + toTop.classList.toggle("show"); + } +}); \ No newline at end of file diff --git a/static/js/theme.js b/static/js/theme.js index 9a5ddd5..20ac14e 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1,3 +1,5 @@ +// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class + window.onload = (event) => { const btn = document.getElementById("theme-toggler"); const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");