adds dark mode

README.md

@@ -8,6 +8,57 @@ Developed in Hugo.
 
 Navigate to the project directory and:
 
+```
+npm install
+```
+
+Then, to serve the site locally:
+
 ```
 hugo server
 ```
+
+## Articles
+
+see `/archetypes/article.md` for the article template. You can create a new article with:
+
+```
+hugo new articles/2023-01-01-my-new-article.md
+```
+This will create a new article in the `content/articles` directory with the current date and the title you provide. You can then edit the file to add your content.
+
+### Head shots
+
+Optionally you can add a headshot photo to your article. To do this:
+
+1. Place your image file in the `/assets/headshots/` directory
+2. Add a `headshot` field to your article's front matter with just the filename. For example:
+
+```yaml
+headshot: "firstname-lastname.jpg"
+```
+
+*Note: Name is case sensitive, might as well use lowercase letters and hyphens in your filename.*
+
+### Narrator links
+
+You can add links to an article that relate to the narrator. To do this, add a `links` field to the front matter of the article. The value should be a list of objects, each with a `text` and `url` field. For example:
+
+```
+links:
+  - text: "My Website"
+    url: "https://example.com"
+  - text: "My Twitter"
+    url: "https://twitter.com/example"
+```
+This will include the links in the article page. The links will be displayed as a list with the text as the link text and the URL as the link target.
+
+### Open Graph Image
+
+You can add Open Graph image (for social media sharing) to an article. To do this, add a `ogImage` field to the front matter of the article. The value should be the path to the image file. For example:
+
+```yaml
+ogImage: "/images/my-image.jpg"
+```
+
+*Note: The image should be at least 1200x630 pixels for best results. Make sure to place the image in `/static/images/` directory so it can be served correctly. The path should be relative to the static directory.*

archetypes/articles.md

@@ -0,0 +1,14 @@
+---
+narrator: ""
+subject: ""
+facilitator: ""
+date: {{ dateFormat "2006-01-02" .Date }} # YYYY-MM-DD
+approved: "" # YYYY-MM-DD
+summary: ""
+location: ""
+topics: []
+headshot: "placeholder-headshot.png"
+links:
+  - text: ""
+    url: ""
+---

archetypes/default.md

@@ -1,6 +0,0 @@
----
-title: "{{ replace .Name "-" " " | title }}"
-date: {{ .Date }}
-draft: true
----
-

assets/css/article.css

@@ -0,0 +1,50 @@
+.interviewer-question {
+  font-style: italic;
+  color: #444;
+  margin-left: -1rem;
+}
+
+.article-title--single .article-title__narrator {
+  @apply mb-2 block font-light;
+}
+
+.article-title--single .article-title__subject {
+  font-size: 1.5em;
+}
+
+.article-title--list {
+  @apply text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900
+  dark:text-sand-100 dark:group-hover:text-sand-500 dark:decoration-sand-900 dark:hover:decoration-sand-500;
+}
+.article-title--list .article-title__narrator::after {
+  content: ":";
+}
+
+.article-title--list .article-title__subject {
+  @apply font-light;
+}
+
+.wompum-radial-grid {
+  @apply absolute w-full h-full top-0 left-0;
+}
+
+/* Narrator headshot */
+
+.narrator__container {
+  @apply relative w-48 mb-2 mx-auto md:mx-0 rounded-full border-4 bg-white border-white
+  dark:bg-gray-950 dark:border-gray-950;
+}
+
+.narrator__frame {
+  @apply relative p-4;
+}
+
+.narrator__frame img {
+  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center
+  dark:bg-gray-950 dark:border-gray-950;
+  aspect-ratio: 1;
+}
+
+.narrator__wompum {
+  @apply absolute inset-0 w-full h-full;
+}

assets/css/components/wompum.css

