Overhaul homepage layout with 2026 workbench, bento grid, live theme studio, and manifesto

templates/home_forgejo.tmpl

@@ -1,35 +1,46 @@
-<style>
+<section class="dxd-section dxd-manifesto" id="manifesto">
-  .dxd-reasons .dxd-feature .icon img {
+  <div class="dxd-sec-bar">
-    width: 24px;
+    <span class="dxd-sec-idx">03 // MANIFESTO</span>
-    height: 24px;
+    <span class="dxd-sec-line"></span>
-    /* Fold the colourful icons into a calm monochrome that suits any theme */
+    <span class="dxd-sec-tag">DOING OUR OWN THING</span>
-    filter: grayscale(1) opacity(0.85);
-  }
-  .dxd-reasons .dxd-feature p { color: var(--dxd-muted); }
-  .dxd-reasons .dxd-feature p a { color: var(--dxd-link); font-weight: 600; }
-</style>
-
-<section class="dxd-section dxd-reasons">
-  <div class="dxd-section-head">
-    <h2>Why not just use GitHub?</h2>
-    <p>Fair question. Here is the honest answer.</p>
   </div>
 
-  <div class="dxd-grid">
+  <div class="dxd-section-head dxd-manifesto-head">
-    <div class="dxd-feature">
+    <div>
-      <div class="icon"><img src="/assets/img/money.svg" alt=""></div>
+      <h2>Why not just use <span>GitHub</span>?</h2>
+      <p>Fair question. Here is the unfiltered answer.</p>
+    </div>
+    <div class="dxd-manifesto-badge">
+      <span class="dot"></span>
+      100% Microsoft-Free Zone
+    </div>
+  </div>
+
+  <div class="dxd-manifesto-grid">
+    <!-- 01 -->
+    <article class="dxd-mcard" data-tone="amber">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">01</span>
+        <span class="dxd-mcard-pill">BAIT &amp; SWITCH</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/money.svg" alt=""></div>
+      </div>
       <h3>GitHub is greedy</h3>
       <p>
-        GitHub gave students cool stuff, then slowly removes them,
+        GitHub gave students cool stuff, then slowly removes them and
-        moves stuff into more expensive plans. I am tired of depending
+        moves features into more expensive plans. I am tired of depending
         on free perks that can disappear whenever they feel like it —
         Copilot Education/Pro for students had every good model stripped
         out, making it practically worthless. Fuck GitHub.
       </p>
-    </div>
+    </article>
 
-    <div class="dxd-feature">
+    <!-- 02 -->
-      <div class="icon"><img src="/assets/img/microsoft.svg" alt=""></div>
+    <article class="dxd-mcard" data-tone="coral">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">02</span>
+        <span class="dxd-mcard-pill">CORPORATE LOCK-IN</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/microsoft.svg" alt=""></div>
+      </div>
       <h3>It is owned by Microsoft</h3>
       <p>
         GitHub is owned by Microsoft. That alone is enough for me to hate it.
@@ -37,10 +48,15 @@
         giant company that makes closed-source software and loves locking
         people into its ecosystem. I also despise Windows, but that is irrelevant.
       </p>
-    </div>
+    </article>
 
-    <div class="dxd-feature">
+    <!-- 03 -->
-      <div class="icon"><img src="/assets/img/ai.svg" alt=""></div>
+    <article class="dxd-mcard" data-tone="violet">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">03</span>
+        <span class="dxd-mcard-pill">NO BLOAT</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/ai.svg" alt=""></div>
+      </div>
       <h3>AI slop everywhere</h3>
       <p>
         GitHub keeps pushing Copilot and AI into every corner. I do not want my
@@ -48,10 +64,15 @@
         my repositories without feeling like everything is being turned into
         training data or another Microsoft product.
       </p>
-    </div>
+    </article>
 
-    <div class="dxd-feature">
+    <!-- 04 -->
-      <div class="icon"><img src="/assets/img/privacy.svg" alt=""></div>
+    <article class="dxd-mcard" data-tone="emerald">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">04</span>
+        <span class="dxd-mcard-pill">ZERO TELEMETRY</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/privacy.svg" alt=""></div>
+      </div>
       <h3>Privacy</h3>
       <p>
         This server is run by me, a random student, so you do not have to blindly
@@ -59,20 +80,30 @@
         sell AI tools, or measure everything you do for profit. If that is not enough,
         GitLab or Codeberg are still better than the alternative.
       </p>
-    </div>
+    </article>
 
-    <div class="dxd-feature">
+    <!-- 05 -->
-      <div class="icon"><img src="/assets/img/monopoly.svg" alt=""></div>
+    <article class="dxd-mcard" data-tone="cyan">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">05</span>
+        <span class="dxd-mcard-pill">ANTI-MONOPOLY</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/monopoly.svg" alt=""></div>
+      </div>
       <h3>GitHub is a monopoly</h3>
       <p>
         Everyone puts everything on GitHub now: code, issues, releases, docs, packages,
         websites, actions, discussions, everything. That is way too much power for one
         website owned by one company — especially when that company is Microsoft.
       </p>
-    </div>
+    </article>
 
