adds footer close #5

assets/css/components/wompum.css

@@ -0,0 +1,40 @@
+.wompum-container {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.wompum-container .wompum-grid,
+.wompum-container .wompum-article-grid {
+  gap: 2px;
+  height: 100%;
+  min-height: 2px;
+  grid-template-rows: repeat(var(--grid-rows, 5), 1fr);
+}
+
+.wompum-container--wide-gap .wompum-grid,
+.wompum-container--wide-gap .wompum-article-grid {
+  gap: 1rem;
+}
+
+.wompum-container--no-gap .wompum-grid,
+.wompum-container--no-gap .wompum-article-grid {
+  gap: 0;
+}
+
+.wompum-grid,
+.wompum-article-grid {
+  display: grid;
+  width: 100%;
+}
+
+.wompum-cell {
+  width: 100%;
+  height: 100%;
+  transition: background-color 0.3s ease;
+}
+
+.wompum-cell--narrator,
+.wompum-cell--subject,
+.wompum-cell--facilitator {
+  min-height: unset;
+}

assets/css/main.css

@@ -0,0 +1,94 @@
+body {
+  @apply font-garamond;
+}
+
+a:hover {
+  @apply text-pine-900;
+}
+
+.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
+}
+
+.tag-cloud .tag:nth-child(10n+1):hover {
+  @apply border-blue-500;
+}
+
+.tag-cloud .tag:nth-child(10n+2):hover {
+  @apply border-clay-500;
+}
+
+.tag-cloud .tag:nth-child(10n+3):hover {
+  @apply border-cyan-500;
+}
+
+.tag-cloud .tag:nth-child(10n+4):hover {
+  @apply border-gold-500;
+}
+
+.tag-cloud .tag:nth-child(10n+5):hover {
+  @apply border-red-500;
+}
+
+.tag-cloud .tag:nth-child(10n+6):hover {
+  @apply border-pine-500;
+}
+
+.tag-cloud .tag:nth-child(10n+7):hover {
+  @apply border-pink-500;
+}
+
+.tag-cloud .tag:nth-child(10n+8):hover {
+  @apply border-moss-500;
+}
+
+.tag-cloud .tag:nth-child(10n+9):hover {
+  @apply border-rust-500;
+}
+
+.tag-cloud .tag:nth-child(10n):hover {
+  @apply border-sand-500;
+}

assets/css/styles.css

@@ -0,0 +1,47 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* Add safelist for all color variations */
+@source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");
+
+@theme {
+  --font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
+  --font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;
+  --color-blue-100: #c2cfe0;
+  --color-blue-500: #6f88a3;
+  --color-blue-900: #5d7691;
+  --color-clay-100: #ead4c2;
+  --color-clay-500: #c49b6f;
+  --color-clay-900: #b17f48;
+  --color-cyan-100: #c0dadd;
+  --color-cyan-500: #6a9799;
+  --color-cyan-900: #436668;
+  --color-gold-100: #e6dac1;
+  --color-gold-500: #bca66d;
+  --color-gold-900: #a88b48;
+  --color-moss-100: #d0ddc7;
+  --color-moss-500: #919f71;
+  --color-moss-900: #69734a;
+  --color-pine-100: #c7ddd2;
+  --color-pine-500: #7b9b85;
+  --color-pine-900: #516b57;
+  --color-pink-100: #ead4d2;
+  --color-pink-500: #c0928a;
+  --color-pink-900: #a7695a;
+  --color-red-100: #e8c9c9;
+  --color-red-500: #b87977;
+  --color-red-900: #a35754;
+  --color-rust-100: #eacec4;
+  --color-rust-500: #c48a74;
+  --color-rust-900: #af6649;
+  --color-sand-100: #eee8dd;
+  --color-sand-500: #d4c5aa;
+  --color-sand-900: #b19360;
+}
+
+body {
+  @apply antialiased bg-sand-100/50;
+}
+
+@import "components/wompum.css";
+@import "main.css";

assets/scss/_fonts.scss

@@ -1,79 +0,0 @@
-@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/scss/_variables.scss

@@ -1,2 +0,0 @@
-$font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
-$font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;

assets/scss/components/_wompum.scss

