| 1 | <!doctype html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <title>theme cell</title> |
| 6 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 7 | <link rel="stylesheet" href="../../assets/base.css"> |
| 8 | <link id="theme-link" rel="stylesheet" href="../../assets/themes/minimal-white.css"> |
| 9 | <style> |
| 10 | html,body{height:100%;margin:0;overflow:hidden} |
| 11 | body{ |
| 12 | background:var(--bg,#fff);color:var(--text-1,#111); |
| 13 | font-family:var(--font-sans);box-sizing:border-box; |
| 14 | padding:5cqw 6cqw;container-type:size; |
| 15 | } |
| 16 | .k{font:700 2.6cqw/1 var(--font-mono,monospace);color:var(--text-3,#888);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.5cqh} |
| 17 | h1{font:900 11cqw/.95 var(--font-display,var(--font-sans));letter-spacing:-.025em;margin:0 0 3cqh;color:var(--text-1)} |
| 18 | .lede{font:500 3.2cqw/1.4 var(--font-sans);color:var(--text-2,#555);margin:0 0 3.5cqh;max-width:85cqw} |
| 19 | .row{display:flex;gap:1.4cqw;flex-wrap:wrap} |
| 20 | .pill{padding:1.2cqh 2.4cqw;border-radius:999px;background:var(--surface-2,#f4f4f8);color:var(--text-1);font:600 2.3cqw/1 var(--font-sans);border:1px solid var(--border,#e5e5ea)} |
| 21 | .pill.accent{background:var(--accent,#7c5cff);color:#fff;border-color:transparent} |
| 22 | .kpi{margin-top:4cqh;display:flex;gap:5cqw} |
| 23 | .kpi div{font:900 10cqw/1 var(--font-display,var(--font-sans));letter-spacing:-.03em;color:var(--accent,#7c5cff)} |
| 24 | .kpi div span{display:block;font:500 1.8cqw/1 var(--font-sans);color:var(--text-3,#888);margin-top:1cqh;letter-spacing:.08em;text-transform:uppercase} |
| 25 | .gradient-hero{background:linear-gradient(90deg,var(--accent,#7c5cff),var(--accent-2,#22d3ee),var(--accent-3,#ff4d8d));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} |
| 26 | </style> |
| 27 | </head> |
| 28 | <body> |
| 29 | <div class="k" id="kname">theme · minimal-white</div> |
| 30 | <h1 id="h1">2026<br>年度回顾</h1> |
| 31 | <p class="lede">同一份 outline，换一行 theme，排版、字体、色系、装饰全部重写。</p> |
| 32 | <div class="row"> |
| 33 | <span class="pill accent">12 里程碑</span> |
| 34 | <span class="pill">团队 +40%</span> |
| 35 | <span class="pill">SAT 98%</span> |
| 36 | </div> |
| 37 | <div class="kpi"> |
| 38 | <div>98%<span>Sat</span></div> |
| 39 | <div>12<span>MS</span></div> |
| 40 | <div>7×<span>Faster</span></div> |
| 41 | </div> |
| 42 | <script> |
| 43 | (function(){ |
| 44 | const m = /[?&]theme=([\w-]+)/.exec(location.search||''); |
| 45 | if (m){ |
| 46 | const name = m[1]; |
| 47 | document.getElementById('theme-link').href = '../../assets/themes/'+name+'.css'; |
| 48 | document.getElementById('kname').textContent = 'theme · ' + name; |
| 49 | if (/rainbow|aurora|cyberpunk|vaporwave|y2k/.test(name)){ |
| 50 | document.getElementById('h1').classList.add('gradient-hero'); |
| 51 | } |
| 52 | } |
| 53 | })(); |
| 54 | </script> |
| 55 | </body> |
| 56 | </html> |
| 57 |