From 395b1f4de4d51b8a36765c657c8dd628ac4a05fe Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 15:23:46 +0200
Subject: initial commit

---
 .../content/theme-architecture.html                | 112 +++++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 .superpowers/brainstorm/26102-1776256459/content/theme-architecture.html

(limited to '.superpowers/brainstorm/26102-1776256459/content/theme-architecture.html')

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
-- 
cgit v1.2.3