@@ -1,49 +0,0 @@
-.wompum {
-    &-container {
-        width: 100%;
-        margin: 0 auto;
-
-        & .wompum-grid,
-        & .wompum-article-grid {
-            gap: 2px;
-            height: 100%; // Fill container height
-            min-height: 2px;
-            grid-template-rows: repeat(var(--grid-rows, 5), 1fr); // Default 5 rows
-        }
-
-        // When no height is set, use aspect ratio
-        &--aspect-ratio {
-            aspect-ratio: 3/1;
-        }
-
-        &--wide-gap .wompum-grid,
-        &--wide-gap .wompum-article-grid {
-            gap: 1rem;
-        }
-
-        &--no-gap .wompum-grid,
-        &--no-gap .wompum-article-grid {
-            gap: 0;
-        }
-    }
-
-    &-grid,
-    &-article-grid {
-        display: grid;
-        width: 100%;
-    }
-
-    &-cell {
-        width: 100%;
-        height: 100%; // Ensure cells fill their grid areas
-        transition: background-color 0.3s ease;
-        background-color: var(--sand-500);
-
-        // Remove fixed heights since we're using aspect ratio now
-        &--narrator,
-        &--subject,
-        &--facilitator {
-            min-height: unset;
-        }
-    }
-}

assets/scss/main.scss

@@ -1,69 +0,0 @@
-// Tailwind
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-// Variables
-@import "variables";
-
-// Fonts
-@import "fonts";
-
-// Components
-@import "components/wompum";
-
-body {
-  font-family: $font-garamond;
-}
-
-.interviewer-question {
-  font-style: italic;
-  color: #444;
-  margin-left: -1rem;
-}
-
-.article-title {
-  &--single {
-    .article-title__narrator {
-      @apply mb-2 block font-light;
-    }
-    .article-title__subject {
-      font-size: 1.5em;
-    }
-  }
-
-  &--list {
-    .article-title__narrator {
-      &::after {
-        content: ":";
-      }
-    }
-    .article-title__subject {
-      @apply font-light;
-    }
-  }
-}
-
-// Narrator Image Component
-.wompum-radial-grid {
-  @apply absolute w-full h-full top-0 left-0;
-}
-
-.narrator {
-  &__container {
-    @apply relative;
-  }
-
-  &__frame {
-    @apply relative p-4;
-  }
-
-  &__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;
-  }
-
-  &__wompum {
-    @apply absolute inset-0 w-full h-full;
-  }
-}

config.toml

@@ -1,4 +1,4 @@
-baseURL = 'http://example.org/'
+baseURL = 'https://protocol.ecologies.info/'
 languageCode = 'en-us'
 title = 'Protocol Oral History Project'
 theme = "hugo-starter-tailwind-basic"
@@ -16,7 +16,38 @@ theme = "hugo-starter-tailwind-basic"
   images = ["/images/default-og.jpg"] # Will be replaced by wompum generation
   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/)  
