adds wompum lines and other wompum related goodies

assets/scss/components/_wompum.scss

@@ -2,69 +2,48 @@
     &-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;
-        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%;
+        height: 100%; // Ensure cells fill their grid areas
         transition: background-color 0.3s ease;
-
-        // Default background for uninitialized cells
         background-color: var(--sand-500);
 
-        // Different styling for cells in article grids
-        .wompum-article-grid & {
-            &[data-section="narrator"] {
-                min-height: 35px;
-            }
-            &[data-section="subject"] {
-                min-height: 40px;
-            }
-            &[data-section="facilitator"] {
-                min-height: 35px;
-            }
-        }
-
-        // Fallback patterns using prime numbers
-        // (these will be overridden by JS-generated colors when initialized)
-        &:nth-child(7n+1) {
-            background-color: var(--sand-100);
-        }
-
-        &:nth-child(5n+2) {
-            background-color: var(--sand-900);
-        }
-
-        &:nth-child(11n+3) {
-            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

@@ -16,30 +16,39 @@ body {
   font-family: $font-garamond;
 }
 
-.wompum-radial-grid {
-  @apply absolute w-full h-full top-0 left-0;
-}
-
-.narrator-image-container {
-  @apply relative;
-
-  .wompum-radial-grid {
-    @apply absolute inset-0 w-full h-full;
-  }
-}
-
-.narrator-headshot {
-  @apply w-full rounded-full object-cover relative z-10 border-2 border-white;
-  aspect-ratio: 1;
-}
-
 .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;

config.toml

@@ -4,7 +4,7 @@ title = 'Protocol Oral History Project'
 theme = "hugo-starter-tailwind-basic"
 
 [taxonomies]
-  tag = "tags"
+  topics = "topics"
   narrator = "narrator"
   facilitator = "facilitator"
 

content/about.md

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

content/articles/dorsey-the_gut.md

@@ -6,7 +6,7 @@ date: 2025-03-18
 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"
-tags: [ancestors, food, health, indigeneity]
+topics: [ancestors, food, health, indigeneity]
 headshot: "/headshots/placeholder-headshot.png"
 links:
   - text: "Bugs Bones & Botany"

content/articles/ehmke-contributor_covenant.md

@@ -7,7 +7,7 @@ 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"
-tags: [code of conduct, dispute resolution, gender, open source, organizations, software]
+topics: [code of conduct, dispute resolution, gender, open source, organizations, software]
 ---
 
 *First of all, I want to begin with the question of how you how you prefer to introduce yourself.*

content/articles/kiessel-good_market.md

@@ -7,7 +7,7 @@ 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"
-tags: [economics, organizations, ecology, standards]
+topics: [economics, organizations, ecology, standards]
 ---
 
 *I want to begin with the question of how you like to introduce yourself. How do you introduce yourself to somebody you've just met? Where do you begin?*

content/articles/littauer-constructed_languages.md

@@ -7,7 +7,7 @@ approved: 2025-02-11
 summary: "Constructed languages, or conlangs, are the basis of a hobby, a science, and a community that now occupies a small corner of the entertainment industry."
 location: "Wellington, NZ"
 headshot: "/headshots/placeholder-headshot.png"
-tags: [fiction, gender, language, open source, software]
+topics: [fiction, gender, language, open source, software]
 ---
 
 *Can you tell me a bit about how you like to introduce yourself?*

content/articles/mannan-diplomatic_protocols.md

@@ -7,7 +7,7 @@ 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"
-tags: [diplomacy, government, friendship]
+topics: [diplomacy, government, friendship]
 ---
 
 *How do you introduce yourself?*

content/articles/prodromou-distributed_social_networks.md

@@ -12,7 +12,7 @@ links:
     url: https://evanp.me/
   - text: "ActivityPub: Programming the Social Web"
     url: https://www.oreilly.com/library/view/activitypub/9781098162733/
-tags: [decentralization, open source, organizations, social media, software, standards]
+topics: [decentralization, open source, organizations, social media, software, standards]
 ---
 
 *How do you introduce yourself?*

content/articles/zargham-ultimate_frisbee.md

@@ -7,7 +7,7 @@ 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"
-tags: [frisbee, sports, organizations, dispute resolution]
+topics: [frisbee, sports, organizations, dispute resolution]
 ---
 
 *How do you like to introduce yourself to people as you encounter them in the world?*

layouts/_default/baseof.html

@@ -30,8 +30,8 @@
     {{ end }}
     <meta name="description" content="{{ $description }}" />
     
-    {{/* Generate keywords from tags */}}
-    {{ with .Params.tags }}
+    {{/* Generate keywords from topics */}}
+    {{ with .Params.topics }}
     <meta name="keywords" content="{{ delimit . ", " }}" />
     {{ end }}
     
@@ -60,14 +60,14 @@
     <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:section" content="Oral History" />
-    {{ with .Params.tags }}
+    {{ with .Params.topics }}
     {{ range . }}
     <meta property="article:tag" content="{{ . }}" />
     {{ end }}
     
     {{ end }}
     
-    {{/* Author information using standard meta tags instead of article:author */}}
+    {{/* Author information using standard meta topics instead of article:author */}}
     {{ with .Params.narrator }}
     <meta name="author" content="{{ . }}" />
     {{ end }}

layouts/_default/single.html

@@ -1,9 +1,11 @@
 {{ 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 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">
-        <p class="font-bold text-4xl">{{ .Title }}</p>
+      <div class="prose lg:prose-xl p-4 mx-auto mt-4">
+        <p class="font-bold text-6xl">{{ .Title }}</p>
         {{ .Content }}
         
         {{/* Check for additional partials to include */}}

layouts/_default/taxonomy.html

@@ -4,13 +4,16 @@
   <h1 class="text-4xl font-bold text-center capitalize">{{ .Title }}</h1>
 </header>
 <main class="container mx-auto">
-  <ul class="mt-4 space-y-4">
+  <ul class="flex flex-col gap-4 w-full mt-4">
     {{ partial "article-list.html" (dict "Pages" .Data.Pages) }}
   </ul>
   
   <section>
-    <h2 class="text-4xl my-8 font-bold text-center">Other {{ .Data.Plural | title }}</h2>
-    <div class="tag-cloud font-iosevka text-gray-600 text-center">
+    <h2 class="text-4xl mt-8 mb-4 font-bold text-center">Other {{ .Data.Plural }}</h2>
+    <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">
       {{ $terms := index .Site.Taxonomies .Data.Plural }}
       {{ range $term, $pages := $terms }}
         {{ if ne $term $.Title }}

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 wompum-container--aspect-ratio">{{ 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 }}">
@@ -17,7 +17,10 @@
           <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>
-          <p><strong>Topics:</strong> {{ partial "tags.html" . }}</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>
@@ -32,13 +35,13 @@
           {{ end }}
         </aside>
         <div class="prose lg:prose-xl lg:w-2/3 p-4">
-          <p class="font-bold text-4xl">{{ partial "article-title" . }}</p>
+          <p class="font-bold text-4xl article-title article-title--single">{{ partial "article-title" . }}</p>
           {{ .Content }}
         </div>
       </div>
     </article>
     <aside class="max-w-screen-xl mx-auto px-4 lg:px-0">
-      {{ partial "related-articles" (dict "page" . "tags" .Params.tags "limit" 3) }}
+      {{ partial "related-articles" (dict "page" . "topics" .Params.topics "limit" 3) }}
     </aside>
     <div class="text-center my-12"><a href="/">Go Home</a></div>
 {{ end }}

layouts/index.html

@@ -7,16 +7,22 @@
   <aside class="max-w-prose w-1/4 flex flex-col gap-8 mb-8">
 
     <section>
-      <h2 class="text-2xl mb-4 font-bold">About</h2>
-      {{ .Content }}
+      <h2 class="text-2xl font-bold mb-2">About</h2>
+      <div class="wompum-container wompum-container--no-gap">
+        <div class="wompum-grid" data-text="About The Protocol Oral History Project" data-columns="4" data-rows="1"></div>
+      </div>
+      <p class="mt-4">{{ .Content }}</p>
     </section>
 
     <section>
-      <h2 class="text-2xl mb-4 font-bold">Topics</h2>
-      <div class="tag-cloud font-iosevka text-gray-600 text-sm">
-        {{ $tags := .Site.Taxonomies.tags }}
-        {{ range $tag, $pages := $tags }}
-        <a href="{{ "/tags/" | relLangURL }}{{ $tag | urlize }}" style="font-size: {{ add 1 (div (len $pages) 2) }}em;" data-count="{{ len $pages}}"
+      <h2 class="text-2xl font-bold mb-2">Topics</h2>
+      <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">
+        {{ $topics := .Site.Taxonomies.topics }}
+        {{ 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>

layouts/partials/article-list.html

@@ -5,16 +5,19 @@
     {{- $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 wompum-container--aspect-ratio h-full block" 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">
-    <a class="text-2xl font-bold hover:text-green-900 underline" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
+  <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>
+    {{ end }}
     <p class="max-w-prose">{{ $page.Params.summary }}</p>
-    {{ partial "tags.html" $page }}
+    {{ partial "topics.html" $page }}
   </div>
 </li>
 {{ end }}

layouts/partials/article-title.html

@@ -1,3 +1,3 @@
 {{- if and .Params.narrator .Params.subject -}}
-    <span class="artile__title-narrator font-iosevka">{{- .Params.narrator }}</span>: <span class="artile__title-subject">{{ .Params.subject -}}</span>
+    <span class="article-title__narrator">{{- .Params.narrator }}</span> <span class="article-title__subject">{{ .Params.subject -}}</span>
 {{- end -}}

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-columns="7"
      data-rows="5">
-  </div>
 </div>

layouts/partials/header.html

@@ -15,8 +15,8 @@
       </ul>
     </nav>
   </div>
-  <div class="wompum-container">
-    <div class="wompum-grid h-2"
+  <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">

layouts/partials/related-articles.html

@@ -1,15 +1,15 @@
-{{- $tags := .tags -}}
+{{- $topics := .topics -}}
 {{- $limit := default 3 .limit -}}
 {{- $currentPath := .page.RelPermalink -}}
 
 {{- $related := where (where site.RegularPages "Type" "articles") "RelPermalink" "!=" $currentPath -}}
 {{- $matchingArticles := slice -}}
 
-{{/* First try to find articles with matching tags */}}
+{{/* First try to find articles with matching topics */}}
 {{- range $related -}}
     {{- $matches := 0 -}}
-    {{- range .Params.tags -}}
-        {{- if in $tags . -}}
+    {{- range .Params.topics -}}
+        {{- if in $topics . -}}
             {{- $matches = add $matches 1 -}}
         {{- end -}}
     {{- end -}}
@@ -18,7 +18,7 @@
     {{- end -}}
 {{- end -}}
 
-{{/* If we found matching articles, sort by number of matching tags */}}
+{{/* If we found matching articles, sort by number of matching topics */}}
 {{- $finalArticles := slice -}}
 {{- if gt (len $matchingArticles) 0 -}}
     {{- $finalArticles = first $limit (sort $matchingArticles "matches" "desc") -}}
@@ -30,6 +30,9 @@
 {{- if gt (len $finalArticles) 0 -}}
 <div class="related-articles flex flex-col 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>
+    </div>
     <ul class="flex flex-col gap-4 w-full">
       {{ partial "article-list" (dict "Pages" $finalArticles) }}
     </ul>

layouts/partials/sigil.html

@@ -1,25 +0,0 @@
-{{/* Partial: create_sigil.html */}}
-
-{{- $input := . -}} <!-- The input string will be passed into the partial -->
-{{- $vowels := "aeiouAEIOU" -}} <!-- List of vowels to remove -->
-{{- $seen := dict -}} <!-- Dictionary to track characters we've already encountered -->
-{{- $output := "" -}} <!-- Variable to store the resulting sigil -->
-{{- $chars := split (replaceRE "[^a-zA-Z]" "" $input) "" -}} <!-- Remove non-alphabetic characters and split the input string into a slice of characters -->
-
-{{- /* Step 1: Remove vowels */ -}}
-{{- range $i, $char := $chars -}}
-{{- if not (in $vowels $char) -}}
-{{- /* Step 2: Remove repeating letters */ -}}
-{{- if not (index $seen $char) -}}
-{{- $seen = merge $seen (dict $char true) -}}
-{{- $output = printf "%s%s" $output $char -}}
-{{- end -}}
-{{- end -}}
-{{- end -}}
-
-{{- $output = upper $output -}}
-{{ $output = split $output "" }}
-{{ $output = apply $output "printf" "%#x" "." }}
-{{ $output = apply $output "int" "." }}
-
-{{- $output -}}<br>

layouts/partials/topics.html

@@ -1,7 +1,7 @@
-{{- if .Params.tags }}
+{{- if .Params.topics }}
 <div class="flex flex-wrap gap-2 my-2 text-xs font-iosevka">
-  {{- range .Params.tags }}
-  <a href="{{ "tags/" | relURL }}{{ . | urlize }}"
+  {{- 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">
     {{ . }}
   </a>

layouts/partials/wompum-demo.html

@@ -8,12 +8,13 @@
     <input type="text" 
            class="w-full p-2 border rounded"
            placeholder="Type something..."
-           oninput="updateWompumDemo(this.value)">
+           value="{{ .Site.Title}}"
+           oninput="updateWompumDemoGrid(this.value)">
   </div>
 
   <p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>
 
-  <div class="transformation-steps space-y-4 mb-8 font-iosevka">
+  <div class="transformation-steps mb-8 font-iosevka">
     <div>
       <span class="font-bold">Original Text:</span>
       <span class="text-input-display"></span>
@@ -43,15 +44,56 @@
     </div>
   </div>
 
-  <div class="wompum-container h-48 mb-8">
+  <div class="wompum-container wompum-container--demo h-48 mb-8">
     <div class="wompum-grid h-full"
-         data-text=""
+         data-text="{{ .Site.Title}}"
          data-columns="5"
          data-rows="3">
     </div>
   </div>
 
+  <style>
+    .wompum-container--demo {
+      overflow: hidden;
+    }
+    .wompum-container--demo .wompum-cell {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 2em;
+      color: #fff;
+    }
+    .wompum-container--demo .wompum-cell::after {
+      content: attr(data-sigil-digit);
+      font-size: 0.5em;
+    }
+  </style>
+
   <script>
+    // call function on page load
+    document.addEventListener('DOMContentLoaded', function() {
+      const input = document.querySelector('.wompum-demo input');
+      updateWompumDemo(input.value);
+    });
+
+    function updateWompumDemoGrid(text) {
+
+      updateWompumDemo(text);
+
+      // Update grid
+      const grid = document.querySelector('.wompum-demo .wompum-grid');
+      grid.dataset.text = text;
+
+      // Remove existing grid
+      while (grid.firstChild) {
+        grid.firstChild.remove();
+      }
+
+      // Reinitialize grid
+      new WompumGrid(grid).init();
+    }
+    
     function updateWompumDemo(text) {
       // Update displays
       document.querySelector('.text-input-display').textContent = text;
@@ -69,17 +111,7 @@
       const sigilArray = Sigil.generate(text);
       document.querySelector('.text-sigil-root').textContent = sigilArray.join(', ');
       
-      // Update grid
-      const grid = document.querySelector('.wompum-demo .wompum-grid');
-      grid.dataset.text = text;
       
-      // Remove existing grid
-      while (grid.firstChild) {
-        grid.firstChild.remove();
-      }
-      
-      // Reinitialize grid
-      new WompumGrid(grid).init();
     }
   </script>
 </div>

layouts/tags/lists.html

@@ -1,12 +0,0 @@
-{{ define "main" }}
-<h1 class="text-2xl font-bold">Topic: {{ .Title }}</h1>
-<ul class="mt-4 space-y-4">
-  {{ range .Pages }}
-  <li>
-    <a href="{{ .RelPermalink }}" class="text-lg font-semibold hover:underline">
-      {{ .Title }}
-    </a>
-  </li>
-  {{ end }}
-</ul>
-{{ end }}

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();
@@ -137,7 +138,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);