| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>杂志衬线 / Editorial Serif</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden} |
| 10 | html{display:grid;place-items:center;background:#0f1117} |
| 11 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#0f1117} |
| 12 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#fef7ed;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08)} |
| 13 | .layout{position:absolute;inset:0;display:flex;padding:7% 7%} |
| 14 | .col-main{flex:3;display:flex;flex-direction:column;justify-content:center;padding-right:5%} |
| 15 | .col-rule{width:1.5px;background:#ea580c;opacity:.5;margin:3% 0} |
| 16 | .col-side{flex:2;display:flex;flex-direction:column;justify-content:center;padding-left:5%} |
| 17 | .tag{font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(7px,.95vw,10px);color:#ea580c;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:clamp(8px,1.2vw,14px)} |
| 18 | .title{font-family:Georgia,"Songti SC",serif;font-size:clamp(30px,5.2vw,60px);color:#431407;font-weight:bold;line-height:1.15;margin-bottom:clamp(8px,1.2vw,14px)} |
| 19 | .dropcap{float:left;font-family:Georgia,"Songti SC",serif;font-size:clamp(48px,7.5vw,88px);line-height:.85;color:#ea580c;font-weight:bold;margin-right:clamp(4px,.6vw,8px);margin-top:clamp(4px,.5vw,6px)} |
| 20 | .body{font-family:Georgia,"Songti SC",serif;font-size:clamp(10px,1.35vw,15px);color:#7c2d12;line-height:1.75} |
| 21 | .line-accent{width:clamp(36px,5.5vw,64px);height:2px;background:#ea580c;margin-bottom:clamp(8px,1.2vw,14px)} |
| 22 | .english{font-family:Georgia,serif;font-size:clamp(9px,1.2vw,14px);color:#7c2d12;opacity:.55;font-style:italic;line-height:1.6;margin-bottom:clamp(8px,1.2vw,14px)} |
| 23 | .palette{display:flex;gap:clamp(4px,.6vw,7px);margin-top:auto;padding-top:clamp(6px,1vw,12px)} |
| 24 | .sw{width:clamp(12px,1.8vw,20px);height:clamp(12px,1.8vw,20px);border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.08)} |
| 25 | .quote-block{border-left:2px solid #f97316;padding-left:clamp(6px,.9vw,10px);font-family:Georgia,"Songti SC",serif;font-size:clamp(9px,1.15vw,13px);color:#7c2d12;line-height:1.65;font-style:italic;opacity:.7} |
| 26 | </style> |
| 27 | </head> |
| 28 | <body> |
| 29 | <div class="slide"> |
| 30 | <div class="layout"> |
| 31 | <div class="col-main"> |
| 32 | <div class="tag">Editorial Serif</div> |
| 33 | <div class="title">杂志衬线</div> |
| 34 | <div class="line-accent"></div> |
| 35 | <div class="body"><span class="dropcap">奶</span>油纸上衬线娓娓道来，故事感从标题开始流淌。每一行文字都是一段旅程，每一个段落都是一扇打开的门。</div> |
| 36 | </div> |
| 37 | <div class="col-rule"></div> |
| 38 | <div class="col-side"> |
| 39 | <div class="english">Editorial Serif</div> |
| 40 | <div class="quote-block">衬线字体在奶油色纸张上呼吸，如同翻开一本精致的杂志。栏目之间，故事在流淌。</div> |
| 41 | <div class="palette"> |
| 42 | <i class="sw" style="--c:#431407"></i> |
| 43 | <i class="sw" style="--c:#7c2d12"></i> |
| 44 | <i class="sw" style="--c:#ea580c"></i> |
| 45 | <i class="sw" style="--c:#f97316"></i> |
| 46 | <i class="sw" style="--c:#fef7ed"></i> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | </div> |
| 51 | </body> |
| 52 | </html> |
| 53 |