-    <div class="dxd-feature">
+    <!-- 06 -->
-      <div class="icon"><img src="/assets/img/selfhost.svg" alt=""></div>
+    <article class="dxd-mcard" data-tone="teal">
+      <div class="dxd-mcard-top">
+        <span class="dxd-mcard-num">06</span>
+        <span class="dxd-mcard-pill">OWN YOUR IRON</span>
+        <div class="dxd-mcard-icon"><img src="/assets/img/selfhost.svg" alt=""></div>
+      </div>
       <h3>Self-hosting is better</h3>
       <p>
         This place exists because I wanted my own git host. No giant platform, no
@@ -80,6 +111,52 @@
         little forge on my own domain, because running your own stuff is cool. Want your
         own? Look up <a href="https://forgejo.org" rel="noreferrer noopener" target="_blank">Forgejo</a> — it is great.
       </p>
+    </article>
+  </div>
+
+  <!-- ── Side-by-side comparison matrix ────────────────────────── -->
+  <div class="dxd-compare">
+    <div class="dxd-compare-head">
+      <span class="dxd-compare-title">REALITY CHECK // PLATFORM COMPARISON</span>
+      <span class="dxd-compare-sub">Why independent forges matter in 2026</span>
+    </div>
+    <div class="dxd-compare-table-wrap">
+      <table class="dxd-compare-table">
+        <thead>
+          <tr>
+            <th>Capability</th>
+            <th class="is-dxd">GitDXD (Forgejo)</th>
+            <th>GitHub (Microsoft)</th>
+            <th>GitLab SaaS</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Ownership &amp; Governance</td>
+            <td class="is-dxd"><span class="yes">✓</span> Independent &amp; GPLv3 Libre</td>
+            <td><span class="no">✕</span> Proprietary Microsoft subsidiary</td>
+            <td><span class="warn">~</span> Open-core corporate SaaS</td>
+          </tr>
+          <tr>
+            <td>AI Popups &amp; Upsells in UI</td>
+            <td class="is-dxd"><span class="yes">✓</span> Zero — pure code &amp; git</td>
+            <td><span class="no">✕</span> Injected into every button &amp; PR</td>
+            <td><span class="warn">~</span> Duo upsells on enterprise tiers</td>
+          </tr>
+          <tr>
+            <td>Telemetry &amp; Behavioral Tracking</td>
+            <td class="is-dxd"><span class="yes">✓</span> None (self-hosted box)</td>
+            <td><span class="no">✕</span> Extensive analytics &amp; profiling</td>
+            <td><span class="warn">~</span> SaaS analytics &amp; tier limits</td>
+          </tr>
+          <tr>
+            <td>Resource Footprint</td>
+            <td class="is-dxd"><span class="yes">✓</span> Single Go binary, snappy UI</td>
+            <td><span class="no">✕</span> Heavy hydrated React bundles</td>
+            <td><span class="no">✕</span> Heavy multi-gigabyte stack</td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </div>
 </section>

themes/theme-2026-dark.css

@@ -426,28 +426,82 @@ a:focus {
 nav.navbar,
 .ui.menu.navbar,
 .ui.secondary.menu.navbar {
-  background: rgba(8, 10, 15, 0.82) !important;
+  position: sticky !important;
-  backdrop-filter: blur(16px) saturate(160%) !important;
+  top: 0;
-  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
+  z-index: 1000;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
+  background: rgba(8, 10, 15, 0.80) !important;
-  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.65) !important;
+  backdrop-filter: blur(18px) saturate(170%) !important;
+  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
+  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.70) !important;
+}
+#navbar::after,
+nav.navbar::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(56, 189, 248, 0.45) 25%,
+    rgba(167, 139, 250, 0.45) 55%,
+    rgba(251, 113, 133, 0.38) 80%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+
+.navbar .item,
+#navbar .item {
+  border-radius: 8px !important;
+  transition: background 0.15s ease, color 0.15s ease !important;
+}
+.navbar .item:hover,
+#navbar .item:hover {
+  background: rgba(56, 189, 248, 0.10) !important;
+  color: #f8fafc !important;
 }
 
 .navbar .brand,
 .navbar .brand:hover {
   color: #f8fafc !important;
-  font-weight: 700;
+  font-weight: 800;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.025em;
 }
 
 .page-footer,
 footer,
 .ui.page-footer {
   background: rgba(8, 10, 15, 0.90) !important;
-  border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
+  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
   box-shadow: none !important;
 }
 
+/* ═══════════════════════════════════════════════════════════════════════
+   2026 Repository View, File Tree & Explore Polish
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.repository .repo-header {
+  background: linear-gradient(180deg, rgba(17, 21, 32, 0.78), rgba(11, 13, 19, 0.92)) !important;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+#repo-files-table,
+.ui.table.repo-table {
+  background: #111520 !important;
+  border-radius: 12px !important;
+  box-shadow: var(--nm-raised) !important;
+  overflow: hidden !important;
+}
+#repo-files-table tbody tr:hover td {
+  background: rgba(56, 189, 248, 0.07) !important;
+}
+
 /* ═══════════════════════════════════════════════════════════════════════
    2026 Bento Cards, Buttons, Tabs & Inputs
    ═══════════════════════════════════════════════════════════════════════ */