From 407de864bbd23a9aa350bfcf3bfb1c8a5e37d225 Mon Sep 17 00:00:00 2001
From: Jeffrey Alan Scudder <me@jas.life>
Date: Sat, 21 Mar 2026 12:41:26 -0700
Subject: [PATCH] kidlisp: hide center nob in single-column mode + green learn
 theme

- Hide #center-square on mobile (max-width: 768px)
- Update learn.html backgrounds from gray/white to green tint
  matching the Learn tab color coding (both light and dark modes)
- Make learn iframe background transparent

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 system/public/kidlisp.com/css/mobile.css |  4 ++++
 system/public/kidlisp.com/index.html     |  2 +-
 system/public/kidlisp.com/learn.html     | 20 ++++++++++----------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/system/public/kidlisp.com/css/mobile.css b/system/public/kidlisp.com/css/mobile.css
index 81646ea1a3..99440f40c2 100644
--- a/system/public/kidlisp.com/css/mobile.css
+++ b/system/public/kidlisp.com/css/mobile.css
@@ -20,6 +20,10 @@
     height: 100%;
   }
   
+  #center-square {
+    display: none !important;
+  }
+
   main {
     flex-direction: column;
     height: 100%;
diff --git a/system/public/kidlisp.com/index.html b/system/public/kidlisp.com/index.html
index fa07dfcc01..5d2ca352dd 100644
--- a/system/public/kidlisp.com/index.html
+++ b/system/public/kidlisp.com/index.html
@@ -9327,7 +9327,7 @@
           <div class="console-output" id="mobile-console-output"></div>
         </div>
         <div class="docs-content" id="guide-content">
-          <iframe id="learn-iframe" data-src="https://kidlisp.com/learn" style="width: 100%; height: 100%; border: none; flex: 1;"></iframe>
+          <iframe id="learn-iframe" data-src="https://kidlisp.com/learn" style="width: 100%; height: 100%; border: none; flex: 1; background: transparent;"></iframe>
         </div>
         <div class="docs-content hidden" id="list-content">
           <!-- List sub-tabs -->
diff --git a/system/public/kidlisp.com/learn.html b/system/public/kidlisp.com/learn.html
index a5cbc80892..18df09760a 100644
--- a/system/public/kidlisp.com/learn.html
+++ b/system/public/kidlisp.com/learn.html
@@ -43,16 +43,16 @@
     }
 
     :root {
-      --bg-primary: #f7f7f7;
-      --bg-secondary: #e8e8e8;
-      --bg-tertiary: white;
+      --bg-primary: #eef7ef;
+      --bg-secondary: #dceedd;
+      --bg-tertiary: #f5faf5;
       --text-primary: #111;
       --text-secondary: #555;
       --text-muted: #888;
       --accent: #4a6fff;
       --accent-dim: rgba(74, 111, 255, 0.1);
-      --border: #ddd;
-      --code-bg: #f0f0f0;
+      --border: #c5dcc7;
+      --code-bg: #e4f0e5;
       --bar-color: #4a6fff;
       --font-mono: 'Berkeley Mono Variable', 'Noto Sans Mono', monospace;
       --font-display: 'YWFTProcessing-Regular', monospace;
@@ -70,14 +70,14 @@
     }
     @media (prefers-color-scheme: dark) {
       :root {
-        --bg-primary: #111;
-        --bg-secondary: #1a1a1a;
-        --bg-tertiary: #222;
+        --bg-primary: #0e1a0f;
+        --bg-secondary: #142016;
+        --bg-tertiary: #1a2b1c;
         --text-primary: #eee;
         --text-secondary: #aaa;
         --text-muted: #666;
-        --border: #333;
-        --code-bg: #1a1a1a;
+        --border: #1e3320;
+        --code-bg: #142016;
         --bar-color: #6b8aff;
         --accent-dim: rgba(107, 138, 255, 0.15);
         /* Syntax highlighting — dark mode */
-- 
knotmirror 0.0.1