artheru/amerc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: responsive mobile layout (0.77.0)

Browse Source 
- on phones the docs kept the desktop sidebar+content row, squeezing the prose
  into ~240px (sidebar ate the rest) — poor reading on a public docs surface
- stack on mobile (<=760px): sidebar becomes a compact scrollable doc-picker
  on top (max 210px), content goes full-width below with comfortable padding
- verified live (390px): layout column, content full-width (390 vs old 240),
  no horizontal overflow
This commit is contained in:
artheru 2026-06-10 11:14:46 +08:00
parent 1e387c270c
commit f063e9ae80
4 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0e0a14" /> <meta name="theme-color" content="#0e0a14" />
<meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." /> <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
<meta name="version" content="0.76.0-docsland" /> <meta name="version" content="0.77.0-docsmobile" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" /> <link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "amerc-site", "name": "amerc-site",
"version": "0.76.0-docsland", "version": "0.77.0-docsmobile",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

2
src/Scene2D.jsx
View File

@ -10,7 +10,7 @@ import { api } from './api.js';
const Menu = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>); const Menu = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>);
const X = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>); const X = ({ size = 20 }) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>);
const RELEASE = '0.76.0-docsland'; const RELEASE = '0.77.0-docsmobile';
const NAV = [ const NAV = [
{ id: 'home', label: 'Tavern' }, { id: 'home', label: 'Tavern' },

7
src/styles.css
View File

@ -1480,3 +1480,10 @@ button {
.ap-empty-search-ico { font-size: 34px; display: block; margin-bottom: 10px; opacity: 0.85; } .ap-empty-search-ico { font-size: 34px; display: block; margin-bottom: 10px; opacity: 0.85; }
.ap-empty-search h3 { color: #fff; font-size: 18px; margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; } .ap-empty-search h3 { color: #fff; font-size: 18px; margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; }
.ap-empty-search p { margin: 0 0 16px; font-size: 13px; } .ap-empty-search p { margin: 0 0 16px; font-size: 13px; }
/* docs responsive — stack on mobile so the prose gets full width (0.77) */
@media (max-width: 760px) {
.docs { flex-direction: column; }
.docs-side { width: 100%; max-height: 210px; overflow-y: auto; border-right: none; border-bottom: 2px solid #1b2536; }
.docs-main { padding: 20px 16px; }
}