27 lines
1.6 KiB
HTML
27 lines
1.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
||
|
|
<link rel="stylesheet" href="_card.css">
|
||
|
|
<style>
|
||
|
|
body { padding:24px; }
|
||
|
|
.scale { display:flex; flex-direction:column; gap:6px; }
|
||
|
|
.item { display:flex; align-items:center; gap:14px; font-family:"JetBrains Mono",monospace; font-size:11px; }
|
||
|
|
.bar { background:#1A1814; height:14px; }
|
||
|
|
.label { color:#5A5347; letter-spacing:0.08em; min-width:90px; }
|
||
|
|
.px { color:#1A1814; min-width:42px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="scale">
|
||
|
|
<div class="item"><span class="label">--s-1</span><span class="px">4px</span><span class="bar" style="width:4px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-2</span><span class="px">8px</span><span class="bar" style="width:8px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-3</span><span class="px">12px</span><span class="bar" style="width:12px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-4</span><span class="px">16px</span><span class="bar" style="width:16px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-5</span><span class="px">24px</span><span class="bar" style="width:24px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-6</span><span class="px">32px</span><span class="bar" style="width:32px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-7</span><span class="px">40px</span><span class="bar" style="width:40px"></span></div>
|
||
|
|
<div class="item"><span class="label">--s-8</span><span class="px">56px</span><span class="bar" style="width:56px"></span></div>
|
||
|
|
</div>
|
||
|
|
</body></html>
|