ideas page: multi-column grid (newest leftmost) — was vertical stack

b033d6797ea120b195188bc1853219e4fd815605 · 2026-05-19 17:29:15 -0700 · SteveStudio2

Steve's rule: new ideas should render to the left of others. Container is
now CSS grid with auto-fill 420px-min columns so cards lay out left-to-right
and wrap. Default sort flipped to 'newest' so freshly-generated ideas land
in grid position 0 (top-left). Stage/Name/Category remain selectable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Files touched

M public/ideas.html

Diff

commit b033d6797ea120b195188bc1853219e4fd815605
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 19 17:29:15 2026 -0700

    ideas page: multi-column grid (newest leftmost) — was vertical stack
    
    Steve's rule: new ideas should render to the left of others. Container is
    now CSS grid with auto-fill 420px-min columns so cards lay out left-to-right
    and wrap. Default sort flipped to 'newest' so freshly-generated ideas land
    in grid position 0 (top-left). Stage/Name/Category remain selectable.
    
    Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/ideas.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/ideas.html b/public/ideas.html
index 509529a4..3318b7c1 100644
--- a/public/ideas.html
+++ b/public/ideas.html
@@ -9,8 +9,9 @@
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/static/css/panel.css" />
 <style>
-  .container { max-width: 1280px; margin: 0 auto; padding: 100px 24px 60px; }
-  .idea-card { background: var(--bg-2); border: 1px solid var(--hairline); padding: 32px; margin-bottom: 24px; }
+  .container { max-width: 1680px; margin: 0 auto; padding: 100px 24px 60px; }
+  #ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 24px; align-items: start; }
+  .idea-card { background: var(--bg-2); border: 1px solid var(--hairline); padding: 32px; }
   .idea-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
   .idea-card h2 { font-family: var(--serif); font-size: 32px; font-weight: 400; margin: 0; }
   .idea-card .tag { font-family: var(--serif); font-style: italic; color: var(--fg-2); margin: 0 0 18px; }
@@ -47,10 +48,10 @@
   <div class="controls">
     <span class="lbl">Sort</span>
     <select id="sort">
+      <option value="newest">Newest generated</option>
       <option value="stage">Stage (live first)</option>
       <option value="name">Name A-Z</option>
       <option value="category">Category</option>
-      <option value="newest">Newest generated</option>
     </select>
     <span class="lbl">Density</span>
     <input type="range" id="density" min="1" max="3" value="1" />

← 7468c96b 404-guard for .bak/.pre-* paths + broaden .gitignore · back to Abrams · gitignore: add .orig .rej *~ .swp .swo to backup-file block 64e23995 →