| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Two Column</title> |
| 3 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 4 | <link rel="stylesheet" href="../../assets/base.css"> |
| 5 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css"> |
| 6 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 7 | </head><body class="single"> |
| 8 | <div class="deck"><section class="slide is-active" data-title="Two column"> |
| 9 | <p class="kicker">Pattern · 双栏</p> |
| 10 | <h2 class="h2">概念 <span class="dim2">⟷</span> 示例</h2> |
| 11 | <div class="grid g2 mt-l" style="align-items:start"> |
| 12 | <div class="card anim-fade-left" data-anim="fade-left"> |
| 13 | <h3>左栏 · 概念</h3> |
| 14 | <p class="dim">一个主题 = 一组 CSS 变量。把颜色、字体、圆角、阴影全部收到 <code>:root</code> 里。</p> |
| 15 | <ul class="mt-m"> |
| 16 | <li>— tokens 定义语义，不写具体色值</li> |
| 17 | <li>— base.css 用 tokens 排版</li> |
| 18 | <li>— 每个主题只改变量</li> |
| 19 | </ul> |
| 20 | </div> |
| 21 | <div class="card anim-fade-right" data-anim="fade-right"> |
| 22 | <h3>右栏 · 示例</h3> |
| 23 | <pre class="mono" style="font-size:13px;background:var(--surface-2);padding:14px;border-radius:var(--radius-sm);overflow:auto"> |
| 24 | :root { |
| 25 | --bg: #fff; |
| 26 | --text-1: #0c0d10; |
| 27 | --accent: #3b6cff; |
| 28 | --radius: 18px; |
| 29 | } |
| 30 | .card { |
| 31 | background: var(--bg); |
| 32 | color: var(--text-1); |
| 33 | border-radius: var(--radius); |
| 34 | }</pre> |
| 35 | </div> |
| 36 | </div> |
| 37 | </section></div> |
| 38 | <script src="../../assets/runtime.js"></script> |
| 39 | </body></html> |
| 40 |