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

This commit is contained in:
Martin Dvořák 2026-10-22 23:30:54 +00:00
commit 106028e02f
3 changed files with 1698 additions and 292 deletions

File diff suppressed because it is too large Load diff

View file

@ -1,35 +1,46 @@
<style>
.dxd-reasons .dxd-feature .icon img {
width: 24px;
height: 24px;
/* Fold the colourful icons into a calm monochrome that suits any theme */
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>
<section class="dxd-section dxd-manifesto" id="manifesto">
<div class="dxd-sec-bar">
<span class="dxd-sec-idx">03 // MANIFESTO</span>
<span class="dxd-sec-line"></span>
<span class="dxd-sec-tag">DOING OUR OWN THING</span>
</div>
<div class="dxd-grid">
<div class="dxd-feature">
<div class="icon"><img src="/assets/img/money.svg" alt=""></div>
<div class="dxd-section-head dxd-manifesto-head">
<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,
moves stuff into more expensive plans. I am tired of depending
GitHub gave students cool stuff, then slowly removes them and
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">
<div class="icon"><img src="/assets/img/microsoft.svg" alt=""></div>
<!-- 02 -->
<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">
<div class="icon"><img src="/assets/img/ai.svg" alt=""></div>
<!-- 03 -->
<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">
<div class="icon"><img src="/assets/img/privacy.svg" alt=""></div>
<!-- 04 -->
<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">
<div class="icon"><img src="/assets/img/monopoly.svg" alt=""></div>
<!-- 05 -->
<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">
<div class="icon"><img src="/assets/img/selfhost.svg" alt=""></div>
<!-- 06 -->
<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>

View file

@ -426,28 +426,82 @@ a:focus {
nav.navbar,
.ui.menu.navbar,
.ui.secondary.menu.navbar {
background: rgba(8, 10, 15, 0.82) !important;
backdrop-filter: blur(16px) saturate(160%) !important;
-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.65) !important;
position: sticky !important;
top: 0;
z-index: 1000;
background: rgba(8, 10, 15, 0.80) !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;
letter-spacing: -0.02em;
font-weight: 800;
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
═══════════════════════════════════════════════════════════════════════ */