applies wompum color to tailwind class system

assets/css/components/wompum.css

@@ -31,7 +31,6 @@
   width: 100%;
   height: 100%;
   transition: background-color 0.3s ease;
-  background-color: var(--sand-500);
 }
 
 .wompum-cell--narrator,

assets/css/main.css

@@ -2,6 +2,10 @@ body {
   @apply font-garamond;
 }
 
+a:hover {
+  @apply text-pine-900;
+}
+
 .interviewer-question {
   font-style: italic;
   color: #444;
@@ -44,3 +48,47 @@ body {
 .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

@@ -1,13 +1,46 @@
 @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;
+  @apply antialiased bg-sand-100/50;
 }
 
 @import "components/wompum.css";

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/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,7 +13,7 @@
     <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 my-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">
       {{ partial "taxonomy-cloud" (dict "taxonomy" .Data.Singular "Site" .Site "page" .Page) }}
     </div>
   </section>

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <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>
 
@@ -19,7 +19,7 @@
       <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 my-4">
+      <div class="tag-cloud font-iosevka text-gray-600 my-4 flex flex-wrap gap-2">
         {{ partial "taxonomy-cloud" (dict "taxonomy" "topics" "Site" .Site) }}
       </div>
     </section>

layouts/partials/article-list.html

@@ -4,15 +4,17 @@
 {{- if reflect.IsMap . -}}
     {{- $page = .page -}}
 {{- end -}}
-<li class="flex md:flex-row flex-col md:gap-4 gap-2 md: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 h-full aspect-7/2 md:aspect-auto" 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 flex gap-4 md:block" 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>
+    </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 hover:text-green-900 underline" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
+    <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/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

@@ -3,9 +3,9 @@
 {{ $termPage := $.Site.GetPage (printf "/%s/%s" $taxonomy $term) }}
 <a href="{{ $termPage.RelPermalink }}" 
   data-size="{{ len $pages }}"
-  class="tag {{ if eq $.page.RelPermalink $termPage.RelPermalink }}hidden{{ else }}inline-block{{ end }}
+  class="tag font-bold
-          p-2 my-1 border border-gray-100 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100
+          {{ 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-80
+          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

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

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;
     }