From dfc5e68be50b365676e90dce7b42dd8bd0c53a66 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 3 Dec 2025 17:18:21 +0000
Subject: [PATCH 1/2] Standardize all lab pages with black header styling

Updates:
- Applied black header (.header class) to all lab pages for visual consistency
- Wrapped h1 and subtitle in .header divs on all labs
- Ensured all pages have placeholder paragraphs between header and upload sections
- Text Reversal Lab, Line Break Lab, Alphabetizer Lab, Lipogram Lab, Long Tail Lab, and Grid-It Lab now match Eraser Lab and Markov Mashup Lab styling
- Creates more visual dimension and consistency across the entire site
---
 alphabetizer-lab.html | 5 ++++-
 grid-it-lab.html      | 6 ++++--
 line-break-lab.html   | 6 ++++--
 lipogram-lab.html     | 6 ++++--
 long-tail-lab.html    | 6 ++++--
 text-reverse-lab.html | 6 ++++--
 6 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/alphabetizer-lab.html b/alphabetizer-lab.html
index c4df926..1668545 100644
--- a/alphabetizer-lab.html
+++ b/alphabetizer-lab.html
@@ -21,7 +21,10 @@
     
     <!-- Tool content here -->
     <div class="container">
-        <h1>Alphabetizer Lab</h1>
+        <div class="header">
+            <h1>Alphabetizer Lab</h1>
+            <p>Analyze and rearrange words from your text alphabetically and numerically</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Alphabetizer Lab reorganizes text and reveals word frequency patterns.]
diff --git a/grid-it-lab.html b/grid-it-lab.html
index 32dd0aa..7189a9a 100644
--- a/grid-it-lab.html
+++ b/grid-it-lab.html
@@ -79,8 +79,10 @@
     </nav>
 
     <div class="container">
-        <h1>Grid-It Lab</h1>
-        <p class="subtitle">Organize text into a customizable grid layout</p>
+        <div class="header">
+            <h1>Grid-It Lab</h1>
+            <p>Organize text into a customizable grid with adjustable rows and columns</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Grid-It Lab creates visual arrangements of text and its applications for spatial poetry or experimental layouts.]
diff --git a/line-break-lab.html b/line-break-lab.html
index eb77a93..482a6b5 100644
--- a/line-break-lab.html
+++ b/line-break-lab.html
@@ -21,8 +21,10 @@
     
     <!-- Tool content here -->
      <div class="container">
-        <h1>Line Break Lab</h1>
-        <p class="subtitle">Experiment with adding and removing line breaks in your text</p>
+        <div class="header">
+            <h1>Line Break Lab</h1>
+            <p>Experiment with adding and removing line breaks in your text</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Line Break Lab transforms prose into poetry through strategic line breaking.]
diff --git a/lipogram-lab.html b/lipogram-lab.html
index 3b1bbfa..eda7f1e 100644
--- a/lipogram-lab.html
+++ b/lipogram-lab.html
@@ -86,8 +86,10 @@
     </nav>
 
     <div class="container">
-        <h1>Lipogram Lab</h1>
-        <p class="subtitle">Remove all words containing selected letters</p>
+        <div class="header">
+            <h1>Lipogram Lab</h1>
+            <p>Remove all words containing selected letters from your text</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Lipogram Lab works and its creative applications for constraint-based writing.]
diff --git a/long-tail-lab.html b/long-tail-lab.html
index 3999cfb..1df30b5 100644
--- a/long-tail-lab.html
+++ b/long-tail-lab.html
@@ -20,8 +20,10 @@
     </nav>
 
     <div class="container">
-        <h1>Long Tail Lab</h1>
-        <p class="subtitle">Reorganize text by the length of clauses, sentences, lines, or words</p>
+        <div class="header">
+            <h1>Long Tail Lab</h1>
+            <p>Reorganize text by the length of clauses, sentences, lines, or words</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Long Tail Lab reorganizes text and how this can reveal patterns or create new reading experiences.]
diff --git a/text-reverse-lab.html b/text-reverse-lab.html
index 67682ac..11018c7 100644
--- a/text-reverse-lab.html
+++ b/text-reverse-lab.html
@@ -21,8 +21,10 @@
     
     <!-- Tool content here -->
      <div class="container">
-        <h1>Text Reversal Lab</h1>
-        <p class="subtitle">Upload a .txt file and experiment with reversing words and sentences</p>
+        <div class="header">
+            <h1>Text Reversal Lab</h1>
+            <p>Upload a .txt file and experiment with reversing words and sentences</p>
+        </div>
 
         <p style="margin-bottom: 30px; line-height: 1.8; color: #4a4a4a;">
             [Add your description here about how the Text Reversal Lab works and its creative applications for deconstructing and reconstructing narratives.]

From 7e92efdfb28b02e31119fa4bb3074c0d03494370 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 3 Dec 2025 17:29:01 +0000
Subject: [PATCH 2/2] Strengthen header CSS with !important to ensure
 consistent styling

- Added !important flags to .header background, color, h1, and p styles
- Ensures black header with white text displays consistently across all lab pages
- Fixes potential CSS specificity and caching issues
- Added explicit margin controls for header elements
---
 styles.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/styles.css b/styles.css
index 30e86d0..69648f2 100644
--- a/styles.css
+++ b/styles.css
@@ -255,8 +255,8 @@ h3 {
 
 /* Header Section */
 .header {
-    background: #1a1a1a;
-    color: #ffffff;
+    background: #1a1a1a !important;
+    color: #ffffff !important;
     padding: 30px;
     text-align: center;
     position: relative;
@@ -279,15 +279,17 @@ h3 {
 }
 
 .header h1 {
-    color: #ffffff;
-    border-bottom: none;
+    color: #ffffff !important;
+    border-bottom: none !important;
     padding-bottom: 0;
+    margin-bottom: 10px;
 }
 
 .header p {
     font-size: 1.1em;
     opacity: 0.9;
-    color: #e8e8e8;
+    color: #e8e8e8 !important;
+    margin: 0;
 }
 
 /* Upload Zone */