+Website design by [Drew Hornbein](https://dhornbein.com)
+"""
 
 [params.author]
   name = "Media Economies Design Lab"
-  twitter = ""
+  twitter = ""
+
+[module]
+  [module.hugoVersion]
+    extended = false
+    min      = "0.112.0"
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  [[module.mounts]]
+    source = "hugo_stats.json"
+    target = "assets/watching/hugo_stats.json"
+
+[build]
+  writeStats = true
+  [[build.cachebusters]]
+    source = "assets/watching/hugo_stats\\.json"
+    target = "styles\\.css"
+  [[build.cachebusters]]
+    source = "(postcss|tailwind)\\.config\\.js"
+    target = "css"
+  [[build.cachebusters]]
+    source = "assets/.*\\.(js|ts|jsx|tsx)"
+    target = "js"
+  [[build.cachebusters]]
+    source = "assets/.*\\.(.*)$"
+    target = "$1"

data/colors.yaml

@@ -1,40 +0,0 @@
-sand:
-  100: "#eee8dd"
-  500: "#d4c5aa"
-  900: "#b19360"
-pink:
-  100: "#ead4d2"
-  500: "#c0928a"
-  900: "#a7695a"
-red:
-  100: "#e8c9c9"
-  500: "#b87977"
-  900: "#a35754"
-rust:
-  100: "#eacec4"
-  500: "#c48a74"
-  900: "#af6649"
-clay:
-  100: "#ead4c2"
-  500: "#c49b6f"
-  900: "#b17f48"
-gold:
-  100: "#e6dac1"
-  500: "#bca66d"
-  900: "#a88b48"
-moss:
-  100: "#d0ddc7"
-  500: "#919f71"
-  900: "#69734a"
-pine:
-  100: "#c7ddd2"
-  500: "#7b9b85"
-  900: "#516b57"
-cyan:
-  100: "#c0dadd"
-  500: "#6a9799"
-  900: "#436668"
-blue:
-  100: "#c2cfe0"
-  500: "#6f88a3"
-  900: "#5d7691"

layouts/_default/baseof.html

@@ -82,22 +82,14 @@
     <!-- CSS Variables and Styles -->
     {{ partial "css-variables.html" . }}
     
-    {{/* Main Styles */}}
+    {{ partial "css.html" . }}
-    {{ $styles := resources.Get "scss/main.scss" }}
-    {{ $styles = $styles | resources.ToCSS (dict "targetPath" "css/styles.css" "enableSourceMap" true) }}
-    {{ $styles = $styles | resources.PostCSS }}
-    
-    {{ if hugo.IsProduction }}
-      {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
-    {{ end }}
-    
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
   </head>
   <body class="">
     {{ partial "header.html" . }}
     <div class="px-4 lg:mx-auto">
       {{ block "main" . }}{{ end }}
     </div>
+    {{ partial "footer.html" . }}
     <script src="/js/sigil.js"></script>
     <script src="/js/colorCalculator.js"></script>
     <script src="/js/wompum.js"></script>

layouts/_default/single.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
     <article class="single-default">
-      <header class="mb-8 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">
+      <header class="mb-8 wompum-container wompum-container--wide-gap aspect-3/1 md:aspect-4/1">
         <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-4">
+      <div class="prose lg:prose-xl p-4 mx-auto mt-8">
         <p class="font-bold text-6xl">{{ .Title }}</p>
         {{ .Content }}
         

layouts/_default/taxonomy.html

@@ -3,8 +3,8 @@
   <p class="text-center font-iosevka capitalize">{{ .Data.Singular }}</p>
   <h1 class="text-4xl font-bold text-center capitalize">{{ .Title }}</h1>
 </header>
-<main class="container mx-auto">
+<main class="flex flex-wrap container mx-auto">
-  <ul class="flex flex-col gap-4 w-full mt-4">
+  <ul class="flex flex-col md:gap-4 gap-16 w-full mb-16 mt-4">
     {{ partial "article-list.html" (dict "Pages" .Data.Pages) }}
   </ul>
   
@@ -13,18 +13,8 @@
     <div class="wompum-container wompum-container--no-gap">
       <div class="wompum-grid" data-text="Other {{ .Data.Plural }}" data-columns="4" data-rows="1"></div>
     </div>
-    <div class="tag-cloud font-iosevka text-gray-600 text-center mt-4">
+    <div class="tag-cloud font-iosevka text-gray-600 text-center my-4 w-full flex flex-wrap gap-2 items-center justify-center">
-      {{ $terms := index .Site.Taxonomies .Data.Plural }}
+      {{ partial "taxonomy-cloud" (dict "taxonomy" .Data.Singular "Site" .Site "page" .Page) }}
-      {{ range $term, $pages := $terms }}
-        {{ if ne $term $.Title }}
-        {{ with $.Site.GetPage (printf "/%s/%s" $.Data.Plural ($term | urlize)) }}
-        <a href="{{ .RelPermalink }}" 
-           class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap">
-          {{ .Title }}
-        </a>
-        {{ end }}
-        {{ end }}
-      {{ end }}
     </div>
   </section>
 </main>

layouts/articles/single.html

@@ -2,45 +2,27 @@
     
     <article class="single-article">
 
-      <header class="mb-4 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">{{ partial "article-wompum.html" . }}</header>
+      <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 gap-4 mt-4">
+      <div class="flex md:flex-row flex-col gap-4 mt-4">
-        <aside class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
+        <aside class="md:sticky md:top-0 -mt-24 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
           {{ if .Params.headshot }}
-          <div class="narrator__container w-48 mb-2" 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 }}">
             <div class="narrator__frame">
               <img src="{{ .Params.headshot }}" alt="Photo of {{ .Params.narrator }}" class="narrator__image" loading="lazy">
             </div>
           </div>
           {{ end }}
-          <p><strong>Date:</strong> <time datetime="{{ .Date.Format " 2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
+          <div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>
-          <p><strong>Narrator:</strong> <a href="{{ "/narrator/" | relLangURL }}{{ .Params.narrator | urlize }}">{{ .Params.narrator }}</a></p>
-          <p><strong>Facilitator:</strong> <a href="{{ "/facilitator/" | relLangURL }}{{ .Params.facilitator | urlize }}">{{ .Params.facilitator }}</a></p>
-          <p><strong>Subject:</strong> {{ .Params.subject }}</p>
-          {{ if .Params.location }}
-          <p><strong>Location:</strong> {{ .Params.location }}</p>
-          {{ end }}
-          <p><strong>Topics:</strong> {{ partial "topics.html" . }}</p>
-          {{ if .Params.links }}
-            <div class="mt-4">
-              <p><strong>Narrator Links:</strong></p>
-              <ul class="list-disc pl-4 ml-4 mt-2">
-                {{ range .Params.links }}
-                  <li class="mb-2">
-                    <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">{{ .text }} <sup>↗</sup></a>
-                  </li>
-                {{ end }}
-              </ul>
-            </div>
-          {{ end }}
         </aside>
-        <div class="prose lg:prose-xl lg:w-2/3 p-4">
+        <div class="prose lg:prose-xl 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>
+        <aside class="md:hidden block p-8 mt-8 border-t border-gray-200">{{ partial "article-metadata.html" . }}</aside>
       </div>
     </article>
-    <aside class="max-w-screen-xl mx-auto px-4 lg:px-0">
+    <aside class="max-w-screen-xl mx-auto">
       {{ partial "related-articles" (dict "page" . "topics" .Params.topics "limit" 3) }}
     </aside>
     <div class="text-center my-12"><a href="/">Go Home</a></div>

layouts/index.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
-<main class="flex gap-4 lg:gap-16 justify-around mt-8 max-w-screen-xl mx-auto px-4 lg:px-0">
+<main class="flex flex-col md:flex-row gap-4 md:gap-8 lg:gap-16 justify-around mt-8 max-w-screen-xl mx-auto">
-  <ul class="flex flex-col gap-4 w-full">
+  <ul class="flex flex-col md:gap-4 gap-16 w-full mb-16">
     {{ partial "article-list.html" (dict "Pages" (where .Site.RegularPages "Section" "articles")) }}
   </ul>
 
-  <aside class="max-w-prose w-1/4 flex flex-col gap-8 mb-8">
+  <aside class="max-w-prose md:w-1/4 flex flex-col gap-8 mb-8">
 
     <section>
       <h2 class="text-2xl font-bold mb-2">About</h2>
@@ -19,14 +19,8 @@
       <div class="wompum-container wompum-container--no-gap">
         <div class="wompum-grid" data-text="Topics" data-columns="4" data-rows="1"></div>
       </div>
-      <div class="tag-cloud font-iosevka text-gray-600 text-sm mt-4">
+      <div class="tag-cloud font-iosevka text-gray-600 my-4 flex flex-wrap gap-2">
-        {{ $topics := .Site.Taxonomies.topics }}
+        {{ partial "taxonomy-cloud" (dict "taxonomy" "topics" "Site" .Site) }}
-        {{ range $tag, $pages := $topics }}
-        <a href="{{ "/topics/" | relLangURL }}{{ $tag | urlize }}" style="font-size: {{ add 1 (div (len $pages) 2) }}em;" data-count="{{ len $pages}}"
-         class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap">
-          {{ $tag }}
-        </a>
-        {{ end }}
       </div>
     </section>
 

layouts/partials/article-list.html

@@ -4,15 +4,17 @@
 {{- if reflect.IsMap . -}}
     {{- $page = .page -}}
 {{- end -}}
-<li class="flex gap-4 items-center">
+<li class="group flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
-  <a class="flex-1 min-w-0 wompum-container wompum-container--aspect-ratio h-full block" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
+  <div class="flex-1 min-w-0 flex gap-2 items-center h-full">
-  <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
+    <a class="wompum-container h-full aspect-7/2 md:aspect-auto" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
-    <p>{{ $page.Date.Format "Jan" }}</p>
+    <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
-    <p>{{ $page.Date.Format "02" }}</p>
+      <p>{{ $page.Date.Format "Jan" }}</p>
-    <p>{{ $page.Date.Format "2006" }}</p>
+      <p>{{ $page.Date.Format "02" }}</p>
-  </time>
+      <p>{{ $page.Date.Format "2006" }}</p>
-  <div class="w-3/5 flex-shrink-0 py-8">
+    </time>
-    <a class="article-title article-title--list text-2xl font-bold hover:text-green-900 underline" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
+  </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>
     {{ if $page.Params.location }}
     <p class="text-gray-800 italic">{{ $page.Params.location }}</p>
     {{ end }}

layouts/partials/article-metadata.html

@@ -0,0 +1,20 @@
+<p><strong>Date:</strong> <time datetime="{{ .Date.Format " 2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
+<p><strong>Narrator:</strong> <a href="{{ "/narrator/" | relLangURL }}{{ .Params.narrator | urlize }}">{{ .Params.narrator }}</a></p>
+<p><strong>Facilitator:</strong> <a href="{{ "/facilitator/" | relLangURL }}{{ .Params.facilitator | urlize }}">{{ .Params.facilitator }}</a></p>
+<p><strong>Subject:</strong> {{ .Params.subject }}</p>
+{{ if .Params.location }}
+<p><strong>Location:</strong> {{ .Params.location }}</p>
+{{ end }}
+<p><strong>Topics:</strong> {{ partial "topics.html" . }}</p>
+{{ if .Params.links }}
+  <div class="mt-4">
+    <p><strong>Narrator Links:</strong></p>
+    <ul class="list-disc pl-4 ml-4 mt-2">
+      {{ range .Params.links }}
+        <li class="mb-2">
+          <a href="{{ .url }}" target="_blank" rel="noopener noreferrer">{{ .text }} <sup>↗</sup></a>
+        </li>
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}

layouts/partials/css.html

@@ -0,0 +1,23 @@
+{{ with (templates.Defer (dict "key" "global")) }}
+  {{ $t := debug.Timer "tailwindcss" }}
+  {{ with resources.Get "css/styles.css" }}
+    {{ $opts := dict
+      "inlineImports" true
+      "optimize" (not hugo.IsDevelopment)
+    }}
+    {{ with . | css.TailwindCSS $opts }}
+      {{ if hugo.IsDevelopment }}
+        <link rel="stylesheet" href="{{ .RelPermalink }}" />
+      {{ else }}
+        {{ with . | minify | fingerprint }}
+          <link
+            rel="stylesheet"
+            href="{{ .RelPermalink }}"
+            integrity="{{ .Data.Integrity }}"
+            crossorigin="anonymous" />
+        {{ end }}
+      {{ end }}
+    {{ end }}
+  {{ end }}
+  {{ $t.Stop }}
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,24 @@
+<footer class="bg-sand-500 text-amber-900 mt-16">
+  <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>
+  </div>
+  <div class="p-8 pt-16 flex justify-between items-center">
+    <section>
+      <h1 class="text-2xl font-bold">
+        <a href="/">{{ .Site.Title }}</a>
+      </h1>
+      <p class="text-lg">{{ .Site.Params.footer | markdownify }}</p>
+    </section>
+    <nav class="font-iosevka">
+      <ul class="flex-col items-end gap-4">
+        <li>
+          <a href="/">Home</a>
+        </li>
+        <li>
+          <a href="/about">About</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</footer>

layouts/partials/header.html

@@ -7,10 +7,10 @@
     <nav class="font-iosevka">
       <ul class="flex gap-4">
         <li>
-          <a href="/" class="hover:text-blue-700">Home</a>
+          <a href="/">Home</a>
         </li>
         <li>
-          <a href="/about" class="hover:text-blue-700">About</a>
+          <a href="/about">About</a>
         </li>
       </ul>
     </nav>

layouts/partials/related-articles.html

@@ -28,7 +28,7 @@
 {{- end -}}
 
 {{- if gt (len $finalArticles) 0 -}}
-<div class="related-articles flex flex-col gap-4">
+<div class="related-articles flex flex-wrap gap-4">
     <h2 class="title text-3xl font-bold">Related Articles</h2>
     <div class="wompum-container wompum-container--no-gap">
         <div class="wompum-grid" data-text="Related Articles" data-columns="8" data-rows="1"></div>

layouts/partials/taxonomy-cloud.html

@@ -0,0 +1,16 @@
+{{ $taxonomy := .taxonomy }}
+{{ range $term, $pages := index .Site.Taxonomies $taxonomy }}
+{{ $termPage := $.Site.GetPage (printf "/%s/%s" $taxonomy $term) }}
+<a href="{{ $termPage.RelPermalink }}" 
+  data-size="{{ len $pages }}"
+  class="tag font-bold
+          {{ if eq $.page.RelPermalink $termPage.RelPermalink }}hidden{{ else }}inline-block{{ end }}
+          data-[size=1]:text-sm data-[size=1]:font-normal data-[size=1]:opacity-90
+          data-[size=2]:text-base
+          data-[size=3]:text-xl
+          data-[size=4]:text-3xl
+          data-[size=5]:text-4xl"
+  data-count="{{ len $pages}}">
+  {{ $term }}
+</a>
+{{ end }}

layouts/partials/topics.html

@@ -1,8 +1,8 @@
 {{- if .Params.topics }}
-<div class="flex flex-wrap gap-2 my-2 text-xs font-iosevka">
+<div class="tag-cloud flex flex-wrap gap-2 my-2 text-xs font-iosevka">
   {{- range .Params.topics }}
   <a href="{{ "topics/" | relURL }}{{ . | urlize }}"
-    class="px-3 py-1 border border-green-100 hover:bg-green-300 text-green-900 rounded no-underline">
+    class="tag no-underline">
     {{ . }}
   </a>
   {{- end }}

layouts/partials/wompum-demo.html

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

package.json

@@ -1,26 +1,8 @@
 {
-  "comments": {
-    "dependencies": {},
-    "devDependencies": {
-      "@tailwindcss/typography": "hugo-starter-tailwind-basic",
-      "autoprefixer": "hugo-starter-tailwind-basic",
-      "postcss": "hugo-starter-tailwind-basic",
-      "postcss-cli": "hugo-starter-tailwind-basic",
-      "postcss-purgecss": "hugo-starter-tailwind-basic",
-      "tailwindcss": "hugo-starter-tailwind-basic"
-    }
-  },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/cli": "^4.0.0",
-    "autoprefixer": "^10.3.1",
+    "tailwindcss": "^4.0.0",
-    "postcss": "^8.3.6",
+		"@tailwindcss/typography": "^0.5.16"
-    "postcss-cli": "^8.3.1",
-    "postcss-purgecss": "^2.0.3",
-    "tailwindcss": "^2.2.7"
-  },
-  "scripts": {
-    "build:css": "postcss assets/css/tailwind.css -o static/css/tailwind.css",
-    "watch:css": "postcss assets/css/tailwind.css -o static/css/tailwind.css --watch"
   },
   "name": "protocol-oral-history-project",
   "version": "0.1.0"

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

static/js/colorCalculator.js

@@ -14,7 +14,7 @@ class ColorCalculator {
         // Calculate shade based on influences
         const shade = this.calculateShade(influences);
         
-        return `var(--${colorFamily}-${shade})`;
+        return `${colorFamily}-${shade}`;
     }
 
     // Calculate shade based on surrounding influences

static/js/wompum.js

@@ -87,7 +87,7 @@ class WompumGrid {
             
             // Calculate and apply color
             const color = this.colorCalculator.getColor(sigilDigit, influences);
-            cell.style.backgroundColor = color;
+            cell.classList.add(`bg-${color}`);
         });
     }
 
@@ -192,7 +192,7 @@ class RadialWompumGrid {
         const sigilDigit = this.getSigilDigit(index);
         // Pass empty array for influences since we don't need adjacent segments
         const color = this.colorCalculator.getColor(sigilDigit, []);
-        path.setAttribute('fill', color);
+        path.setAttribute('fill', `var(--color-${color})`);
         
         return path;
     }

tailwind.config.js

@@ -1,18 +1,8 @@
-module.exports = {
+/*
-  content: [
+This file is present to satisy a requiremenet of the Tailwind CSS IntelliSense
-    './layouts/**/*.html',
+extension for Visual Studio Code.
-    './content/**/*.md',
+
-    './assets/scss/**/*.scss',
+https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
-  ],
+
-  theme: {
+The rest of this file is intentionally empty.
-    extend: {
+*/
-      fontFamily: {
-        'garamond': ['EB Garamond 12', 'serif'],
-        'iosevka': ['Iosevka', 'monospace'],
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
-};