jac/so-many-crows
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Outline-free cards and subtler stipple

Browse Source 
- Cards drop the pen line; separation comes from a soft stippled
  shadow that deepens while a card is waiting on you
- Finer dots, layered at two unrelated tile sizes so the repeat
  never shows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UQnSw4RRWp8uqpj3nsnnXF
This commit is contained in:
SmokeyandClaude Opus 5.5 committed 2026-10-27 12:03:32 -06:00
1 parent 1008683b1b
commit 50149e3d04
1 file changed
+11 -3
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/style.css
+11 -3
View File
@@ -11,8 +11,10 @@
--pen: 1.75px solid var(--ink); --pen: 1.75px solid var(--ink);
/* Hand-drawn box: unequal corner radii make the line read as inked by hand. */ /* Hand-drawn box: unequal corner radii make the line read as inked by hand. */
--wobble: 255px 14px 225px 14px / 14px 225px 14px 255px; --wobble: 255px 14px 225px 14px / 14px 225px 14px 255px;
/* Stipple: a seamless tile of randomly placed dots (generated, fixed seed), so it reads hand-dotted, not halftone. */ /* Stipple: a seamless tile of fine, randomly placed dots (generated, fixed seed), layered at two
--stipple: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'64\' height=\'64\' fill=\'%231c1915\'%3E%3Ccircle cx=\'20.7\' cy=\'9.7\' r=\'0.7\'/%3E%3Ccircle cx=\'4.6\' cy=\'34.3\' r=\'1.0\'/%3E%3Ccircle cx=\'37.3\' cy=\'58.2\' r=\'0.85\'/%3E%3Ccircle cx=\'2.4\' cy=\'27.8\' r=\'0.7\'/%3E%3Ccircle cx=\'15.4\' cy=\'35.3\' r=\'0.7\'/%3E%3Ccircle cx=\'52.9\' cy=\'7.9\' r=\'0.85\'/%3E%3Ccircle cx=\'40.4\' cy=\'37.3\' r=\'0.7\'/%3E%3Ccircle cx=\'36.9\' cy=\'25.4\' r=\'0.85\'/%3E%3Ccircle cx=\'3.0\' cy=\'54.9\' r=\'1.0\'/%3E%3Ccircle cx=\'26.8\' cy=\'34.6\' r=\'1.0\'/%3E%3Ccircle cx=\'35.9\' cy=\'43.6\' r=\'0.7\'/%3E%3Ccircle cx=\'37.2\' cy=\'40.9\' r=\'1.0\'/%3E%3Ccircle cx=\'6.2\' cy=\'45.6\' r=\'0.7\'/%3E%3Ccircle cx=\'39.6\' cy=\'31.8\' r=\'1.15\'/%3E%3Ccircle cx=\'49.7\' cy=\'29.8\' r=\'1.15\'/%3E%3Ccircle cx=\'23.1\' cy=\'15.9\' r=\'0.85\'/%3E%3Ccircle cx=\'44.7\' cy=\'15.6\' r=\'1.0\'/%3E%3Ccircle cx=\'33.6\' cy=\'56.0\' r=\'1.15\'/%3E%3Ccircle cx=\'18.4\' cy=\'-1.3\' r=\'0.7\'/%3E%3Ccircle cx=\'18.4\' cy=\'62.7\' r=\'0.7\'/%3E%3Ccircle cx=\'32.8\' cy=\'10.6\' r=\'1.0\'/%3E%3Ccircle cx=\'9.7\' cy=\'31.3\' r=\'0.7\'/%3E%3Ccircle cx=\'61.6\' cy=\'5.0\' r=\'1.0\'/%3E%3Ccircle cx=\'21.8\' cy=\'22.4\' r=\'1.15\'/%3E%3Ccircle cx=\'37.1\' cy=\'29.2\' r=\'0.7\'/%3E%3Ccircle cx=\'60.5\' cy=\'30.3\' r=\'0.7\'/%3E%3Ccircle cx=\'3.9\' cy=\'44.9\' r=\'1.15\'/%3E%3Ccircle cx=\'18.2\' cy=\'24.7\' r=\'1.0\'/%3E%3Ccircle cx=\'1.4\' cy=\'29.5\' r=\'0.85\'/%3E%3Ccircle cx=\'65.4\' cy=\'29.5\' r=\'0.85\'/%3E%3Ccircle cx=\'39.1\' cy=\'31.6\' r=\'0.85\'/%3E%3Ccircle cx=\'49.2\' cy=\'8.3\' r=\'0.85\'/%3E%3Ccircle cx=\'25.5\' cy=\'58.7\' r=\'1.15\'/%3E%3Ccircle cx=\'5.2\' cy=\'28.7\' r=\'1.0\'/%3E%3Ccircle cx=\'56.5\' cy=\'52.4\' r=\'1.0\'/%3E%3Ccircle cx=\'45.2\' cy=\'-0.9\' r=\'1.15\'/%3E%3Ccircle cx=\'45.2\' cy=\'63.1\' r=\'1.15\'/%3E%3Ccircle cx=\'61.3\' cy=\'9.7\' r=\'0.85\'/%3E%3Ccircle cx=\'9.7\' cy=\'42.1\' r=\'0.7\'/%3E%3Ccircle cx=\'31.0\' cy=\'37.7\' r=\'1.0\'/%3E%3Ccircle cx=\'18.0\' cy=\'9.3\' r=\'1.0\'/%3E%3Ccircle cx=\'39.0\' cy=\'20.4\' r=\'0.85\'/%3E%3Ccircle cx=\'44.2\' cy=\'33.0\' r=\'0.7\'/%3E%3Ccircle cx=\'29.2\' cy=\'55.7\' r=\'1.15\'/%3E%3Ccircle cx=\'25.5\' cy=\'25.2\' r=\'1.15\'/%3E%3Ccircle cx=\'40.6\' cy=\'4.0\' r=\'0.7\'/%3E%3Ccircle cx=\'-1.0\' cy=\'28.2\' r=\'0.7\'/%3E%3Ccircle cx=\'63.0\' cy=\'28.2\' r=\'0.7\'/%3E%3Ccircle cx=\'21.8\' cy=\'3.4\' r=\'0.7\'/%3E%3Ccircle cx=\'36.3\' cy=\'34.3\' r=\'1.0\'/%3E%3Ccircle cx=\'39.3\' cy=\'4.5\' r=\'0.85\'/%3E%3Ccircle cx=\'39.3\' cy=\'9.5\' r=\'1.0\'/%3E%3Ccircle cx=\'61.1\' cy=\'38.5\' r=\'1.15\'/%3E%3Ccircle cx=\'7.9\' cy=\'54.3\' r=\'1.15\'/%3E%3Ccircle cx=\'30.7\' cy=\'20.0\' r=\'0.85\'/%3E%3Ccircle cx=\'6.5\' cy=\'21.9\' r=\'1.0\'/%3E%3Ccircle cx=\'30.6\' cy=\'44.3\' r=\'0.7\'/%3E%3Ccircle cx=\'13.1\' cy=\'60.9\' r=\'1.0\'/%3E%3Ccircle cx=\'9.4\' cy=\'34.8\' r=\'0.7\'/%3E%3Ccircle cx=\'48.5\' cy=\'19.1\' r=\'0.7\'/%3E%3Ccircle cx=\'44.6\' cy=\'16.7\' r=\'1.0\'/%3E%3Ccircle cx=\'58.1\' cy=\'22.8\' r=\'0.85\'/%3E%3Ccircle cx=\'34.1\' cy=\'49.9\' r=\'1.0\'/%3E%3Ccircle cx=\'40.7\' cy=\'39.2\' r=\'0.85\'/%3E%3Ccircle cx=\'51.6\' cy=\'52.4\' r=\'0.85\'/%3E%3Ccircle cx=\'12.8\' cy=\'31.5\' r=\'0.7\'/%3E%3Ccircle cx=\'-0.7\' cy=\'50.6\' r=\'1.15\'/%3E%3Ccircle cx=\'63.3\' cy=\'50.6\' r=\'1.15\'/%3E%3Ccircle cx=\'16.6\' cy=\'44.3\' r=\'1.0\'/%3E%3Ccircle cx=\'28.6\' cy=\'60.0\' r=\'1.0\'/%3E%3Ccircle cx=\'61.1\' cy=\'23.3\' r=\'0.85\'/%3E%3Ccircle cx=\'6.5\' cy=\'30.1\' r=\'1.0\'/%3E%3Ccircle cx=\'13.1\' cy=\'39.9\' r=\'0.7\'/%3E%3Ccircle cx=\'30.7\' cy=\'41.8\' r=\'0.7\'/%3E%3Ccircle cx=\'53.4\' cy=\'7.7\' r=\'1.15\'/%3E%3Ccircle cx=\'50.1\' cy=\'48.0\' r=\'1.15\'/%3E%3Ccircle cx=\'56.9\' cy=\'27.8\' r=\'1.0\'/%3E%3Ccircle cx=\'5.6\' cy=\'60.6\' r=\'1.15\'/%3E%3Ccircle cx=\'29.6\' cy=\'47.6\' r=\'0.7\'/%3E%3Ccircle cx=\'46.4\' cy=\'10.9\' r=\'0.85\'/%3E%3Ccircle cx=\'1.8\' cy=\'37.8\' r=\'1.15\'/%3E%3Ccircle cx=\'65.8\' cy=\'37.8\' r=\'1.15\'/%3E%3Ccircle cx=\'51.6\' cy=\'9.4\' r=\'1.15\'/%3E%3Ccircle cx=\'42.1\' cy=\'22.4\' r=\'0.85\'/%3E%3Ccircle cx=\'1.4\' cy=\'51.2\' r=\'0.7\'/%3E%3Ccircle cx=\'65.4\' cy=\'51.2\' r=\'0.7\'/%3E%3Ccircle cx=\'33.7\' cy=\'59.8\' r=\'1.15\'/%3E%3Ccircle cx=\'-0.9\' cy=\'12.5\' r=\'0.85\'/%3E%3Ccircle cx=\'63.1\' cy=\'12.5\' r=\'0.85\'/%3E%3Ccircle cx=\'1.8\' cy=\'13.6\' r=\'0.85\'/%3E%3Ccircle cx=\'65.8\' cy=\'13.6\' r=\'0.85\'/%3E%3Ccircle cx=\'48.9\' cy=\'20.9\' r=\'1.15\'/%3E%3Ccircle cx=\'53.4\' cy=\'3.9\' r=\'1.0\'/%3E%3Ccircle cx=\'57.5\' cy=\'42.4\' r=\'1.15\'/%3E%3Ccircle cx=\'52.9\' cy=\'56.2\' r=\'0.85\'/%3E%3Ccircle cx=\'34.0\' cy=\'33.5\' r=\'0.7\'/%3E%3Ccircle cx=\'55.9\' cy=\'49.7\' r=\'0.7\'/%3E%3Ccircle cx=\'49.7\' cy=\'9.6\' r=\'0.85\'/%3E%3Ccircle cx=\'30.3\' cy=\'46.4\' r=\'0.7\'/%3E%3Ccircle cx=\'20.9\' cy=\'33.2\' r=\'1.15\'/%3E%3Ccircle cx=\'50.2\' cy=\'6.8\' r=\'0.7\'/%3E%3Ccircle cx=\'15.9\' cy=\'17.7\' r=\'0.7\'/%3E%3Ccircle cx=\'32.5\' cy=\'36.0\' r=\'0.7\'/%3E%3Ccircle cx=Line truncated unrelated sizes so the repeat never shows. Reads as hand stippling, not a halftone screen. */
--stipple-tile: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'64\' height=\'64\' fill=\'%231c1915\'%3E%3Ccircle cx=\'20.7\' cy=\'9.7\' r=\'0.35\'/%3E%3Ccircle cx=\'4.6\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'37.3\' cy=\'58.2\' r=\'0.42\'/%3E%3Ccircle cx=\'2.4\' cy=\'27.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.4\' cy=\'35.3\' r=\'0.35\'/%3E%3Ccircle cx=\'52.9\' cy=\'7.9\' r=\'0.42\'/%3E%3Ccircle cx=\'40.4\' cy=\'37.3\' r=\'0.35\'/%3E%3Ccircle cx=\'36.9\' cy=\'25.4\' r=\'0.42\'/%3E%3Ccircle cx=\'3.0\' cy=\'54.9\' r=\'0.5\'/%3E%3Ccircle cx=\'26.8\' cy=\'34.6\' r=\'0.5\'/%3E%3Ccircle cx=\'35.9\' cy=\'43.6\' r=\'0.35\'/%3E%3Ccircle cx=\'37.2\' cy=\'40.9\' r=\'0.5\'/%3E%3Ccircle cx=\'6.2\' cy=\'45.6\' r=\'0.35\'/%3E%3Ccircle cx=\'39.6\' cy=\'31.8\' r=\'0.6\'/%3E%3Ccircle cx=\'49.7\' cy=\'29.8\' r=\'0.6\'/%3E%3Ccircle cx=\'23.1\' cy=\'15.9\' r=\'0.42\'/%3E%3Ccircle cx=\'44.7\' cy=\'15.6\' r=\'0.5\'/%3E%3Ccircle cx=\'33.6\' cy=\'56.0\' r=\'0.6\'/%3E%3Ccircle cx=\'18.4\' cy=\'62.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.8\' cy=\'10.6\' r=\'0.5\'/%3E%3Ccircle cx=\'9.7\' cy=\'31.3\' r=\'0.35\'/%3E%3Ccircle cx=\'61.6\' cy=\'5.0\' r=\'0.5\'/%3E%3Ccircle cx=\'21.8\' cy=\'22.4\' r=\'0.6\'/%3E%3Ccircle cx=\'37.1\' cy=\'29.2\' r=\'0.35\'/%3E%3Ccircle cx=\'60.5\' cy=\'30.3\' r=\'0.35\'/%3E%3Ccircle cx=\'3.9\' cy=\'44.9\' r=\'0.6\'/%3E%3Ccircle cx=\'18.2\' cy=\'24.7\' r=\'0.5\'/%3E%3Ccircle cx=\'1.4\' cy=\'29.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.1\' cy=\'31.6\' r=\'0.42\'/%3E%3Ccircle cx=\'49.2\' cy=\'8.3\' r=\'0.42\'/%3E%3Ccircle cx=\'25.5\' cy=\'58.7\' r=\'0.6\'/%3E%3Ccircle cx=\'5.2\' cy=\'28.7\' r=\'0.5\'/%3E%3Ccircle cx=\'56.5\' cy=\'52.4\' r=\'0.5\'/%3E%3Ccircle cx=\'45.2\' cy=\'-0.9\' r=\'0.6\'/%3E%3Ccircle cx=\'45.2\' cy=\'63.1\' r=\'0.6\'/%3E%3Ccircle cx=\'61.3\' cy=\'9.7\' r=\'0.42\'/%3E%3Ccircle cx=\'9.7\' cy=\'42.1\' r=\'0.35\'/%3E%3Ccircle cx=\'31.0\' cy=\'37.7\' r=\'0.5\'/%3E%3Ccircle cx=\'18.0\' cy=\'9.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.0\' cy=\'20.4\' r=\'0.42\'/%3E%3Ccircle cx=\'44.2\' cy=\'33.0\' r=\'0.35\'/%3E%3Ccircle cx=\'29.2\' cy=\'55.7\' r=\'0.6\'/%3E%3Ccircle cx=\'25.5\' cy=\'25.2\' r=\'0.6\'/%3E%3Ccircle cx=\'40.6\' cy=\'4.0\' r=\'0.35\'/%3E%3Ccircle cx=\'-1.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'63.0\' cy=\'28.2\' r=\'0.35\'/%3E%3Ccircle cx=\'21.8\' cy=\'3.4\' r=\'0.35\'/%3E%3Ccircle cx=\'36.3\' cy=\'34.3\' r=\'0.5\'/%3E%3Ccircle cx=\'39.3\' cy=\'4.5\' r=\'0.42\'/%3E%3Ccircle cx=\'39.3\' cy=\'9.5\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'38.5\' r=\'0.6\'/%3E%3Ccircle cx=\'7.9\' cy=\'54.3\' r=\'0.6\'/%3E%3Ccircle cx=\'30.7\' cy=\'20.0\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'21.9\' r=\'0.5\'/%3E%3Ccircle cx=\'30.6\' cy=\'44.3\' r=\'0.35\'/%3E%3Ccircle cx=\'13.1\' cy=\'60.9\' r=\'0.5\'/%3E%3Ccircle cx=\'9.4\' cy=\'34.8\' r=\'0.35\'/%3E%3Ccircle cx=\'48.5\' cy=\'19.1\' r=\'0.35\'/%3E%3Ccircle cx=\'44.6\' cy=\'16.7\' r=\'0.5\'/%3E%3Ccircle cx=\'58.1\' cy=\'22.8\' r=\'0.42\'/%3E%3Ccircle cx=\'34.1\' cy=\'49.9\' r=\'0.5\'/%3E%3Ccircle cx=\'40.7\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'51.6\' cy=\'52.4\' r=\'0.42\'/%3E%3Ccircle cx=\'12.8\' cy=\'31.5\' r=\'0.35\'/%3E%3Ccircle cx=\'-0.7\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'63.3\' cy=\'50.6\' r=\'0.6\'/%3E%3Ccircle cx=\'16.6\' cy=\'44.3\' r=\'0.5\'/%3E%3Ccircle cx=\'28.6\' cy=\'60.0\' r=\'0.5\'/%3E%3Ccircle cx=\'61.1\' cy=\'23.3\' r=\'0.42\'/%3E%3Ccircle cx=\'6.5\' cy=\'30.1\' r=\'0.5\'/%3E%3Ccircle cx=\'13.1\' cy=\'39.9\' r=\'0.35\'/%3E%3Ccircle cx=\'30.7\' cy=\'41.8\' r=\'0.35\'/%3E%3Ccircle cx=\'53.4\' cy=\'7.7\' r=\'0.6\'/%3E%3Ccircle cx=\'50.1\' cy=\'48.0\' r=\'0.6\'/%3E%3Ccircle cx=\'56.9\' cy=\'27.8\' r=\'0.5\'/%3E%3Ccircle cx=\'5.6\' cy=\'60.6\' r=\'0.6\'/%3E%3Ccircle cx=\'29.6\' cy=\'47.6\' r=\'0.35\'/%3E%3Ccircle cx=\'46.4\' cy=\'10.9\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'37.8\' r=\'0.6\'/%3E%3Ccircle cx=\'51.6\' cy=\'9.4\' r=\'0.6\'/%3E%3Ccircle cx=\'42.1\' cy=\'22.4\' r=\'0.42\'/%3E%3Ccircle cx=\'1.4\' cy=\'51.2\' r=\'0.35\'/%3E%3Ccircle cx=\'33.7\' cy=\'59.8\' r=\'0.6\'/%3E%3Ccircle cx=\'-0.9\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'63.1\' cy=\'12.5\' r=\'0.42\'/%3E%3Ccircle cx=\'1.8\' cy=\'13.6\' r=\'0.42\'/%3E%3Ccircle cx=\'48.9\' cy=\'20.9\' r=\'0.6\'/%3E%3Ccircle cx=\'53.4\' cy=\'3.9\' r=\'0.5\'/%3E%3Ccircle cx=\'57.5\' cy=\'42.4\' r=\'0.6\'/%3E%3Ccircle cx=\'52.9\' cy=\'56.2\' r=\'0.42\'/%3E%3Ccircle cx=\'34.0\' cy=\'33.5\' r=\'0.35\'/%3E%3Ccircle cx=\'55.9\' cy=\'49.7\' r=\'0.35\'/%3E%3Ccircle cx=\'49.7\' cy=\'9.6\' r=\'0.42\'/%3E%3Ccircle cx=\'30.3\' cy=\'46.4\' r=\'0.35\'/%3E%3Ccircle cx=\'20.9\' cy=\'33.2\' r=\'0.6\'/%3E%3Ccircle cx=\'50.2\' cy=\'6.8\' r=\'0.35\'/%3E%3Ccircle cx=\'15.9\' cy=\'17.7\' r=\'0.35\'/%3E%3Ccircle cx=\'32.5\' cy=\'36.0\' r=\'0.35\'/%3E%3Ccircle cx=\'28.4\' cy=\'39.2\' r=\'0.42\'/%3E%3Ccircle cx=\'44.3\' cy=\'29.0\' r=\'0.6\'/%3E%3Ccircle cx=\'32.5\' cy=\'15.8\' r=\'0.5\'/%3E%3Ccircle cx=\'59.1\' cy=\'57.1\' r=\'0.42\'/%3E%3Ccircle cx=\'53.8\' cy=\'8.8\' r=\'0.35\'/%3E%3Line truncated
--stipple: var(--stipple-tile) 0 0 / 64px 64px, var(--stipple-tile) 23px 11px / 47px 47px;
--display: "IM Fell English SC", Georgia, serif; --display: "IM Fell English SC", Georgia, serif;
--body: "EB Garamond", Georgia, serif; --body: "EB Garamond", Georgia, serif;
} }
@@ -153,12 +155,18 @@ main { max-width: 680px; margin: 0 auto; padding: 0 16px 64px; }
/* ---------- cards ---------- */ /* ---------- cards ---------- */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.card { padding: 14px 18px; } .card { padding: 14px 18px; }
.card::before { border: 0; }
.card::after {
inset: auto -2px -10px 10px; height: 60%;
-webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 85%, #000);
mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 85%, #000);
}
.card-head { display: flex; gap: 10px; align-items: flex-start; } .card-head { display: flex; gap: 10px; align-items: flex-start; }
.card .text { margin: 0; font-weight: 700; } .card .text { margin: 0; font-weight: 700; }
.dot { flex: none; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--ink); } .dot { flex: none; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--ink); }
.card[data-state="flying"] .dot { background: var(--stipple); animation: pop 0.8s infinite; } .card[data-state="flying"] .dot { background: var(--stipple); animation: pop 0.8s infinite; }
.card[data-state="asking"] .dot { background: var(--ink); animation: pop 1.2s infinite; } .card[data-state="asking"] .dot { background: var(--ink); animation: pop 1.2s infinite; }
.card[data-state="asking"]::after { -webkit-mask-image: none; mask-image: none; } .card[data-state="asking"]::after { height: 85%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); }
.card[data-state="done"] .dot { background: var(--ink); } .card[data-state="done"] .dot { background: var(--ink); }
.card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { border-style: dashed; } .card[data-state="rejected"] .dot, .card[data-state="skipped"] .dot { border-style: dashed; }
.card[data-state="skipped"] .text { text-decoration: line-through; color: var(--muted); } .card[data-state="skipped"] .text { text-decoration: line-through; color: var(--muted); }