20 lines
1.6 KiB
HTML
20 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 { display:flex; align-items:center; gap:40px; padding:32px; }
|
||
|
|
.stack { display:flex; flex-direction:column; gap:8px; align-items:center; }
|
||
|
|
.lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-muted); }
|
||
|
|
.mark-box { display:flex; align-items:center; justify-content:center; width:88px; height:88px; background:var(--paper); border:1px solid var(--rule); }
|
||
|
|
.mark-box.inverse { background:#1A1814; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="stack"><div class="mark-box"><img src="../assets/akefin-mark.svg" width="48" height="48" alt=""></div><div class="lbl">mark · on paper</div></div>
|
||
|
|
<div class="stack"><div class="mark-box inverse"><svg viewBox="0 0 48 48" width="48" height="48"><g fill="#ECE7DC"><rect x="6" y="14" width="6" height="28"/><rect x="12" y="8" width="6" height="6"/><rect x="18" y="8" width="6" height="6"/><rect x="24" y="14" width="6" height="28"/><rect x="12" y="26" width="12" height="6"/></g><rect x="36" y="36" width="6" height="6" fill="#2F7D55"/></svg></div><div class="lbl">mark · on ink</div></div>
|
||
|
|
<div class="stack"><div class="mark-box" style="width:32px;height:32px"><img src="../assets/favicon.svg" width="16" height="16" alt=""></div><div class="lbl">favicon · 16</div></div>
|
||
|
|
<div class="stack"><div class="mark-box" style="background:var(--surface)"><img src="../assets/akefin-mark.svg" width="48" height="48" alt=""></div><div class="lbl">on ink-grey</div></div>
|
||
|
|
</body></html>
|