pre-hydrate density LS to kill FOUC

bedfc1afcd396618eb5de7b771c5eaba00641234 · 2026-05-25 21:27:15 -0700 · steve

Theme already had a sync pre-DOMContentLoaded LS read on
document.documentElement.dataset.theme. Mirror it for density so
the grid renders at the saved column count from the first paint
rather than snapping from 6 → saved value after JS boots.

Files touched

M public/index.html

Diff

commit bedfc1afcd396618eb5de7b771c5eaba00641234
Author: steve <steve@designerwallcoverings.com>
Date:   Mon May 25 21:27:15 2026 -0700

    pre-hydrate density LS to kill FOUC
    
    Theme already had a sync pre-DOMContentLoaded LS read on
    document.documentElement.dataset.theme. Mirror it for density so
    the grid renders at the saved column count from the first paint
    rather than snapping from 6 → saved value after JS boots.
---
 public/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/index.html b/public/index.html
index 67f0a8a..c8a308d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -192,6 +192,7 @@ textarea:focus-visible,
 </style>
 <script>
 (function(){ try { var t = localStorage.getItem('rec_theme') || 'light'; document.documentElement.dataset.theme = t; } catch(e){} })();
+(function(){ try { var d = parseInt(localStorage.getItem('rec_theme_density') || '0', 10); if (d >= 4 && d <= 12) document.documentElement.style.setProperty('--cols', d); } catch(e){} })();
 </script>
 <style id="ns-modal-fix">.ns-modal{display:none}.ns-modal.show{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000}.ns-modal-card{background:#faf6ef;color:#1a1714;padding:32px;border-radius:12px;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.ns-modal .close-x{position:absolute;top:12px;right:16px;background:transparent;border:0;font-size:24px;cursor:pointer;color:#1a1714}.ns-modal h3{margin:0 0 8px;font-size:22px;font-weight:400}.ns-modal .sub{color:rgba(0,0,0,0.5);margin:0 0 20px;font-size:14px}.ns-actions{display:grid;gap:10px}.ns-action{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;padding:14px 16px;border:1px solid rgba(0,0,0,0.12);border-radius:8px}.ns-action:hover{background:rgba(0,0,0,0.04)}.ns-action .ico{font-size:20px}.ns-action .txt{display:flex;flex-direction:column}.ns-action .txt b{font-weight:600}.ns-action .txt span{font-size:12px;color:rgba(0,0,0,0.5)}</style><style id="hero4-anti-header-crop">
 /* Never-show-images-with-headers rule (2026-05-14): every hero image

← 3351662 wire api-vendor-redact middleware · back to Recycledwallpaper · homepage: add Ideas rails block (New this week + Curated pic b1d73b2 →