docs: enhance README and homepage with two screenshot plates
- Add assets/before-after.png — Plate i: five real renames laid out as a
typeset table; mulberry highlight on the description segment; visual
callouts for the U+202F gap and the user-keyword preservation case
- Add assets/session.png — Plate ii: editorial paper frame around an
ink-dark Claude Code session card showing user prompt, claude
orchestration, parallel Haiku fan-out across ten batches, and the run
receipt
- Keep the source HTMLs (assets/{before-after,session}.html) so the
plates can be regenerated via headless Brave at 1600x1100
- README.md rewritten: centered hero with embedded plate i, dedicated
"A session, end to end" section embedding plate ii, new highlights
(multi-prefix, idempotent), new "What the parser accepts" table,
gotchas extended to 13, real-world impact promoted to a 3-row table
- docs/index.html surgically extended (existing editorial CSS preserved):
new .plate and .additions components, nav gets what's-new and session
links, new section 04 "What's new" with three additions cards plus a
run-iii receipt, original receipt relabeled run-ii, gotchas list
extended with #11-13, new section 07 "The session" embedding plate ii,
install renumbered to 08
- Image refs in docs/index.html use absolute gitea raw URLs so they
resolve when served from gitea pages or viewed locally
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,332 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>screenshot-rename · before / after</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500;600&display=block">
|
||||
<style>
|
||||
:root {
|
||||
--paper: #f7f3ed;
|
||||
--paper-2: #efe7d8;
|
||||
--paper-3: #e8dfcd;
|
||||
--ink: #1c1916;
|
||||
--ink-soft: #3c3530;
|
||||
--ink-mute: #8d8478;
|
||||
--accent: #7a1f3d;
|
||||
--accent-soft: rgba(122,31,61,.10);
|
||||
--accent-deep: #5d1730;
|
||||
--rule: #d8cebf;
|
||||
--rule-soft: #e6dfd2;
|
||||
--serif: "Fraunces", Georgia, serif;
|
||||
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
width: 1600px;
|
||||
height: 1100px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--serif);
|
||||
font-feature-settings: "ss01", "ss02", "kern";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-image:
|
||||
radial-gradient(1100px 380px at 92% -10%, rgba(122,31,61,.06), transparent 60%),
|
||||
radial-gradient(900px 320px at 0% 22%, rgba(0,0,0,.03), transparent 70%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* paper grain */
|
||||
body::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
||||
pointer-events: none;
|
||||
mix-blend-mode: multiply;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 70px 88px 64px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ───── Header ────────────────────────────────────── */
|
||||
.head {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: end;
|
||||
gap: 36px;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
}
|
||||
.eyebrow .bar { display: inline-block; width: 44px; height: 1px; background: var(--accent); }
|
||||
|
||||
.title {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-variation-settings: "opsz" 144;
|
||||
font-size: 76px;
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.022em;
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
.title .ampersand { font-weight: 300; color: var(--accent); padding: 0 4px; }
|
||||
|
||||
.runtag {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--ink-mute);
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
}
|
||||
.runtag .v { color: var(--ink); display: block; font-size: 13px; margin-top: 4px; letter-spacing: 0.06em; }
|
||||
|
||||
/* ───── Column legend ─────────────────────────────── */
|
||||
.legend {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.55fr);
|
||||
gap: 32px;
|
||||
margin-top: 32px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
|
||||
/* ───── Rows ──────────────────────────────────────── */
|
||||
.rows { margin-top: 14px; }
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.55fr);
|
||||
gap: 32px;
|
||||
padding: 18px 0 18px;
|
||||
border-top: 1px dashed var(--rule);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.row:first-child { border-top: 1px solid var(--rule); }
|
||||
|
||||
.glyph {
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
color: var(--accent);
|
||||
text-align: center;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.before {
|
||||
font-family: var(--mono);
|
||||
font-size: 17px;
|
||||
color: var(--ink-mute);
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.before .nbsp {
|
||||
display: inline-block;
|
||||
background: rgba(122,31,61,.16);
|
||||
border-bottom: 1px dashed var(--accent);
|
||||
width: 0.4em;
|
||||
height: 1.05em;
|
||||
vertical-align: -0.18em;
|
||||
margin: 0 -0.04em;
|
||||
}
|
||||
|
||||
.after {
|
||||
font-family: var(--mono);
|
||||
font-size: 17.5px;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.005em;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.after .desc {
|
||||
color: var(--accent-deep);
|
||||
font-weight: 500;
|
||||
background: linear-gradient(180deg, transparent 56%, var(--accent-soft) 56%, var(--accent-soft) 100%);
|
||||
padding: 0 1px;
|
||||
}
|
||||
.after .keep {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* annotation callout to the right of certain rows */
|
||||
.row .note {
|
||||
position: absolute;
|
||||
right: -76px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
.row.callout .note {
|
||||
display: block;
|
||||
position: static;
|
||||
transform: none;
|
||||
grid-column: 2 / 4;
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
.row.callout .note::before {
|
||||
content: "↳";
|
||||
color: var(--accent);
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.row.callout .note b {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ───── Footer strip ─────────────────────────────── */
|
||||
.foot {
|
||||
margin-top: 48px;
|
||||
padding-top: 26px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 36px;
|
||||
}
|
||||
.foot .stat {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-mute);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.foot .stat b {
|
||||
display: block;
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-variation-settings: "opsz" 96;
|
||||
font-size: 38px;
|
||||
letter-spacing: -0.02em;
|
||||
text-transform: none;
|
||||
color: var(--accent);
|
||||
margin-top: 6px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.foot .stat b .small { font-style: normal; font-weight: 500; font-size: 16px; color: var(--ink); }
|
||||
|
||||
.colophon {
|
||||
position: absolute;
|
||||
bottom: 28px; right: 88px;
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
|
||||
/* sheet number */
|
||||
.sheet {
|
||||
position: absolute;
|
||||
top: 70px; right: 88px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--ink-mute);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sheet b { color: var(--accent); }
|
||||
|
||||
::selection { background: var(--accent); color: var(--paper); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
|
||||
<div class="sheet">Sheet · <b>01 / 02</b></div>
|
||||
|
||||
<div class="head">
|
||||
<div class="eyebrow"><span class="bar"></span>screenshot-rename · plate i</div>
|
||||
<h1 class="title">Before <span class="ampersand">&</span> after</h1>
|
||||
<div class="runtag">A real run, twenty files<span class="v">2026·05·04</span></div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<span></span>
|
||||
<span>Filename · before</span>
|
||||
<span>Filename · after</span>
|
||||
</div>
|
||||
|
||||
<div class="rows">
|
||||
|
||||
<div class="row">
|
||||
<span class="glyph">▸</span>
|
||||
<span class="before">CleanShot 2026-04-15 at 09.14.07.png</span>
|
||||
<span class="after">CleanShot - <span class="desc">Shamel Studio Affiliate Referral Code Modal</span> - 2026-04-15 at 09.14.07.png</span>
|
||||
</div>
|
||||
|
||||
<div class="row callout">
|
||||
<span class="glyph">▸</span>
|
||||
<span class="before">Screenshot 2026-03-12 at 11.42.18<span class="nbsp" title="U+202F"></span>PM.png</span>
|
||||
<span class="after">Screenshot - <span class="desc">Synqora Modal Architecture Decisions Diagram</span> - 2026-03-12 at 11.42.18 PM.png</span>
|
||||
<span class="note"><b>U+202F</b> · Apple's narrow no-break space, normalized in plan + execute</span>
|
||||
</div>
|
||||
|
||||
<div class="row callout">
|
||||
<span class="glyph">▸</span>
|
||||
<span class="before"><span class="keep" style="color: var(--accent); font-weight: 600;">jojo travel</span> CleanShot 2026-03-31 at 10.52.34.png</span>
|
||||
<span class="after">CleanShot - <span class="desc"><span class="keep">Jojo Travel</span> Flight Australia Melbourne Flightaware Map Route</span> - 2026-03-31 at 10.52.34.png</span>
|
||||
<span class="note"><b>User keyword</b> · hand-typed prefix is preserved and title-cased into the new name</span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="glyph">▸</span>
|
||||
<span class="before">CleanShot 2026-01-26 at 17.38.30.png</span>
|
||||
<span class="after">CleanShot - <span class="desc">Claude Code Hitting Limits Conversation Transcript</span> - 2026-01-26 at 17.38.30.png</span>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<span class="glyph">▸</span>
|
||||
<span class="before">CleanShot 2026-02-09 at 07.29.35.png</span>
|
||||
<span class="after">CleanShot - <span class="desc">Claude Code Skill Rust Refactor Diff View</span> - 2026-02-09 at 07.29.35.png</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="stat">Files in run<b>20<span class="small"> files</span></b></div>
|
||||
<div class="stat">Renamed<b>20<span class="small"> ✓</span></b></div>
|
||||
<div class="stat">Prefix variants<b>3<span class="small"> CleanShot · Screenshot · keyword</span></b></div>
|
||||
<div class="stat">Idempotent rerun<b>safe<span class="small"> already-renamed skipped</span></b></div>
|
||||
</div>
|
||||
|
||||
<div class="colophon">Set in Fraunces & JetBrains Mono. Plate i of ii.</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 654 KiB |
@@ -0,0 +1,340 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>screenshot-rename · session</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500;600&display=block">
|
||||
<style>
|
||||
:root {
|
||||
--paper: #f7f3ed;
|
||||
--paper-2: #efe7d8;
|
||||
--paper-3: #e8dfcd;
|
||||
--ink: #1c1916;
|
||||
--ink-2: #221e1a;
|
||||
--ink-soft: #3c3530;
|
||||
--ink-mute: #8d8478;
|
||||
--accent: #7a1f3d;
|
||||
--accent-soft: rgba(122,31,61,.10);
|
||||
--accent-deep: #5d1730;
|
||||
--rule: #d8cebf;
|
||||
--rule-soft: #e6dfd2;
|
||||
--term-paper: #ece4d2;
|
||||
--term-mute: #a8a094;
|
||||
--serif: "Fraunces", Georgia, serif;
|
||||
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
width: 1600px;
|
||||
height: 1100px;
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--serif);
|
||||
font-feature-settings: "ss01", "ss02", "kern";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
background-image:
|
||||
radial-gradient(1100px 380px at 92% -10%, rgba(122,31,61,.06), transparent 60%),
|
||||
radial-gradient(900px 320px at 0% 22%, rgba(0,0,0,.03), transparent 70%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: absolute; inset: 0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
||||
pointer-events: none;
|
||||
mix-blend-mode: multiply;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 70px 88px 64px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ───── Header ────────────────────────────────────── */
|
||||
.head {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: end;
|
||||
gap: 36px;
|
||||
padding-bottom: 28px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.eyebrow {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
}
|
||||
.eyebrow .bar { display: inline-block; width: 44px; height: 1px; background: var(--accent); }
|
||||
.title {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-variation-settings: "opsz" 144;
|
||||
font-size: 76px;
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.022em;
|
||||
margin: 0;
|
||||
}
|
||||
.title .ampersand { color: var(--accent); padding: 0 4px; font-weight: 300; }
|
||||
.runtag {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--ink-mute);
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
}
|
||||
.runtag .v { color: var(--ink); display: block; font-size: 13px; margin-top: 4px; letter-spacing: 0.06em; }
|
||||
.sheet {
|
||||
position: absolute;
|
||||
top: 70px; right: 88px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--ink-mute);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sheet b { color: var(--accent); }
|
||||
|
||||
/* ───── Terminal card ─────────────────────────────── */
|
||||
.terminal {
|
||||
margin-top: 38px;
|
||||
background: var(--ink);
|
||||
color: var(--term-paper);
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
padding: 30px 38px 28px;
|
||||
border-left: 3px solid var(--accent);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr;
|
||||
gap: 22px 24px;
|
||||
align-items: baseline;
|
||||
}
|
||||
.terminal::after {
|
||||
content: "claude code · session 0a3f";
|
||||
position: absolute;
|
||||
top: 10px; right: 18px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-mute);
|
||||
text-align: right;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.tag.you { color: var(--accent); }
|
||||
.tag.bash { color: #c8d3a3; }
|
||||
.tag.cc { color: #d8a4b3; }
|
||||
.tag.fan { color: var(--accent); }
|
||||
|
||||
.line { font-size: 15px; }
|
||||
.line.you { color: var(--term-paper); font-style: italic; font-family: var(--serif); font-size: 18px; line-height: 1.45; font-weight: 400; }
|
||||
.line.cc { color: var(--term-paper); font-size: 15px; line-height: 1.55; }
|
||||
.line.cc em { color: #d8a4b3; font-style: normal; font-weight: 500; }
|
||||
.line.bash { color: var(--term-mute); font-size: 13px; line-height: 1.65; }
|
||||
.line.bash b { color: var(--term-paper); font-weight: 500; }
|
||||
.line.bash .num { color: #e9c98c; }
|
||||
.line.bash .com { color: #6f685d; font-style: italic; }
|
||||
|
||||
/* ───── Agent fan ─────────────────────────────────── */
|
||||
.fan-wrap { padding: 4px 0 6px; }
|
||||
.agents {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.agent {
|
||||
background: var(--ink-2);
|
||||
border: 1px solid #2c2722;
|
||||
padding: 14px 16px 13px;
|
||||
display: grid;
|
||||
grid-template-columns: 22px 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.agent .dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(122,31,61,.18);
|
||||
justify-self: center;
|
||||
}
|
||||
.agent .id {
|
||||
font-size: 13px;
|
||||
color: var(--term-paper);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.agent .id b { color: #d8a4b3; font-weight: 500; }
|
||||
.agent .ct {
|
||||
font-size: 11px;
|
||||
color: var(--term-mute);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.agent .ct .ok { color: var(--accent); font-weight: 600; padding-left: 2px; }
|
||||
.agent .haiku-tag {
|
||||
position: absolute;
|
||||
top: -8px; left: 12px;
|
||||
background: var(--ink);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--accent);
|
||||
padding: 0 6px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ───── Receipt strip beneath ─────────────────────── */
|
||||
.receipt {
|
||||
margin-top: 38px;
|
||||
background: var(--paper-2);
|
||||
border: 1px solid var(--rule);
|
||||
padding: 28px 36px;
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 36px;
|
||||
position: relative;
|
||||
}
|
||||
.receipt::before, .receipt::after {
|
||||
content: ""; position: absolute; left: 0; right: 0; height: 8px;
|
||||
background-image: radial-gradient(circle at 6px 4px, var(--paper) 4px, transparent 4px);
|
||||
background-size: 14px 8px;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.receipt::before { top: -1px; }
|
||||
.receipt::after { bottom: -1px; transform: scaleY(-1); }
|
||||
|
||||
.receipt .cell .k {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-mute);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.receipt .cell .v {
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-variation-settings: "opsz" 96;
|
||||
font-size: 32px;
|
||||
line-height: 1.05;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.012em;
|
||||
}
|
||||
.receipt .cell .v .ok { color: var(--accent); font-weight: 500; }
|
||||
.receipt .cell .v .small {
|
||||
font-style: normal;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
color: var(--ink-soft);
|
||||
letter-spacing: 0.04em;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.colophon {
|
||||
position: absolute;
|
||||
bottom: 28px; right: 88px;
|
||||
font-family: var(--serif);
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: var(--ink-mute);
|
||||
}
|
||||
::selection { background: var(--accent); color: var(--paper); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
|
||||
<div class="sheet">Sheet · <b>02 / 02</b></div>
|
||||
|
||||
<div class="head">
|
||||
<div class="eyebrow"><span class="bar"></span>screenshot-rename · plate ii</div>
|
||||
<h1 class="title">A session, <span class="ampersand">end to end</span></h1>
|
||||
<div class="runtag">196 files · 10 agents · ~3 min<span class="v">claude code · 2026·05·04</span></div>
|
||||
</div>
|
||||
|
||||
<div class="terminal">
|
||||
|
||||
<span class="tag you">you</span>
|
||||
<div class="line you">rename all the cleanshots in <code style="font-family:var(--mono); font-size:15px; color:#e9c98c;">~/Documents/Screenshots/</code> based on their content.</div>
|
||||
|
||||
<span class="tag cc">claude</span>
|
||||
<div class="line cc">I'll prep the folder, batch into ten files of 19, dispatch <em>parallel Haiku agents</em>, then plan and execute. Resizing Retinas first; extracting frames from <em>.mp4</em> and <em>.pdf</em>.</div>
|
||||
|
||||
<span class="tag bash">bash</span>
|
||||
<div class="line bash"><span class="com"># 1 · prep</span><br>
|
||||
python3 pipeline.py prep --src <span style="color:#e9c98c">~/Documents/Screenshots/</span><br>
|
||||
→ <b><span class="num">196</span></b> source files · <b><span class="num">9</span></b> mp4/pdf frames · resized to <b>1568 px</b> · <b><span class="num">10</span></b> batches written
|
||||
</div>
|
||||
|
||||
<span class="tag fan">fan-out</span>
|
||||
<div class="line fan-wrap">
|
||||
<div class="agents">
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>01</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>02</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>03</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>04</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>05</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>06</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>07</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>08</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>09</b></span><span class="ct">19/19 <span class="ok">✓</span></span></div>
|
||||
<div class="agent"><span class="haiku-tag">haiku</span><span class="dot"></span><span class="id">batch-<b>10</b></span><span class="ct">10/10 <span class="ok">✓</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="tag bash">bash</span>
|
||||
<div class="line bash"><span class="com"># 2 · plan, then execute</span><br>
|
||||
python3 pipeline.py plan --src <span style="color:#e9c98c">~/Documents/Screenshots/</span> → <b><span class="num">189</span></b> renames · <b><span class="num">0</span></b> errors · <b><span class="num">0</span></b> collisions<br>
|
||||
python3 pipeline.py execute --src <span style="color:#e9c98c">~/Documents/Screenshots/</span> → audit <b><span class="num">195</span></b> = <b><span class="num">195</span></b> · <span style="color:#d8a4b3;">189 ✓</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="receipt">
|
||||
<div class="cell">
|
||||
<span class="k">Agents in flight</span>
|
||||
<span class="v">10<span class="small">parallel</span></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="k">Renames committed</span>
|
||||
<span class="v"><span class="ok">189</span><span class="small">/ 189 planned</span></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="k">File-count audit</span>
|
||||
<span class="v">195 <span style="color:var(--ink-mute);">=</span> 195 <span class="ok">✓</span></span>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<span class="k">Files lost</span>
|
||||
<span class="v"><span class="ok">0</span><span class="small">zero overwrites</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="colophon">Set in Fraunces & JetBrains Mono. Plate ii of ii.</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
Reference in New Issue
Block a user