refactor styles and structure for wompum components; improve grid spacing and layout

assets/scss/components/_wompum.scss

@@ -2,69 +2,44 @@
     &-container {
         width: 100%;
         margin: 0 auto;
+
+        & .wompum-grid,
+        & .wompum-article-grid {
+            gap: 2px;
+        }
+
+        &--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;
-        gap: 0;
-        padding: 0;
         width: 100%;
     }
 
-    // General grid styles
-    &-grid {
-        gap: 2px; // Tighter spacing for general grids
-        
-        &[data-rows="1"] {
-            .wompum-cell {
-                height: 100%;
-            }
-        }
-    }
-
-    // Article grid styles
-    &-article-grid {
-        gap: 3px; // Wider spacing for article grids
-
-        .single-default &,
-        .single-article & {
-            gap: 1rem;
-        }
-    }
-
     &-cell {
         width: 100%;
         transition: background-color 0.3s ease;
-
-        // Default background for uninitialized cells
         background-color: var(--sand-500);
 
-        // Different styling for cells in article grids
+        &--narrator {
-        .wompum-article-grid & {
+            min-height: 35px;
-            &[data-section="narrator"] {
-                min-height: 35px;
-            }
-            &[data-section="subject"] {
-                min-height: 40px;
-            }
-            &[data-section="facilitator"] {
-                min-height: 35px;
-            }
         }
 
-        // Fallback patterns using prime numbers
+        &--subject {
-        // (these will be overridden by JS-generated colors when initialized)
+            min-height: 40px;
-        &:nth-child(7n+1) {
-            background-color: var(--sand-100);
         }
 
-        &:nth-child(5n+2) {
+        &--facilitator {
-            background-color: var(--sand-900);
+            min-height: 35px;
-        }
-
-        &:nth-child(11n+3) {
-            background-color: var(--sand-500);
         }
     }
 }

content/about.md

@@ -1,5 +1,6 @@
 ---
 title: "About"
+wompum: "About The Protocol Oral History Project"
 include_partials: ["facilitator-list.html","wompum-demo.html"]
 ---
 

layouts/_default/single.html

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

layouts/articles/single.html

@@ -2,9 +2,9 @@
     
     <article class="single-article">
 
-      <header class="mb-4">{{ partial "article-wompum.html" . }}</header>
+      <header class="mb-4 wompum-container wompum-container--wide-gap">{{ partial "article-wompum.html" . }}</header>
 
-      <div class="flex gap-4">
+      <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">
           {{ if .Params.headshot }}
           <div class="narrator__container w-48 mb-2" data-text="{{ .Params.narrator }}">

layouts/partials/article-list.html

@@ -5,7 +5,7 @@
     {{- $page = .page -}}
 {{- end -}}
 <li class="flex gap-4 items-center">
-  <a class="flex-1 min-w-0" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
+  <a class="flex-1 min-w-0 wompum-container" 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>

layouts/partials/article-wompum.html

@@ -1,7 +1,5 @@
-<div class="wompum-container">
+<div class="wompum-article-grid"
-  <div class="wompum-article-grid"
+     data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
-       data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
+     data-columns="7"
-       data-columns="7"
+     data-rows="5">
-       data-rows="5">
-  </div>
 </div>

layouts/partials/header.html

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

static/js/wompum.js

@@ -137,7 +137,8 @@ class ArticleGrid extends WompumGrid {
             else if (column >= this.gridSize.columns - facilitatorColumns) section = 'facilitator';
             else section = 'subject';
             
-            cell.className = 'wompum-cell';
+            // Use BEM modifiers for sections
+            cell.className = `wompum-cell wompum-cell--${section}`;
             cell.setAttribute('data-cell-index', i);
             cell.setAttribute('data-section', section);
             cell.setAttribute('data-column', column);