@@ -28,9 +28,19 @@
 }
 
 .wompum-cell {
+  @apply dark:opacity-70 brightness-100;
   width: 100%;
   height: 100%;
-  transition: background-color 0.3s ease;
+  transition: all 3s ease-in;
+}
+
+.wompum-cell:hover {
+  @apply dark:opacity-100 brightness-125;
+  transition: all .3s ease;
+}
+
+.wompum-cell[class*="900"]:hover {
+  @apply brightness-200;
 }
 
 .wompum-cell--narrator,

assets/css/fonts.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'EB Garamond 12';
+  src: local('EB Garamond 12 Italic'), local('EBGaramond12-Italic'),
+    url('/fonts/EBGaramond12-Italic.woff2') format('woff2'),
+    url('/fonts/EBGaramond12-Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EB Garamond 12';
+  src: local('EB Garamond 12 Regular'), local('EBGaramond12-Regular'),
+    url('/fonts/EBGaramond12-Regular.woff2') format('woff2'),
+    url('/fonts/EBGaramond12-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka'),
+    url('/fonts/Iosevka.woff2') format('woff2'),
+    url('/fonts/Iosevka.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Bold'), local('Iosevka-Bold'),
+    url('/fonts/Iosevka-Bold.woff2') format('woff2'),
+    url('/fonts/Iosevka-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Bold Italic'), local('Iosevka-Bold-Italic'),
+    url('/fonts/Iosevka-Bold-Italic.woff2') format('woff2'),
+    url('/fonts/Iosevka-Bold-Italic.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Light'), local('Iosevka-Light'),
+    url('/fonts/Iosevka-Light.woff2') format('woff2'),
+    url('/fonts/Iosevka-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Light Italic'), local('Iosevka-Light-Italic'),
+    url('/fonts/Iosevka-Light-Italic.woff2') format('woff2'),
+    url('/fonts/Iosevka-Light-Italic.woff') format('woff');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Oblique'), local('Iosevka-Oblique'),
+    url('/fonts/Iosevka-Oblique.woff2') format('woff2'),
+    url('/fonts/Iosevka-Oblique.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}

assets/css/main.css

@@ -3,92 +3,57 @@ body {
 }
 
 a:hover {
-  @apply text-pine-900;
+  @apply text-pine-900 dark:text-pine-100;
-}
-
-.interviewer-question {
-  font-style: italic;
-  color: #444;
-  margin-left: -1rem;
-}
-
-.article-title--single .article-title__narrator {
-  @apply mb-2 block font-light;
-}
-
-.article-title--single .article-title__subject {
-  font-size: 1.5em;
-}
-
-.article-title--list .article-title__narrator::after {
-  content: ":";
-}
-
-.article-title--list .article-title__subject {
-  @apply font-light;
-}
-
-.wompum-radial-grid {
-  @apply absolute w-full h-full top-0 left-0;
-}
-
-.narrator__container {
-  @apply relative;
-}
-
-.narrator__frame {
-  @apply relative p-4;
-}
-
-.narrator__image {
-  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
-  aspect-ratio: 1;
-}
-
-.narrator__wompum {
-  @apply absolute inset-0 w-full h-full;
 }
 
 .tag {
-  @apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100 no-underline;
+  @apply p-2 bg-sand-100 border border-transparent rounded-lg whitespace-nowrap no-underline
+  hover:border-sand-500 hover:text-gray-900 hover:opacity-100 
+  dark:bg-gray-900 dark:text-sand-100 dark:border-gray-800 dark:hover:text-sand-100
+  transition-all duration-200 ease-in-out;
+  transition: border 2s ease-in;
+}
+
+.tag:hover {
+  transition: border 0.1s ease-out;
 }
 
 .tag-cloud .tag:nth-child(10n+1):hover {
-  @apply border-blue-500;
+  @apply border-blue-500 dark:border-blue-900;
 }
 
 .tag-cloud .tag:nth-child(10n+2):hover {
-  @apply border-clay-500;
+  @apply border-clay-500 dark:border-clay-900;
 }
 
 .tag-cloud .tag:nth-child(10n+3):hover {
-  @apply border-cyan-500;
+  @apply border-cyan-500 dark:border-cyan-900;
 }
 
 .tag-cloud .tag:nth-child(10n+4):hover {
-  @apply border-gold-500;
+  @apply border-gold-500 dark:border-gold-900;
 }
 
 .tag-cloud .tag:nth-child(10n+5):hover {
-  @apply border-red-500;
+  @apply border-red-500 dark:border-red-900;
 }
 
 .tag-cloud .tag:nth-child(10n+6):hover {
-  @apply border-pine-500;
+  @apply border-pine-500 dark:border-pine-900;
 }
 
 .tag-cloud .tag:nth-child(10n+7):hover {
-  @apply border-pink-500;
+  @apply border-pink-500 dark:border-pink-900;
 }
 
 .tag-cloud .tag:nth-child(10n+8):hover {
-  @apply border-moss-500;
+  @apply border-moss-500 dark:border-moss-900;
 }
 
 .tag-cloud .tag:nth-child(10n+9):hover {
-  @apply border-rust-500;
+  @apply border-rust-500 dark:border-rust-900;
 }
 
 .tag-cloud .tag:nth-child(10n):hover {
-  @apply border-sand-500;
+  @apply border-sand-500 dark:border-sand-900;
 }

assets/css/styles.css

@@ -1,7 +1,11 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* allows for toggling dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Add safelist for all color variations */
+/* Wompum.js constructs class names dynamically and tailwind misses them */
 @source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");
 
 @theme {
@@ -40,8 +44,10 @@
 }
 
 body {
-  @apply antialiased bg-sand-100/50;
+  @apply antialiased bg-sand-100/50 dark:bg-gray-950 dark:text-gray-200 transition-colors duration-200;
 }
 
 @import "components/wompum.css";
+@import "fonts.css";
 @import "main.css";
+@import "article.css";

assets/js/darkmode.js

@@ -0,0 +1,19 @@
+// Set initial theme on page load
+(function() {
+  const isDark = localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", isDark);
+
+  // Update label on load
+  const label = document.getElementById("darkmode-label");
+  if (label) label.textContent = !isDark ? "Dark" : "Light";
+})();
+
+// Toggle dark mode and update label/localStorage
+function toggleDarkMode() {
+  const html = document.documentElement;
+  const isDark = html.classList.toggle("dark");
+  localStorage.theme = isDark ? "dark" : "light";
+  const label = document.getElementById("darkmode-label");
+  if (label) label.textContent = !isDark ? "Dark" : "Light";
+}

config.toml

@@ -12,9 +12,7 @@ title = 'Protocol Oral History Project'
 
 [params]
   description = "The Protocol Oral History Project chronicles the development of internet protocols and standards through interviews with key contributors."
-  images = ["/images/default-og.jpg"] # Will be replaced by wompum generation
+  openGraphImage = "/images/og-default.jpg"
-  twitterSite = ""
-  facebookAppID = ""
   footer = """
 A project of the [Media Economies Design Lab](https://www.colorado.edu/lab/medlab/)  
 Available under the [Creative Commons Attribution License (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/)  

content/articles/dorsey-the_gut.md

@@ -7,7 +7,7 @@ approved: 2025-03-20
 summary: "Drawing on many ancestral traditions and the experience of her own body, Asia Dorsey learns and teaches the pattern language of a healthy gut."
 location: "Denver CO"
 topics: [ancestors, food, health, indigeneity]
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 links:
   - text: "Bugs Bones & Botany"
     url: "https://www.bonesbugsandbotany.com"

content/articles/ehmke-contributor_covenant.md

@@ -6,7 +6,7 @@ date: 2024-10-10
 approved: 2024-10-11
 summary: "After widespread resistance to codes of conduct in open-source software communities, Coraline Ada Ehmke's Contributor Covenant became the most popular code of conduct in the ecosystem."
 location: "Chicago, USA"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [code of conduct, dispute resolution, gender, open source, organizations, software]
 ---
 

content/articles/kiessel-good_market.md

@@ -6,7 +6,7 @@ date: 2024-10-29
 approved: 2024-12-16
 summary: "Good Market is a digital commons for enterprises that prioritize people and the planet over profit. It enables communities to set and enforce their own standards for doing business."
 location: "Sri Lanka / United States"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [economics, organizations, ecology, standards]
 ---
 

content/articles/mannan-diplomatic_protocols.md

@@ -6,7 +6,7 @@ date: 2024-12-13
 approved: 2025-03-04
 summary: "A diplomat for Bangladesh describes the role of protocol in high-profile international visits and treaty negotiations."
 location: "Dhaka, Bangladesh"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [diplomacy, government, friendship]
 ---
 

content/articles/prodromou-distributed_social_networks.md

@@ -6,7 +6,7 @@ date: 2024-12-06
 approved: 2025-04-01
 summary: "A career-long journey to build online social networks that cannot be controlled by a single company, culminating with the ActivityPub standard."
 location: "Montreal, Canada"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 links:
   - text: Website
     url: https://evanp.me/

content/articles/zargham-ultimate_frisbee.md

@@ -6,7 +6,7 @@ date: 2024-11-04
 approved: 2024-12-02
 summary: "As a sport often played with no referees, ultimate frisbee has developed a strong set of norms for addressing conflict and self-governing."
 location: "East Greenbush, NY USA"
-headshot: "/headshots/placeholder-headshot.png"
+headshot: "placeholder-headshot.png"
 topics: [frisbee, sports, organizations, dispute resolution]
 ---
 

layouts/_default/baseof.html

@@ -15,7 +15,7 @@
     {{ end }}
     
     <!-- Basic SEO -->
-    <title>{{ $title }}</title>
+    <title>{{ $title }}{{ if .Params.narrator }} - {{ .Site.Title }}{{ end }}</title>
     
     {{/* Generate description from summary, description, or default site description */}}
     {{ $description := "" }}
@@ -36,52 +36,47 @@
     {{ end }}
     
     <!-- Open Graph / Facebook -->
+    <meta property="og:site_name" content="{{ .Site.Title }}" />
     <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
     <meta property="og:url" content="{{ .Permalink }}" />
     <meta property="og:title" content="{{ $title }}" />
     <meta property="og:description" content="{{ $description }}" />
-    {{ with .Params.images | default .Site.Params.images }}
+    {{ with .Params.ogImage | default .Site.Params.openGraphImage }}
-    <meta property="og:image" content="{{ index . 0 | absURL }}" />
+    <meta property="og:image" content="{{ . | absURL }}" />
-    {{ end }}
-    {{ with .Site.Params.facebookAppID }}
-    <meta property="fb:app_id" content="{{ . }}" />
     {{ end }}
     
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="{{ $title }}" />
     <meta name="twitter:description" content="{{ $description }}" />
-    {{ with .Params.images }}
+    {{ with .Params.ogImage | default .Site.Params.openGraphImage }}
-    <meta name="twitter:image" content="{{ index . 0 | absURL }}" />
+    <meta name="twitter:image" content="{{ . | absURL }}" />
     {{ end }}
     
     <!-- Article Specific -->
     {{ if and .IsPage (eq .Type "articles") }}
-    <meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
+      <meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}" />
-    <meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}" />
+      <meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}" />
-    <meta property="article:section" content="Oral History" />
+      <meta property="article:section" content="Oral History" />
-    {{ with .Params.topics }}
+      {{ with .Params.topics }}
-    {{ range . }}
+        {{ range . }}
-    <meta property="article:tag" content="{{ . }}" />
+        <meta property="article:tag" content="{{ . }}" />
-    {{ end }}
+        {{ end }}
+      {{ end }}
       
-    {{ end }}
+      {{/* Author information using standard meta topics instead of article:author */}}
-    
+      {{ with .Params.narrator }}
-    {{/* Author information using standard meta topics instead of article:author */}}
+      <meta name="author" content="{{ . }}" />
-    {{ with .Params.narrator }}
+      {{ end }}
-    <meta name="author" content="{{ . }}" />
+      {{ with .Params.facilitator }}
-    {{ end }}
+      <meta name="interviewer" content="{{ . }}" />
-    {{ with .Params.facilitator }}
+      {{ end }}
-    <meta name="interviewer" content="{{ . }}" />
-    {{ end }}
     {{ end }}
     
     <!-- Canonical URL -->
     <link rel="canonical" href="{{ .Permalink }}" />
     
-    <!-- CSS Variables and Styles -->
+    <!-- CSS Styles -->
-    {{ partial "css-variables.html" . }}
-    
     {{ partial "css.html" . }}
   </head>
   <body class="">
@@ -90,8 +85,13 @@
       {{ block "main" . }}{{ end }}
     </div>
     {{ partial "footer.html" . }}
-    <script src="/js/sigil.js"></script>
+    
-    <script src="/js/colorCalculator.js"></script>
+    {{ $js := resources.Match "js/*.js" | resources.Concat "js/bundle.js" }}
-    <script src="/js/wompum.js"></script>
+    {{ if hugo.IsProduction }}
+      {{ $js = $js | minify | fingerprint }}
+      <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ else }}
+      <script src="{{ $js.RelPermalink }}"></script>
+    {{ end }}
   </body>
 </html>

layouts/_default/single.html

@@ -4,7 +4,7 @@
         <div class="wompum-grid" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
       </header>
 
-      <div class="prose lg:prose-xl p-4 mx-auto mt-8">
+      <div class="prose lg:prose-xl dark:prose-invert p-4 mx-auto mt-8">
         <p class="font-bold text-6xl">{{ .Title }}</p>
         {{ .Content }}
         

layouts/articles/single.html

@@ -5,19 +5,21 @@
       <header class="mb-4 wompum-container wompum-container--wide-gap aspect-2/1 md:aspect-3/1">{{ partial "article-wompum.html" . }}</header>
 
       <div class="flex md:flex-row flex-col gap-4 mt-4">
-        <aside class="md:sticky md:top-0 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka
+        <aside class="md:sticky md:top-24 md:h-screen lg:w-1/3 p-4 font-iosevka">
-          {{ if .Params.headshot }}-mt-24{{ end }}
+          {{ $headshot := resources.GetMatch (printf "**/%s" (strings.TrimPrefix "/" .Params.headshot)) }}
-        ">
+          {{ if and .Params.headshot $headshot }}
-          {{ if .Params.headshot }}
+          <div class="narrator__container -mt-24" data-text="{{ .Params.narrator }}">
-          <div class="narrator__container w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white" data-text="{{ .Params.narrator }}">
+            {{ partial "image.html" (dict 
-            <div class="narrator__frame">
+              "resource" $headshot 
-              <img src="{{ .Params.headshot }}" alt="Photo of {{ .Params.narrator }}" class="narrator__image" loading="lazy">
+              "width" "192" 
-            </div>
+              "class" "narrator__frame"
+              "alt" (printf "Photo of %s" .Params.narrator)
+            ) }}
           </div>
           {{ end }}
           <div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>
         </aside>
-        <div class="prose lg:prose-xl lg:w-2/3 p-4 mx-auto md:mx-0">
+        <div class="prose lg:prose-xl dark:prose-invert lg:w-2/3 p-4 mx-auto md:mx-0">
           <p class="font-bold text-4xl article-title article-title--single">{{ partial "article-title" . }}</p>
           {{ .Content }}
         </div>

layouts/partials/article-list.html

@@ -7,16 +7,16 @@
 <li class="group flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
   <div class="flex-1 min-w-0 flex gap-2 items-center h-full">
     <a class="wompum-container h-full aspect-7/2 md:aspect-auto" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
-    <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
+    <time class="text-gray-800 dark:text-sand-500 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
       <p>{{ $page.Date.Format "Jan" }}</p>
       <p>{{ $page.Date.Format "02" }}</p>
       <p>{{ $page.Date.Format "2006" }}</p>
     </time>
   </div>
   <div class="flex flex-col gap-2 md:w-3/5 flex-shrink-0 md:py-8">
-    <a class="article-title article-title--list text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
+    <a class="article-title article-title--list" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
     {{ if $page.Params.location }}
-    <p class="text-gray-800 italic">{{ $page.Params.location }}</p>
+    <p class="light:text-gray-800 dark:text-sand-100 italic">{{ $page.Params.location }}</p>
     {{ end }}
     <p class="max-w-prose">{{ $page.Params.summary }}</p>
     {{ partial "topics.html" $page }}

layouts/partials/css-variables.html

@@ -1,9 +0,0 @@
-<style>
-    :root {
-        {{ range $colorName, $shades := site.Data.colors }}
-            {{ range $shade, $value := $shades }}
-                --{{ $colorName }}-{{ $shade }}: {{ $value }};
-            {{ end }}
-        {{ end }}
-    }
-</style> 

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="bg-sand-500 text-amber-900 mt-16">
+<footer class="bg-sand-500 text-amber-900 mt-16 dark:bg-gray-800 dark:text-sand-500">
   <div class="wompum-container wompum-container--no-gap h-1">
     <div class="wompum-grid" data-text="{{ .Site.Title }}" data-columns="7" data-rows="1">
     </div>

layouts/partials/header.html

@@ -5,13 +5,30 @@
       <a href="/">{{ .Site.Title }}</a>
     </h1>
     <nav class="font-iosevka">
-      <ul class="flex gap-4">
+      <ul class="flex flex-col flex-wrap relative sm:flex-row sm:gap-4 justify-center pr-8 sm:pr-0">
         <li>
           <a href="/">Home</a>
         </li>
         <li>
           <a href="/about">About</a>
         </li>
+        <li class="sm:relative absolute -right-1 top-1/2 sm:right-[unset] sm:top-[unset] transform -translate-y-1/2 sm:transform-none sm:translate-y-0">
+          <button id="darkmode-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode" 
+                  class="flex group p-1 relative -mt-1 cursor-pointer hover:bg-gray-950 hover:text-gray-100 dark:hover:bg-sand-100 dark:hover:text-gray-900 rounded-full">
+            <!-- Lightbulb SVG icon -->
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:inline hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z">
+              </path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z">
+              </path>
+            </svg>
+            <p class="tooltip transition-opacity duration-500 absolute mr-5 -bottom-5 right-0 w-sm text-sm text-right hidden group-hover:block opacity-0 group-hover:opacity-100 group-hover:text-gray-600 dark:group-hover:text-gray-400">Turn on <span id="darkmode-label"></span> Mode</p>
+          </button>
+        </li>
       </ul>
     </nav>
   </div>

layouts/partials/image.html

@@ -0,0 +1,19 @@
+{{ $width := .width }}
+{{ $height := default $width .height }}
+{{ $class := .class }}
+{{ $resource := .resource }}
+{{ $alt := .alt }}
+
+{{ with $resource }}
+  {{ $image := .Fit (printf "%dx%d webp" (int $width) (int $height)) }}
+  {{ $fallback := .Fit (printf "%dx%d" (int $width) (int $height)) }}
+  <picture class="{{ $class }} block">
+    <source srcset="{{ $image.RelPermalink }}" type="image/webp">
+    <img 
+      src="{{ $fallback.RelPermalink }}" 
+      alt="{{ $alt }}"
+      width="{{ $width }}"
+      height="{{ $height }}"
+      loading="lazy">
+  </picture>
+{{ end }}

layouts/partials/wompum-demo.html

@@ -6,7 +6,7 @@
   <div class="mb-8">
     <label class="block mb-2">Enter text to generate a grid:</label>
     <input type="text" 
-           class="w-full p-2 border rounded font-iosevka bg-sand-100"
+           class="w-full p-2 border rounded font-iosevka bg-sand-100 dark:bg-gray-800"
            placeholder="Type something..."
            value="{{ .Site.Title}}"
            oninput="updateWompumDemoGrid(this.value)">