Improve small text contrast on dark layout panels
wiki CI and deployment / verify-and-deploy (push) Failing after 3m39s
wiki CI and deployment / verify-and-deploy (push) Failing after 3m39s
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
@@ -6,7 +6,7 @@ export {recipes};
|
||||
export const baseCss=`*{box-sizing:border-box}
|
||||
body{margin:0;background:#e4e6e1;color:#243230}
|
||||
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#637574;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
||||
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
||||
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
||||
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
||||
@@ -58,6 +58,6 @@ export const layoutDocuments:GuidanceDocument[]=[{
|
||||
},...recipes.map((r,i):GuidanceDocument=>({
|
||||
path:path(r.slug),title:`${String(i+1).padStart(2,'0')} · ${r.name}`,collection:'高级感排版',
|
||||
resources:[image(r.slug,r.name+' · 结构示意，非代码截图'),doc('router','总览 Router · 选择、技术栈与交付协议'),{id:'demo',kind:'document',title:'打开可运行 HTML 示例',href:'/layout-recipes/'+r.slug+'.html'}],
|
||||
blocks:[p(`${r.name}：${r.scene}。本篇是一套可执行的设计配方；封面是独立绘制的构图示意，实际示例以 HTML/CSS 与 React 组件为准。`),h('何时使用与停止条件'),p(`适用：${r.scene}。不适用：${r.avoid}。标题默认 4—8 个汉字、正文不超过 40 字；超出时先拆页或转阅读版。品牌色与素材可替换，保持构图关系。`),h('构图参数'),p(r.geometry),p('默认 1080×1440，3:4；纸白 #f5f3ec，灰绿 #9aa6a5，深灰绿 #637574，文字 #243230。字号按画板缩放：1em=10.8px，正文 2.22em≈24px。网页阅读模式、字体与图片替换规则由总览 Router 统一管理。'),h('制作步骤'),p(r.steps),h('HTML / CSS：完整独立文件'),p('复制以下完整代码到 poster.html；默认无需网络资源。色块为占位，替换素材时遵守 Router 的图像与版权协议。'),code(recipeHtml(r)),links('demo'),h('React / TSX：可复用组件'),p(`保存为 components/layouts/${r.slug}/LayoutPoster.tsx；支持 title 与 subtitle 字符串 props。把下段 CSS 保存为同目录 poster.css，并在 React 应用入口导入。静态组件不需要 use client。`),code(recipeReact(r)),h('React 与 Next.js 共用 CSS'),code(recipeCss(r)),h('Next.js App Router：路由接入'),p(`下面的 page.tsx 对应 /designs/${r.slug}，使用上面的组件和 CSS。新项目根布局、路径别名、next/image、next/font/local 与交互边界见 Router；已有项目保留自己的根布局。`),code(recipeNext(r)),h('本构图的验收标准'),p(r.check),p('共同检查：1080×1440 下标题完整、正文与底部版本行不重叠；375px 和 768px 下等比海报无意外横向滚动。若用于网页正文，启用 Router 的阅读模式并逐项检查。所有示例只有系统字体与结构占位，替换真实标题、字体和图片后须重新验收。'),h('变体与修改顺序'),p('先替换真实内容，再调整标题字号与说明长度，随后微调图形位置；最后才改变背景色和装饰。只调整该 slug 下的布局规则，避免影响其他构图。交付保留 HTML 或 TSX/CSS 源码、素材说明与导出文件。'),links('router'),
|
||||
blocks:[p(`${r.name}：${r.scene}。本篇是一套可执行的设计配方；封面是独立绘制的构图示意，实际示例以 HTML/CSS 与 React 组件为准。`),h('何时使用与停止条件'),p(`适用：${r.scene}。不适用：${r.avoid}。标题默认 4—8 个汉字、正文不超过 40 字；超出时先拆页或转阅读版。品牌色与素材可替换，保持构图关系。`),h('构图参数'),p(r.geometry),p('默认 1080×1440，3:4；纸白 #f5f3ec，灰绿 #9aa6a5，深灰绿 #5d706e，文字 #243230。字号按画板缩放：1em=10.8px，正文 2.22em≈24px。网页阅读模式、字体与图片替换规则由总览 Router 统一管理。'),h('制作步骤'),p(r.steps),h('HTML / CSS：完整独立文件'),p('复制以下完整代码到 poster.html；默认无需网络资源。色块为占位，替换素材时遵守 Router 的图像与版权协议。'),code(recipeHtml(r)),links('demo'),h('React / TSX：可复用组件'),p(`保存为 components/layouts/${r.slug}/LayoutPoster.tsx；支持 title 与 subtitle 字符串 props。把下段 CSS 保存为同目录 poster.css，并在 React 应用入口导入。静态组件不需要 use client。`),code(recipeReact(r)),h('React 与 Next.js 共用 CSS'),code(recipeCss(r)),h('Next.js App Router：路由接入'),p(`下面的 page.tsx 对应 /designs/${r.slug}，使用上面的组件和 CSS。新项目根布局、路径别名、next/image、next/font/local 与交互边界见 Router；已有项目保留自己的根布局。`),code(recipeNext(r)),h('本构图的验收标准'),p(r.check),p('共同检查：1080×1440 下标题完整、正文与底部版本行不重叠；375px 和 768px 下等比海报无意外横向滚动。若用于网页正文，启用 Router 的阅读模式并逐项检查。所有示例只有系统字体与结构占位，替换真实标题、字体和图片后须重新验收。'),h('变体与修改顺序'),p('先替换真实内容，再调整标题字号与说明长度，随后微调图形位置；最后才改变背景色和装饰。只调整该 slug 下的布局规则，避免影响其他构图。交付保留 HTML 或 TSX/CSS 源码、素材说明与导出文件。'),links('router'),
|
||||
],
|
||||
}))];
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"check": "两块不接触；主块面积大于副块；标题与图块相距至少 24px；替换图片后两个容器比例不变。",
|
||||
"css": ".sheet.offset-panels .panel-a{left:18%;top:16%;width:68%;height:37%}.sheet.offset-panels .panel-b{left:37%;top:57%;width:49%;height:31%;background:var(--deep)}.sheet.offset-panels .title{left:7%;top:6%;font-size:6em}.sheet.offset-panels .copy{left:7%;top:66%;width:25%}",
|
||||
"markup": "<div class=\"panel panel-a\" aria-hidden=\"true\"></div>\n<div class=\"panel panel-b\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">秩序之间</h1>\n<p class=\"copy\">以留白建立关系，\n让视线缓慢移动。</p>",
|
||||
"shapes": "<rect x=\"194\" y=\"230\" width=\"734\" height=\"533\" fill=\"#9aa6a5\"/><rect x=\"400\" y=\"821\" width=\"529\" height=\"446\" fill=\"#637574\"/>"
|
||||
"shapes": "<rect x=\"194\" y=\"230\" width=\"734\" height=\"533\" fill=\"#9aa6a5\"/><rect x=\"400\" y=\"821\" width=\"529\" height=\"446\" fill=\"#5d706e\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "vertical-rail",
|
||||
@@ -21,7 +21,7 @@
|
||||
"check": "竖排标题不超过 8 个汉字；拉丁单词不要逐字竖排；正文横排；文字不进入主图安全区。",
|
||||
"css": ".sheet.vertical-rail .panel-a{left:7%;top:12%;width:64%;height:76%;background:var(--deep)}.sheet.vertical-rail .title{right:8%;top:13%;writing-mode:vertical-rl;font-size:6.3em;letter-spacing:.15em}.sheet.vertical-rail .copy{left:7%;bottom:5%;width:64%}",
|
||||
"markup": "<div class=\"panel panel-a\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">静物的秩序</h1>\n<p class=\"copy\">空间研究 / 第二辑 / 2026</p>",
|
||||
"shapes": "<rect x=\"76\" y=\"173\" width=\"691\" height=\"1094\" fill=\"#637574\"/>"
|
||||
"shapes": "<rect x=\"76\" y=\"173\" width=\"691\" height=\"1094\" fill=\"#5d706e\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "monumental-type",
|
||||
@@ -33,7 +33,7 @@
|
||||
"check": "裁切只作用于装饰字；H1 与正文不裁切；英文与主题有语义关联；字号层级至少 3:1。",
|
||||
"css": ".sheet.monumental-type .panel-a{left:0;bottom:0;width:100%;height:40%;background:var(--deep)}.sheet.monumental-type .display{position:absolute;left:-4%;top:26%;font:bold 24em/.8 Georgia,serif;letter-spacing:-.08em}.sheet.monumental-type .title{left:7%;top:10%;font-size:6em}.sheet.monumental-type .copy{left:7%;bottom:10%;width:60%;color:var(--paper)}",
|
||||
"markup": "<div class=\"panel panel-a\" aria-hidden=\"true\"></div>\n<div class=\"display\" aria-hidden=\"true\">FORM</div>\n<h1 class=\"title\">形式与留白</h1>\n<p class=\"copy\">让一个词成为画面的重心。\nDESIGN STUDIES / 2026</p>",
|
||||
"shapes": "<rect x=\"0\" y=\"864\" width=\"1080\" height=\"576\" fill=\"#637574\"/><text x=\"-40\" y=\"780\" font-family=\"Georgia,serif\" font-size=\"270\" font-weight=\"bold\" letter-spacing=\"-25\">FORM</text>"
|
||||
"shapes": "<rect x=\"0\" y=\"864\" width=\"1080\" height=\"576\" fill=\"#5d706e\"/><text x=\"-40\" y=\"780\" font-family=\"Georgia,serif\" font-size=\"270\" font-weight=\"bold\" letter-spacing=\"-25\">FORM</text>"
|
||||
},
|
||||
{
|
||||
"slug": "orbital-rings",
|
||||
@@ -45,7 +45,7 @@
|
||||
"check": "窄屏仍为正圆；环线不穿过文字；不要把装饰环误称数据刻度；有动画时尊重减少动态偏好。",
|
||||
"css": ".sheet.orbital-rings .orbit{position:absolute;left:14%;top:16%;width:72%;aspect-ratio:1;border-radius:50%;background:var(--deep);box-shadow:0 0 0 1.2em var(--paper),0 0 0 1.3em var(--muted),0 0 0 2.5em var(--paper),0 0 0 2.6em var(--muted),0 0 0 3.8em var(--paper),0 0 0 3.9em var(--muted)}.sheet.orbital-rings .title{left:7%;bottom:15%;font-size:6.5em}.sheet.orbital-rings .copy{left:7%;bottom:6%;width:80%}",
|
||||
"markup": "<div class=\"orbit\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">周而复始</h1>\n<p class=\"copy\">时间的形状 / ANNUAL REVIEW / 2026</p>",
|
||||
"shapes": "<g fill=\"none\" stroke=\"#9aa6a5\" stroke-width=\"2\"><circle cx=\"540\" cy=\"620\" r=\"438\"/><circle cx=\"540\" cy=\"620\" r=\"424\"/><circle cx=\"540\" cy=\"620\" r=\"410\"/></g><circle cx=\"540\" cy=\"620\" r=\"389\" fill=\"#637574\"/>"
|
||||
"shapes": "<g fill=\"none\" stroke=\"#9aa6a5\" stroke-width=\"2\"><circle cx=\"540\" cy=\"620\" r=\"438\"/><circle cx=\"540\" cy=\"620\" r=\"424\"/><circle cx=\"540\" cy=\"620\" r=\"410\"/></g><circle cx=\"540\" cy=\"620\" r=\"389\" fill=\"#5d706e\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "organic-ellipse",
|
||||
@@ -57,7 +57,7 @@
|
||||
"check": "椭圆与标题无交叠；出血边缘不生成横向滚动；曲线的视觉重量在右侧；正文底部安全距至少 64px。",
|
||||
"css": ".sheet.organic-ellipse .oval{position:absolute;left:24%;top:27%;width:102%;height:62%;border-radius:50%;transform:rotate(-12deg);background:var(--deep)}.sheet.organic-ellipse .title{left:7%;top:10%;font-size:6.5em}.sheet.organic-ellipse .copy{left:7%;bottom:7%;width:40%}",
|
||||
"markup": "<div class=\"oval\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">缓慢生长</h1>\n<p class=\"copy\">一条曲线，\n一处停顿。</p>",
|
||||
"shapes": "<ellipse cx=\"810\" cy=\"835\" rx=\"550\" ry=\"446\" transform=\"rotate(-12 810 835)\" fill=\"#637574\"/>"
|
||||
"shapes": "<ellipse cx=\"810\" cy=\"835\" rx=\"550\" ry=\"446\" transform=\"rotate(-12 810 835)\" fill=\"#5d706e\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "modular-grid",
|
||||
@@ -69,7 +69,7 @@
|
||||
"check": "顺序与 DOM 阅读顺序一致；每项标题不超过 8 字；格间距一致；内容超出六项时分页，不能挤小文字。",
|
||||
"css": ".sheet.modular-grid .grid{position:absolute;left:7%;right:7%;top:28%;bottom:13%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em}.sheet.modular-grid .cell{padding:2em;background:var(--muted);font-size:2.6em}.sheet.modular-grid .cell:first-child{background:var(--deep);color:var(--paper)}.sheet.modular-grid .title{left:7%;top:10%;font-size:6.5em}.sheet.modular-grid .copy{left:7%;bottom:5%;width:86%}",
|
||||
"markup": "<h1 class=\"title\">视觉档案</h1>\n<div class=\"grid\"><div class=\"cell\">01 / 观察</div><div class=\"cell\">02 / 结构</div><div class=\"cell\">03 / 材料</div><div class=\"cell\">04 / 字体</div><div class=\"cell\">05 / 色彩</div><div class=\"cell\">06 / 留白</div></div>\n<p class=\"copy\">INDEX / SIX DESIGN STUDIES</p>",
|
||||
"shapes": "<rect x=\"76\" y=\"403\" width=\"448\" height=\"250\" fill=\"#637574\"/><rect x=\"556\" y=\"403\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"76\" y=\"681\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"556\" y=\"681\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"76\" y=\"959\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"556\" y=\"959\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/>"
|
||||
"shapes": "<rect x=\"76\" y=\"403\" width=\"448\" height=\"250\" fill=\"#5d706e\"/><rect x=\"556\" y=\"403\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"76\" y=\"681\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"556\" y=\"681\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"76\" y=\"959\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/><rect x=\"556\" y=\"959\" width=\"448\" height=\"250\" fill=\"#9aa6a5\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "editorial-serif",
|
||||
@@ -93,7 +93,7 @@
|
||||
"check": "标题不能被色带边界切成难读的两段；带内文字保持足够对比；色带只负责分区，不伪装成按钮。",
|
||||
"css": ".sheet.horizontal-band .band{position:absolute;left:0;top:34%;width:100%;height:33%;background:var(--deep)}.sheet.horizontal-band .title{left:7%;top:12%;font-size:7em}.sheet.horizontal-band .sub{position:absolute;left:7%;top:43%;font-size:5.5em;color:var(--paper);line-height:1.1}.sheet.horizontal-band .copy{left:7%;bottom:12%;width:65%}",
|
||||
"markup": "<div class=\"band\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">留白练习</h1>\n<p class=\"sub\">CHAPTER<br>ZERO</p>\n<p class=\"copy\">以一道横向色带，\n建立章节之间的停顿。</p>",
|
||||
"shapes": "<rect x=\"0\" y=\"490\" width=\"1080\" height=\"475\" fill=\"#637574\"/><text x=\"76\" y=\"705\" font-size=\"66\" fill=\"#f5f3ec\">CHAPTER ZERO</text>"
|
||||
"shapes": "<rect x=\"0\" y=\"490\" width=\"1080\" height=\"475\" fill=\"#5d706e\"/><text x=\"76\" y=\"705\" font-size=\"66\" fill=\"#f5f3ec\">CHAPTER ZERO</text>"
|
||||
},
|
||||
{
|
||||
"slug": "diagonal-cards",
|
||||
@@ -105,7 +105,7 @@
|
||||
"check": "倾斜不超过 6 度；角点留在安全区；不要给正文整体旋转；阴影只用一层低透明度。",
|
||||
"css": ".sheet.diagonal-cards .back{left:14%;top:27%;width:66%;height:49%;transform:rotate(-5deg);background:#dce0da}.sheet.diagonal-cards .front{left:20%;top:29%;width:66%;height:49%;transform:rotate(3deg);background:var(--deep);box-shadow:0 .6em 1.2em #24323015}.sheet.diagonal-cards .title{left:7%;top:8%;font-size:6.5em}.sheet.diagonal-cards .copy{left:7%;bottom:8%;width:80%}",
|
||||
"markup": "<div class=\"panel back\" aria-hidden=\"true\"></div>\n<div class=\"panel front\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">纸上的实验</h1>\n<p class=\"copy\">材料笔记 / 两张卡片的轻微偏移</p>",
|
||||
"shapes": "<rect x=\"151\" y=\"389\" width=\"713\" height=\"706\" transform=\"rotate(-5 507 742)\" fill=\"#dce0da\"/><rect x=\"216\" y=\"418\" width=\"713\" height=\"706\" transform=\"rotate(3 572 771)\" fill=\"#637574\"/>"
|
||||
"shapes": "<rect x=\"151\" y=\"389\" width=\"713\" height=\"706\" transform=\"rotate(-5 507 742)\" fill=\"#dce0da\"/><rect x=\"216\" y=\"418\" width=\"713\" height=\"706\" transform=\"rotate(3 572 771)\" fill=\"#5d706e\"/>"
|
||||
},
|
||||
{
|
||||
"slug": "annotation-lines",
|
||||
@@ -129,7 +129,7 @@
|
||||
"check": "两个区域的关系能一句话说清；深区小字对比足够；边界没有压住文字；阅读顺序先上后下。",
|
||||
"css": ".sheet.split-contrast .dark{position:absolute;left:0;top:48%;width:100%;height:52%;background:var(--deep)}.sheet.split-contrast .title{left:7%;top:12%;font-size:7.5em}.sheet.split-contrast .answer{position:absolute;left:7%;top:59%;font-size:7.5em;line-height:1.1;color:var(--paper);margin:0}.sheet.split-contrast .copy{left:7%;bottom:10%;width:80%;color:var(--paper)}",
|
||||
"markup": "<div class=\"dark\" aria-hidden=\"true\"></div>\n<h1 class=\"title\">看见留白</h1>\n<h2 class=\"answer\">读懂秩序</h2>\n<p class=\"copy\">从空间到关系 / TWO PERSPECTIVES</p>",
|
||||
"shapes": "<rect x=\"0\" y=\"691\" width=\"1080\" height=\"749\" fill=\"#637574\"/><text x=\"76\" y=\"940\" font-size=\"88\" fill=\"#f5f3ec\">读懂秩序</text>"
|
||||
"shapes": "<rect x=\"0\" y=\"691\" width=\"1080\" height=\"749\" fill=\"#5d706e\"/><text x=\"76\" y=\"940\" font-size=\"88\" fill=\"#f5f3ec\">读懂秩序</text>"
|
||||
},
|
||||
{
|
||||
"slug": "type-frame",
|
||||
|
||||
Reference in New Issue
Block a user