mirror of
https://github.com/himanshudongre/smriti.git
synced 2026-08-28 05:14:59 +00:00
Add the first public landing page at website/
A self-contained static landing page — pure HTML + CSS, no JS framework, no build step — lifting the README's positioning into a single scrollable page a new visitor can read in about two minutes. Sections, in order: - Hero: "Code has Git. Multi-agent reasoning does not." + the version-control-for-reasoning-state framing + two CTAs. - The problem: multi-agent collisions; markdown handoffs break. - The Git analogy: the table from the README (commit -> checkpoint, branch -> fork, diff -> compare, revert -> restore, working-tree drift -> repo-state drift) plus the rows Git has no equivalent for (active claims, freshness checks, structured tasks + IDs). - How it works: 4-beat (attach, read state, claim, checkpoint) plus the no-arg daily-loop snippet. - What Smriti is not: not markdown, not memory, not orchestrator; and the concrete list of what markdown can't reliably provide. - Built with Smriti: the real `smriti metrics smriti-dev` numbers and the strongest-proof line. - Screenshots: dashboard, CLI, checkpoint detail (copied from docs/assets/ into website/assets/ so the site is self-contained). - Try it in 5 minutes: install local-first -> smriti doctor -> smriti quickstart -> smriti init/attach -> no-arg daily workflow. - CTA: star on GitHub + read the docs. Tech: a system font stack (no webfonts), CSS variables, dark theme with one warm accent, mobile-responsive at <=720px and <=420px. No JS. 230 lines HTML + 499 lines CSS + 3 screenshots + a .nojekyll marker. Self-contained under website/. Existing frontend/ chat UI untouched. Deployment is unconstrained — GitHub Pages from /website, Vercel, Netlify, or any static host. Verified locally via headless browser: page loads, no console errors, no network failures, renders cleanly at desktop (1280x800) and mobile (390x844) viewports.
This commit is contained in:
Himanshu Dongre
parent
e73157285c
commit
47d5bb0269
6 changed files with 729 additions and 0 deletions
0
website/.nojekyll
Normal file
0
website/.nojekyll
Normal file
BIN
website/assets/checkpoint-detail.png
Normal file
BIN
website/assets/checkpoint-detail.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
website/assets/cli-state-and-metrics.png
Normal file
BIN
website/assets/cli-state-and-metrics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
BIN
website/assets/lineage-dashboard.png
Normal file
BIN
website/assets/lineage-dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
230
website/index.html
Normal file
230
website/index.html
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Smriti — Version control for project reasoning state</title>
|
||||
<meta name="description" content="Code has Git. Multi-agent reasoning does not. Smriti is version control for project reasoning state, so multiple coding agents can coordinate on the same codebase without overwriting each other's thinking.">
|
||||
<meta name="theme-color" content="#0c0c10">
|
||||
<meta property="og:title" content="Smriti — Version control for project reasoning state">
|
||||
<meta property="og:description" content="Code has Git. Multi-agent reasoning does not. Smriti is version control for project reasoning state, so multiple coding agents can coordinate on the same codebase.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container header-row">
|
||||
<a class="brand" href="/">Smriti</a>
|
||||
<nav>
|
||||
<a href="#try">Try it</a>
|
||||
<a href="https://github.com/himanshudongre/smriti">GitHub</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- ───── Hero ───── -->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Code has Git.<br><span class="hero-em">Multi-agent reasoning does not.</span></h1>
|
||||
<p class="hero-sub">Smriti is version control for project reasoning state — versioned, structured, branchable snapshots of <em>what was decided</em>, <em>what's still open</em>, and <em>what each agent is doing right now</em>. So multiple coding agents can coordinate on the same codebase without overwriting each other's thinking.</p>
|
||||
<div class="hero-cta">
|
||||
<a class="btn btn-primary" href="#try">Try it in 5 minutes</a>
|
||||
<a class="btn btn-secondary" href="https://github.com/himanshudongre/smriti">View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── Problem ───── -->
|
||||
<section class="section problem">
|
||||
<div class="container">
|
||||
<h2>The problem</h2>
|
||||
<p class="lede">Run Claude Code and Codex on the same project — or two Claude Code sessions — and they share no state. Each agent starts from scratch, re-discovers decisions already made, and occasionally duplicates work another agent is already doing.</p>
|
||||
<p>The standard workaround is <code>HANDOFF.md</code> / <code>NOTES.md</code>. That works until reasoning needs to branch, be compared, be restored, or be validated against the actual repo. Markdown is prose; it stops working the moment more than one agent needs to coordinate.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── The Git analogy ───── -->
|
||||
<section class="section analogy">
|
||||
<div class="container">
|
||||
<h2>The Git analogy</h2>
|
||||
<p>Git preserves <em>code history</em>: what changed, when, by whom, on which branch. Smriti preserves <em>project reasoning</em>: what was decided, what's still open, what each agent is doing right now, and how the recorded state compares to the live repo.</p>
|
||||
<div class="analogy-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Code (Git)</th><th>Reasoning state (Smriti)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>commit</td><td><strong>checkpoint</strong> — structured snapshot of reasoning state</td></tr>
|
||||
<tr><td>branch</td><td><strong>fork</strong> from any checkpoint to explore an alternative</td></tr>
|
||||
<tr><td>diff</td><td><code>smriti compare</code> — structured diff of two checkpoints</td></tr>
|
||||
<tr><td>revert / checkout</td><td><code>smriti restore</code> — return to a clean checkpoint</td></tr>
|
||||
<tr><td>working-tree drift</td><td><strong>repo-state drift</strong> — flags when the repo has moved past the checkpoint</td></tr>
|
||||
<tr><td>—</td><td><strong>active claims</strong> — advisory coordination so agents see each other coming</td></tr>
|
||||
<tr><td>—</td><td><strong>freshness checks</strong> — "has state moved since my base?" before checkpointing</td></tr>
|
||||
<tr><td>—</td><td><strong>structured tasks + IDs</strong> — collision detection at the task level</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="caption">The first five rows extend the Git analogy. The last three are coordination primitives Git doesn't have — because Git is built for one human committing serial code, and Smriti is built for multiple agents writing reasoning state in parallel.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── How it works ───── -->
|
||||
<section class="section how">
|
||||
<div class="container">
|
||||
<h2>How it works</h2>
|
||||
<ol class="how-steps">
|
||||
<li>
|
||||
<h3>1. Attach the repo</h3>
|
||||
<p><code>smriti init my-project</code> creates a Space, installs the Claude Code and Codex skill packs into the project directory, writes the SessionStart hook, and drops a <code>.smriti.json</code> at the repo root. Per-project — attach once, multiple repos isolate cleanly.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>2. Agents read state first</h3>
|
||||
<p>At session start, the agent reads the current state brief — objective, decisions, assumptions, tasks, open questions, artifacts — plus the <code>## Repo state</code> section comparing the working repo to the HEAD and branch the last checkpoint recorded.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>3. Declare claims before working</h3>
|
||||
<p>The agent calls <code>smriti claim</code> with a scope before starting work. Claims are advisory, time-bounded, and visible in every other agent's state brief. Two agents see each other coming.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>4. Checkpoint at inflection points</h3>
|
||||
<p>At a real decision or handoff the agent writes a structured checkpoint. The next session — same agent or a different one — reads it as if it had been there for the work.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>Inside an attached repo, the everyday commands resolve the Space automatically — no <code><space></code> argument needed:</p>
|
||||
<pre><code>smriti state # continuation brief — read first each session
|
||||
smriti current # compact snapshot: direction, attention, open work
|
||||
smriti metrics # project coordination KPIs</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── What Smriti is not ───── -->
|
||||
<section class="section not">
|
||||
<div class="container">
|
||||
<h2>What Smriti is not</h2>
|
||||
<div class="not-grid">
|
||||
<div class="not-item">
|
||||
<h3>Not markdown</h3>
|
||||
<p><code>HANDOFF.md</code> / <code>NOTES.md</code> work until you need claims, freshness, branching, drift detection, or coordination at all.</p>
|
||||
</div>
|
||||
<div class="not-item">
|
||||
<h3>Not memory</h3>
|
||||
<p>Smriti stores <em>structured snapshots at inflection points</em>, not a running log of everything an agent said or saw. State is queryable, not narrative.</p>
|
||||
</div>
|
||||
<div class="not-item">
|
||||
<h3>Not an orchestrator</h3>
|
||||
<p>Smriti describes state. It does not assign tasks, schedule work, or route agents. Agents make their own decisions from shared metadata.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="subhead">What markdown can't reliably provide</h3>
|
||||
<ul class="constraints">
|
||||
<li><strong>Active claims</strong> — who is working on what right now, with a TTL</li>
|
||||
<li><strong>Freshness checks</strong> — has the state moved since my base before I checkpoint?</li>
|
||||
<li><strong>Task IDs tied to claims</strong> — collision detection at the task level</li>
|
||||
<li><strong>Repo-state drift detection</strong> — recorded state vs the live repo, with N-commits-ahead / branch-mismatch surfacing</li>
|
||||
<li><strong>Branchable, comparable, restorable reasoning</strong> — <code>smriti fork</code>, <code>smriti compare</code>, <code>smriti restore</code></li>
|
||||
<li><strong>A current-state surface</strong> — one well-defined brief multiple agents read at session start</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── Built with Smriti ───── -->
|
||||
<section class="section proof">
|
||||
<div class="container">
|
||||
<h2>Built with Smriti</h2>
|
||||
<p>The coordination substrate was built with Claude Code and Codex working in parallel on the same codebase, coordinating through Smriti's own state. <code>smriti metrics smriti-dev</code>:</p>
|
||||
<div class="metrics">
|
||||
<div class="metric"><span class="metric-value">117</span><span class="metric-label">checkpoints</span></div>
|
||||
<div class="metric"><span class="metric-value">70 / 47</span><span class="metric-label">Claude Code / Codex</span></div>
|
||||
<div class="metric"><span class="metric-value">61</span><span class="metric-label">cross-agent continuations</span></div>
|
||||
<div class="metric"><span class="metric-value">77</span><span class="metric-label">claims, 96% completion</span></div>
|
||||
<div class="metric"><span class="metric-value">7</span><span class="metric-label">milestones</span></div>
|
||||
</div>
|
||||
<p class="proof-text">The strongest proof: two agents started near-simultaneously, read the same task surface (four tasks with stable IDs and intent hints), and independently picked different complementary tasks — one chose <code>[test]</code>, the other chose <code>[implement]</code> — without any human routing. No orchestrator. No task queue. Just structured metadata on shared state.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── Screenshots ───── -->
|
||||
<section class="section screenshots">
|
||||
<div class="container">
|
||||
<h2>What it looks like</h2>
|
||||
<figure>
|
||||
<img src="assets/lineage-dashboard.png" alt="Smriti dashboard — project timeline with checkpoint cards, author badges, and attention signals">
|
||||
<figcaption>Project timeline — checkpoint cards with author attribution, note indicators, and needs-attention signals.</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="assets/cli-state-and-metrics.png" alt="Smriti CLI — output of smriti state --compact and smriti metrics">
|
||||
<figcaption>What every agent reads at session start (<code>smriti state --compact</code>) and the project health KPIs (<code>smriti metrics</code>).</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="assets/checkpoint-detail.png" alt="Smriti checkpoint detail with structured tasks and a milestone note">
|
||||
<figcaption>A structured checkpoint — tasks with intent badges and stable IDs, plus a founder milestone note.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── Try it ───── -->
|
||||
<section class="section try" id="try">
|
||||
<div class="container">
|
||||
<h2>Try it in 5 minutes</h2>
|
||||
<p>The core coordination loop runs entirely on a local SQLite file. <strong>No Docker, no API keys, no cloud required.</strong> API keys come in only for optional LLM-assisted features (extract, draft, review).</p>
|
||||
<p class="muted">You'll need Python 3.11+ and Node 20.19+ / 22.12+.</p>
|
||||
<ol class="try-steps">
|
||||
<li>
|
||||
<h3>1. Install</h3>
|
||||
<pre><code>git clone https://github.com/himanshudongre/smriti
|
||||
cd smriti
|
||||
make setup-local # backend venv + CLI + frontend, no Docker
|
||||
make dev-local # backend on http://localhost:8000
|
||||
source backend/.venv/bin/activate</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<h3>2. Confirm — <code>smriti doctor</code></h3>
|
||||
<pre><code>smriti doctor</code></pre>
|
||||
<p>Backend reachable, CLI/backend versions aligned, providers configured. If anything's off, doctor tells you what.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>3. See it work — <code>smriti quickstart</code></h3>
|
||||
<pre><code>smriti quickstart</code></pre>
|
||||
<p>Seeds a demo Space (a rate-limit feature built by two agents, with a branch explored and dropped) and prints a guided ~3-minute walkthrough. Works without API keys.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>4. Attach your own project</h3>
|
||||
<pre><code>cd /path/to/your-project
|
||||
smriti init my-project</code></pre>
|
||||
<p>Writes the skill packs, the SessionStart hook, and <code>.smriti.json</code> into the project directory, binding the repo to the new Space.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>5. Daily workflow — no <code><space></code> needed</h3>
|
||||
<pre><code>smriti state # continuation brief
|
||||
smriti current # compact snapshot
|
||||
smriti metrics # coordination KPIs</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ───── CTA ───── -->
|
||||
<section class="section cta">
|
||||
<div class="container">
|
||||
<h2>Try it. Star it. Build with it.</h2>
|
||||
<p>Smriti is open source. It works today for solo builders running multi-agent workflows.</p>
|
||||
<div class="cta-buttons">
|
||||
<a class="btn btn-primary" href="https://github.com/himanshudongre/smriti">Star on GitHub</a>
|
||||
<a class="btn btn-secondary" href="https://github.com/himanshudongre/smriti#getting-started">Read the docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<p>Smriti — open source · <a href="https://github.com/himanshudongre/smriti">GitHub</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
499
website/styles.css
Normal file
499
website/styles.css
Normal file
|
|
@ -0,0 +1,499 @@
|
|||
/* ==========================================================================
|
||||
Smriti — landing page styles
|
||||
Pure HTML + CSS. No JS framework, no webfonts. System font stack so the
|
||||
page loads instantly anywhere.
|
||||
========================================================================== */
|
||||
|
||||
/* ── Tokens ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
--bg: #0c0c10;
|
||||
--bg-elevated: #15151b;
|
||||
--bg-code-inline: rgba(255, 255, 255, 0.06);
|
||||
--border: #26262e;
|
||||
--border-subtle: rgba(255, 255, 255, 0.08);
|
||||
--text: #e8e8ec;
|
||||
--text-muted: #a0a0aa;
|
||||
--accent: #f5c773;
|
||||
--accent-hover: #f8d28d;
|
||||
--accent-on: #1a1208;
|
||||
}
|
||||
|
||||
/* ── Reset + base ────────────────────────────────────────────────────────── */
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
img { max-width: 100%; height: auto; display: block; }
|
||||
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
code, pre {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", "Roboto Mono",
|
||||
"Liberation Mono", Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--bg-code-inline);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 4px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 1rem 1.25rem;
|
||||
overflow-x: auto;
|
||||
line-height: 1.55;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Layout container ────────────────────────────────────────────────────── */
|
||||
|
||||
.container {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
/* ── Header / nav ────────────────────────────────────────────────────────── */
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1.1rem 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(12, 12, 16, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.brand:hover { text-decoration: none; }
|
||||
|
||||
.site-header nav {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.site-header nav a {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.site-header nav a:hover { color: var(--text); text-decoration: none; }
|
||||
|
||||
/* ── Hero ────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
padding: 5rem 0 4rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 3.6rem);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-em { color: var(--accent); }
|
||||
|
||||
.hero-sub {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 680px;
|
||||
margin: 0 0 2.5rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.hero-sub em {
|
||||
color: var(--text);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.7rem 1.4rem;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ── Sections (shared) ───────────────────────────────────────────────────── */
|
||||
|
||||
.section {
|
||||
padding: 4rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: clamp(1.6rem, 3vw, 2.1rem);
|
||||
margin: 0 0 1.25rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 0.5rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.section .subhead {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section p { margin: 0 0 1rem; }
|
||||
|
||||
.section .lede {
|
||||
font-size: 1.1rem;
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
.section em {
|
||||
font-style: italic;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.section .caption {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 1.25rem;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.section .muted { color: var(--text-muted); }
|
||||
|
||||
/* ── Git analogy table ───────────────────────────────────────────────────── */
|
||||
|
||||
.analogy-table {
|
||||
margin: 1.5rem 0 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.analogy-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.analogy-table th,
|
||||
.analogy-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.analogy-table th {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.analogy-table td:first-child {
|
||||
width: 32%;
|
||||
color: var(--text-muted);
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.analogy-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ── How it works ────────────────────────────────────────────────────────── */
|
||||
|
||||
.how-steps {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 2rem 0;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.how-steps > li {
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.how-steps h3 {
|
||||
color: var(--accent);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.how-steps p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.how-steps p code { color: var(--text); }
|
||||
|
||||
/* ── What Smriti is not ──────────────────────────────────────────────────── */
|
||||
|
||||
.not-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.not-item {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.not-item h3 {
|
||||
color: var(--accent);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.not-item p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.constraints {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
.constraints li {
|
||||
padding: 0.65rem 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.constraints li:last-child { border-bottom: none; }
|
||||
|
||||
.constraints strong {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Metrics / proof ─────────────────────────────────────────────────────── */
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.metric {
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: clamp(1.5rem, 2.5vw, 1.9rem);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 0.4rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.proof-text {
|
||||
color: var(--text-muted);
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
/* ── Screenshots ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.screenshots figure {
|
||||
margin: 1.75rem 0 2.5rem;
|
||||
}
|
||||
|
||||
.screenshots img {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.screenshots figcaption {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.75rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.screenshots figcaption code { font-style: normal; }
|
||||
|
||||
/* ── Try it ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.try-steps {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.75rem 0 0;
|
||||
}
|
||||
|
||||
.try-steps > li { margin-bottom: 1.75rem; }
|
||||
|
||||
.try-steps h3 {
|
||||
color: var(--text);
|
||||
margin-bottom: 0.6rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.try-steps p {
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* ── CTA + footer ────────────────────────────────────────────────────────── */
|
||||
|
||||
.cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta p {
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.5rem;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 2rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-footer p { margin: 0; }
|
||||
.site-footer a { color: var(--text-muted); }
|
||||
.site-footer a:hover { color: var(--text); text-decoration: none; }
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 720px) {
|
||||
body { font-size: 16px; }
|
||||
.hero { padding: 3.5rem 0 2.5rem; }
|
||||
.hero-sub { font-size: 1.05rem; }
|
||||
.section { padding: 3rem 0; }
|
||||
.not-grid { grid-template-columns: 1fr; }
|
||||
.metrics {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.metrics .metric:nth-child(5) { grid-column: 1 / -1; }
|
||||
.analogy-table { font-size: 0.88rem; }
|
||||
.analogy-table th,
|
||||
.analogy-table td { padding: 0.6rem 0.6rem; }
|
||||
.analogy-table td:first-child { width: 38%; }
|
||||
.site-header nav { gap: 0.9rem; font-size: 0.9rem; }
|
||||
.container { padding: 0 1.25rem; }
|
||||
pre { font-size: 0.85rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.hero-cta { flex-direction: column; align-items: stretch; }
|
||||
.hero-cta .btn { text-align: center; }
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue