skillhub-171-html-ppt-zhangzara-editorial-tri-tone
wehub-skill-sync
739 行
32 KiB
HTML
739 行
32 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>编辑部版面模板</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script src="assets/deck-stage.js"></script>
|
|
<style>
|
|
:root{
|
|
--pink:#F2B6C6;
|
|
--pink-deep:#F2B6C6;
|
|
--cream:#F2D86A;
|
|
--navy:#7A1F35;
|
|
--forest:#7A1F35;
|
|
--burgundy:#7A1F35;
|
|
--lime:#F2D86A;
|
|
--sky:#F2B6C6;
|
|
--terracotta:#F2D86A;
|
|
--butter:#F2D86A;
|
|
--ink:#7A1F35;
|
|
}
|
|
html, body { margin:0; padding:0; background:#7A1F35; }
|
|
body { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }
|
|
|
|
deck-stage section {
|
|
width:1920px; height:1080px;
|
|
position:relative;
|
|
overflow:hidden;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.mono { font-family:"JetBrains Mono", monospace; }
|
|
.serif { font-family:"Instrument Serif", serif; font-style: italic; font-weight:400; }
|
|
.grotesk { font-family:"Bricolage Grotesque", sans-serif; }
|
|
|
|
.pill {
|
|
display:inline-flex; align-items:center; justify-content:center;
|
|
padding: 0.35em 0.9em;
|
|
border-radius: 999px;
|
|
font-family:"Bricolage Grotesque", sans-serif;
|
|
font-weight:500;
|
|
line-height:1;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.label {
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size:24px;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer {
|
|
position:absolute; left:64px; right:64px; bottom:36px;
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size:16px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
opacity:0.75;
|
|
}
|
|
.footer .dotrow { display:flex; gap:8px; }
|
|
.footer .dotrow i { width:8px; height:8px; border-radius:999px; background: currentColor; opacity:0.3; display:inline-block; }
|
|
.footer .dotrow i.on { opacity:1; }
|
|
|
|
/* ========== SLIDE 1: COVER ========== */
|
|
.s-cover { background: var(--pink); color: var(--ink); }
|
|
.s-cover .pill-cluster {
|
|
position:absolute;
|
|
top:120px; left:64px; right:64px;
|
|
display:flex; flex-wrap:wrap; gap: 22px;
|
|
max-width: 1500px;
|
|
}
|
|
.s-cover .pill-cluster .pill { font-size: 44px; padding: 16px 38px; }
|
|
.s-cover .wordmark {
|
|
position:absolute;
|
|
left:64px; right:64px; bottom:80px;
|
|
font-family:"Bricolage Grotesque", sans-serif;
|
|
font-weight:800;
|
|
font-size: 300px;
|
|
line-height: 0.82;
|
|
letter-spacing:-0.04em;
|
|
color: var(--burgundy);
|
|
display:flex;
|
|
align-items:flex-end;
|
|
flex-wrap:nowrap;
|
|
}
|
|
.s-cover .wordmark .amp { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-stretch:normal; }
|
|
.s-cover .meta {
|
|
position:absolute; top:64px; left:64px; right:64px;
|
|
display:flex; justify-content:space-between;
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
|
|
}
|
|
|
|
/* ========== SLIDE 2: MANIFESTO ========== */
|
|
.s-manifesto { background: var(--cream); color: var(--ink); display:grid; grid-template-columns: 1fr 1fr; }
|
|
.s-manifesto .left { padding: 96px 64px; display:flex; flex-direction:column; justify-content:space-between; }
|
|
.s-manifesto .right {
|
|
background: var(--forest); color: var(--cream);
|
|
padding: 96px 80px;
|
|
display:flex; flex-direction:column; justify-content:space-between;
|
|
position:relative;
|
|
}
|
|
.s-manifesto .chapter {
|
|
font-family:"Instrument Serif", serif; font-style:italic;
|
|
font-size: 240px; line-height:0.9;
|
|
color: var(--burgundy);
|
|
}
|
|
.s-manifesto .chapter sup { font-size: 0.35em; vertical-align: super; opacity:0.6; }
|
|
.s-manifesto .lede {
|
|
font-family:"Bricolage Grotesque", sans-serif;
|
|
font-size: 56px; line-height:1.05;
|
|
font-weight:500; letter-spacing:-0.02em;
|
|
max-width: 720px;
|
|
}
|
|
.s-manifesto .lede em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color:var(--terracotta); }
|
|
.s-manifesto .right h3 {
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size: 24px; letter-spacing:0.18em; text-transform:uppercase;
|
|
margin: 0 0 32px; color: var(--butter); font-weight:500;
|
|
}
|
|
.s-manifesto .right p {
|
|
font-size: 28px; line-height:1.45; max-width:540px; margin:0 0 24px;
|
|
}
|
|
.s-manifesto .right .signature {
|
|
font-family:"Instrument Serif", serif; font-style:italic;
|
|
font-size: 64px; line-height:1;
|
|
color: var(--lime);
|
|
}
|
|
|
|
/* ========== SLIDE 3: GRID OF VALUES ========== */
|
|
.s-grid { background: var(--pink); padding: 72px 64px 80px; }
|
|
.s-grid h2 {
|
|
margin:0 0 32px; font-size: 76px; line-height:1;
|
|
font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
|
|
letter-spacing:-0.02em; color: var(--burgundy);
|
|
max-width: 1100px;
|
|
}
|
|
.s-grid h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--navy); }
|
|
.s-grid .grid {
|
|
display:grid; grid-template-columns: repeat(4, 1fr);
|
|
gap: 24px;
|
|
}
|
|
.s-grid .card {
|
|
border-radius: 28px;
|
|
padding: 28px 28px 30px;
|
|
height: 340px;
|
|
display:flex; flex-direction:column; justify-content:space-between;
|
|
position:relative; overflow:hidden;
|
|
}
|
|
.s-grid .card .num {
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size: 24px; letter-spacing:0.15em;
|
|
opacity:0.7;
|
|
}
|
|
.s-grid .card h4 {
|
|
font-size: 40px; line-height:1; margin: 0;
|
|
font-weight:600; letter-spacing:-0.02em;
|
|
}
|
|
.s-grid .card p { font-size: 24px; line-height:1.4; margin:0; opacity:0.85; }
|
|
.s-grid .c1, .s-grid .c3, .s-grid .c5, .s-grid .c7 { background: var(--burgundy); color: var(--butter); }
|
|
.s-grid .c2, .s-grid .c4, .s-grid .c6, .s-grid .c8 { background: var(--butter); color: var(--burgundy); }
|
|
|
|
/* ========== SLIDE 4: BIG STAT / EDITORIAL ========== */
|
|
.s-stat { background: var(--burgundy); color: var(--cream); padding: 96px 64px; position:relative; }
|
|
.s-stat .toprow { display:flex; justify-content:space-between; align-items:flex-start; }
|
|
.s-stat .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--butter); }
|
|
.s-stat .swatches { display:flex; gap:10px; }
|
|
.s-stat .swatches i { width:36px; height:36px; border-radius:999px; display:block; }
|
|
.s-stat .figure {
|
|
margin-top: 20px;
|
|
font-family:"Bricolage Grotesque", sans-serif;
|
|
font-weight:700;
|
|
font-size: 540px;
|
|
line-height: 0.78;
|
|
letter-spacing: -0.06em;
|
|
color: var(--pink);
|
|
display:flex; align-items:flex-start;
|
|
}
|
|
.s-stat .figure .pct { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:220px; color: var(--lime); margin-top: 60px; margin-left: 20px; }
|
|
.s-stat .breakdown {
|
|
position:absolute; right:64px; bottom:80px;
|
|
width: 600px;
|
|
}
|
|
.s-stat .breakdown .row {
|
|
display:grid; grid-template-columns: 150px 1fr 90px;
|
|
gap: 16px; align-items:center; padding: 14px 0;
|
|
border-top: 1px solid rgba(246,237,220,0.25);
|
|
font-size: 24px;
|
|
}
|
|
.s-stat .breakdown .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.25); }
|
|
.s-stat .breakdown .row .lbl { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; }
|
|
.s-stat .breakdown .row .bar { height:10px; border-radius:999px; background: rgba(246,237,220,0.15); position:relative; overflow:hidden; }
|
|
.s-stat .breakdown .row .bar i { display:block; height:100%; border-radius:999px; }
|
|
.s-stat .breakdown .row .val { font-family:"JetBrains Mono", monospace; font-size:24px; text-align:right; }
|
|
|
|
/* ========== SLIDE 5: TIMELINE ========== */
|
|
.s-timeline { background: var(--butter); padding: 96px 80px; }
|
|
.s-timeline .head { display:flex; justify-content:space-between; align-items:flex-start; gap: 48px; margin-bottom: 48px; }
|
|
.s-timeline .head h2 {
|
|
margin:0; font-size: 76px; line-height:0.95;
|
|
font-weight:700; letter-spacing:-0.02em; color: var(--burgundy);
|
|
max-width: 1100px;
|
|
}
|
|
.s-timeline .head h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--burgundy); }
|
|
.s-timeline .head .meta { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.15em; text-transform:uppercase; text-align:right; line-height:1.5; color: var(--burgundy); flex-shrink:0; }
|
|
.s-timeline .head .meta span { display:block; opacity:0.55; margin-top: 4px; }
|
|
.s-timeline .track {
|
|
position:relative;
|
|
padding: 60px 0 40px;
|
|
}
|
|
.s-timeline .axis {
|
|
position:absolute; left:0; right:0; top: 110px;
|
|
height: 4px; background: var(--ink); opacity:0.15;
|
|
}
|
|
.s-timeline .stops {
|
|
display:grid; grid-template-columns: repeat(5, 1fr);
|
|
gap: 24px; position:relative;
|
|
}
|
|
.s-timeline .stop { position:relative; padding-top: 90px; }
|
|
.s-timeline .stop .dot {
|
|
position:absolute; top: 90px; left: 0;
|
|
width: 28px; height: 28px; border-radius: 999px;
|
|
transform: translateY(-50%);
|
|
border: 4px solid var(--butter);
|
|
background: var(--burgundy);
|
|
display: none;
|
|
}
|
|
.s-timeline .stop .yr {
|
|
font-family:"Instrument Serif", serif; font-style:italic;
|
|
font-size: 56px; line-height:1; margin-bottom: 12px;
|
|
color: var(--burgundy);
|
|
}
|
|
.s-timeline .stop h5 {
|
|
margin:0 0 12px; font-size:28px; font-weight:600; letter-spacing:-0.01em; color: var(--burgundy);
|
|
}
|
|
.s-timeline .stop p { margin:0; font-size:24px; line-height:1.45; color: var(--burgundy); opacity:0.8; }
|
|
|
|
.s-timeline .ribbon {
|
|
margin-top: 56px;
|
|
background: var(--burgundy); color: var(--butter);
|
|
border-radius: 999px;
|
|
padding: 24px 44px;
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
font-family:"JetBrains Mono", monospace; font-size: 24px; letter-spacing:0.15em; text-transform:uppercase;
|
|
}
|
|
.s-timeline .ribbon strong { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:30px; letter-spacing:0; text-transform:none; color: var(--pink); }
|
|
|
|
/* ========== SLIDE 6: CHART ========== */
|
|
.s-chart { background: var(--navy); color: var(--cream); padding: 88px 64px; display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; }
|
|
.s-chart .l h2 {
|
|
margin:0 0 24px; font-size: 84px; line-height:0.95;
|
|
font-weight:700; letter-spacing:-0.02em;
|
|
}
|
|
.s-chart .l h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
|
|
.s-chart .l .lede { font-size: 24px; line-height:1.5; max-width: 640px; opacity:0.85; }
|
|
.s-chart .l .legend {
|
|
margin-top: 56px;
|
|
display:flex; flex-direction:column; gap: 16px;
|
|
}
|
|
.s-chart .l .legend .item { display:flex; align-items:center; gap: 14px; font-size:24px; }
|
|
.s-chart .l .legend .item i { width:14px; height:14px; border-radius:4px; display:block; }
|
|
.s-chart .l .legend .item .cat { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; margin-left:auto; }
|
|
.s-chart .r {
|
|
background: var(--cream); color: var(--ink);
|
|
border-radius: 32px;
|
|
padding: 48px 48px 56px;
|
|
display:flex; flex-direction:column;
|
|
position:relative;
|
|
}
|
|
.s-chart .r .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 32px; }
|
|
.s-chart .r .head .ttl { font-family:"Instrument Serif", serif; font-style:italic; font-size: 40px; }
|
|
.s-chart .r .head .unit { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; }
|
|
.s-chart svg.chart { width:100%; flex:0 0 auto; max-height: 480px; }
|
|
.s-chart .r .xax { display:grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; font-family:"JetBrains Mono", monospace; font-size:24px; opacity:0.6; letter-spacing:0.1em; }
|
|
|
|
/* ========== SLIDE 7: QUOTE / EDITORIAL SPLIT ========== */
|
|
.s-quote { background: var(--lime); color: var(--ink); padding: 0; display:grid; grid-template-columns: 0.95fr 1fr; }
|
|
.s-quote .l { padding: 80px 56px 80px 80px; display:flex; flex-direction:column; justify-content:space-between; gap: 24px; position:relative; }
|
|
.s-quote .l .top { display:flex; flex-direction:column; gap: 12px; }
|
|
.s-quote .l .mark { font-family:"Instrument Serif", serif; font-style:italic; font-size: 200px; line-height:0.6; color: var(--burgundy); margin: 80px 0 0 0; }
|
|
.s-quote .l blockquote {
|
|
margin: 0;
|
|
font-family:"Instrument Serif", serif; font-style:italic;
|
|
font-size: 64px; line-height:1.1;
|
|
color: var(--ink);
|
|
max-width: 760px;
|
|
}
|
|
.s-quote .l blockquote b { font-family:"Bricolage Grotesque", sans-serif; font-style:normal; font-weight:600; color: var(--burgundy); }
|
|
.s-quote .l .attribution { display:flex; align-items:center; gap:20px; }
|
|
.s-quote .l .avatar { width:72px; height:72px; border-radius:999px; background: var(--burgundy); border:3px solid var(--burgundy); }
|
|
.s-quote .l .who { font-size:26px; font-weight:600; }
|
|
.s-quote .l .who small { display:block; font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; font-weight:400; margin-top:4px; }
|
|
.s-quote .r {
|
|
background: var(--burgundy); color: var(--butter);
|
|
padding: 96px 80px;
|
|
display:flex; flex-direction:column; gap: 28px;
|
|
position:relative;
|
|
}
|
|
.s-quote .r h3 { margin:0; font-size: 56px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
|
|
.s-quote .r .endorsements { display:flex; flex-direction:column; gap: 20px; margin-top: 8px; }
|
|
.s-quote .r .endorsements .row {
|
|
display:grid; grid-template-columns: 80px 1fr;
|
|
gap: 20px; align-items:center;
|
|
padding: 20px 0; border-top: 1px solid rgba(246,237,220,0.3);
|
|
}
|
|
.s-quote .r .endorsements .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.3); }
|
|
.s-quote .r .endorsements .num { font-family:"Instrument Serif", serif; font-style:italic; font-size: 56px; line-height:1; color: var(--pink); }
|
|
.s-quote .r .endorsements .txt { font-size: 26px; line-height:1.4; }
|
|
.s-quote .r .endorsements .txt strong { font-weight:600; display:block; margin-bottom: 4px; }
|
|
|
|
/* ========== SLIDE 8: CLOSER / INDEX ========== */
|
|
.s-closer { background: var(--ink); color: var(--cream); padding: 96px 64px; position:relative; }
|
|
.s-closer .top { display:flex; justify-content:space-between; align-items:flex-start; }
|
|
.s-closer .top .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--lime); }
|
|
.s-closer .big {
|
|
margin-top: 40px;
|
|
font-family:"Bricolage Grotesque", sans-serif;
|
|
font-weight:700;
|
|
font-size: 320px;
|
|
line-height: 0.82;
|
|
letter-spacing: -0.05em;
|
|
color: var(--pink);
|
|
max-width: 800px;
|
|
}
|
|
.s-closer .big em { display:inline-block; margin-left: -20px; }
|
|
.s-closer .big em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
|
|
.s-closer .grid {
|
|
position:absolute; left:64px; right:64px; bottom: 120px;
|
|
display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
|
|
}
|
|
.s-closer .grid .col h6 {
|
|
margin: 0 0 16px;
|
|
font-family:"JetBrains Mono", monospace;
|
|
font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
|
|
color: var(--lime); font-weight:500;
|
|
}
|
|
.s-closer .grid .col p { margin:0; font-size: 24px; line-height:1.45; }
|
|
.s-closer .grid .col p + p { margin-top: 8px; }
|
|
.s-closer .corner-pills {
|
|
position:absolute; right:64px; top: 200px;
|
|
display:flex; flex-direction:column; gap: 12px; align-items:flex-end;
|
|
}
|
|
.s-closer .corner-pills .pill { font-size:22px; padding: 10px 24px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<deck-stage>
|
|
|
|
<!-- ============ SLIDE 1: COVER ============ -->
|
|
<section class="s-cover" data-screen-label="01 封面">
|
|
<div class="meta">
|
|
<span>第 04 卷 — 编辑部简报</span>
|
|
<span>春夏版</span>
|
|
<span>秋冬 · 2026</span>
|
|
</div>
|
|
|
|
<div class="pill-cluster">
|
|
<span class="pill" style="background:var(--burgundy); color:var(--pink)">专注</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">技术赋能</span>
|
|
<span class="pill" style="background:var(--burgundy); color:var(--butter)">创造力</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">咖啡</span>
|
|
<span class="pill" style="background:var(--burgundy); color:var(--pink)">社区</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">联合办公</span>
|
|
<span class="pill" style="background:var(--burgundy); color:var(--butter)">生产力</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">灵感</span>
|
|
<span class="pill" style="background:var(--burgundy); color:var(--pink)">灵活</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">工作坊</span>
|
|
<span class="pill" style="background:var(--burgundy); color:var(--butter)">协作</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--burgundy)">工作室</span>
|
|
</div>
|
|
|
|
<div class="wordmark">
|
|
<span>工作室</span>
|
|
<span class="amp" style="color:var(--butter); margin: 0 24px 24px;">&</span>
|
|
<span>沙龙</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 2: MANIFESTO ============ -->
|
|
<section class="s-manifesto" data-screen-label="02 宣言">
|
|
<div class="left">
|
|
<div>
|
|
<div class="label" style="margin-bottom:32px; color: var(--burgundy);">第一章 · 宣言</div>
|
|
<div class="chapter">01<sup></sup></div>
|
|
</div>
|
|
<div class="lede">
|
|
占位导语为整篇文档定下基调。一句简明的陈述句后跟着一个用斜体书写的 <em>旁白</em>，传递温暖感。
|
|
</div>
|
|
<div class="mono" style="font-size:24px; letter-spacing:0.12em; opacity:0.6; text-transform:uppercase;">第 002 / 016 页 · 阅读时长 04:30</div>
|
|
</div>
|
|
<div class="right">
|
|
<div>
|
|
<h3>开篇语</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
<p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
<p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
</div>
|
|
<div>
|
|
<div class="signature">— 温暖致意，</div>
|
|
<div style="font-family:'JetBrains Mono', monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; margin-top: 12px; color: var(--butter);">编辑部</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 3: VALUES GRID ============ -->
|
|
<section class="s-grid" data-screen-label="03 原则">
|
|
<div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 24px;">
|
|
<h2>八项原则，<em>松散持有。</em></h2>
|
|
<div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; color: var(--burgundy);">§ 03 — 原则</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="card c1">
|
|
<div class="num">/ 01</div>
|
|
<h4>慢观察</h4>
|
|
<p>用平实的语言描述该原则的一个简短段落。两句话足矣。</p>
|
|
</div>
|
|
<div class="card c2">
|
|
<div class="num">/ 02</div>
|
|
<h4>开放厨房</h4>
|
|
<p>过程公开。展示接缝、草图、尚未定型的半成品想法。</p>
|
|
</div>
|
|
<div class="card c3">
|
|
<div class="num">/ 03</div>
|
|
<h4>借光</h4>
|
|
<p>大方引用。最好的想法总是属于某个谱系；说出你走进的那个房间的名字。</p>
|
|
</div>
|
|
<div class="card c4">
|
|
<div class="num">/ 04</div>
|
|
<h4>安静默认</h4>
|
|
<p>克制是一种姿态。只有在时机值得时才大声说话；否则，保持温和的肩膀。</p>
|
|
</div>
|
|
<div class="card c5">
|
|
<div class="num">/ 05</div>
|
|
<h4>少而精</h4>
|
|
<p>精简堆叠。三件深思熟虑的物品胜过三十件仓促之作，每一次都是如此。</p>
|
|
</div>
|
|
<div class="card c6">
|
|
<div class="num">/ 06</div>
|
|
<h4>慷慨的边缘</h4>
|
|
<p>留白是仁慈。为读者留下呼吸的空间，也让他们带来自己的东西。</p>
|
|
</div>
|
|
<div class="card c7">
|
|
<div class="num">/ 07</div>
|
|
<h4>手工痕迹</h4>
|
|
<p>刻意留下制作者的痕迹。打磨不应完全掩盖指纹。</p>
|
|
</div>
|
|
<div class="card c8">
|
|
<div class="num">/ 08</div>
|
|
<h4>待补充</h4>
|
|
<p>一条占位原则，等待下一次对话。这个列表尚未完成。</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 4: BIG STAT ============ -->
|
|
<section class="s-stat" data-screen-label="04 头条数据">
|
|
<div class="toprow">
|
|
<div>
|
|
<div class="kicker">§ 04 — 头条数据</div>
|
|
<div class="serif" style="font-size: 48px; margin-top: 16px; color: var(--pink);">一幅数字肖像。</div>
|
|
</div>
|
|
<div class="swatches">
|
|
<i style="background:var(--pink)"></i>
|
|
<i style="background:var(--lime)"></i>
|
|
<i style="background:var(--butter)"></i>
|
|
<i style="background:var(--terracotta)"></i>
|
|
<i style="background:var(--sky)"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="figure" style="margin-left:0px; max-width: 900px;">
|
|
<span>72</span><span class="pct">%</span>
|
|
</div>
|
|
<div style="position:absolute; left:64px; bottom:80px; max-width: 900px;">
|
|
<div class="kicker" style="color:var(--butter);">此项数据的含义</div>
|
|
<p style="font-size:24px; line-height:1.45; margin-top:18px; opacity:0.9;">占位注释。一句简短、坦诚的说明，解释该数字的意义——以及更重要的，它不意味着什么。调查 n=842，于占位月份进行，按占位人群加权。</p>
|
|
</div>
|
|
|
|
<div class="breakdown">
|
|
<div class="kicker" style="margin-bottom:12px;">构成</div>
|
|
<div class="row">
|
|
<span class="lbl">细分 A</span>
|
|
<span class="bar"><i style="width:82%; background:var(--lime)"></i></span>
|
|
<span class="val">82.4</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="lbl">细分 B</span>
|
|
<span class="bar"><i style="width:64%; background:var(--butter)"></i></span>
|
|
<span class="val">63.9</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="lbl">细分 C</span>
|
|
<span class="bar"><i style="width:48%; background:var(--terracotta)"></i></span>
|
|
<span class="val">48.1</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="lbl">细分 D</span>
|
|
<span class="bar"><i style="width:31%; background:var(--sky)"></i></span>
|
|
<span class="val">31.0</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 5: TIMELINE ============ -->
|
|
<section class="s-timeline" data-screen-label="05 历程">
|
|
<div class="head">
|
|
<h2>一段简短历程，<em>分五站讲述。</em></h2>
|
|
<div class="meta">
|
|
§ 05 — 历程<br/>
|
|
<span style="opacity:0.5;">2019 → 至今</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="track">
|
|
<div class="axis"></div>
|
|
<div class="stops">
|
|
<div class="stop">
|
|
<span class="dot"></span>
|
|
<div class="yr">'19</div>
|
|
<h5>第一个原型</h5>
|
|
<p>每个里程碑的简短说明，用平实散文写成。一个观察，一个结果。</p>
|
|
</div>
|
|
<div class="stop">
|
|
<span class="dot"></span>
|
|
<div class="yr">'21</div>
|
|
<h5>低调扩张</h5>
|
|
<p>描述转折点的占位文案。保持写作的具体性，切勿空洞。</p>
|
|
</div>
|
|
<div class="stop">
|
|
<span class="dot"></span>
|
|
<div class="yr">'23</div>
|
|
<h5>新的社内风格</h5>
|
|
<p>字体、色彩、语调——围绕一个编辑前提重新打造；其余一切随之而来。</p>
|
|
</div>
|
|
<div class="stop">
|
|
<span class="dot"></span>
|
|
<div class="yr">'25</div>
|
|
<h5>沙龙正式化</h5>
|
|
<p>月度聚会从惯例变成纪律，再变成工作的重心。</p>
|
|
</div>
|
|
<div class="stop">
|
|
<span class="dot"></span>
|
|
<div class="yr">'26</div>
|
|
<h5>我们此刻的位置</h5>
|
|
<p>现在时。用两句话简要、诚实地描述当下的实践形态。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon">
|
|
<span>下一章加载中</span>
|
|
<strong>— 工作仍在继续，徐徐前行。</strong>
|
|
<span>第 05 卷 / 秋季</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 6: CHART ============ -->
|
|
<section class="s-chart" data-screen-label="06 构成">
|
|
<div class="l">
|
|
<div class="label" style="color:var(--butter); margin-bottom: 20px;">§ 06 — 构成</div>
|
|
<h2>日子如何 <em>自行排列。</em></h2>
|
|
<p class="lede">右侧图表的一段占位描述。谈谈数据的形状——什么在上升，什么在趋于平缓——而不是精确的数字。方法论和一句免责声明放在底部。</p>
|
|
<div class="legend">
|
|
<div class="item"><i style="background:var(--pink); border:1px solid var(--burgundy);"></i> 工作室时间，深度工作 <span class="cat">系列 A</span></div>
|
|
<div class="item"><i style="background:var(--butter); border:2px solid var(--burgundy); border-radius:999px;"></i> 沙龙与对话 <span class="cat">系列 B</span></div>
|
|
<div class="item"><i style="background:var(--burgundy);"></i> 阅读、放空、散步 <span class="cat">系列 C</span></div>
|
|
<div class="item"><i style="background:transparent; border-top: 3px dotted var(--butter); border-radius:0; height: 0;"></i> 通信、行政 <span class="cat">系列 D</span></div>
|
|
</div>
|
|
<div class="mono" style="margin-top: 40px; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5;">来源：内部日志 · 自报数据 · n = 24 周</div>
|
|
</div>
|
|
<div class="r">
|
|
<div class="head">
|
|
<span class="ttl">每周小时数，按模式划分</span>
|
|
<span class="unit">小时 / 周</span>
|
|
</div>
|
|
<svg class="chart" viewBox="0 0 720 380" preserveAspectRatio="none">
|
|
<!-- gridlines -->
|
|
<g stroke="#7A1F35" stroke-opacity="0.15" stroke-width="1">
|
|
<line x1="60" y1="40" x2="720" y2="40" />
|
|
<line x1="60" y1="125" x2="720" y2="125" />
|
|
<line x1="60" y1="210" x2="720" y2="210" />
|
|
<line x1="60" y1="295" x2="720" y2="295" />
|
|
<line x1="60" y1="380" x2="720" y2="380" />
|
|
</g>
|
|
<!-- y labels -->
|
|
<g font-family="JetBrains Mono, monospace" font-size="24" fill="#7A1F35" fill-opacity="0.6">
|
|
<text x="0" y="48">40</text>
|
|
<text x="0" y="133">30</text>
|
|
<text x="0" y="218">20</text>
|
|
<text x="0" y="303">10</text>
|
|
<text x="8" y="380">0</text>
|
|
</g>
|
|
|
|
<!-- Series A (pink area, burgundy stroke) -->
|
|
<path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80 L 660 380 L 60 380 Z"
|
|
fill="#F2B6C6" fill-opacity="0.85"/>
|
|
<path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80"
|
|
fill="none" stroke="#7A1F35" stroke-width="3"/>
|
|
|
|
<!-- Series C bars (burgundy, dark on yellow) -->
|
|
<g fill="#7A1F35">
|
|
<rect x="80" y="320" width="22" height="60" rx="4"/>
|
|
<rect x="190" y="300" width="22" height="80" rx="4"/>
|
|
<rect x="300" y="285" width="22" height="95" rx="4"/>
|
|
<rect x="410" y="275" width="22" height="105" rx="4"/>
|
|
<rect x="520" y="260" width="22" height="120" rx="4"/>
|
|
<rect x="630" y="245" width="22" height="135" rx="4"/>
|
|
</g>
|
|
|
|
<!-- Series B (yellow circles + burgundy line) -->
|
|
<path d="M 90 280 L 200 250 L 310 235 L 420 215 L 530 200 L 640 175"
|
|
fill="none" stroke="#7A1F35" stroke-width="3"/>
|
|
<g fill="#F2D86A" stroke="#7A1F35" stroke-width="3">
|
|
<circle cx="90" cy="280" r="8"/>
|
|
<circle cx="200" cy="250" r="8"/>
|
|
<circle cx="310" cy="235" r="8"/>
|
|
<circle cx="420" cy="215" r="8"/>
|
|
<circle cx="530" cy="200" r="8"/>
|
|
<circle cx="640" cy="175" r="8"/>
|
|
</g>
|
|
|
|
<!-- Series D (burgundy dotted) -->
|
|
<path d="M 90 350 L 200 345 L 310 348 L 420 338 L 530 340 L 640 332"
|
|
fill="none" stroke="#7A1F35" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round" stroke-opacity="0.6"/>
|
|
</svg>
|
|
<div class="xax">
|
|
<span>W·01</span><span>W·05</span><span>W·09</span><span>W·13</span><span>W·17</span><span>W·24</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 7: QUOTE / SPLIT ============ -->
|
|
<section class="s-quote" data-screen-label="07 他们的话">
|
|
<div class="l">
|
|
<div class="top">
|
|
<div class="mono" style="font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--burgundy);">§ 07 — 他们的话</div>
|
|
<div class="mark">“</div>
|
|
</div>
|
|
<blockquote>
|
|
一条占位拉引引用，以斜体设置，其中一个短语用 <b>粗体无衬线</b> 强调，优秀的版面设计师们一直是这样做的。
|
|
</blockquote>
|
|
<div class="attribution">
|
|
<div class="avatar"></div>
|
|
<div class="who">
|
|
某·占位-姓氏
|
|
<small>特约编辑 · 姊妹刊物</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="r">
|
|
<div class="label" style="color: var(--butter);">三篇短读</div>
|
|
<h3>来自读者群的声音，略经编辑 —</h3>
|
|
<div class="endorsements">
|
|
<div class="row">
|
|
<span class="num">i.</span>
|
|
<div class="txt">
|
|
<strong>关于节奏</strong>
|
|
两行推荐语，读起来像在小餐桌旁随口说出来的话。
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="num">ii.</span>
|
|
<div class="txt">
|
|
<strong>关于陪伴</strong>
|
|
又一条简短笔记，三四拍的长度，有用且具体，不过分矫饰。
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="num">iii.</span>
|
|
<div class="txt">
|
|
<strong>关于回归</strong>
|
|
结尾的推荐语——在其他推荐已经说服读者之后，最后那一条。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============ SLIDE 8: CLOSER / INDEX ============ -->
|
|
<section class="s-closer" data-screen-label="08 版权页">
|
|
<div class="top">
|
|
<div>
|
|
<div class="kicker">§ 08 — 版权页与索引</div>
|
|
<div class="serif" style="font-size:48px; color:var(--pink); margin-top:12px;">下一卷见。</div>
|
|
</div>
|
|
<div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; opacity:0.7; text-align:right; line-height:1.4;">
|
|
本期完<br/>
|
|
<span style="opacity:0.5;">第 04 号 · 016 页</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="big">
|
|
完<em>。</em>
|
|
</div>
|
|
|
|
<div class="corner-pills">
|
|
<span class="pill" style="background:var(--burgundy); color:var(--cream); font-size:24px; padding: 12px 28px;">第 04 期</span>
|
|
<span class="pill" style="background:var(--lime); color:var(--ink); font-size:24px; padding: 12px 28px;">春季卷</span>
|
|
<span class="pill" style="background:var(--butter); color:var(--ink); font-size:24px; padding: 12px 28px;">版权页</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="col">
|
|
<h6>编辑部</h6>
|
|
<p>A. 占位</p>
|
|
<p>B. 占位</p>
|
|
<p>C. 占位</p>
|
|
</div>
|
|
<div class="col">
|
|
<h6>字体</h6>
|
|
<p>Bricolage Grotesque</p>
|
|
<p>Instrument Serif</p>
|
|
<p>JetBrains Mono</p>
|
|
</div>
|
|
<div class="col">
|
|
<h6>印刷</h6>
|
|
<p>占位印刷厂</p>
|
|
<p>城市 & 州</p>
|
|
<p>再生纸，120gsm</p>
|
|
</div>
|
|
<div class="col">
|
|
<h6>联系方式</h6>
|
|
<p>desk@placeholder.studio</p>
|
|
<p>邮政信箱 0000</p>
|
|
<p>路由编号 04 / 26</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</deck-stage>
|
|
</body>
|
|
</html>
|
|
```
|