ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar

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 */
-
+/* TODO: test */
-button {
+.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;
 }

layouts/_default/list.html

@@ -15,8 +15,6 @@
         {{ end }}
       </div>
     </div>
-  {{ else }}
-    <div class="header-blocker"></div>
   {{ end }}
   {{- range $index, $page := .Pages }}
     {{ $odd := mod $index 2 }}

layouts/partials/components/icon.html

@@ -3,4 +3,7 @@ type: string - default: link
 text: string (optional)
 url: string
 -->
-<a href="{{ .url }}"><i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>{{ if .text }} {{ .text }}{{ end }}</a>
+<a href="{{ .url }}" rel="{{ .rel }}">
+  <i class="{{ if .type }} icon-{{ .type }} {{ else }} icon-link {{ end }}"></i>
+  {{ if .text }} {{ .text }}{{ end }}
+</a>

layouts/partials/components/image.html

@@ -3,8 +3,25 @@ type: string - default
 url: string
 alt: string
 -->
-
 {{ $avatar := "avatar"}}
-<img class="{{if eq .type $avatar}} avatar {{end}}" alt="{{ .alt }}" src="{{ .url }}">
+
+<picture>
+  <source 
+    type="image/avif"
+    src="{{ .url }}.avif"
+  />
+  <source 
+    type="image/webp"
+    src="{{ .url }}.webp"
+  />
+  <img 
+    class="{{if eq .type $avatar}} avatar {{end}}" 
+    alt="{{ .alt }}" 
+    src="{{ .url }}"
+    loading="lazy"
+    decoding="async"
+  >
+</picture>
+
 
 {{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}

layouts/partials/footer.html

@@ -21,3 +21,4 @@
     {{ end }}
   </footer>
 {{ end }}
+<a class="totop hide" id="totop" href="#"><i class="icon-angle-up"></i></a>

layouts/partials/head.html

@@ -27,11 +27,17 @@
       <meta property="og:description" content="{{ .Site.Params.Description }}" />
     {{ end }}
   {{ end }}
-  {{- $favIcon := .Site.Params.favIcon }}
+  {{ with .Site.Params.favIcon }}
-  <link rel="icon" type="image/png" sizes="16x16"
+    {{ if .ico }}
-    href="{{ if $favIcon.small }}{{ $favIcon.small }}{{ else }}/favIcon16x16.png{{ end }}">
+      <link rel="icon" type="image/x-icon" href="{{ .ico }}">
-  <link rel="icon" type="image/png" sizes="32x32"
+    {{ end }}
-    href="{{ if $favIcon.big }}{{ $favIcon.big }}{{ else }}/favIcon32x32.png{{ end }}">
+    {{ if .small }}
+      <link rel="icon" type="image/png" sizes="16x16" href="{{ .small }}">
+    {{ end }}
+    {{ if .big }}
+      <link rel="icon" type="image/png" sizes="32x32" href="{{ .big }}">
+    {{ end }}
+  {{ end }}
   {{ with .Site.Params.tracking }}
     <script src="{{ . }}"></script>
   {{ end }}
@@ -42,4 +48,5 @@
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
   <script src="/js/theme.js"></script>
+  <script src="/js/scroll.js"></script>
 </head>

layouts/partials/header.html

@@ -13,3 +13,4 @@
     </div>
   </header>
 {{ end }}
+<span id="progress" class="progress"></span>

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");
+  }
+});

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)");