cardinale/screenshot-rename
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: enhance README and homepage with two screenshot plates

Browse Source 
- 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:
Anthony Cardinale
2026-05-04 11:14:12 -04:00
parent 3a9997e990
commit 0728ae6592
6 changed files with 969 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/before-after.html
+332
View File
@@ -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">&amp;</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&nbsp;run<b>20<span class="small"> &nbsp;files</span></b></div>
<div class="stat">Renamed<b>20<span class="small"> &nbsp;✓</span></b></div>
<div class="stat">Prefix variants<b>3<span class="small"> &nbsp;CleanShot · Screenshot · keyword</span></b></div>
<div class="stat">Idempotent rerun<b>safe<span class="small"> &nbsp;already-renamed skipped</span></b></div>
</div>
<div class="colophon">Set in Fraunces &amp; JetBrains Mono. Plate i of ii.</div>
</div>
</body>
</html>