diff options
| author | Danilo M. <danix@danix.xyz> | 2026-05-08 18:12:05 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-05-08 18:12:12 +0200 |
| commit | 563e87afd4ce4ef48acef4f29927579ca69d01cb (patch) | |
| tree | a773d48f4b50db59de71d477db6606d182951881 /.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html | |
| parent | 1510749c61feed6b7948f538c1bc4709ee2e0112 (diff) | |
| download | danixxyz-theme-563e87afd4ce4ef48acef4f29927579ca69d01cb.tar.gz danixxyz-theme-563e87afd4ce4ef48acef4f29927579ca69d01cb.zip | |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to '.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html')
| -rw-r--r-- | .superpowers/brainstorm/15080-1775367116/content/theme-approaches.html | 358 |
1 files changed, 0 insertions, 358 deletions
diff --git a/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html b/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html deleted file mode 100644 index fdb04cb..0000000 --- a/.superpowers/brainstorm/15080-1775367116/content/theme-approaches.html +++ /dev/null @@ -1,358 +0,0 @@ -<style> - @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap'); - - .approaches { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; } - - .approach-card { - flex: 1; - min-width: 260px; - max-width: 340px; - border-radius: 12px; - overflow: hidden; - cursor: pointer; - border: 2px solid transparent; - transition: border-color 0.2s, box-shadow 0.2s; - position: relative; - } - .approach-card.selected { border-color: #a855f7; box-shadow: 0 0 24px rgba(168,85,247,0.4); } - .approach-card:hover { border-color: rgba(168,85,247,0.4); } - - .approach-label { - font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; - letter-spacing: 0.15em; - text-transform: uppercase; - padding: 0.5rem 1rem; - font-weight: 600; - } - - /* ── OPTION A: Hacker Terminal ── */ - .preview-a { - background: #060b10; - padding: 1rem; - font-family: 'JetBrains Mono', monospace; - min-height: 340px; - } - .preview-a .nav-a { - display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; - border-bottom: 1px solid #182840; padding-bottom: 0.6rem; - } - .preview-a .logo-a { color: #a855f7; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; } - .preview-a .nav-link { color: #7a9bb8; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; } - .preview-a .hero-a { - background: #060b10; - border: 1px solid #182840; - padding: 0.8rem; - margin-bottom: 0.8rem; - position: relative; - overflow: hidden; - } - .preview-a .matrix-strip { - position: absolute; top: 0; right: 0; bottom: 0; width: 40%; - background: linear-gradient(to right, #060b10, transparent); - display: flex; align-items: center; justify-content: flex-end; - font-size: 0.4rem; color: rgba(0,255,136,0.2); letter-spacing: 0.05em; - padding-right: 0.3rem; overflow: hidden; line-height: 1.2; - font-weight: 300; - } - .preview-a .name-a { font-family: 'Oxanium', sans-serif; color: #a855f7; font-size: 1.1rem; font-weight: 800; } - .preview-a .role-a { color: #00ff88; font-size: 0.5rem; letter-spacing: 0.15em; text-transform: uppercase; margin: 0.2rem 0; } - .preview-a .bio-a { color: #7a9bb8; font-size: 0.45rem; line-height: 1.6; max-width: 55%; font-family: 'IBM Plex Sans', sans-serif; } - .preview-a .card-a { - background: #101e2d; - border: 1px solid #182840; - padding: 0.6rem; - margin-bottom: 0.5rem; - display: flex; gap: 0.5rem; - } - .preview-a .card-img-a { - width: 40px; height: 32px; background: #182840; flex-shrink: 0; - border: 1px solid #a855f7; position: relative; overflow: hidden; - } - .preview-a .card-img-a::after { - content: ''; position: absolute; inset: 0; - background: linear-gradient(135deg, rgba(168,85,247,0.3), transparent); - } - .preview-a .tag-a { - font-size: 0.38rem; color: #00ff88; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.15rem; - border: 1px solid rgba(0,255,136,0.3); display: inline-block; padding: 0.05rem 0.2rem; - } - .preview-a .title-a { color: #c4d6e8; font-size: 0.5rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.15rem; } - .preview-a .excerpt-a { color: #7a9bb8; font-size: 0.4rem; font-family: 'IBM Plex Sans', sans-serif; line-height: 1.5; } - .label-a { background: #060b10; color: #a855f7; } - - /* ── OPTION B: Editorial Dark ── */ - .preview-b { - background: #0a0f1a; - padding: 1rem; - min-height: 340px; - font-family: 'IBM Plex Sans', sans-serif; - } - .preview-b .nav-b { - display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; - padding-bottom: 0.6rem; - } - .preview-b .logo-b { font-family: 'Oxanium', sans-serif; color: #e8e8f0; font-size: 0.8rem; font-weight: 800; } - .preview-b .nav-link-b { color: #6a7fa0; font-size: 0.5rem; letter-spacing: 0.06em; font-family: 'JetBrains Mono', monospace; } - .preview-b .hero-b { - margin-bottom: 1rem; - padding-bottom: 0.8rem; - border-bottom: 1px solid #1e2840; - position: relative; overflow: hidden; - } - .preview-b .matrix-strip-b { - position: absolute; top: 0; right: 0; bottom: 0; width: 35%; - display: flex; align-items: center; justify-content: flex-end; - font-family: 'JetBrains Mono', monospace; - font-size: 0.38rem; color: rgba(0,255,136,0.1); letter-spacing: 0.05em; - padding-right: 0.3rem; overflow: hidden; line-height: 1.3; - } - .preview-b .eyebrow-b { font-family: 'JetBrains Mono', monospace; color: #a855f7; font-size: 0.42rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.3rem; } - .preview-b .name-b { font-family: 'Oxanium', sans-serif; color: #e8e8f0; font-size: 1.4rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.25rem; } - .preview-b .bio-b { color: #8899b8; font-size: 0.46rem; line-height: 1.8; max-width: 58%; } - .preview-b .section-label-b { font-family: 'JetBrains Mono', monospace; font-size: 0.42rem; color: #a855f7; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6rem; } - .preview-b .grid-b { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem; } - .preview-b .card-b { - background: #111827; - border-radius: 6px; - overflow: hidden; - } - .preview-b .card-b.featured { grid-row: span 2; } - .preview-b .card-img-b { - height: 50px; background: linear-gradient(135deg, #1e2840 60%, #2d1f4a); - position: relative; - } - .preview-b .card-img-b.featured { height: 90px; } - .preview-b .card-img-b::after { - content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; - background: linear-gradient(to top, #111827, transparent); - } - .preview-b .card-body-b { padding: 0.5rem; } - .preview-b .tag-b { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #a855f7; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.12rem; } - .preview-b .title-b { color: #d4e0f0; font-size: 0.48rem; font-weight: 600; line-height: 1.35; } - .label-b { background: #0a0f1a; color: #d4e0f0; font-family: 'IBM Plex Sans', sans-serif; } - - /* ── OPTION C: Warm Personal ── */ - .preview-c { - background: #0d0f14; - padding: 1rem; - min-height: 340px; - font-family: 'IBM Plex Sans', sans-serif; - } - .preview-c .nav-c { - display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; - padding-bottom: 0.6rem; border-bottom: 1px solid #1e2030; - } - .preview-c .logo-c { font-family: 'Oxanium', sans-serif; color: #c084fc; font-size: 0.75rem; font-weight: 800; } - .preview-c .nav-link-c { color: #6a7a90; font-size: 0.5rem; letter-spacing: 0.04em; font-family: 'IBM Plex Sans', sans-serif; } - .preview-c .hero-c { - display: flex; align-items: center; gap: 0.8rem; - margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid #1e2030; - position: relative; overflow: hidden; - } - .preview-c .matrix-strip-c { - position: absolute; top: 0; right: 0; bottom: 0; width: 30%; - font-family: 'JetBrains Mono', monospace; - font-size: 0.38rem; color: rgba(192,132,252,0.12); letter-spacing: 0.05em; - padding-right: 0.3rem; overflow: hidden; line-height: 1.3; display: flex; align-items: center; - justify-content: flex-end; - } - .preview-c .avatar-c { - width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; - background: linear-gradient(135deg, #a855f7, #00ff88); - display: flex; align-items: center; justify-content: center; - font-family: 'Oxanium', sans-serif; color: #fff; font-size: 0.65rem; font-weight: 800; - } - .preview-c .name-c { font-family: 'Oxanium', sans-serif; color: #dde8f8; font-size: 0.9rem; font-weight: 800; line-height: 1.1; } - .preview-c .role-c { font-family: 'JetBrains Mono', monospace; color: #c084fc; font-size: 0.38rem; letter-spacing: 0.1em; margin: 0.1rem 0; } - .preview-c .bio-c { color: #7a8fa8; font-size: 0.4rem; line-height: 1.7; max-width: 55%; } - .preview-c .filters-c { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; flex-wrap: wrap; } - .preview-c .filter-c { font-family: 'JetBrains Mono', monospace; font-size: 0.38rem; padding: 0.1rem 0.35rem; border-radius: 20px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } - .preview-c .filter-all { background: #a855f7; color: #fff; } - .preview-c .filter-inactive { background: rgba(168,85,247,0.1); color: #7a8fa8; border: 1px solid rgba(168,85,247,0.2); } - - /* Mixed card types for feed */ - .preview-c .feed-c { display: flex; flex-direction: column; gap: 0.4rem; } - - /* Article card */ - .preview-c .card-article { - background: #141820; border-radius: 6px; display: flex; gap: 0.5rem; overflow: hidden; - border-left: 2px solid #a855f7; - } - .preview-c .card-article-img { width: 48px; height: 40px; background: linear-gradient(135deg, #1e2840, #2d1f4a); flex-shrink: 0; } - .preview-c .card-article-body { padding: 0.4rem 0.4rem 0.4rem 0; } - .preview-c .card-type { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.08rem; } - .preview-c .type-tech { color: #a855f7; } - .preview-c .type-life { color: #f59e0b; } - .preview-c .type-quote { color: #00ff88; } - .preview-c .type-link { color: #38bdf8; } - .preview-c .card-title-c { color: #ccd8ec; font-size: 0.48rem; font-weight: 600; line-height: 1.3; } - - /* Quote card */ - .preview-c .card-quote { - background: #0f1520; border-radius: 6px; padding: 0.5rem 0.6rem; - border-left: 3px solid #00ff88; - } - .preview-c .quote-text { color: #a0b8c8; font-size: 0.44rem; font-style: italic; line-height: 1.6; margin-bottom: 0.15rem; font-family: 'IBM Plex Sans', sans-serif; } - .preview-c .quote-attr { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #00ff88; letter-spacing: 0.08em; } - - /* Link card */ - .preview-c .card-link { - background: #141820; border-radius: 6px; padding: 0.4rem 0.5rem; - display: flex; align-items: center; gap: 0.4rem; - border-left: 2px solid #38bdf8; - } - .preview-c .link-icon { font-size: 0.7rem; flex-shrink: 0; } - .preview-c .link-title { color: #ccd8ec; font-size: 0.45rem; font-weight: 600; } - .preview-c .link-domain { font-family: 'JetBrains Mono', monospace; font-size: 0.35rem; color: #38bdf8; } - - .label-c { background: #0d0f14; color: #dde8f8; font-family: 'IBM Plex Sans', sans-serif; } - - .approach-badge { - position: absolute; top: 0.5rem; right: 0.5rem; - font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; - background: rgba(168,85,247,0.15); color: #a855f7; - border: 1px solid rgba(168,85,247,0.3); padding: 0.15rem 0.4rem; - letter-spacing: 0.1em; text-transform: uppercase; - } -</style> - -<h2>Three theme directions for danix.xyz</h2> -<p class="subtitle">Each preserves the fonts and colors from danixme — the difference is in personality and layout approach. Click to select.</p> - -<div class="approaches"> - - <!-- OPTION A --> - <div class="approach-card" data-choice="a" onclick="toggleSelect(this)"> - <div class="approach-label label-a">A — Hacker Terminal</div> - <div class="preview-a"> - <div class="approach-badge">A</div> - <div class="nav-a"> - <span class="logo-a">danix</span> - <span class="nav-link">articles</span> - <span class="nav-link">contact</span> - </div> - <div class="hero-a"> - <div class="matrix-strip">アイウ01カキABC<br>エオ234クケBCD<br>カキ567コサCDE<br>クケ890シスDEF</div> - <div class="name-a">danilo m.</div> - <div class="role-a">// engineer · writer · human</div> - <div class="bio-a">writing about the things I learn, the things I think, and the things that move me.</div> - </div> - <div class="card-a"> - <div class="card-img-a"></div> - <div> - <div class="tag-a">tech</div> - <div class="title-a">Understanding Kubernetes networking from scratch</div> - <div class="excerpt-a">After years of cargo-culting configs...</div> - </div> - </div> - <div class="card-a"> - <div class="card-img-a"></div> - <div> - <div class="tag-a" style="color:#f59e0b;border-color:rgba(245,158,11,0.3)">life</div> - <div class="title-a">On slowing down in a world that won't</div> - <div class="excerpt-a">There's a particular kind of exhaustion...</div> - </div> - </div> - </div> - <div class="approach-label label-a" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #182840">Sharp edges · terminal soul · max hacker</div> - </div> - - <!-- OPTION B --> - <div class="approach-card" data-choice="b" onclick="toggleSelect(this)"> - <div class="approach-label label-b">B — Editorial Dark</div> - <div class="preview-b"> - <div class="approach-badge">B</div> - <div class="nav-b"> - <span class="logo-b">danix</span> - <span class="nav-link-b">articles</span> - <span class="nav-link-b">contact</span> - </div> - <div class="hero-b"> - <div class="matrix-strip-b">アイウ01カキABC<br>エオ234クケBCD<br>カキ567コサCDE</div> - <div class="eyebrow-b">// engineer · writer · human</div> - <div class="name-b">danilo m.</div> - <div class="bio-b">Writing about IT, life, and the things that matter. Honest takes, real learning.</div> - </div> - <div class="section-label-b">latest</div> - <div class="grid-b"> - <div class="card-b featured"> - <div class="card-img-b featured"></div> - <div class="card-body-b"> - <div class="tag-b">tech</div> - <div class="title-b">Understanding Kubernetes networking from scratch</div> - </div> - </div> - <div class="card-b"> - <div class="card-img-b"></div> - <div class="card-body-b"> - <div class="tag-b" style="color:#f59e0b">life</div> - <div class="title-b">On slowing down</div> - </div> - </div> - <div class="card-b"> - <div class="card-img-b"></div> - <div class="card-body-b"> - <div class="tag-b" style="color:#00ff88">quote</div> - <div class="title-b">"The obstacle is the way"</div> - </div> - </div> - </div> - </div> - <div class="approach-label label-b" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #1e2840">Magazine grid · featured post · editorial rhythm</div> - </div> - - <!-- OPTION C --> - <div class="approach-card" data-choice="c" onclick="toggleSelect(this)"> - <div class="approach-label label-c">C — Warm Personal</div> - <div class="preview-c"> - <div class="approach-badge">C</div> - <div class="nav-c"> - <span class="logo-c">danix</span> - <span class="nav-link-c">articles</span> - <span class="nav-link-c">contact</span> - </div> - <div class="hero-c"> - <div class="matrix-strip-c">アイウ01<br>エオ234<br>カキ567</div> - <div class="avatar-c">DM</div> - <div> - <div class="name-c">danilo m.</div> - <div class="role-c">// engineer · writer · human</div> - <div class="bio-c">Writing about the things I learn, think about, and find worth sharing.</div> - </div> - </div> - <div class="filters-c"> - <span class="filter-c filter-all">all</span> - <span class="filter-c filter-inactive">tech</span> - <span class="filter-c filter-inactive">life</span> - <span class="filter-c filter-inactive">quotes</span> - <span class="filter-c filter-inactive">links</span> - <span class="filter-c filter-inactive">photos</span> - </div> - <div class="feed-c"> - <div class="card-article"> - <div class="card-article-img"></div> - <div class="card-article-body"> - <div class="card-type type-tech">tech</div> - <div class="card-title-c">Understanding Kubernetes networking from scratch</div> - </div> - </div> - <div class="card-quote"> - <div class="card-type type-quote">quote</div> - <div class="quote-text">"The obstacle is the way"</div> - <div class="quote-attr">— Marcus Aurelius</div> - </div> - <div class="card-link"> - <div class="link-icon">🔗</div> - <div> - <div class="card-type type-link">link</div> - <div class="link-title">The future of Linux packaging</div> - <div class="link-domain">lwn.net</div> - </div> - </div> - </div> - </div> - <div class="approach-label label-c" style="font-size:0.6rem;padding:0.4rem 1rem;border-top:1px solid #1e2030">Feed-first · type-colored cards · human warmth</div> - </div> - -</div> |
