enhance wompum grid layout; add aspect ratio support and improve height management

assets/scss/components/_wompum.scss

@@ -6,6 +6,13 @@
         & .wompum-grid,
         & .wompum-article-grid {
             gap: 2px;
+            height: 100%; // Fill container height
+            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,
@@ -27,19 +34,15 @@
 
     &-cell {
         width: 100%;
+        height: 100%; // Ensure cells fill their grid areas
         transition: background-color 0.3s ease;
         background-color: var(--sand-500);
 
-        &--narrator {
-            min-height: 35px;
-        }
-
-        &--subject {
-            min-height: 40px;
-        }
-
+        // Remove fixed heights since we're using aspect ratio now
+        &--narrator,
+        &--subject,
         &--facilitator {
-            min-height: 35px;
+            min-height: unset;
         }
     }
 }

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
     <article class="single-default">
-      <header class="mb-8 wompum-container wompum-container--wide-gap">
-        <div class="wompum-grid h-96" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
+      <header class="mb-8 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">
+        <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">

layouts/articles/single.html

@@ -2,7 +2,7 @@
     
     <article class="single-article">
 
-      <header class="mb-4 wompum-container wompum-container--wide-gap">{{ partial "article-wompum.html" . }}</header>
+      <header class="mb-4 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">{{ partial "article-wompum.html" . }}</header>
 
       <div class="flex 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">

layouts/partials/article-list.html

@@ -5,13 +5,13 @@
     {{- $page = .page -}}
 {{- end -}}
 <li class="flex gap-4 items-center">
-  <a class="flex-1 min-w-0 wompum-container" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
+  <a class="flex-1 min-w-0 wompum-container h-full" 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" }}">
     <p>{{ $page.Date.Format "Jan" }}</p>
     <p>{{ $page.Date.Format "02" }}</p>
     <p>{{ $page.Date.Format "2006" }}</p>
   </time>
-  <div class="w-3/5 flex-shrink-0">
+  <div class="w-3/5 flex-shrink-0 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>
     {{ if $page.Params.location }}
     <p class="text-gray-800 italic">{{ $page.Params.location }}</p>

layouts/partials/header.html

@@ -15,8 +15,8 @@
       </ul>
     </nav>
   </div>
-  <div class="wompum-container wompum-container--wide-gap px-4">
-    <div class="wompum-grid h-1"
+  <div class="wompum-container wompum-container--wide-gap px-4 h-1">
+    <div class="wompum-grid"
          data-text="{{ .Site.Title }}"
          data-columns="7"
          data-rows="1">

static/js/wompum.js

@@ -6,8 +6,9 @@ class WompumGrid {
             rows: parseInt(element.dataset.rows) || 5
         };
         
-        // Set grid template columns based on data attribute or default
+        // Set grid template columns and rows
         this.gridElement.style.gridTemplateColumns = `repeat(${this.gridSize.columns}, 1fr)`;
+        this.gridElement.style.gridTemplateRows = `repeat(${this.gridSize.rows}, 1fr)`;
         
         // Initialize color calculator
         this.colorCalculator = new ColorCalculator();