Merge pull request #26 from per1234/footer

Improve site footer

Taskfile.yml

@@ -560,6 +560,8 @@ tasks:
           -type d -name '.licenses' -prune -o \
           -type d -name '__pycache__' -prune -o \
           -type d -name 'node_modules' -prune -o \
+          -type f -ipath './site/static/github-mark-white.svg' -prune -o \
+          -type f -ipath './site/static/github-mark.svg' -prune -o \
           \( -type f -regex '.*[.]svg' \) \
           -exec \
             npx \

site/assets/css/extended/custom.css

@@ -0,0 +1,8 @@
+/*
+  This file contains the CSS code for modifications made to the default style provided by the hugo-PaperMod theme.
+  See: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#bundling-custom-css-with-themes-assets
+*/
+
+:root {
+  --footer-height: 33px;
+}

site/layouts/partials/dark-light-img.html

@@ -0,0 +1,21 @@
+<!--
+  Display either of two images depending on the visitor's browser theme.
+
+  Parameters:
+  - `dark-theme-image`: The path of the image to display with dark theme.
+  - `light-theme-image`: The path of the image to display with light theme.
+  - `style`: Style for the image.
+-->
+
+<picture>
+  <!-- See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme -->
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="{{ .Scratch.Get "dark-theme-image" }}"
+  />
+  <img
+    alt=""
+    src="{{ .Scratch.Get "light-theme-image" }}"
+    style="{{ (.Scratch.Get "style") | safeCSS }}"
+  />
+</picture>

site/layouts/partials/extend_footer.html

@@ -1,14 +1,52 @@
-<footer style="text-align: center">
-  <small>
-    <hr />
-    Site last updated:
-    {{ index .Site.Data "generator-data" "timestamp" }}
-    <b>|</b>
-    Content license:
-    <a
-      href="http://creativecommons.org/publicdomain/zero/1.0"
-      target="_blank"
-      >CC0 1.0</a
-    >
-  </small>
+<footer
+  style="
+    margin: auto;
+    width: 95%
+  "
+>
+  <div
+    style="
+      align-items: center;
+      border-width: thin;
+      border-top-style: solid;
+      display: inline-flex;
+      font-size: smaller;
+      justify-content: center;
+      padding-top: 3px;
+      width: 100%
+    "
+  >
+    <style>
+      span {
+        padding-inline: 5px;
+      }
+      /* Add separator between footer items. */
+      span:not(:last-of-type) {
+        border-right: solid;
+        border-width: thin;
+      }
+    </style>
+    <span>
+      Site last updated:
+      {{ index .Site.Data "generator-data" "timestamp" }}
+    </span>
+    <span>
+      Content license:
+      <a
+        href="http://creativecommons.org/publicdomain/zero/1.0"
+        style="
+          border-bottom-style: solid;
+          border-width: 1px
+        "
+        target="_blank"
+        >CC0 1.0</a
+      >
+    </span>
+    <span>
+      {{ .Scratch.Set "style" "box-sizing: content-box; height: 20px; width: 20px" }}
+      <a href="https://github.com/per1234/inoplatforms">
+        {{ partial "github-logo.html" . }}
+      </a>
+    </span>
+  </div>
 </footer>

site/layouts/partials/github-logo.html

@@ -0,0 +1,11 @@
+<!-- Display the GitHub
+  Display the GitHub logo.
+
+  Parameters:
+  - `style`: Style for the image.
+-->
+
+{{ .Scratch.Set "dark-theme-image" "/github-mark-white.svg" }}
+{{ .Scratch.Set "light-theme-image" "/github-mark.svg" }}
+
+{{- partial "dark-light-img.html" . }}

site/static/README.md

@@ -0,0 +1,11 @@
+# **inoplatforms** Site Static Assets
+
+See: https://gohugo.io/content-management/static-files/
+
+## `github-mark.svg`, `github-mark-white.svg`
+
+Source: https://github.com/logos
+
+## `logo.svg`
+
+The file in this folder is the source.