mirror of
https://github.com/kuhyx/testsAndMisc.git
synced 2026-11-10 20:27:02 +01:00
Some checks are pending
Pre-commit checks / pre-commit (push) Waiting to run
Interactive walkthrough (Background → Intuition → Code → Quiz) of commit
20bc1ae, with a playground that mirrors the serve-dir safety guard and a
debiased 5-question quiz. Refresh the explanations gallery index.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0126QvdMrv2WNeUVShFiLTc3
48 lines
2.5 KiB
HTML
48 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>explanations — change explanations</title>
|
|
<style>
|
|
:root{--bg:#fbfbfd;--fg:#1a1a1f;--muted:#5b5b6b;--card:#fff;--line:#e4e4ec;
|
|
--accent:#6b4fd6;--accent-soft:#efeaff;--shadow:0 1px 3px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.05);}
|
|
@media (prefers-color-scheme:dark){:root{--bg:#131318;--fg:#e9e9f0;--muted:#a2a2b4;--card:#1c1c24;
|
|
--line:#2c2c38;--accent:#a78bfa;--accent-soft:#241f38;--shadow:0 1px 3px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);}}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--fg);
|
|
font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
|
|
.wrap{width:min(48rem,92vw);margin:0 auto;padding:2.6rem 0 5rem}
|
|
.kicker{color:var(--accent);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
|
|
h1{font-size:1.7rem;margin:.35rem 0 .3rem}
|
|
.lead{color:var(--muted);margin:0 0 1.6rem}
|
|
.grid{display:flex;flex-direction:column;gap:.7rem}
|
|
a.card{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;color:var(--fg);
|
|
background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;box-shadow:var(--shadow)}
|
|
a.card:hover{border-color:var(--accent);background:var(--accent-soft)}
|
|
.date{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em}
|
|
.title{font-size:1.05rem;font-weight:600;line-height:1.35}
|
|
.empty{color:var(--muted)}
|
|
footer{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.83rem}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="kicker">explanations</div>
|
|
<h1>Change explanations</h1>
|
|
<p class="lead">2 explanations · interactive walkthroughs of notable changes, newest first.</p>
|
|
<div class="grid">
|
|
<a class="card" href="2026-07-12-explanation-dufs-cloud.html">
|
|
<span class="date">2026-07-12</span>
|
|
<span class="title">Self-hosted dufs cloud + KeePass WebDAV sync — explained</span>
|
|
</a>
|
|
<a class="card" href="2026-07-11-explanation-phone-focus-whitelist-foss.html">
|
|
<span class="date">2026-07-11</span>
|
|
<span class="title">Explaining: whitelist run-with-music apps + FOSS replacements</span>
|
|
</a>
|
|
</div>
|
|
<footer>Generated by the <code>explain-diff</code> skill. Open any card to replay its walkthrough.</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|