← back to Norma
fix: add rel=noopener noreferrer to 32 target=_blank links in inbox mockup index; expand .gitignore backup patterns
eb3fcd718ab09aa4069c108e0f10aa488ed87023 · 2026-05-31 00:01:07 -0700 · Steve Abrams
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Files touched
M .gitignoreM public/mockups/inbox/index.html
Diff
commit eb3fcd718ab09aa4069c108e0f10aa488ed87023
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sun May 31 00:01:07 2026 -0700
fix: add rel=noopener noreferrer to 32 target=_blank links in inbox mockup index; expand .gitignore backup patterns
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
.gitignore | 7 +++++
public/mockups/inbox/index.html | 64 ++++++++++++++++++++---------------------
2 files changed, 39 insertions(+), 32 deletions(-)
diff --git a/.gitignore b/.gitignore
index 607a490..c0b973b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,6 +47,13 @@ tmp/
dist/
build/
*.bak
+*.bak-*
+*.pre-*
+*.orig
+*.save
+*.old
+copy-of-*
+*~
# Per-user secrets — never commit
docs/sessions/NORMA-NEW-USERS-*.md
diff --git a/public/mockups/inbox/index.html b/public/mockups/inbox/index.html
index 362d27c..ececf79 100644
--- a/public/mockups/inbox/index.html
+++ b/public/mockups/inbox/index.html
@@ -29,162 +29,162 @@
</header>
<div class="grid">
-<div class="card"><a href="v1-classic-dense.html" target="_blank">
+<div class="card"><a href="v1-classic-dense.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v1-classic-dense.html"></iframe></div>
<div class="meta"><div class="name">1 — Classic Dense</div><p class="desc">Today's pattern, refined. Tight rows, dark theme, indigo + emerald accents. Familiar to Gmail users.</p><div class="badges"><span class="badge">familiar</span><span class="badge">production-safe</span></div></div>
</a></div>
-<div class="card"><a href="v2-notion-cards.html" target="_blank">
+<div class="card"><a href="v2-notion-cards.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v2-notion-cards.html"></iframe></div>
<div class="meta"><div class="name">2 — Notion Cards</div><p class="desc">Light theme, elevated cards, generous whitespace. Each email feels like a thing being worked on.</p><div class="badges"><span class="badge">generous</span><span class="badge">notion-vibe</span></div></div>
</a></div>
-<div class="card"><a href="v3-linear-keyboard.html" target="_blank">
+<div class="card"><a href="v3-linear-keyboard.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v3-linear-keyboard.html"></iframe></div>
<div class="meta"><div class="name">3 — Linear Keyboard</div><p class="desc">Monochrome, status-machine (Triage/Working/Replied/Snoozed), J/K nav. Bug-tracker for mail.</p><div class="badges"><span class="badge">keyboard-first</span><span class="badge">linear-vibe</span></div></div>
</a></div>
-<div class="card"><a href="v4-apple-mail.html" target="_blank">
+<div class="card"><a href="v4-apple-mail.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v4-apple-mail.html"></iframe></div>
<div class="meta"><div class="name">4 — Apple Mail</div><p class="desc">3-pane (mailboxes | list | reading). Best for multi-mailbox (natalia@/info@/donors@).</p><div class="badges"><span class="badge">3-pane</span><span class="badge">traditional</span></div></div>
</a></div>
-<div class="card"><a href="v5-front-conversation.html" target="_blank">
+<div class="card"><a href="v5-front-conversation.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v5-front-conversation.html"></iframe></div>
<div class="meta"><div class="name">5 — Front Conversation</div><p class="desc">Assignee avatar leads every row. Team inbox, internal notes, collision detection.</p><div class="badges"><span class="badge">assignee-first</span><span class="badge">team-inbox</span></div></div>
</a></div>
-<div class="card"><a href="v6-hey-zero.html" target="_blank">
+<div class="card"><a href="v6-hey-zero.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v6-hey-zero.html"></iframe></div>
<div class="meta"><div class="name">6 — Hey Zero-Distraction</div><p class="desc">Editorial serif, Imbox/Feed/Paper Trail buckets, slow-mail vibe.</p><div class="badges"><span class="badge">editorial</span><span class="badge">hey-vibe</span></div></div>
</a></div>
-<div class="card"><a href="v7-spotify-dark.html" target="_blank">
+<div class="card"><a href="v7-spotify-dark.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v7-spotify-dark.html"></iframe></div>
<div class="meta"><div class="name">7 — Spotify Dark</div><p class="desc">Pure black, big square avatars, signature green CTA. Reading pane like an album-page.</p><div class="badges"><span class="badge">music-app-vibe</span><span class="badge">media-rich</span></div></div>
</a></div>
-<div class="card"><a href="v8-minimal-mono.html" target="_blank">
+<div class="card"><a href="v8-minimal-mono.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v8-minimal-mono.html"></iframe></div>
<div class="meta"><div class="name">8 — Minimal Mono</div><p class="desc">Black on white. Helvetica. No accent color. Tight, brutalist-minimal.</p><div class="badges"><span class="badge">monochrome</span><span class="badge">brutalist-minimal</span></div></div>
</a></div>
-<div class="card"><a href="v9-newsprint.html" target="_blank">
+<div class="card"><a href="v9-newsprint.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v9-newsprint.html"></iframe></div>
<div class="meta"><div class="name">9 — Newsprint</div><p class="desc">Old-school broadsheet masthead. Serif body, drop caps, sepia. The Daily Norma.</p><div class="badges"><span class="badge">editorial</span><span class="badge">vintage</span></div></div>
</a></div>
-<div class="card"><a href="v10-glassmorphism.html" target="_blank">
+<div class="card"><a href="v10-glassmorphism.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v10-glassmorphism.html"></iframe></div>
<div class="meta"><div class="name">10 — Glassmorphism</div><p class="desc">Translucent frosted panels, neon edges (cyan + pink), gradient text. Vision-OS feel.</p><div class="badges"><span class="badge">frosted</span><span class="badge">visionos-vibe</span></div></div>
</a></div>
-<div class="card"><a href="v11-terminal.html" target="_blank">
+<div class="card"><a href="v11-terminal.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v11-terminal.html"></iframe></div>
<div class="meta"><div class="name">11 — Terminal</div><p class="desc">Green phosphor on black, monospace, scanline overlay. Hacker-aesthetic. Power users only.</p><div class="badges"><span class="badge">terminal</span><span class="badge">monospace</span></div></div>
</a></div>
-<div class="card"><a href="v12-mochi-pastel.html" target="_blank">
+<div class="card"><a href="v12-mochi-pastel.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v12-mochi-pastel.html"></iframe></div>
<div class="meta"><div class="name">12 — Mochi Pastel</div><p class="desc">Soft pastels (blush/lavender/mint), Nunito rounded type, generous padding. Gentle vibe.</p><div class="badges"><span class="badge">soft</span><span class="badge">friendly</span></div></div>
</a></div>
-<div class="card"><a href="v13-a11y-high-contrast.html" target="_blank">
+<div class="card"><a href="v13-a11y-high-contrast.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v13-a11y-high-contrast.html"></iframe></div>
<div class="meta"><div class="name">13 — High-Contrast A11y</div><p class="desc">Atkinson Hyperlegible, 18px floor, thick black borders, ≥48px tap targets. WCAG-friendly.</p><div class="badges"><span class="badge">accessible</span><span class="badge">large-text</span></div></div>
</a></div>
-<div class="card"><a href="v14-material.html" target="_blank">
+<div class="card"><a href="v14-material.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v14-material.html"></iframe></div>
<div class="meta"><div class="name">14 — Material 3</div><p class="desc">Google M3 — rounded corners, purple primary, search chip header, FAB send button.</p><div class="badges"><span class="badge">android-vibe</span><span class="badge">m3</span></div></div>
</a></div>
-<div class="card"><a href="v15-synthwave.html" target="_blank">
+<div class="card"><a href="v15-synthwave.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v15-synthwave.html"></iframe></div>
<div class="meta"><div class="name">15 — Synthwave Retro</div><p class="desc">Magenta + cyan on indigo. Retro-grid horizon. 80s neon. Doom-rave.</p><div class="badges"><span class="badge">retro-80s</span><span class="badge">neon</span></div></div>
</a></div>
-<div class="card"><a href="v16-kanban-lanes.html" target="_blank">
+<div class="card"><a href="v16-kanban-lanes.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v16-kanban-lanes.html"></iframe></div>
<div class="meta"><div class="name">16 — Kanban Lanes</div><p class="desc">Trello-style horizontal lanes: Unassigned / Triage / Working / Waiting / Replied. Drag cards.</p><div class="badges"><span class="badge">kanban</span><span class="badge">trello-vibe</span></div></div>
</a></div>
-<div class="card"><a href="v17-ottoman-tile.html" target="_blank">
+<div class="card"><a href="v17-ottoman-tile.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v17-ottoman-tile.html"></iframe></div>
<div class="meta"><div class="name">17 — Ottoman Tile</div><p class="desc">Navy + gold + teal. Calligraphic Cormorant serif. Tile-pattern undertone, regal accents.</p><div class="badges"><span class="badge">ornate</span><span class="badge">serif</span></div></div>
</a></div>
-<div class="card"><a href="v18-brutalist.html" target="_blank">
+<div class="card"><a href="v18-brutalist.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v18-brutalist.html"></iframe></div>
<div class="meta"><div class="name">18 — Brutalist Concrete</div><p class="desc">Raw gray + hot orange. Hard edges, oversized type, no rounding. Industrial.</p><div class="badges"><span class="badge">brutalist</span><span class="badge">raw</span></div></div>
</a></div>
-<div class="card"><a href="v19-library-catalog.html" target="_blank">
+<div class="card"><a href="v19-library-catalog.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v19-library-catalog.html"></iframe></div>
<div class="meta"><div class="name">19 — Library Catalog</div><p class="desc">Manila card stock + typewriter font. Ruled lines, card-catalog drawer feel.</p><div class="badges"><span class="badge">typewriter</span><span class="badge">archival</span></div></div>
</a></div>
-<div class="card"><a href="v20-wabi-sabi.html" target="_blank">
+<div class="card"><a href="v20-wabi-sabi.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v20-wabi-sabi.html"></iframe></div>
<div class="meta"><div class="name">20 — Wabi-Sabi</div><p class="desc">Earthy clay + sage. Asymmetric padding, italic serif, Japanese minimalism.</p><div class="badges"><span class="badge">minimal</span><span class="badge">earthen</span></div></div>
</a></div>
-<div class="card"><a href="v21-cyberpunk-rain.html" target="_blank">
+<div class="card"><a href="v21-cyberpunk-rain.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v21-cyberpunk-rain.html"></iframe></div>
<div class="meta"><div class="name">21 — Cyberpunk Rain</div><p class="desc">Black + acid green + hot pink. Scanline overlay, terminal vibe with neon.</p><div class="badges"><span class="badge">neon</span><span class="badge">terminal</span></div></div>
</a></div>
-<div class="card"><a href="v22-bauhaus.html" target="_blank">
+<div class="card"><a href="v22-bauhaus.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v22-bauhaus.html"></iframe></div>
<div class="meta"><div class="name">22 — Bauhaus</div><p class="desc">Primary red/blue/yellow on cream. Geometric shapes as avatars. Futura.</p><div class="badges"><span class="badge">geometric</span><span class="badge">primary-colors</span></div></div>
</a></div>
-<div class="card"><a href="v23-memphis.html" target="_blank">
+<div class="card"><a href="v23-memphis.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v23-memphis.html"></iframe></div>
<div class="meta"><div class="name">23 — Memphis 80s</div><p class="desc">Pink/teal/yellow with dotted background. Hard drop-shadows. Playful.</p><div class="badges"><span class="badge">playful</span><span class="badge">retro-80s</span></div></div>
</a></div>
-<div class="card"><a href="v24-vellum.html" target="_blank">
+<div class="card"><a href="v24-vellum.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v24-vellum.html"></iframe></div>
<div class="meta"><div class="name">24 — Vellum Manuscript</div><p class="desc">Parchment cream with illuminated drop-caps. Garamond serif, scribed feel.</p><div class="badges"><span class="badge">illuminated</span><span class="badge">medieval</span></div></div>
</a></div>
-<div class="card"><a href="v25-solarpunk.html" target="_blank">
+<div class="card"><a href="v25-solarpunk.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v25-solarpunk.html"></iframe></div>
<div class="meta"><div class="name">25 — Solarpunk</div><p class="desc">Sage + ochre + sky blue. Optimistic, organic, rounded cards.</p><div class="badges"><span class="badge">optimistic</span><span class="badge">organic</span></div></div>
</a></div>
-<div class="card"><a href="v26-frutiger-aero.html" target="_blank">
+<div class="card"><a href="v26-frutiger-aero.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v26-frutiger-aero.html"></iframe></div>
<div class="meta"><div class="name">26 — Frutiger Aero</div><p class="desc">Y2K glossy sky-blue gradients. Glassy bubble orbs, soft drop-shadows.</p><div class="badges"><span class="badge">y2k</span><span class="badge">glossy</span></div></div>
</a></div>
-<div class="card"><a href="v27-crossword.html" target="_blank">
+<div class="card"><a href="v27-crossword.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v27-crossword.html"></iframe></div>
<div class="meta"><div class="name">27 — Crossword Grid</div><p class="desc">Pure b&w grid cells, courier, NYT-puzzle aesthetic. Across/Down framing.</p><div class="badges"><span class="badge">puzzle</span><span class="badge">b&w</span></div></div>
</a></div>
-<div class="card"><a href="v28-pixel-8bit.html" target="_blank">
+<div class="card"><a href="v28-pixel-8bit.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v28-pixel-8bit.html"></iframe></div>
<div class="meta"><div class="name">28 — 8-Bit Pixel</div><p class="desc">NES palette, blocky borders, HP bar + score. Retro gaming inbox.</p><div class="badges"><span class="badge">retro-gaming</span><span class="badge">pixel</span></div></div>
</a></div>
-<div class="card"><a href="v29-watercolor.html" target="_blank">
+<div class="card"><a href="v29-watercolor.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v29-watercolor.html"></iframe></div>
<div class="meta"><div class="name">29 — Watercolor</div><p class="desc">Soft splotches of rose / lavender / sage / peach. Painterly, gentle.</p><div class="badges"><span class="badge">painterly</span><span class="badge">soft</span></div></div>
</a></div>
-<div class="card"><a href="v30-sakura.html" target="_blank">
+<div class="card"><a href="v30-sakura.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v30-sakura.html"></iframe></div>
<div class="meta"><div class="name">30 — Sakura</div><p class="desc">Pink + white + black. Japanese mincho serif, single-stroke kanji accents.</p><div class="badges"><span class="badge">japanese</span><span class="badge">minimal</span></div></div>
</a></div>
-<div class="card"><a href="v31-forest-walk.html" target="_blank">
+<div class="card"><a href="v31-forest-walk.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v31-forest-walk.html"></iframe></div>
<div class="meta"><div class="name">31 — Forest Walk</div><p class="desc">Mossy green + bark + cream. Woodland calm, italic serif, leaf glyphs.</p><div class="badges"><span class="badge">woodland</span><span class="badge">natural</span></div></div>
</a></div>
-<div class="card"><a href="v32-botanical.html" target="_blank">
+<div class="card"><a href="v32-botanical.html" target="_blank" rel="noopener noreferrer">
<div class="frame-wrap"><iframe class="preview" src="v32-botanical.html"></iframe></div>
<div class="meta"><div class="name">32 — Botanical Print</div><p class="desc">Field-guide plate per message. Cream + leaf green + copper. Victorian scientific.</p><div class="badges"><span class="badge">field-guide</span><span class="badge">victorian</span></div></div>
</a></div>
← 81abdbc security: strip hardcoded dw_admin DSN password -> env-first
·
back to Norma
·
Global search: mount on Supervisor + Pulse tiers 3b2f226 →