sam/kontra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kontra: GOTH app (Go+templ+htmx+Tailwind tokens), markdown content, Decap admin, media shortcodes. Phase 3 build complete + verified locally.

Browse Source
This commit is contained in:
sam
2026-09-08 17:11:21 +10:00
commit 31e9a708cc
46 changed files with 4178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
prototype/index.html Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontra — Front Page</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300;0,7..72,400;0,7..72,500;0,7..72,600;1,7..72,400&amp;family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&amp;family=Work+Sans:wght@400;500;600&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/kontra.css">
</head>
<body>
<!-- ================= MASTHEAD ================= -->
<header class="masthead">
<div class="container">
<!-- Meta line -->
<div class="meta-line">
<span>Wednesday, 24 Sep • Vol. I</span>
<span class="edition">Morning Edition</span>
</div>
<!-- Centered brand -->
<div class="brand-row">
<div aria-hidden="true"></div>
<div class="brand">
<a href="index.html" class="display-masthead">Kontra</a>
</div>
<div class="brand-tools">
<a href="#" aria-label="Search archive"><span class="material-symbols-outlined" style="font-size:22px;">search</span></a>
<a href="#" class="brand-avatar" aria-label="Account">S</a>
</div>
</div>
<!-- Section ribbon with topic dropdowns (desktop/tablet) -->
<nav aria-label="Sections" class="ribbon">
<div class="nav-item active"><a href="index.html">Front Page</a></div>
<div class="nav-item">
<a href="#world">World</a>
<div class="nav-drop">
<a class="drop-item" href="#world"><span class="drop-kicker">World • Lead</span><span class="drop-title">Arctic Council Opens Its Least-Read Agenda in a Decade</span></a>
<a class="drop-item" href="#world"><span class="drop-kicker">World</span><span class="drop-title">The River Border Nobody Can Agree Where It Is</span></a>
<a class="drop-item" href="#world"><span class="drop-kicker">North Sea</span><span class="drop-title">Forty Nights in High Solitude on the Fastnet Rock</span></a>
<a class="drop-all" href="#world">All World →</a>
</div>
</div>
<div class="nav-item">
<a href="#politics">Politics</a>
<div class="nav-drop">
<a class="drop-item" href="#politics"><span class="drop-kicker">Politics</span><span class="drop-title">The Two-Party Primary That Never Had a Crowd</span></a>
<a class="drop-item" href="#politics"><span class="drop-kicker">Politics</span><span class="drop-title">Coal Country Votes to Price the Ground, Not Its Future</span></a>
<a class="drop-item" href="#politics"><span class="drop-kicker">Analysis</span><span class="drop-title">How Voter Lists Rose While Enthusiasm Fell</span></a>
<a class="drop-all" href="#politics">All Politics →</a>
</div>
</div>
<div class="nav-item">
<a href="#culture">Culture</a>
<div class="nav-drop">
<a class="drop-item" href="#culture"><span class="drop-kicker">Culture</span><span class="drop-title">The Museum That Let the Public Hold the Vault Keys for One Night</span></a>
<a class="drop-item" href="#culture"><span class="drop-kicker">Books</span><span class="drop-title">A Micro-Press Keeps the Long Essay Alive at 16 Pages</span></a>
<a class="drop-item" href="#culture"><span class="drop-kicker">Photography</span><span class="drop-title">Notes from a Darkroom That Still Develops Film</span></a>
<a class="drop-all" href="#culture">All Culture →</a>
</div>
</div>
<div class="nav-item">
<a href="#opinion">Opinion</a>
<div class="nav-drop">
<a class="drop-item" href="#opinion"><span class="drop-kicker">Opinion</span><span class="drop-title">Why I'm Done Arguing About the Font</span></a>
<a class="drop-item" href="#opinion"><span class="drop-kicker">Opinion</span><span class="drop-title">The Case for Slower Sundays</span></a>
<a class="drop-all" href="#opinion">All Opinion →</a>
</div>
</div>
<div class="nav-item accent">
<a href="#tech">Tech</a>
<div class="nav-drop">
<a class="drop-item" href="#tech"><span class="drop-kicker">Tech</span><span class="drop-title">The Local AI Box That Runs Entirely on a Tennis Ball</span></a>
<a class="drop-item" href="#tech"><span class="drop-kicker">Tech</span><span class="drop-title">What a 1972 Field Radio Teaches Us About New Data Stacks</span></a>
<a class="drop-all" href="#tech">All Tech →</a>
</div>
</div>
<div class="nav-item">
<a href="#business">Business</a>
<div class="nav-drop">
<a class="drop-item" href="#business"><span class="drop-kicker">Business</span><span class="drop-title">The Corner Bank That Trades in Hours, Not Percent</span></a>
<a class="drop-item" href="#business"><span class="drop-kicker">Commerce</span><span class="drop-title">How Daily Port Bidding Resists the Algorithm</span></a>
<a class="drop-all" href="#business">All Business →</a>
</div>
</div>
</nav>
</div>
</header>
<main class="container">
<!-- ============ LEAD STACK ============ -->
<div class="lead-grid">
<article>
<a href="article.html">
<div class="label-caps" style="color:var(--accent);margin:0 0 6px;">World Dispatch</div>
<h1 class="headline-xl" style="color:var(--ink);margin:0 0 8px;">The Quiet Reshaping of the Southern Harbor: How Old Wharves Found New Hands</h1>
<p class="body-sm" style="color:var(--ink-muted);margin:0;">After decades of decline, the docklands cooperative is being rebuilt from the waterline up — and the tide of labour is turning with it.</p>
</a>
<figure class="plate" style="margin-top:16px;">
<img src="https://picsum.photos/seed/harbor1/1400/800" alt="Harbour at dawn" style="max-height:480px;">
<figcaption class="body-sm" style="padding:12px 16px;border:1px solid var(--hairline);color:var(--ink-muted);display:flex;justify-content:space-between;gap:12px;">
<span class="label-caps" style="color:var(--ink);">Fig. 1</span>
<span style="font-size:12px;">Plate No. 12-A • A. Voss / Kontra</span>
</figcaption>
</figure>
<div class="label-meta" style="color:var(--ink-faint);margin-top:12px;">By M. Kestrel • Harbor Desk • 6 min read</div>
</article>
<aside class="hairline-t" style="padding:8px 0;">
<div class="label-caps" style="color:var(--ink-muted);">Top Stories</div>
<a href="article.html" class="feed-row" style="margin-top:8px;">
<span class="f-kicker">Politics</span>
<span class="f-head">Coal Country Votes to Put a Price on the Ground, Instead of Its Future</span>
<span class="f-meta">By T. Ngata</span>
</a>
<a href="article.html" class="feed-row">
<span class="f-kicker">Culture</span>
<span class="f-head">The Museum That Let the Public Hold the Vault Keys for One Night</span>
<span class="f-meta">By L. Arden</span>
</a>
<a href="article.html" class="feed-row">
<span class="f-kicker">Tech</span>
<span class="f-head">What a 1972 Field Radio Teaches Us About the New Data Stacks</span>
<span class="f-meta">By J. Quin</span>
</a>
</aside>
</div>
<!-- ============ TOPICS GRID ============ -->
<section class="hairline-t" style="padding:32px 16px 0;">
<h2 class="label-caps" style="color:var(--ink);margin:0 0 20px;">Topics</h2>
<div class="subject-grid">
<div class="subject-box">
<span class="kicker">World</span>
<a href="article.html" class="s-head">Arctic Council Opens Its Least-Read Agenda in a Decade</a>
<a href="article.html" class="s-sub">A modest, dry procedural document — and its one buried line</a>
<span class="s-by">By N. Harlow</span>
<a href="#world" class="s-more">More World</a>
</div>
<div class="subject-box">
<span class="kicker">Politics</span>
<a href="article.html" class="s-head">The Two-Party Primary That Never Had a Crowd</a>
<a href="article.html" class="s-sub">Voter lists up, enthusiasm down — how the ground shifted anyway</a>
<span class="s-by">By P. Vela</span>
<a href="#politics" class="s-more">More Politics</a>
</div>
<div class="subject-box">
<span class="kicker">Culture</span>
<a href="article.html" class="s-head">A Micro-Press Keeps the Long Essay Alive at 16 Pages</a>
<a href="article.html" class="s-sub">Paper, price of ink, and why short-run still sells</a>
<span class="s-by">By S. Grey</span>
<a href="#culture" class="s-more">More Culture</a>
</div>
<div class="subject-box">
<span class="kicker">Tech</span>
<a href="article.html" class="s-head">The Local AI Box That Runs Entirely on a Tennis Ball</a>
<a href="article.html" class="s-sub">A one-RPi coop build, and what it does better than cloud</a>
<span class="s-by">By J. Quin</span>
<a href="#tech" class="s-more">More Tech</a>
</div>
</div>
</section>
<!-- ============ LATEST ============ -->
<section class="hairline-t" style="padding:32px 16px 0;">
<h2 class="label-caps" style="color:var(--ink);margin:0 0 20px;">Latest</h2>
<div class="latest-grid">
<a href="article.html" class="feed-row">
<span class="f-kicker">Business</span>
<span class="f-head">The Corner Bank That Trades in Hours, Not Percent</span>
<span class="f-sub">A cooperative credit union turns time-banking into a real line of credit.</span>
<span class="f-meta">By R. Hale • 5 min read</span>
</a>
<a href="article.html" class="feed-row">
<span class="f-kicker">Opinion</span>
<span class="f-head">Why I'm Done Arguing About the Font</span>
<span class="f-sub">A designer's confession: the real argument was never about the pixels.</span>
<span class="f-meta">By I. Marlow • 4 min read</span>
</a>
<a href="article.html" class="feed-row">
<span class="f-kicker">World</span>
<span class="f-head">The River Border Nobody Can Agree Where It Is</span>
<span class="f-sub">Two towns, one floodplain, and a surveyor's error from 1893.</span>
<span class="f-meta">By N. Harlow • 7 min read</span>
</a>
<a href="article.html" class="feed-row">
<span class="f-kicker">Culture</span>
<span class="f-head">Notes from a Darkroom That Still Develops Film</span>
<span class="f-sub">Silver halide survives — barely — in one municipal basement.</span>
<span class="f-meta">By L. Arden • 3 min read</span>
</a>
</div>
</section>
</main>
<!-- Mobile sections drawer lives inside bottom nav (below) -->
<!-- ================= MOBILE BOTTOM NAV ================= -->
<nav class="bottom-nav" aria-label="Mobile navigation">
<div class="bottom-nav-inner">
<a class="bn-item active" href="index.html"><span class="material-symbols-outlined ic">newspaper</span><span>Edition</span></a>
<details class="bn-sections">
<summary><span class="material-symbols-outlined ic">segment</span><span>Sections</span></summary>
<div class="sections-drawer">
<a href="index.html">Front Page</a>
<a href="article.html">World</a>
<a href="article.html">Politics</a>
<a href="article.html">Culture</a>
<a href="article.html">Opinion</a>
<a href="article.html">Tech</a>
<a href="article.html">Business</a>
<a href="index.html" class="dr-all">All Sections</a>
</div>
</details>
<a class="bn-item" href="article.html"><span class="material-symbols-outlined ic">format_size</span><span>Reader</span></a>
<a class="bn-item" href="article.html"><span class="material-symbols-outlined ic">bookmark_border</span><span>Saved</span></a>
</div>
</nav>
<!-- ================= FOOTER ================= -->
<footer class="site-footer">
<div class="container">
<div class="t">Kontra</div>
<div class="tag">A daily broadsheet for the wide world. Independent • Printed in your browser.</div>
<div class="copy">© 2026 Kontra</div>
</div>
</footer>
</body>
</html>