← back to Jutewallpaper
pilot: header rebuild (hamburgers UL: nav + admin-tools / name centered) + Loewe accent #9B7B4F (was Bottega green drift); disable upper-right corner-nav
49e6d3b21e720a727ccac4a63197aca5b10f5884 · 2026-06-01 13:17:15 -0700 · Steve Abrams
Files touched
Diff
commit 49e6d3b21e720a727ccac4a63197aca5b10f5884
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 1 13:17:15 2026 -0700
pilot: header rebuild (hamburgers UL: nav + admin-tools / name centered) + Loewe accent #9B7B4F (was Bottega green drift); disable upper-right corner-nav
---
public/index.html | 70 +++++++++++++++++++++++++++++++++++++++++--------------
1 file changed, 53 insertions(+), 17 deletions(-)
diff --git a/public/index.html b/public/index.html
index c1c3195..a8fad16 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,7 +36,7 @@
--paper: #0e1311;
--muted: #8B7866;
--line: #1d2a23;
- --accent: #107A3B;
+ --accent: #9B7B4F;
--bg-soft: #1d2a23;
--cols: 6;
}
@@ -45,7 +45,7 @@ html[data-theme="dark"] {
--paper: #F4F0E6;
--muted: #C9B89E;
--line: rgba(255,254,250,0.12);
- --accent: #107A3B;
+ --accent: #9B7B4F;
--bg-soft: #2a1f15;
}
* { margin:0; padding:0; box-sizing:border-box }
@@ -338,6 +338,27 @@ textarea:focus-visible,
.ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ns-header .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
</style>
+<style id="ns-header-rebuild">
+ /* Rebuild header per spec: both hamburgers upper-LEFT, site name centered */
+ .ns-header { padding:18px 28px !important; position:sticky; }
+ .ns-burgers { display:flex; align-items:center; gap:10px; flex:1 1 0; }
+ .ns-spacer { flex:1 1 0; }
+ .ns-name-center { flex:0 0 auto; text-align:center; font-family:'Recoleta',Georgia,serif; font-style:italic; font-weight:500; font-size:22px; letter-spacing:.01em; color:#f5f1e8; text-decoration:none; text-transform:none; white-space:nowrap; }
+ .ns-burger { display:flex !important; flex-direction:column; align-items:center; justify-content:center; width:34px; height:34px; gap:5px; background:transparent; border:0; cursor:pointer; padding:0; }
+ .ns-burger[hidden] { display:none !important; } /* admin burger stays hidden until logged in */
+ .ns-burger span { display:block; width:22px; height:1.5px; background:#f5f1e8; transition:transform .2s,opacity .2s; }
+ .ns-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
+ .ns-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
+ .ns-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
+ .ns-admin-burger span { background:var(--accent); }
+ .ns-nav, .ns-admin-nav { display:none !important; position:absolute; top:100%; left:18px !important; right:auto !important; flex-direction:column; align-items:stretch; gap:0; background:rgba(10,10,10,0.97); backdrop-filter:blur(10px); border:1px solid var(--line); border-top:0; min-width:240px; padding:8px 0; margin:0; box-shadow:0 16px 40px rgba(0,0,0,0.55); z-index:150; }
+ .ns-nav.open, .ns-admin-nav.open { display:flex !important; }
+ .ns-admin-nav { left:60px !important; }
+ .ns-admin-head { padding:10px 22px 8px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
+ .ns-admin-nav a, .ns-admin-nav button { font-family:-apple-system,system-ui,sans-serif; font-size:14px; color:var(--paper); text-decoration:none; background:none; border:0; cursor:pointer; padding:12px 22px; text-align:left; width:100%; border-bottom:1px solid var(--line); display:block; }
+ .ns-admin-nav button:last-child { border-bottom:0; }
+ .ns-admin-nav a:hover, .ns-admin-nav button:hover { background:rgba(245,241,232,0.06); }
+</style>
<style id="ns-gold-kill">
/* novasuede: kill gold-solid fills, off-white instead. Edge color stays gold. */
.new-badge, .new-arrivals-pill,
@@ -355,31 +376,45 @@ textarea:focus-visible,
}
</style>
<header class="ns-header">
- <a href="/" class="ns-brand" aria-label="Home">
- <span class="ns-dot"></span>
- <span class="ns-name">jutewallpaper</span>
- </a>
+ <div class="ns-burgers">
+ <button type="button" class="ns-burger" id="nsNavBurger" aria-label="Menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
+ <span></span><span></span><span></span>
+ </button>
+ <button type="button" class="ns-burger ns-admin-burger" id="nsAdminBurger" aria-label="Admin tools" aria-controls="nsAdminNav" aria-expanded="false" onclick="nsToggleAdmin(this)" hidden>
+ <span></span><span></span><span></span>
+ </button>
+ </div>
+ <a href="/" class="ns-name-center">Jute Wallpaper</a>
+ <div class="ns-spacer" aria-hidden="true"></div>
<nav class="ns-nav" id="nsPrimaryNav" aria-label="Primary">
<a href="/">Home</a>
<a href="/about">About</a>
+ <a href="/care.html">Care</a>
+ <a href="/history.html">History</a>
+ <a href="/sourcing.html">Sourcing</a>
<button type="button" onclick="nsContactOpen()">Contact</button>
</nav>
- <button type="button" class="mobile-toggle" aria-label="Toggle menu" aria-controls="nsPrimaryNav" aria-expanded="false" onclick="nsToggleNav(this)">
- <span></span><span></span><span></span>
- </button>
+ <nav class="ns-admin-nav" id="nsAdminNav" aria-label="Admin tools">
+ <div class="ns-admin-head">Admin tools</div>
+ <a href="https://admin.shopify.com" target="_blank" rel="noopener noreferrer">Shopify admin</a>
+ <a href="#" onclick="return false">Edit hero</a>
+ <a href="#" onclick="return false">Analytics</a>
+ <button type="button" onclick="nsAdminLogout()">Sign out admin</button>
+ </nav>
</header>
<script>
function nsContactOpen() { var m = document.getElementById('nsContactModal'); if (m) m.classList.add('show'); }
function nsContactClose() { var m = document.getElementById('nsContactModal'); if (m) m.classList.remove('show'); }
- function nsToggleNav(btn) {
- var nav = document.getElementById('nsPrimaryNav');
- if (!nav) return;
- var open = nav.classList.toggle('open');
- btn.setAttribute('aria-expanded', open ? 'true' : 'false');
- }
- document.addEventListener('keydown', function(e){ if (e.key === 'Escape') nsContactClose(); });
+ function nsCloseNav(){ var n=document.getElementById('nsPrimaryNav'),b=document.getElementById('nsNavBurger'); if(n)n.classList.remove('open'); if(b)b.setAttribute('aria-expanded','false'); }
+ function nsCloseAdmin(){ var n=document.getElementById('nsAdminNav'),b=document.getElementById('nsAdminBurger'); if(n)n.classList.remove('open'); if(b)b.setAttribute('aria-expanded','false'); }
+ function nsToggleNav(btn) { var nav=document.getElementById('nsPrimaryNav'); if(!nav)return; nsCloseAdmin(); var open=nav.classList.toggle('open'); btn.setAttribute('aria-expanded', open?'true':'false'); }
+ function nsToggleAdmin(btn) { var nav=document.getElementById('nsAdminNav'); if(!nav)return; nsCloseNav(); var open=nav.classList.toggle('open'); btn.setAttribute('aria-expanded', open?'true':'false'); }
+ function nsAdminLogout(){ try{localStorage.removeItem('dwAdmin');}catch(e){} location.reload(); }
+ // Pilot admin detection: ?admin=1 sets the flag; localStorage.dwAdmin reveals the admin (2nd) burger.
+ (function(){ try{ var p=new URLSearchParams(location.search); if(p.get('admin')==='1')localStorage.setItem('dwAdmin','1'); if(localStorage.getItem('dwAdmin')==='1'){ var b=document.getElementById('nsAdminBurger'); if(b)b.hidden=false; } }catch(e){} })();
+ document.addEventListener('keydown', function(e){ if (e.key === 'Escape') { nsContactClose(); nsCloseNav(); nsCloseAdmin(); } });
</script>
@@ -1262,7 +1297,8 @@ async function renderRailSections(){
data-mode="retail"
defer onerror="this.remove()"></script>
-<script src="/corner-nav.js" defer></script>
+<!-- corner-nav.js (upper-right 4-icon widget) disabled for the UL-hamburger header rebuild — Steve 2026-06-01 -->
+<!-- <script src="/corner-nav.js" defer></script> -->
<script src="/sku-redact.js" defer></script>
</body>
</html>
← 8caa5f0 add noopener,noreferrer to sister-site constellation window.
·
back to Jutewallpaper
·
pilot: unique high-res niche hero (Mandalay Sisal 2400px) re ce6497e →