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