feat: legacy import — packs, examples, lab, themes, docs, lineage
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e9895cf90d
commit
86464f3e21
GPG key ID:
F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
118
src/lab/charts/burndown.html
Normal file
118
src/lab/charts/burndown.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/asw.css">
|
||||
<title>Burndown Chart Prototype — Murdock Lab</title>
|
||||
<style>
|
||||
body { padding: var(--size-8); }
|
||||
|
||||
/* ── Burndown chart — column variant with ideal-line overlay ── */
|
||||
[data-chart="burndown"] tbody {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
block-size: var(--chart-height, 200px);
|
||||
border-block-end: 2px solid var(--border);
|
||||
position: relative;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Ideal-line overlay: diagonal gradient from top-left to bottom-right
|
||||
In a burndown, work starts high and should decrease to zero.
|
||||
The ideal line goes from 100% remaining (top of chart, first day)
|
||||
to 0% remaining (bottom, last day) — so bottom-left to top-right is wrong.
|
||||
The gradient runs: top-left = transparent (ideal is 100% work remaining)
|
||||
to bottom-right = solid (ideal is 0% work remaining = done).
|
||||
We invert: the line shows WHERE YOU SHOULD BE, not what you have. */
|
||||
[data-chart="burndown"] tbody::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, var(--accent-blue, #4dabf7), transparent 20%) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[data-chart="burndown"] tr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
[data-chart="burndown"] td {
|
||||
display: block;
|
||||
inline-size: 100%;
|
||||
block-size: calc(var(--chart-height, 200px) * var(--size, 0.5));
|
||||
background: var(--accent-red, #e03131);
|
||||
border-radius: var(--radius-2) var(--radius-2) 0 0;
|
||||
opacity: 0.75;
|
||||
order: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: opacity 0.15s ease;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
[data-chart="burndown"] td:hover { opacity: 1; }
|
||||
|
||||
[data-chart="burndown"] th[scope="row"] {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-3);
|
||||
font-weight: 400;
|
||||
order: 2;
|
||||
padding-block-start: var(--size-2);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-block-start: var(--size-2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Burndown Chart — Prototype</h1>
|
||||
<p>Sprint burndown chart. Red bars = remaining work. Blue diagonal gradient = ideal burn rate. CSS-only, no JavaScript.</p>
|
||||
|
||||
<table data-chart="burndown" style="--chart-height: 240px">
|
||||
<caption>Sprint 3 burndown — 20 issues over 10 days</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
||||
<tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
|
||||
<tr><th scope="row">D3</th><td style="--size: 0.75">15</td></tr>
|
||||
<tr><th scope="row">D4</th><td style="--size: 0.60">12</td></tr>
|
||||
<tr><th scope="row">D5</th><td style="--size: 0.55">11</td></tr>
|
||||
<tr><th scope="row">D6</th><td style="--size: 0.40">8</td></tr>
|
||||
<tr><th scope="row">D7</th><td style="--size: 0.35">7</td></tr>
|
||||
<tr><th scope="row">D8</th><td style="--size: 0.20">4</td></tr>
|
||||
<tr><th scope="row">D9</th><td style="--size: 0.10">2</td></tr>
|
||||
<tr><th scope="row">D10</th><td style="--size: 0.05">1</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Markup</h2>
|
||||
<pre><code><table data-chart="burndown">
|
||||
<caption>Sprint burndown</caption>
|
||||
<tbody>
|
||||
<tr><th scope="row">D1</th><td style="--size: 0.95">19</td></tr>
|
||||
<tr><th scope="row">D2</th><td style="--size: 0.85">17</td></tr>
|
||||
<!-- ... -->
|
||||
</tbody>
|
||||
</table></code></pre>
|
||||
|
||||
<h2>The ideal line</h2>
|
||||
<p>The blue diagonal is a <code>linear-gradient</code> on <code>tbody::after</code>. It represents ideal burn rate: if the team burns at constant velocity, the remaining work should trace this diagonal. Where red bars are ABOVE the line, the team is behind. Where bars are BELOW, they are ahead.</p>
|
||||
|
||||
<p>The prototype shows a healthy sprint: the team started slightly slow (D1-D4 above line) but recovered by D5-D10.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue