CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

README, docs and site: one story (the whole job, no avoidable rejections, the desktop app, your AI, install)

Browse source 
README is a short front page (about 120 lines) with one real visual per section; every former section moved
unchanged into docs/*.md with a docs/README.md index (journey, rejections, getting-started, commands, growth,
studios, store-art, listing-languages, api, skills, mcp, safety, faq, project). The site tells the same story on one
page: the teaser in the hero, real CLI output as text, the desktop app as a section with light/dark captures of eight
screens and the per-system downloads (desktop/latest.json); /desktop/ redirects to /#download. New capture tools:
tools/site-desktop-shots.ts (fixture-mode desktop frames) and tools/site-term-shots.ts (real CLI output as text and
WebP). tests/docs-links.test.ts checks README, docs and site links resolve.
This commit is contained in:
CRTkafa 2026-10-13 03:29:59 +08:00
parent deb218943c
commit 710c3a53d0
63 changed files with 2742 additions and 1782 deletions
Download patch file Download diff file Expand all files Collapse all files

85
site/style.css
View file

@ -661,3 +661,88 @@ h2 { font-size: clamp(28px, 4.2vw, 40px); font-weight: 720; letter-spacing: -.03
.st-next .ic { width: 15px; height: 15px; transition: transform .15s ease; }
.st-next:hover .ic { transform: translateX(2px); }
@media (min-width: 1024px) { html.js .st-panel:not([hidden]) { display: flex; flex-direction: column; } }
/* ---- 2026-10-13 one-page story: hero teaser, the whole job, desktop tabs + downloads, your AI, what it covers ---- */
/* phone: the section links scroll sideways in a second row instead of disappearing */
@media (max-width: 640px) {
.top-in { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
.top nav.nav-main { position: relative; order: 3; width: calc(100% + 2 * var(--gutter)); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
.top nav.nav-main::-webkit-scrollbar { display: none; }
.top nav.nav-main a:not(.nav-git) { display: inline-block; white-space: nowrap; flex: none; padding: 6px 9px; font-size: 14px; }
.top nav.nav-main .nav-git { flex: none; }
html { scroll-padding-top: 108px; }
}
.hero-video { margin: 0; min-width: 0; position: relative; }
.hero-video::before { content: ""; position: absolute; inset: 8% -4% -6% 6%; z-index: -1; border-radius: 40px; background: color-mix(in srgb, var(--accent) 28%, transparent); filter: blur(60px); opacity: .5; }
.hero-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid rgb(148 163 184 / .2); background: #0b1020; box-shadow: var(--shadow); }
.hero-video figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; text-wrap: balance; }
.sub-h { font-size: 20px; font-weight: 700; margin: 56px 0 18px; }
.ship { display: grid; gap: 28px; margin-top: 36px; align-items: start; }
@media (min-width: 1020px) { .ship { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.does { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.does li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; min-width: 0; }
.does b { font-size: 16px; color: var(--ink); }
.does span { font-size: 14.5px; color: var(--ink-2); }
.ship-demo { max-width: 760px; }
.cols-you { display: grid; gap: 20px; min-width: 0; }
.cols-you .sub { margin-top: 0; }
.you-box { border: 1px solid var(--you-line); background: color-mix(in srgb, var(--you-bg) 45%, var(--surface)); border-radius: var(--radius); padding: 18px 20px; }
.you-box ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; display: grid; gap: 6px; }
.you-box strong { color: var(--ink); }
/* real CLI output as text */
.term-real { margin: 0; }
.term-real pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.6; max-height: 560px; overflow-y: auto; }
.term-real .o { color: color-mix(in srgb, var(--code-ink) 62%, var(--code-bg)); }
.term-cap { padding: 0 18px 14px; font-size: 12px; color: var(--code-muted); }
.term-cap a { color: inherit; }
@media (max-width: 640px) { .term-real pre { font-size: 11.5px; padding: 14px; } }
/* desktop app: one tab per screen, light / dark captures */
.desk-tabs { margin-top: 32px; }
.desk-panel { margin: 0; }
.desk-panel img { width: 100%; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.desk-panel figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.dl { margin-top: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.dl-head h3 { font-size: 20px; }
.dl-status { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.dl-os { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.dl-os .btn { width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; min-height: 64px; }
.dl-os .btn b { font-size: 15.5px; }
.dl-os .btn small { font-weight: 500; font-size: 12.5px; color: var(--muted); }
.dl-os .btn.is-off { opacity: .6; cursor: default; pointer-events: none; }
.dl-os .btn.is-here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dl-notice { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ui-ink); background: var(--ui-bg); color: var(--ui-ink); font-size: 14.5px; }
.dl-notice ol { margin: 8px 0 0; padding-left: 20px; }
.dl-verify { margin-top: 18px; }
.dl-verify summary, .chat-more summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 32px; }
.dl-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; }
.dl-table th, .dl-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dl-table th { font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dl-table .sha { font: 12px/1.5 var(--mono); overflow-wrap: anywhere; display: block; }
.dl-table .fname { font-weight: 600; overflow-wrap: anywhere; }
.dl-table .small { font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
.dl-table thead { display: none; }
.dl-table, .dl-table tbody, .dl-table tr, .dl-table td { display: block; width: 100%; }
.dl-table td { border: 0; padding: 4px 0; }
.dl-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
}
.dl-steps { margin: 14px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; }
.dl-steps li { margin: 6px 0; }
.dl-key { display: block; margin-top: 6px; font: 12.5px/1.6 var(--mono); overflow-wrap: anywhere; }
.agent-setup { min-width: 0; }
.session .sub-h { margin-top: 0; }
.chat-more { margin-top: 32px; }
.chat-more .chat { margin-top: 14px; }
.covers { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.covers a { display: grid; align-content: start; gap: 4px; height: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink-2); font-size: 14.5px; transition: border-color .15s ease; }
.covers a:hover { border-color: var(--accent); }
.covers b { color: var(--ink); font-size: 16px; }
.ship-demo .demo::before { inset: 8% 0 -6% 6%; }