diff options
Diffstat (limited to '.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html')
| -rw-r--r-- | .superpowers/brainstorm/26102-1776256459/content/theme-architecture.html | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html new file mode 100644 index 0000000..4d4c225 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html @@ -0,0 +1,112 @@ +<h2>danix.xyz Theme Architecture</h2> +<p class="subtitle">Hugo theme with config-driven structure, bilingual support, and hacker aesthetic</p> + +<div class="section"> + <h3>Core Design Principles</h3> + <ul style="margin-left: 1.5rem; line-height: 1.8;"> + <li><strong>Slackware Philosophy:</strong> Clean, essential, no bloat</li> + <li><strong>Config-Driven:</strong> All structure (menus, pages, URLs) defined in hugo.toml</li> + <li><strong>Bilingual (IT/EN):</strong> i18n files for all UI strings</li> + <li><strong>Dark/Light Toggle:</strong> Theme switcher in hamburger menu</li> + <li><strong>Hacker Aesthetic:</strong> Purple accent (#a855f7), monospace typography, subtle dot-grid background, terminal-style elements</li> + </ul> +</div> + +<div class="section"> + <h3>Page Structure</h3> + <div class="mockup" style="padding: 1.5rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;"> + <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; line-height: 1.8; color: #a855f7;"> + <div><strong>1. Home / Landing</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ Hero section (name, bio, photo)</div> + <div>→ CTA: Articles | Contact</div> + <div>→ Content from _index.md</div> + </div> + <div style="margin-top: 1rem;"><strong>2. Articles Section</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ List of posts (chronological)</div> + <div>→ Single article view</div> + <div>→ Content from content/ (Page Bundles)</div> + </div> + <div style="margin-top: 1rem;"><strong>3. Static Pages (config-driven)</strong></div> + <div style="margin-left: 2rem; margin-top: 0.5rem;"> + <div>→ /is (About)</div> + <div>→ /is/here (Contact)</div> + <div>→ /is/legal (Privacy)</div> + <div style="font-size: 0.85rem; color: #7a9bb8; margin-top: 0.5rem;">(Easy to add more via hugo.toml)</div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Navigation Structure</h3> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem;"> + <div class="mockup" style="padding: 1rem;"> + <div class="mockup-header">Top Navigation (Desktop)</div> + <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem;"> + <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem;"> + <div style="font-weight: bold; color: #a855f7;">danix</div> + <div style="display: flex; gap: 2rem; font-size: 0.85rem;"> + <span>Articles</span> + <span>Contact</span> + <span>≡</span> + </div> + </div> + </div> + </div> + <div class="mockup" style="padding: 1rem;"> + <div class="mockup-header">Hamburger Overlay Menu</div> + <div class="mockup-body" style="padding: 1rem; background: rgba(6, 11, 16, 0.5); border-radius: 0.4rem; font-size: 0.85rem;"> + <div style="display: flex; flex-direction: column; gap: 1rem;"> + <div style="font-weight: bold;">Articles</div> + <div style="font-weight: bold;">About (/is)</div> + <div style="font-weight: bold;">Contact (/is/here)</div> + <div style="font-weight: bold;">Privacy (/is/legal)</div> + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.2); margin: 0.5rem 0;"> + <div style="display: flex; gap: 1rem; font-size: 0.75rem;"> + <span>🇮🇹 IT</span> + <span>🇬🇧 EN</span> + </div> + <div style="font-size: 0.75rem;">☀️ / 🌙</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Key Features</h3> + <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">Alpine.js Integration</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Overlay menu toggle, language switching, theme toggle, contact form AJAX</p> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Responsive Design</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Mobile-first Tailwind CSS, hamburger on mobile, full nav on desktop</p> + </div> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #00ff88; margin-bottom: 0.5rem;">i18n Ready</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Hugo i18n system for all UI strings (buttons, labels, menus)</p> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem;"> + <h4 style="color: #a855f7; margin-bottom: 0.5rem;">Easy Extensibility</h4> + <p style="font-size: 0.85rem; line-height: 1.6;">Add static pages just by adding menu entries in hugo.toml</p> + </div> + </div> +</div> + +<div class="section"> + <h3>Visual Direction</h3> + <div style="padding: 1.5rem; background: linear-gradient(135deg, rgba(168, 85, 247, 0.05), rgba(0, 255, 136, 0.05)); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.5rem;"> + <p><strong>Color Palette:</strong> Dark blue-grey backgrounds (#060b10, #0c1520), purple accent (#a855f7), green highlights (#00ff88), light blue-grey text (#c4d6e8)</p> + <p style="margin-top: 0.8rem;"><strong>Typography:</strong> Headings: Oxanium | Body: IBM Plex Sans | Monospace: JetBrains Mono</p> + <p style="margin-top: 0.8rem;"><strong>Visual Elements:</strong> Subtle dot-grid background, smooth transitions, minimal glow effects, clean borders, hacker/open-source aesthetic</p> + <p style="margin-top: 0.8rem;"><strong>Unique Touch:</strong> Fresh layout design (not a copy of danix.me), modern with hints of hacker/open-source/Slackware philosophy</p> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Does this direction align with your vision?</h3> +</div>
\ No newline at end of file |