30 lines
1.9 KiB
HTML
30 lines
1.9 KiB
HTML
<!-- @dsCard group="Type" viewport="700x200" name="Geist Mono — numbers, times, durations" subtitle="Tabular figures for everything numeric" -->
|
|
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400..600&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body{margin:0;background:var(--surface-app);font-family:var(--font-sans);color:var(--text-primary)}
|
|
.wrap{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
|
|
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
|
|
.big{font:var(--weight-semibold) var(--text-2xl)/1 var(--font-mono);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
|
|
.lbl{font:var(--weight-medium) var(--text-2xs)/1 var(--font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--text-disabled);margin-bottom:6px}
|
|
table{border-collapse:collapse;font-size:var(--text-sm)}
|
|
td{padding:3px 18px 3px 0;color:var(--text-secondary)}
|
|
td.v{color:var(--text-primary)}
|
|
</style></head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div style="display:flex;gap:44px;align-items:flex-end">
|
|
<div><div class="lbl">Channel</div><div class="big" style="color:var(--ctv-accent)">128.4</div></div>
|
|
<div><div class="lbl">Duration</div><div class="big">01:24:36</div></div>
|
|
<div><div class="lbl">Start</div><div class="big">20:00:00</div></div>
|
|
<div><div class="lbl">Bitrate</div><div class="big">8.2<span style="font-size:14px;color:var(--text-disabled)"> Mbps</span></div></div>
|
|
</div>
|
|
<table>
|
|
<tr><td>Aligned figures</td><td class="v mono">1,204</td><td class="v mono">00:03:12</td><td class="v mono">96.0%</td></tr>
|
|
<tr><td>Zero-locked</td><td class="v mono">0,007</td><td class="v mono">14:59:08</td><td class="v mono">-3.5</td></tr>
|
|
</table>
|
|
</div>
|
|
</body></html>
|