add: page

.github/workflows/pages.yml

@@ -0,0 +1,30 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs
+      - id: deployment
+        uses: actions/deploy-pages@v4

docs/styles.css

@@ -0,0 +1,241 @@
+:root {
+  color-scheme: light dark;
+  --background: #fcfcfa;
+  --foreground: #151515;
+  --muted: #6a6a66;
+  --line: #deded8;
+  --accent: #e9ff66;
+  --code-background: #151515;
+  --code-foreground: #fcfcfa;
+  --code-panel: #282825;
+  --code-accent: #e9ff66;
+}
+
+* { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+a { color: inherit; }
+
+.site-header,
+main,
+footer {
+  width: min(100% - 48px, 1040px);
+  margin: 0 auto;
+}
+
+.site-header {
+  height: 72px;
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.brand,
+footer span {
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.brand { text-decoration: none; }
+
+nav { display: flex; gap: 20px; }
+
+nav a,
+footer,
+.quiet-link {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+nav a:hover,
+.quiet-link:hover,
+footer a:hover { color: var(--foreground); }
+
+.hero {
+  max-width: 800px;
+  padding: 132px 0 120px;
+}
+
+.kicker {
+  margin: 0 0 18px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+h1,
+h2,
+h3,
+p { margin-top: 0; }
+
+h1,
+h2 {
+  letter-spacing: -0.065em;
+  line-height: 0.98;
+}
+
+h1 {
+  margin-bottom: 25px;
+  font-size: clamp(48px, 8vw, 90px);
+}
+
+h2 {
+  margin-bottom: 0;
+  font-size: clamp(32px, 5vw, 52px);
+}
+
+.hero > p:not(.kicker) {
+  max-width: 460px;
+  color: var(--muted);
+  font-size: 20px;
+  line-height: 1.5;
+}
+
+.actions {
+  display: flex;
+  gap: 22px;
+  align-items: center;
+  margin-top: 32px;
+}
+
+.button {
+  display: inline-block;
+  padding: 12px 16px;
+  border: 1px solid var(--foreground);
+  background: var(--foreground);
+  color: white;
+  font-size: 14px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.button:hover { background: var(--accent); color: var(--foreground); }
+
+.section {
+  border-top: 1px solid var(--line);
+  padding: 76px 0;
+}
+
+.section-title { margin-bottom: 42px; }
+
+.code-list {
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--line);
+  list-style: none;
+}
+
+.code-list li {
+  display: grid;
+  grid-template-columns: 120px 1fr auto;
+  gap: 20px;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--line);
+  align-items: baseline;
+}
+
+.code-list strong { font-size: 20px; letter-spacing: -0.04em; }
+
+.code-list span,
+.fine-print,
+.callout p { color: var(--muted); }
+
+.code-list em {
+  color: var(--muted);
+  font-size: 12px;
+  font-style: normal;
+  white-space: nowrap;
+}
+
+.fine-print { max-width: 680px; margin: 20px 0 0; font-size: 13px; line-height: 1.55; }
+
+.usage {
+  background: var(--code-background);
+  color: var(--code-foreground);
+  box-shadow: 0 0 0 100vmax var(--code-background);
+  clip-path: inset(0 -100vmax);
+}
+
+.usage .kicker { color: #a7a7a0; }
+
+.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+
+.examples h3 { margin-bottom: 14px; font-size: 15px; }
+
+pre {
+  min-height: 128px;
+  margin: 0;
+  padding: 17px;
+  overflow-x: auto;
+  background: var(--code-panel);
+  color: var(--code-accent);
+  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.callout {
+  display: grid;
+  grid-template-columns: 1fr minmax(220px, 330px) auto;
+  gap: 38px;
+  padding: 76px 0;
+  align-items: end;
+}
+
+.callout p { margin: 0; line-height: 1.55; }
+
+.button-light { align-self: end; }
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 26px 0 36px;
+  border-top: 1px solid var(--line);
+}
+
+footer a { color: inherit; }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #151515;
+    --foreground: #f2f2ed;
+    --muted: #adada6;
+    --line: #3a3a37;
+    --accent: #d9ff52;
+    --code-background: #242421;
+    --code-foreground: #f2f2ed;
+    --code-panel: #151515;
+    --code-accent: #d9ff52;
+  }
+
+  .usage .kicker { color: #adada6; }
+}
+
+@media (max-width: 680px) {
+  .site-header,
+  main,
+  footer { width: min(100% - 32px, 1040px); }
+
+  .hero { padding: 92px 0 86px; }
+
+  .code-list li { grid-template-columns: 82px 1fr; gap: 10px; }
+
+  .code-list em { grid-column: 2; }
+
+  .examples,
+  .callout { grid-template-columns: 1fr; }
+
+  .callout { gap: 24px; }
+
+  .button-light { justify-self: start; }
+
+  footer { flex-direction: column; gap: 10px; }
+}