Overhaul homepage layout with 2026 workbench, bento grid, live theme studio, and manifesto
This commit is contained in:
parent
9eea6550ad
commit
106028e02f
3 changed files with 1698 additions and 292 deletions
1841
templates/home.tmpl
1841
templates/home.tmpl
File diff suppressed because it is too large
Load diff
|
|
@ -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 & 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 & Governance</td>
|
||||
<td class="is-dxd"><span class="yes">✓</span> Independent & 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 & Upsells in UI</td>
|
||||
<td class="is-dxd"><span class="yes">✓</span> Zero — pure code & git</td>
|
||||
<td><span class="no">✕</span> Injected into every button & PR</td>
|
||||
<td><span class="warn">~</span> Duo upsells on enterprise tiers</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Telemetry & Behavioral Tracking</td>
|
||||
<td class="is-dxd"><span class="yes">✓</span> None (self-hosted box)</td>
|
||||
<td><span class="no">✕</span> Extensive analytics & profiling</td>
|
||||
<td><span class="warn">~</span> SaaS analytics & 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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue