howone 0.1.28 → 0.1.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/vite/.howone/skills/hallmark/SKILL.md +48 -42
- package/templates/vite/.howone/skills/hallmark/references/anti-patterns.md +12 -6
- package/templates/vite/.howone/skills/hallmark/references/assets.md +7 -0
- package/templates/vite/.howone/skills/hallmark/references/component-cookbook.md +19 -10
- package/templates/vite/.howone/skills/hallmark/references/components/f2-sticky-scroll-stack.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/ft6-letter-close.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/n10-floating-on-scroll-morph.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/n11-mega-menu.md +40 -0
- package/templates/vite/.howone/skills/hallmark/references/components/n12-banner-retract.md +34 -0
- package/templates/vite/.howone/skills/hallmark/references/components/n13-inline-cmdk-pill.md +39 -0
- package/templates/vite/.howone/skills/hallmark/references/components/n1b-saas-three-section.md +35 -0
- package/templates/vite/.howone/skills/hallmark/references/components/n9-edge-aligned-minimal.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/components/s3-sticky-pinned.md +2 -2
- package/templates/vite/.howone/skills/hallmark/references/copy.md +8 -8
- package/templates/vite/.howone/skills/hallmark/references/custom-craft.md +2 -2
- package/templates/vite/.howone/skills/hallmark/references/custom-theme.md +50 -12
- package/templates/vite/.howone/skills/hallmark/references/export-formats.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/genres/atmospheric.md +11 -7
- package/templates/vite/.howone/skills/hallmark/references/genres/editorial.md +6 -4
- package/templates/vite/.howone/skills/hallmark/references/genres/modern-minimal.md +10 -6
- package/templates/vite/.howone/skills/hallmark/references/genres/playful.md +15 -10
- package/templates/vite/.howone/skills/hallmark/references/hero-enrichment.md +13 -12
- package/templates/vite/.howone/skills/hallmark/references/interaction-and-states.md +2 -1
- package/templates/vite/.howone/skills/hallmark/references/layout-and-space.md +4 -3
- package/templates/vite/.howone/skills/hallmark/references/macrostructures/04-stat-led.md +3 -1
- package/templates/vite/.howone/skills/hallmark/references/macrostructures/12-letter.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/macrostructures.md +1 -1
- package/templates/vite/.howone/skills/hallmark/references/microinteractions.md +1 -3
- package/templates/vite/.howone/skills/hallmark/references/preview-examples.md +12 -12
- package/templates/vite/.howone/skills/hallmark/references/responsive.md +8 -8
- package/templates/vite/.howone/skills/hallmark/references/slop-test.md +72 -85
- package/templates/vite/.howone/skills/hallmark/references/structure.md +9 -13
- package/templates/vite/.howone/skills/hallmark/references/study.md +40 -17
- package/templates/vite/.howone/skills/hallmark/references/themes/carnival.md +301 -0
- package/templates/vite/.howone/skills/hallmark/references/themes/cobalt.md +146 -0
- package/templates/vite/.howone/skills/hallmark/references/themes/hum.md +403 -0
- package/templates/vite/.howone/skills/hallmark/references/themes/lumen.md +478 -0
- package/templates/vite/.howone/skills/hallmark/references/typography.md +3 -3
- package/templates/vite/.howone/skills/hallmark/references/verbs/redesign.md +1 -1
- package/templates/vite/.howone/skills/howone/03-sdk/07-ai-action-calls.md +28 -86
- package/templates/vite/.howone/skills/howone/03-sdk/09-workflow-execute-sse.md +105 -0
- package/templates/vite/.howone/skills/howone/04-ai/03-ai-sdk-handoff.md +15 -13
- package/templates/vite/.howone/skills/howone/SKILL.md +2 -2
- package/templates/vite/package.json +1 -1
- package/templates/vite/.howone/skills/hallmark/LICENSE +0 -21
- package/templates/vite/.howone/skills/hallmark/README.md +0 -147
- package/templates/vite/.howone/skills/hallmark/ROADMAP.md +0 -201
- package/templates/vite/.howone/skills/hallmark/docs/recipes.md +0 -186
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-anya.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-bananastudio.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-hyperlane.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-najm.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-slow-pour.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-soroe.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-tally.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-wayfare.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/docs/study-examples.md +0 -176
- package/templates/vite/.howone/skills/hallmark/docs/talk-slides.md +0 -364
- package/templates/vite/.howone/skills/hallmark/package.json +0 -36
- package/templates/vite/.howone/skills/hallmark/site/OG-hallmark.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/brief.md +0 -71
- package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/index.html +0 -64
- package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/style.css +0 -240
- package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/brief.md +0 -65
- package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/index.html +0 -105
- package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/style.css +0 -250
- package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/brief.md +0 -64
- package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/index.html +0 -131
- package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/style.css +0 -240
- package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/brief.md +0 -67
- package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/index.html +0 -86
- package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/style.css +0 -262
- package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/brief.md +0 -63
- package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/index.html +0 -167
- package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/style.css +0 -457
- package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/brief.md +0 -65
- package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/index.html +0 -159
- package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/style.css +0 -288
- package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/brief.md +0 -64
- package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/index.html +0 -146
- package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/style.css +0 -484
- package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/brief.md +0 -64
- package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/index.html +0 -116
- package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/style.css +0 -354
- package/templates/vite/.howone/skills/hallmark/site/_tests/09-slow-pour/index.html +0 -638
- package/templates/vite/.howone/skills/hallmark/site/_tests/10-owl-hours/index.html +0 -515
- package/templates/vite/.howone/skills/hallmark/site/_tests/11-soroe-ceramics/index.html +0 -515
- package/templates/vite/.howone/skills/hallmark/site/_tests/12-loafer/index.html +0 -608
- package/templates/vite/.howone/skills/hallmark/site/_tests/13-alma/index.html +0 -587
- package/templates/vite/.howone/skills/hallmark/site/_tests/README.md +0 -157
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/BananaStudio-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/BananaStudio-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Hyperlane-example.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Hyperlane-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Najm-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Najm-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Podcast-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/SaaS-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/SaaS-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Soroe-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Soroe-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/after-quiet-hour.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/anya-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/anya-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/audit-example.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/before-quiet-hour.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/example-redesign-uractivation.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/slow-pour-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/slow-pour-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/study-example.png +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/uractivation-after-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/wayfare-loop.mp4 +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/wayfare-still.jpg +0 -0
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/01-coffeebox/index.html +0 -77
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/01-coffeebox/style.css +0 -238
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/index.html +0 -110
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/style.css +0 -326
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/index.html +0 -134
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/style.css +0 -262
- package/templates/vite/.howone/skills/hallmark/site/_tests/custom/README.md +0 -30
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/README.md +0 -17
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/audit-report.md +0 -56
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/input.html +0 -160
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/notes.md +0 -29
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/input.html +0 -63
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/notes.md +0 -72
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/output.html +0 -374
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/diagnosis.md +0 -52
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/input-description.md +0 -29
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/notes.md +0 -61
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.css +0 -193
- package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.html +0 -66
- package/templates/vite/.howone/skills/hallmark/site/css/base.css +0 -194
- package/templates/vite/.howone/skills/hallmark/site/css/components.css +0 -4886
- package/templates/vite/.howone/skills/hallmark/site/css/sections.css +0 -2072
- package/templates/vite/.howone/skills/hallmark/site/css/tokens.css +0 -1129
- package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/index.html +0 -475
- package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/styles.css +0 -1584
- package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/tokens.css +0 -96
- package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/index.html +0 -344
- package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/script.js +0 -103
- package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/styles.css +0 -1103
- package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/tokens.css +0 -83
- package/templates/vite/.howone/skills/hallmark/site/examples/najm/index.html +0 -368
- package/templates/vite/.howone/skills/hallmark/site/examples/najm/script.js +0 -133
- package/templates/vite/.howone/skills/hallmark/site/examples/najm/styles.css +0 -1062
- package/templates/vite/.howone/skills/hallmark/site/examples/najm/tokens.css +0 -97
- package/templates/vite/.howone/skills/hallmark/site/examples/tally/app.js +0 -84
- package/templates/vite/.howone/skills/hallmark/site/examples/tally/index.html +0 -446
- package/templates/vite/.howone/skills/hallmark/site/examples/tally/styles.css +0 -1087
- package/templates/vite/.howone/skills/hallmark/site/examples/tally/tokens.css +0 -101
- package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/index.html +0 -359
- package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/style.css +0 -1168
- package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/tokens.css +0 -81
- package/templates/vite/.howone/skills/hallmark/site/favicon-dark.svg +0 -5
- package/templates/vite/.howone/skills/hallmark/site/favicon-light.svg +0 -5
- package/templates/vite/.howone/skills/hallmark/site/index.html +0 -1043
- package/templates/vite/.howone/skills/hallmark/site/js/main.js +0 -1175
- package/templates/vite/.howone/skills/hallmark/vercel.json +0 -6
- package/templates/vite/.howone/skills/impeccable/SKILL.md +0 -168
- package/templates/vite/.howone/skills/impeccable/agents/impeccable-asset-producer.md +0 -101
- package/templates/vite/.howone/skills/impeccable/reference/adapt.md +0 -190
- package/templates/vite/.howone/skills/impeccable/reference/animate.md +0 -175
- package/templates/vite/.howone/skills/impeccable/reference/audit.md +0 -133
- package/templates/vite/.howone/skills/impeccable/reference/bolder.md +0 -113
- package/templates/vite/.howone/skills/impeccable/reference/brand.md +0 -118
- package/templates/vite/.howone/skills/impeccable/reference/clarify.md +0 -174
- package/templates/vite/.howone/skills/impeccable/reference/codex.md +0 -105
- package/templates/vite/.howone/skills/impeccable/reference/cognitive-load.md +0 -106
- package/templates/vite/.howone/skills/impeccable/reference/color-and-contrast.md +0 -105
- package/templates/vite/.howone/skills/impeccable/reference/colorize.md +0 -154
- package/templates/vite/.howone/skills/impeccable/reference/craft.md +0 -123
- package/templates/vite/.howone/skills/impeccable/reference/critique.md +0 -273
- package/templates/vite/.howone/skills/impeccable/reference/delight.md +0 -302
- package/templates/vite/.howone/skills/impeccable/reference/distill.md +0 -111
- package/templates/vite/.howone/skills/impeccable/reference/document.md +0 -427
- package/templates/vite/.howone/skills/impeccable/reference/extract.md +0 -69
- package/templates/vite/.howone/skills/impeccable/reference/harden.md +0 -347
- package/templates/vite/.howone/skills/impeccable/reference/heuristics-scoring.md +0 -234
- package/templates/vite/.howone/skills/impeccable/reference/interaction-design.md +0 -195
- package/templates/vite/.howone/skills/impeccable/reference/layout.md +0 -141
- package/templates/vite/.howone/skills/impeccable/reference/live.md +0 -622
- package/templates/vite/.howone/skills/impeccable/reference/motion-design.md +0 -109
- package/templates/vite/.howone/skills/impeccable/reference/onboard.md +0 -234
- package/templates/vite/.howone/skills/impeccable/reference/optimize.md +0 -258
- package/templates/vite/.howone/skills/impeccable/reference/overdrive.md +0 -130
- package/templates/vite/.howone/skills/impeccable/reference/personas.md +0 -179
- package/templates/vite/.howone/skills/impeccable/reference/polish.md +0 -242
- package/templates/vite/.howone/skills/impeccable/reference/product.md +0 -62
- package/templates/vite/.howone/skills/impeccable/reference/quieter.md +0 -99
- package/templates/vite/.howone/skills/impeccable/reference/responsive-design.md +0 -114
- package/templates/vite/.howone/skills/impeccable/reference/shape.md +0 -165
- package/templates/vite/.howone/skills/impeccable/reference/spatial-design.md +0 -100
- package/templates/vite/.howone/skills/impeccable/reference/teach.md +0 -156
- package/templates/vite/.howone/skills/impeccable/reference/typeset.md +0 -124
- package/templates/vite/.howone/skills/impeccable/reference/typography.md +0 -159
- package/templates/vite/.howone/skills/impeccable/reference/ux-writing.md +0 -107
- package/templates/vite/.howone/skills/impeccable/scripts/cleanup-deprecated.mjs +0 -284
- package/templates/vite/.howone/skills/impeccable/scripts/command-metadata.json +0 -94
- package/templates/vite/.howone/skills/impeccable/scripts/critique-storage.mjs +0 -242
- package/templates/vite/.howone/skills/impeccable/scripts/design-parser.mjs +0 -820
- package/templates/vite/.howone/skills/impeccable/scripts/detect-csp.mjs +0 -198
- package/templates/vite/.howone/skills/impeccable/scripts/detect.mjs +0 -21
- package/templates/vite/.howone/skills/impeccable/scripts/impeccable-paths.mjs +0 -110
- package/templates/vite/.howone/skills/impeccable/scripts/is-generated.mjs +0 -69
- package/templates/vite/.howone/skills/impeccable/scripts/live-accept.mjs +0 -595
- package/templates/vite/.howone/skills/impeccable/scripts/live-browser-session.js +0 -123
- package/templates/vite/.howone/skills/impeccable/scripts/live-browser.js +0 -4860
- package/templates/vite/.howone/skills/impeccable/scripts/live-complete.mjs +0 -75
- package/templates/vite/.howone/skills/impeccable/scripts/live-completion.mjs +0 -18
- package/templates/vite/.howone/skills/impeccable/scripts/live-inject.mjs +0 -446
- package/templates/vite/.howone/skills/impeccable/scripts/live-poll.mjs +0 -200
- package/templates/vite/.howone/skills/impeccable/scripts/live-resume.mjs +0 -48
- package/templates/vite/.howone/skills/impeccable/scripts/live-server.mjs +0 -838
- package/templates/vite/.howone/skills/impeccable/scripts/live-session-store.mjs +0 -254
- package/templates/vite/.howone/skills/impeccable/scripts/live-status.mjs +0 -47
- package/templates/vite/.howone/skills/impeccable/scripts/live-wrap.mjs +0 -632
- package/templates/vite/.howone/skills/impeccable/scripts/live.mjs +0 -247
- package/templates/vite/.howone/skills/impeccable/scripts/load-context.mjs +0 -141
- package/templates/vite/.howone/skills/impeccable/scripts/modern-screenshot.umd.js +0 -14
- package/templates/vite/.howone/skills/impeccable/scripts/pin.mjs +0 -214
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
/* Hallmark · macrostructure: Letter · H6 hero knobs: salutation=greeting, body=3 paragraphs, signoff=initials
|
|
2
|
-
* theme: Salon · accent: warm-amber ~2% · enrichment: none (typography only)
|
|
3
|
-
* studied: no · context: skipped, inferred (audio domain) · v0.6.0
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
:root {
|
|
7
|
-
--color-paper: oklch(96% 0.010 75);
|
|
8
|
-
--color-paper-2: oklch(94% 0.012 75);
|
|
9
|
-
--color-ink: oklch(22% 0.012 60);
|
|
10
|
-
--color-ink-soft: oklch(38% 0.014 60);
|
|
11
|
-
--color-rule: oklch(82% 0.014 70);
|
|
12
|
-
--color-accent: oklch(62% 0.13 55);
|
|
13
|
-
|
|
14
|
-
--font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
|
|
15
|
-
--font-body: "Cormorant Garamond", "Source Serif 4", "Iowan Old Style", Georgia, serif;
|
|
16
|
-
|
|
17
|
-
--space-3xs: 0.25rem;
|
|
18
|
-
--space-2xs: 0.5rem;
|
|
19
|
-
--space-xs: 0.75rem;
|
|
20
|
-
--space-sm: 1rem;
|
|
21
|
-
--space-md: 1.5rem;
|
|
22
|
-
--space-lg: 2rem;
|
|
23
|
-
--space-xl: 3rem;
|
|
24
|
-
--space-2xl: 4.5rem;
|
|
25
|
-
--space-3xl: 6.5rem;
|
|
26
|
-
--space-4xl: 9rem;
|
|
27
|
-
|
|
28
|
-
--measure-prose: 56ch;
|
|
29
|
-
|
|
30
|
-
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
31
|
-
--dur-micro: 120ms;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
* { box-sizing: border-box; }
|
|
35
|
-
|
|
36
|
-
html, body { overflow-x: clip; }
|
|
37
|
-
|
|
38
|
-
body {
|
|
39
|
-
margin: 0;
|
|
40
|
-
background: var(--color-paper);
|
|
41
|
-
color: var(--color-ink);
|
|
42
|
-
font-family: var(--font-body);
|
|
43
|
-
font-size: 1.125rem;
|
|
44
|
-
line-height: 1.55;
|
|
45
|
-
font-feature-settings: "ss01", "lnum";
|
|
46
|
-
-webkit-font-smoothing: antialiased;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.page {
|
|
50
|
-
max-width: 56rem;
|
|
51
|
-
margin: 0 auto;
|
|
52
|
-
padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* Masthead — small mono row */
|
|
56
|
-
.masthead {
|
|
57
|
-
display: flex;
|
|
58
|
-
justify-content: space-between;
|
|
59
|
-
align-items: center;
|
|
60
|
-
font-family: var(--font-display);
|
|
61
|
-
font-size: 0.75rem;
|
|
62
|
-
text-transform: uppercase;
|
|
63
|
-
letter-spacing: 0.08em;
|
|
64
|
-
color: var(--color-ink-soft);
|
|
65
|
-
border-block-end: 1px solid var(--color-rule);
|
|
66
|
-
padding-block-end: var(--space-sm);
|
|
67
|
-
margin-block-end: var(--space-2xl);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.masthead__brand { color: var(--color-ink); font-weight: 500; }
|
|
71
|
-
.masthead__meta { font-variant-numeric: tabular-nums; }
|
|
72
|
-
|
|
73
|
-
/* Salutation — the letter opens here */
|
|
74
|
-
.salutation {
|
|
75
|
-
font-family: var(--font-display);
|
|
76
|
-
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
|
|
77
|
-
font-weight: 400;
|
|
78
|
-
letter-spacing: -0.01em;
|
|
79
|
-
margin: 0 0 var(--space-xl);
|
|
80
|
-
color: var(--color-ink);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.salutation__caret {
|
|
84
|
-
display: inline-block;
|
|
85
|
-
width: 0.6ch;
|
|
86
|
-
height: 1em;
|
|
87
|
-
background: var(--color-accent);
|
|
88
|
-
vertical-align: -0.1em;
|
|
89
|
-
margin-inline-start: 0.1em;
|
|
90
|
-
animation: caret 1.05s steps(2, jump-none) infinite;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@keyframes caret {
|
|
94
|
-
0%, 50% { opacity: 1; }
|
|
95
|
-
50.01%, 100% { opacity: 0; }
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
@media (prefers-reduced-motion: reduce) {
|
|
99
|
-
.salutation__caret { animation: none; opacity: 0.7; }
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* Letter body — generous prose */
|
|
103
|
-
.letter {
|
|
104
|
-
max-width: var(--measure-prose);
|
|
105
|
-
font-family: var(--font-body);
|
|
106
|
-
font-size: 1.4rem;
|
|
107
|
-
line-height: 1.55;
|
|
108
|
-
font-weight: 400;
|
|
109
|
-
color: var(--color-ink);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.letter p {
|
|
113
|
-
margin: 0 0 var(--space-lg);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.letter p:first-child::first-letter {
|
|
117
|
-
font-family: var(--font-body);
|
|
118
|
-
font-style: italic;
|
|
119
|
-
font-size: 4rem;
|
|
120
|
-
line-height: 0.85;
|
|
121
|
-
float: inline-start;
|
|
122
|
-
padding-inline-end: 0.18em;
|
|
123
|
-
padding-block-start: 0.12em;
|
|
124
|
-
color: var(--color-accent);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.letter em {
|
|
128
|
-
font-style: italic;
|
|
129
|
-
color: var(--color-ink);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
/* Sign-off */
|
|
133
|
-
.signoff {
|
|
134
|
-
font-family: var(--font-display);
|
|
135
|
-
font-size: 0.875rem;
|
|
136
|
-
text-transform: uppercase;
|
|
137
|
-
letter-spacing: 0.1em;
|
|
138
|
-
color: var(--color-ink-soft);
|
|
139
|
-
margin-block-start: var(--space-xl);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.signoff__name { color: var(--color-ink); }
|
|
143
|
-
|
|
144
|
-
/* Listen-where row */
|
|
145
|
-
.listen {
|
|
146
|
-
margin-block-start: var(--space-3xl);
|
|
147
|
-
padding-block-start: var(--space-lg);
|
|
148
|
-
border-block-start: 1px solid var(--color-rule);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.listen__heading {
|
|
152
|
-
font-family: var(--font-display);
|
|
153
|
-
font-size: 0.75rem;
|
|
154
|
-
text-transform: uppercase;
|
|
155
|
-
letter-spacing: 0.1em;
|
|
156
|
-
color: var(--color-ink-soft);
|
|
157
|
-
margin: 0 0 var(--space-md);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.listen__list {
|
|
161
|
-
list-style: none;
|
|
162
|
-
padding: 0;
|
|
163
|
-
margin: 0;
|
|
164
|
-
display: flex;
|
|
165
|
-
flex-wrap: wrap;
|
|
166
|
-
gap: var(--space-md) var(--space-xl);
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.listen__item a {
|
|
170
|
-
display: inline-flex;
|
|
171
|
-
align-items: center;
|
|
172
|
-
gap: 0.5ch;
|
|
173
|
-
color: var(--color-ink);
|
|
174
|
-
text-decoration: none;
|
|
175
|
-
font-family: var(--font-body);
|
|
176
|
-
font-size: 1.125rem;
|
|
177
|
-
border-block-end: 1px solid transparent;
|
|
178
|
-
padding-block-end: 2px;
|
|
179
|
-
transition: color var(--dur-micro) var(--ease-out),
|
|
180
|
-
border-color var(--dur-micro) var(--ease-out);
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
.listen__item a:hover,
|
|
184
|
-
.listen__item a:focus-visible {
|
|
185
|
-
color: var(--color-accent);
|
|
186
|
-
border-block-end-color: var(--color-accent);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
.listen__item a:focus-visible {
|
|
190
|
-
outline: 2px solid var(--color-accent);
|
|
191
|
-
outline-offset: 4px;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.listen__arrow {
|
|
195
|
-
font-family: var(--font-display);
|
|
196
|
-
font-size: 0.85em;
|
|
197
|
-
opacity: 0.7;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* Colophon */
|
|
201
|
-
.colophon {
|
|
202
|
-
margin-block-start: var(--space-3xl);
|
|
203
|
-
padding-block-start: var(--space-md);
|
|
204
|
-
border-block-start: 1px solid var(--color-rule);
|
|
205
|
-
display: flex;
|
|
206
|
-
justify-content: space-between;
|
|
207
|
-
align-items: baseline;
|
|
208
|
-
font-family: var(--font-display);
|
|
209
|
-
font-size: 0.75rem;
|
|
210
|
-
text-transform: uppercase;
|
|
211
|
-
letter-spacing: 0.08em;
|
|
212
|
-
color: var(--color-ink-soft);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.colophon a {
|
|
216
|
-
color: var(--color-ink-soft);
|
|
217
|
-
text-decoration: none;
|
|
218
|
-
border-block-end: 1px solid transparent;
|
|
219
|
-
transition: color var(--dur-micro) var(--ease-out),
|
|
220
|
-
border-color var(--dur-micro) var(--ease-out);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.colophon a:hover,
|
|
224
|
-
.colophon a:focus-visible {
|
|
225
|
-
color: var(--color-ink);
|
|
226
|
-
border-block-end-color: var(--color-rule);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
.colophon a:focus-visible {
|
|
230
|
-
outline: 2px solid var(--color-accent);
|
|
231
|
-
outline-offset: 4px;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* Mobile */
|
|
235
|
-
@media (max-width: 40rem) {
|
|
236
|
-
.page { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
|
|
237
|
-
.letter { font-size: 1.2rem; }
|
|
238
|
-
.salutation { font-size: 1.4rem; }
|
|
239
|
-
.colophon { flex-direction: column; gap: var(--space-2xs); }
|
|
240
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
# Test 02 v2 — Streampipe (open-source CLI)
|
|
2
|
-
|
|
3
|
-
## The prompt (verbatim, same as v1)
|
|
4
|
-
|
|
5
|
-
> "Make a docs landing for an open-source CLI called Streampipe. It does stream parsing for log/event pipelines. Use the Terminal theme. Audience: backend developers. Use case: install the tool and read the docs. Tone: technical, terse."
|
|
6
|
-
|
|
7
|
-
## Step 0 · Pre-flight
|
|
8
|
-
|
|
9
|
-
> *"No pre-flight signals — proceeding with full Hallmark stack."*
|
|
10
|
-
|
|
11
|
-
## Step 1 · Design-context gate — fully answered
|
|
12
|
-
|
|
13
|
-
Audience, use, tone, theme all explicit. No inference.
|
|
14
|
-
|
|
15
|
-
## Step 2.5 · Project memory rotation
|
|
16
|
-
|
|
17
|
-
> *"Previous run on this brief picked Workbench + Terminal. The user explicitly requested Terminal again, so theme is fixed. Picking from {Long Document, Component Playground, Specimen} for the macro this time — Long Document fits a docs-landing brief because the page asks the user to read, not click through a sticky tour."*
|
|
18
|
-
>
|
|
19
|
-
> *"Theme: Terminal as requested. No theme rotation when the user names one."*
|
|
20
|
-
|
|
21
|
-
## Step 3 · Visual ruleset loaded
|
|
22
|
-
|
|
23
|
-
`macrostructures.md` (Long Document), `component-cookbook.md`, `typography.md` (single-family monospace specimen — the design IS mono), `color.md` (Terminal phosphor palette), `microinteractions.md` (single primitive: caret blink in code blocks), `anti-patterns.md`.
|
|
24
|
-
|
|
25
|
-
## Step 4 · Hero enrichment
|
|
26
|
-
|
|
27
|
-
> *"Enrichment: Tier-A pure-CSS terminal mockup, but inline as a `<pre>` rendered code block — no clipped-edge browser frame. The Long Document macro wants the demo embedded in the prose, not floated next to a sticky tour. Same anti-Lottie call as v1; different placement."*
|
|
28
|
-
|
|
29
|
-
## Step 5 · Preview
|
|
30
|
-
|
|
31
|
-
```markdown
|
|
32
|
-
**Hallmark · v0.6.0**
|
|
33
|
-
|
|
34
|
-
- **Macrostructure** · Long Document
|
|
35
|
-
- **Theme** · Terminal (dark phosphor paper · IBM Plex Mono throughout · phosphor-green accent)
|
|
36
|
-
- **Enrichment** · Tier-A pure-CSS terminal blocks (inline, embedded in prose)
|
|
37
|
-
- **Sections** · Masthead · Lede · Install · How it works (3 numbered notes) · Examples · Flag table · Colophon
|
|
38
|
-
- **Motion** · caret blink in code blocks (1 primitive)
|
|
39
|
-
- **Slop test** · 38 / 38 ✓
|
|
40
|
-
- **Diversification** · differs from v1 (Workbench/Terminal) on macrostructure (Workbench → Long Document); theme fixed by user request
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Step 6 · Macrostructure stamp
|
|
44
|
-
|
|
45
|
-
```
|
|
46
|
-
/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutation=command, body=2 paragraphs, signoff=mit-license
|
|
47
|
-
* theme: Terminal · accent: phosphor-green ~6% (functional, not decorative)
|
|
48
|
-
* enrichment: Tier-A inline CSS-art terminal blocks (no sticky pin, no Lottie)
|
|
49
|
-
* studied: no · context: explicit · v0.6.0
|
|
50
|
-
*/
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## What changed vs v1
|
|
54
|
-
|
|
55
|
-
- **Macro:** Workbench → Long Document. v1's Workbench pinned a code panel on the right and stepped through three actions; v2's Long Document writes the docs as prose with the demo embedded inline. Both honor the brief; the rotation rule pushed v2 toward Long Document.
|
|
56
|
-
- **Theme:** unchanged (Terminal — user-requested, can't rotate).
|
|
57
|
-
- **Enrichment placement:** v1's clipped-edge demo terminal is now an inline `<pre>` block embedded in paragraph 2. Same Tier-A custom-craft, different layout role.
|
|
58
|
-
- **Voice:** v1 opened with `$ streampipe --help`; v2 opens with a single sentence describing what the CLI does. The `$` command moves to the install section.
|
|
59
|
-
|
|
60
|
-
## What stayed the same
|
|
61
|
-
|
|
62
|
-
- Theme (Terminal — user-requested).
|
|
63
|
-
- Single-family monospace specimen (typography.md allows this when the single font IS the design).
|
|
64
|
-
- Slop test: 38 / 38 ✓.
|
|
65
|
-
- Enrichment tier (Tier-A pure-CSS).
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
<title>Streampipe — a small CLI for parsing log and event streams</title>
|
|
7
|
-
<meta name="description" content="Streampipe is a small, fast, single-binary CLI for parsing log and event streams from stdin. Filter, transform, route." />
|
|
8
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
9
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
10
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" />
|
|
11
|
-
<link rel="stylesheet" href="style.css" />
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
<main class="page">
|
|
15
|
-
<header class="masthead">
|
|
16
|
-
<span class="masthead__brand">streampipe</span>
|
|
17
|
-
<span class="masthead__meta">v0.4.1 · MIT · 1.2 MB</span>
|
|
18
|
-
</header>
|
|
19
|
-
|
|
20
|
-
<h1 class="lede">
|
|
21
|
-
<span class="lede__prompt">$</span>streampipe — a small, fast, single-binary CLI for parsing log and event
|
|
22
|
-
streams from stdin.<span class="lede__caret" aria-hidden="true"></span>
|
|
23
|
-
</h1>
|
|
24
|
-
|
|
25
|
-
<section class="prose" aria-label="What it does">
|
|
26
|
-
<p>
|
|
27
|
-
Streampipe reads newline-delimited records (JSON, logfmt, CSV, raw) from stdin, applies a
|
|
28
|
-
sequence of filters and transforms, and writes the result to stdout. Composes with anything
|
|
29
|
-
that emits lines — <strong>tail -f</strong>, <strong>kafkacat</strong>, <strong>journalctl</strong>,
|
|
30
|
-
<strong>kubectl logs</strong>. No daemon, no config file, no telemetry.
|
|
31
|
-
</p>
|
|
32
|
-
|
|
33
|
-
<pre class="term" aria-label="Sample streampipe command and output"><span class="term__line"><span class="term__prompt">$</span> tail -f access.log | streampipe parse <span class="term__flag">--format</span> nginx <span class="term__flag">--filter</span> 'status >= 500' <span class="term__flag">--out</span> json</span><span class="term__line"> </span><span class="term__line term__line--out">{"ts":"2026-04-30T14:01:18Z","ip":"203.0.113.42","method":"POST","path":"/api/v1/checkout","status":502,"ms":4101}</span><span class="term__line term__line--out">{"ts":"2026-04-30T14:01:21Z","ip":"203.0.113.78","method":"GET","path":"/api/v1/orders/9128","status":503,"ms":12}</span><span class="term__line term__line--out">{"ts":"2026-04-30T14:01:21Z","ip":"203.0.113.42","method":"POST","path":"/api/v1/checkout","status":502,"ms":3998}</span></pre>
|
|
34
|
-
|
|
35
|
-
<p>
|
|
36
|
-
Streampipe is written in Rust, ships as a 1.2 MB static binary, and is designed to be the
|
|
37
|
-
last process in your pipeline before storage. It does not buffer. It does not retain state.
|
|
38
|
-
It does one thing per invocation, and you can pipe it into another invocation.
|
|
39
|
-
</p>
|
|
40
|
-
</section>
|
|
41
|
-
|
|
42
|
-
<section class="section" aria-labelledby="install-h">
|
|
43
|
-
<h2 class="section__head" id="install-h"><span><span class="section__num">01</span> Install</span><span>3 ways</span></h2>
|
|
44
|
-
<pre class="term"><span class="term__line"><span class="term__comment"># homebrew</span></span><span class="term__line"><span class="term__prompt">$</span> brew install streampipe</span><span class="term__line"> </span><span class="term__line"><span class="term__comment"># cargo</span></span><span class="term__line"><span class="term__prompt">$</span> cargo install streampipe</span><span class="term__line"> </span><span class="term__line"><span class="term__comment"># curl (Linux/macOS, no sudo)</span></span><span class="term__line"><span class="term__prompt">$</span> curl -sSL https://streampipe.dev/install | sh</span></pre>
|
|
45
|
-
</section>
|
|
46
|
-
|
|
47
|
-
<section class="section" aria-labelledby="how-h">
|
|
48
|
-
<h2 class="section__head" id="how-h"><span><span class="section__num">02</span> How it works</span><span>3 notes</span></h2>
|
|
49
|
-
<div class="notes">
|
|
50
|
-
<div class="note">
|
|
51
|
-
<span class="note__num">1.0</span>
|
|
52
|
-
<p class="note__body">
|
|
53
|
-
<strong>Stream in, stream out.</strong> Streampipe reads stdin line by line and writes stdout
|
|
54
|
-
line by line. Each record is independent. Memory use is bounded by the largest record, not
|
|
55
|
-
by the size of the stream. You can pipe a 200 GB log file through a 1.2 MB binary.
|
|
56
|
-
</p>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="note">
|
|
59
|
-
<span class="note__num">2.0</span>
|
|
60
|
-
<p class="note__body">
|
|
61
|
-
<strong>Filters are expressions, not config.</strong> The <code>--filter</code> flag takes a
|
|
62
|
-
CEL-style expression evaluated against each parsed record: <code>status >= 500</code>,
|
|
63
|
-
<code>ms > 1000 && path.startsWith('/api')</code>, <code>!has(headers.x-debug)</code>.
|
|
64
|
-
No filter file. No filter language to learn beyond the expression.
|
|
65
|
-
</p>
|
|
66
|
-
</div>
|
|
67
|
-
<div class="note">
|
|
68
|
-
<span class="note__num">3.0</span>
|
|
69
|
-
<p class="note__body">
|
|
70
|
-
<strong>Transforms are projections, not migrations.</strong> The <code>--map</code> flag
|
|
71
|
-
rewrites each record into a new shape: <code>--map '{ts: ts, p99: ms, where: path}'</code>.
|
|
72
|
-
Records are immutable inside Streampipe; transforms produce new records. There is no
|
|
73
|
-
in-place edit; debugging is therefore a pipe with one extra stage.
|
|
74
|
-
</p>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
</section>
|
|
78
|
-
|
|
79
|
-
<section class="section" aria-labelledby="flags-h">
|
|
80
|
-
<h2 class="section__head" id="flags-h"><span><span class="section__num">03</span> Flags</span><span>full reference at <a href="#">streampipe.dev/docs</a></span></h2>
|
|
81
|
-
<table class="flags">
|
|
82
|
-
<thead>
|
|
83
|
-
<tr><th>Flag</th><th>Type</th><th>What it does</th></tr>
|
|
84
|
-
</thead>
|
|
85
|
-
<tbody>
|
|
86
|
-
<tr><td>--format</td><td>nginx | apache | json | logfmt | csv</td><td>Parse stdin as the named format. Default: auto-detect from first 3 lines.</td></tr>
|
|
87
|
-
<tr><td>--filter</td><td>expression</td><td>Drop records that don't match. CEL-style. Strings, numbers, booleans, arrays.</td></tr>
|
|
88
|
-
<tr><td>--map</td><td>expression</td><td>Project records into a new shape. Output keys are the keys of the expression.</td></tr>
|
|
89
|
-
<tr><td>--out</td><td>json | logfmt | csv | raw</td><td>Encode each record. Default: matches input format.</td></tr>
|
|
90
|
-
<tr><td>--quiet</td><td>flag</td><td>Suppress parse-error lines on stderr. Errors still set exit code on EOF.</td></tr>
|
|
91
|
-
<tr><td>--help</td><td>flag</td><td>Print usage and exit. Always exit 0.</td></tr>
|
|
92
|
-
</tbody>
|
|
93
|
-
</table>
|
|
94
|
-
</section>
|
|
95
|
-
|
|
96
|
-
<footer class="colophon">
|
|
97
|
-
<span><a href="#">github.com/streampipe-cli</a></span>
|
|
98
|
-
<span><a href="#">docs</a></span>
|
|
99
|
-
<span><a href="#">changelog</a></span>
|
|
100
|
-
<span><a href="#">issues</a></span>
|
|
101
|
-
<span>MIT · © 2026</span>
|
|
102
|
-
</footer>
|
|
103
|
-
</main>
|
|
104
|
-
</body>
|
|
105
|
-
</html>
|
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
/* Hallmark · macrostructure: Long Document · H5 hero knobs: salutation=command, body=2 paragraphs, signoff=mit-license
|
|
2
|
-
* theme: Terminal · accent: phosphor-green ~6% (functional, not decorative)
|
|
3
|
-
* enrichment: Tier-A inline CSS-art terminal blocks (no sticky pin, no Lottie)
|
|
4
|
-
* studied: no · context: explicit · v0.6.0
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
:root {
|
|
8
|
-
--color-paper: oklch(13% 0.020 150);
|
|
9
|
-
--color-paper-2: oklch(17% 0.022 150);
|
|
10
|
-
--color-rule: oklch(28% 0.025 150);
|
|
11
|
-
--color-ink: oklch(86% 0.040 150);
|
|
12
|
-
--color-ink-soft: oklch(62% 0.040 150);
|
|
13
|
-
--color-accent: oklch(82% 0.20 150);
|
|
14
|
-
--color-accent-dim: oklch(58% 0.16 150);
|
|
15
|
-
--color-amber: oklch(78% 0.18 80);
|
|
16
|
-
|
|
17
|
-
--font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
18
|
-
|
|
19
|
-
--space-3xs: 0.25rem;
|
|
20
|
-
--space-2xs: 0.5rem;
|
|
21
|
-
--space-xs: 0.75rem;
|
|
22
|
-
--space-sm: 1rem;
|
|
23
|
-
--space-md: 1.5rem;
|
|
24
|
-
--space-lg: 2rem;
|
|
25
|
-
--space-xl: 3rem;
|
|
26
|
-
--space-2xl: 4.5rem;
|
|
27
|
-
--space-3xl: 6.5rem;
|
|
28
|
-
|
|
29
|
-
--measure-prose: 64ch;
|
|
30
|
-
|
|
31
|
-
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
32
|
-
--dur-micro: 100ms;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
* { box-sizing: border-box; }
|
|
36
|
-
|
|
37
|
-
html, body { overflow-x: clip; }
|
|
38
|
-
|
|
39
|
-
body {
|
|
40
|
-
margin: 0;
|
|
41
|
-
background: var(--color-paper);
|
|
42
|
-
color: var(--color-ink);
|
|
43
|
-
font-family: var(--font-mono);
|
|
44
|
-
font-size: 0.9375rem;
|
|
45
|
-
line-height: 1.6;
|
|
46
|
-
-webkit-font-smoothing: antialiased;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.page {
|
|
50
|
-
max-width: 56rem;
|
|
51
|
-
margin: 0 auto;
|
|
52
|
-
padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/* Masthead */
|
|
56
|
-
.masthead {
|
|
57
|
-
display: flex;
|
|
58
|
-
justify-content: space-between;
|
|
59
|
-
align-items: center;
|
|
60
|
-
border-block-end: 1px solid var(--color-rule);
|
|
61
|
-
padding-block-end: var(--space-sm);
|
|
62
|
-
margin-block-end: var(--space-2xl);
|
|
63
|
-
font-size: 0.8125rem;
|
|
64
|
-
text-transform: uppercase;
|
|
65
|
-
letter-spacing: 0.06em;
|
|
66
|
-
color: var(--color-ink-soft);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.masthead__brand { color: var(--color-accent); }
|
|
70
|
-
.masthead__meta { font-variant-numeric: tabular-nums; }
|
|
71
|
-
|
|
72
|
-
/* Lede — the salutation-as-command */
|
|
73
|
-
.lede {
|
|
74
|
-
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
|
|
75
|
-
line-height: 1.4;
|
|
76
|
-
margin: 0 0 var(--space-xl);
|
|
77
|
-
color: var(--color-ink);
|
|
78
|
-
max-width: var(--measure-prose);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.lede__prompt {
|
|
82
|
-
color: var(--color-accent);
|
|
83
|
-
margin-inline-end: 0.5ch;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.lede__caret {
|
|
87
|
-
display: inline-block;
|
|
88
|
-
width: 0.55ch;
|
|
89
|
-
height: 1.15em;
|
|
90
|
-
background: var(--color-accent);
|
|
91
|
-
vertical-align: -0.18em;
|
|
92
|
-
margin-inline-start: 0.15em;
|
|
93
|
-
animation: caret 1s steps(2, jump-none) infinite;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@keyframes caret {
|
|
97
|
-
0%, 50% { opacity: 1; }
|
|
98
|
-
50.01%, 100% { opacity: 0; }
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@media (prefers-reduced-motion: reduce) {
|
|
102
|
-
.lede__caret { animation: none; opacity: 0.7; }
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* Body prose */
|
|
106
|
-
.prose {
|
|
107
|
-
max-width: var(--measure-prose);
|
|
108
|
-
font-size: 0.9375rem;
|
|
109
|
-
line-height: 1.7;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.prose p {
|
|
113
|
-
margin: 0 0 var(--space-md);
|
|
114
|
-
color: var(--color-ink);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.prose strong { color: var(--color-accent); font-weight: 500; }
|
|
118
|
-
|
|
119
|
-
.prose a {
|
|
120
|
-
color: var(--color-accent);
|
|
121
|
-
text-decoration: underline;
|
|
122
|
-
text-decoration-color: var(--color-accent-dim);
|
|
123
|
-
text-underline-offset: 3px;
|
|
124
|
-
transition: text-decoration-color var(--dur-micro) var(--ease-out);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.prose a:hover, .prose a:focus-visible {
|
|
128
|
-
text-decoration-color: var(--color-accent);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.prose a:focus-visible {
|
|
132
|
-
outline: 2px solid var(--color-accent);
|
|
133
|
-
outline-offset: 3px;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* Inline terminal blocks */
|
|
137
|
-
.term {
|
|
138
|
-
background: var(--color-paper-2);
|
|
139
|
-
border: 1px solid var(--color-rule);
|
|
140
|
-
border-radius: 4px;
|
|
141
|
-
padding: var(--space-md);
|
|
142
|
-
margin: var(--space-lg) 0;
|
|
143
|
-
font-size: 0.875rem;
|
|
144
|
-
line-height: 1.55;
|
|
145
|
-
overflow-x: auto;
|
|
146
|
-
position: relative;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.term__line { display: block; white-space: pre; color: var(--color-ink); }
|
|
150
|
-
.term__line .term__prompt { color: var(--color-accent); }
|
|
151
|
-
.term__line .term__flag { color: var(--color-amber); }
|
|
152
|
-
.term__line .term__comment { color: var(--color-ink-soft); }
|
|
153
|
-
.term__line.term__line--out { color: var(--color-ink-soft); }
|
|
154
|
-
|
|
155
|
-
/* Section headings */
|
|
156
|
-
.section {
|
|
157
|
-
margin-block-start: var(--space-2xl);
|
|
158
|
-
padding-block-start: var(--space-md);
|
|
159
|
-
border-block-start: 1px solid var(--color-rule);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.section__head {
|
|
163
|
-
display: flex;
|
|
164
|
-
justify-content: space-between;
|
|
165
|
-
align-items: baseline;
|
|
166
|
-
margin: 0 0 var(--space-md);
|
|
167
|
-
font-size: 0.8125rem;
|
|
168
|
-
text-transform: uppercase;
|
|
169
|
-
letter-spacing: 0.08em;
|
|
170
|
-
color: var(--color-ink-soft);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
.section__num {
|
|
174
|
-
color: var(--color-accent);
|
|
175
|
-
font-weight: 500;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/* Numbered note rows (How it works) */
|
|
179
|
-
.notes { display: grid; gap: var(--space-md); }
|
|
180
|
-
.note {
|
|
181
|
-
display: grid;
|
|
182
|
-
grid-template-columns: 4ch 1fr;
|
|
183
|
-
gap: var(--space-md);
|
|
184
|
-
align-items: baseline;
|
|
185
|
-
}
|
|
186
|
-
.note__num {
|
|
187
|
-
color: var(--color-accent);
|
|
188
|
-
font-variant-numeric: tabular-nums;
|
|
189
|
-
}
|
|
190
|
-
.note__body {
|
|
191
|
-
color: var(--color-ink);
|
|
192
|
-
max-width: var(--measure-prose);
|
|
193
|
-
}
|
|
194
|
-
.note__body strong { color: var(--color-accent); font-weight: 500; }
|
|
195
|
-
|
|
196
|
-
/* Flag spec table */
|
|
197
|
-
.flags {
|
|
198
|
-
width: 100%;
|
|
199
|
-
border-collapse: collapse;
|
|
200
|
-
font-size: 0.8125rem;
|
|
201
|
-
}
|
|
202
|
-
.flags th, .flags td {
|
|
203
|
-
text-align: start;
|
|
204
|
-
padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0;
|
|
205
|
-
border-block-end: 1px solid var(--color-rule);
|
|
206
|
-
vertical-align: baseline;
|
|
207
|
-
}
|
|
208
|
-
.flags th {
|
|
209
|
-
font-weight: 500;
|
|
210
|
-
color: var(--color-ink-soft);
|
|
211
|
-
text-transform: uppercase;
|
|
212
|
-
letter-spacing: 0.06em;
|
|
213
|
-
}
|
|
214
|
-
.flags td:first-child { color: var(--color-accent); width: 18ch; }
|
|
215
|
-
|
|
216
|
-
/* Colophon */
|
|
217
|
-
.colophon {
|
|
218
|
-
margin-block-start: var(--space-3xl);
|
|
219
|
-
padding-block-start: var(--space-md);
|
|
220
|
-
border-block-start: 1px solid var(--color-rule);
|
|
221
|
-
display: flex;
|
|
222
|
-
flex-wrap: wrap;
|
|
223
|
-
gap: var(--space-md) var(--space-xl);
|
|
224
|
-
font-size: 0.8125rem;
|
|
225
|
-
text-transform: uppercase;
|
|
226
|
-
letter-spacing: 0.06em;
|
|
227
|
-
color: var(--color-ink-soft);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.colophon a {
|
|
231
|
-
color: var(--color-ink-soft);
|
|
232
|
-
text-decoration: none;
|
|
233
|
-
transition: color var(--dur-micro) var(--ease-out);
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.colophon a:hover, .colophon a:focus-visible {
|
|
237
|
-
color: var(--color-accent);
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.colophon a:focus-visible {
|
|
241
|
-
outline: 2px solid var(--color-accent);
|
|
242
|
-
outline-offset: 3px;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
/* Mobile */
|
|
246
|
-
@media (max-width: 40rem) {
|
|
247
|
-
.page { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
|
|
248
|
-
.lede { font-size: 1.125rem; }
|
|
249
|
-
.note { grid-template-columns: 3ch 1fr; gap: var(--space-sm); }
|
|
250
|
-
}
|