Reset poster example figure margins for narrow screens

apps/wiki/src/content/layouts/documents.ts

@@ -15,7 +15,7 @@ const sourceNote='原始拼图仅 736×980，每张约 112×173 像素。小字
 export const legacyLayoutIds=['5971fc3d2563aa8005df5c13','9ad47529a7eaeee1fef771ca','7f158059ba3a2b80dd750cc3','370d1881f229af63f1946df9','31a978620a0d388f84772c95','c34cf81137654ad38850c9bd','dbe94ccaa708bd120549ae86','768587e537d6f1ee77a51961','0962c2bf1c558e0e32425f59','347b732caa4af4afa43b65a4','3edf144a443c1fdf23827fb3','97227671a9dc95c4948e591b'];
 export function reactExample(id:string){return `// components/Example.tsx\nimport ReferenceLayout from './reference-layouts/ReferenceLayout';\nexport default function Example() {\n  return <ReferenceLayout id="${id}" />;\n}\n// 原样模式使用该 ID 的独立图层，保留原字形与原构图。\n// 组件、manifest.json 和 public/layout-reference 素材必须一起复制。`}
 export function nextExample(id:string){return `// app/designs/${id}/page.tsx\nimport type { Metadata } from 'next';\nimport ReferenceLayout from '@/components/reference-layouts/ReferenceLayout';\nexport const metadata: Metadata = {title:'${id} · 原图对应排版'};\nexport default function Page() {\n  return <main><ReferenceLayout id="${id}" /></main>;\n}\n// 沿用项目根布局。@/ 指向源码根，组件可直接作为 Server Component。`}
-export function htmlExample(id:string){return `<!doctype html>\n<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${id}</title>\n<style>body{margin:0}.canvas{position:relative;width:min(100%,672px);background:#f4f3ee}.canvas img{position:absolute;display:block}</style></head>\n<body><figure id="canvas" class="canvas" aria-label="${id} 原图构件重组"></figure>\n<script type="module">\nconst id='${id}';\nconst response=await fetch('/layout-reference/'+id+'/manifest.json');\nif(!response.ok)throw Error('构件清单未加载');\nconst m=await response.json();\nif(m.id!==id)throw Error('版面 ID 不一致');\nconst canvas=document.getElementById('canvas');\ncanvas.style.aspectRatio=m.width+'/'+m.height;\nconst bg=document.createElement('img');bg.src=m.background;bg.alt='';bg.style.cssText='inset:0;width:100%;height:100%';canvas.append(bg);\nfor(const e of m.elements){\n const [x,y,w,h]=e.box;const img=document.createElement('img');\n img.src=e.asset;img.dataset.component=id+'/'+e.id;img.dataset.kind=e.kind;\n img.alt=e.kind==='text'?(e.text||e.role+'：未辨识原字形'):'';\n Object.assign(img.style,{left:x/m.width*100+'%',top:y/m.height*100+'%',width:w/m.width*100+'%',height:h/m.height*100+'%',zIndex:e.kind==='text'?'3':e.kind==='decoration'?'2':'1'});\n canvas.append(img);\n}\n</script><!-- 同站点服务 /layout-reference 素材；不要以 file:// 打开。 --></body></html>`}
+export function htmlExample(id:string){return `<!doctype html>\n<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${id}</title>\n<style>body{margin:0}.canvas{margin:0;position:relative;width:min(100%,672px);background:#f4f3ee}.canvas img{position:absolute;display:block}</style></head>\n<body><figure id="canvas" class="canvas" aria-label="${id} 原图构件重组"></figure>\n<script type="module">\nconst id='${id}';\nconst response=await fetch('/layout-reference/'+id+'/manifest.json');\nif(!response.ok)throw Error('构件清单未加载');\nconst m=await response.json();\nif(m.id!==id)throw Error('版面 ID 不一致');\nconst canvas=document.getElementById('canvas');\ncanvas.style.aspectRatio=m.width+'/'+m.height;\nconst bg=document.createElement('img');bg.src=m.background;bg.alt='';bg.style.cssText='inset:0;width:100%;height:100%';canvas.append(bg);\nfor(const e of m.elements){\n const [x,y,w,h]=e.box;const img=document.createElement('img');\n img.src=e.asset;img.dataset.component=id+'/'+e.id;img.dataset.kind=e.kind;\n img.alt=e.kind==='text'?(e.text||e.role+'：未辨识原字形'):'';\n Object.assign(img.style,{left:x/m.width*100+'%',top:y/m.height*100+'%',width:w/m.width*100+'%',height:h/m.height*100+'%',zIndex:e.kind==='text'?'3':e.kind==='decoration'?'2':'1'});\n canvas.append(img);\n}\n</script><!-- 同站点服务 /layout-reference 素材；不要以 file:// 打开。 --></body></html>`}
 const router:GuidanceDocument={
  path:'premium-layout/router',title:'高级感排版 · 27 张原图 Router',collection:'高级感排版',
  resources:[image('source-map','27 张原图编号对应图','/layout-reference/numbered-source.png'),file('inspector','27 张构件检查器','/layout-reference/index.html'),file('index-json','27 张机器索引','/layout-reference/index.json'),file('runtime','React / TSX 完整组件源文件','/layout-reference/ReferenceLayout.tsx'),file('manifest','React 组件配套 manifest.json','/layout-reference/manifest.json'),file('bundle','27 张完整源码与素材 ZIP','/layout-reference/layout-reference-toolkit.zip'),...layouts.map(l=>doc(l.id,l.id+' · '+l.name))],