From cafed9972586f7a52326abb4114d09911815fcb7 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Wed, 10 Dec 2025 14:10:38 -0500
Subject: [PATCH] Simplify layout to column-based masonry

---
 assets/app.js    | 18 ------------------
 assets/style.css | 30 ++++++++++++++++++++++--------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/assets/app.js b/assets/app.js
index 7950d13..9671c95 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -445,23 +445,6 @@ function handleAmbientDrift() {
 }
 handleAmbientDrift();
 
-function applyMasonry() {
-    const grid = document.querySelector('.projects-grid');
-    if (!grid) return;
-    const rowHeight = 12; // matches grid-auto-rows
-    const gap = 20; // matches grid gap
-    grid.querySelectorAll('.project-container').forEach(card => {
-        const height = card.getBoundingClientRect().height;
-        const span = Math.ceil((height + gap) / (rowHeight + gap));
-        card.style.gridRowEnd = `span ${span}`;
-    });
-}
-
-let resizeTimer = null;
-window.addEventListener('resize', () => {
-    clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(applyMasonry, 150);
-});
 
 const logoIcon = document.querySelector('.brand-icon');
 if (logoIcon) {
@@ -857,7 +840,6 @@ function render() {
     lastCountPulse = null;
     lastFinishedId = null;
     app.appendChild(grid);
-    applyMasonry();
 }
 
 render();
diff --git a/assets/style.css b/assets/style.css
index 0967d12..85f0c12 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -244,17 +244,28 @@ h1 {
 }
 
 .projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 20px;
-    align-items: start;
-    grid-auto-rows: 12px; /* Base row height for masonry calc */
-    grid-auto-flow: dense;
+    display: block;
+    column-width: 340px;
+    column-gap: 20px;
+    width: 100%;
 }
 
 @media (max-width: 768px) {
     .projects-grid {
-        grid-template-columns: 1fr;
+        column-width: 100%;
+    }
+}
+
+@media (max-width: 1100px) {
+    .projects-grid {
+        display: block;
+        column-width: 340px;
+        column-gap: 20px;
+    }
+    .project-container {
+        break-inside: avoid;
+        margin: 0 0 20px;
+        width: auto;
     }
 }
 
@@ -263,10 +274,13 @@ h1 {
     background: var(--card-bg);
     border-radius: 18px;
     padding: 5px 15px 15px 15px;
-    margin: 0;
+    margin: 0 0 20px;
     box-shadow: var(--shadow);
     transition: background-color 0.3s;
     border: 1px solid var(--border);
+    break-inside: avoid;
+    display: inline-block;
+    width: 100%;
 }
 
 .project-header {