feat(web): mobile-friendly + responsive sqlritedb.com (SQLR-37) (#119)

Mobile-first pass over the marketing site so SEO + Core Web Vitals
ranking signals don't leak before the rest of the SEO ticket sequence
lands. Renders cleanly with no horizontal scroll at 375 / 390 / 768 /
1024px+ breakpoints; tap targets on primary controls are >= 44px.

- nav.tsx: client-side hamburger + full-width drawer below 760px;
  body-scroll lock and Esc-to-close while open.
- docs/page.tsx: sticky <details> "On this page" panel surfaces the
  full TOC on phones (desktop sidebar + right TOC unchanged).
- layout.tsx: viewport export with device-width / dark themeColor so
  iOS Safari + Chrome mobile chrome stop flashing white.
- globals.css: 900 / 640 / 380px responsive layer — wrap padding,
  hero / CTA / sec-head spacing, terminal / install-bar / SDK / bench /
  footer / desktop showcase tuning, architecture row stacking, SQL
  table -> stacked cards under 640px, SDK tab bar -> horizontal scroll,
  hamburger + mobile-menu + docs-mobile-menu styles. Global guard
  switched to html { overflow-x: clip } to preserve position: sticky.
- README.md: documents the responsive layers + section-local
  breakpoint convention for new sections.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: joaoh82

web/README.md

@@ -92,6 +92,43 @@ roadmap timeline, etc.) is intentionally hand-rolled — it ports the
 prototype's `styles.css` 1:1 rather than reaching for component-library
 abstractions.
 
+## Responsive design
+
+The site is mobile-first and verified at 375px (iPhone SE), 390px
+(iPhone 14), 768px (iPad), and 1024px+. Key conventions:
+
+- **Breakpoints** live at the bottom of [`src/app/globals.css`](src/app/globals.css):
+  900px (tablet), 760px (mobile nav cutover), 640px (phone), and 380px
+  (very small phones). Section-level grids declare their own breakpoints
+  inline near their styles (features, bench bars, footer, etc.).
+- **Nav** ([`src/components/nav.tsx`](src/components/nav.tsx)) is a
+  client component. Below 760px the inline links collapse into a 44×44
+  hamburger that opens a full-width drawer; Esc closes; the body scroll
+  is locked while open.
+- **Docs** ([`src/app/docs/page.tsx`](src/app/docs/page.tsx)) hides the
+  desktop sidebar and on-page TOC under 1000px and 720px respectively
+  and shows a sticky `<details>`-driven section list in their place.
+- **Tap targets** — primary buttons (`.btn`), the hamburger, install-bar
+  copy, mobile menu links, and the docs section toggle are all ≥ 44px
+  tall on phones. Footer / docs sidebar inline nav links stay at ~36px,
+  which is the common compromise for dense navigation lists.
+- **Horizontal scroll** is guarded globally with `html { overflow-x:
+  clip }`. We use `clip` instead of `hidden` so `position: sticky` keeps
+  working for the nav and the docs sidebar. Long URLs / unbroken tokens
+  in prose use `overflow-wrap: anywhere` so they don't blow out the
+  viewport.
+- **Tables and code blocks** scroll horizontally inside their container
+  (`overflow-x: auto`); the SQL surface table on `/` reflows into
+  stacked cards under 640px since its second column is a long pill list.
+- **Viewport / theme color** — set via the `viewport` export in
+  [`src/app/layout.tsx`](src/app/layout.tsx); the dark `#0b0c0e`
+  `themeColor` keeps mobile browser chrome from flashing white.
+
+When adding new sections, declare the breakpoint logic alongside the
+section's styles rather than at the bottom of the file — it keeps the
+section self-contained and the global breakpoint block reserved for
+typography / spacing baseline tweaks.
+
 ## Updating the version
 
 The displayed version is in [`src/lib/site.ts`](src/lib/site.ts). Update it

web/src/app/docs/page.tsx

@@ -58,6 +58,39 @@ export default function DocsPage() {
         }}
       />
       <Nav variant="docs" />
+      <details className="docs-mobile-menu">
+        <summary>
+          <span>On this page</span>
+        </summary>
+        <div className="docs-mobile-menu-panel">
+          <div className="section-label">Getting started</div>
+          <a href="#install">Install</a>
+          <a href="#first-db">Your first database</a>
+          <a href="#repl">Using the REPL</a>
+          <a href="#persistence">Persistence &amp; the WAL</a>
+          <a href="#transactions">Transactions</a>
+          <a href="#joins">JOINs</a>
+          <a href="#aggregates">GROUP BY &amp; aggregates</a>
+          <a href="#alter-drop">ALTER / DROP / VACUUM</a>
+          <a href="#prepared">Prepared statements</a>
+          <a href="#pragma">PRAGMA</a>
+          <a href="#vector">Vector search</a>
+          <a href="#fts">Full-text search</a>
+          <a href="#desktop">Desktop app</a>
+          <a href="#mcp">MCP server</a>
+          <div className="section-label">Embedding</div>
+          <a href="#sdk-rust">Rust crate</a>
+          <a href="#sdk-python">Python</a>
+          <a href="#sdk-node">Node.js</a>
+          <a href="#sdk-go">Go</a>
+          <a href="#sdk-c">C FFI</a>
+          <a href="#sdk-wasm">WASM</a>
+          <div className="section-label">Reference</div>
+          <a href="#supported">Supported SQL</a>
+          <a href="#errors">Errors &amp; limits</a>
+          <a href="#contributing">Contributing</a>
+        </div>
+      </details>
       <div className="docs-shell">
         <aside className="docs-side">
           <div className="section-label">Getting started</div>