docs/demos/native-appearance-slice2.html
Ref: Size: 6.2 KiB History
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Native appearance · slice 2</title>
<style>
:root { color-scheme:dark; --ink:#f3e8d0; --muted:#c4aa8d; --bg:#211b1a; --panel:#2b211f; --panel2:#342824; --teal:#2f6f70; --amber:#d8a84e; --line:#76594b; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 78% 0,#3b2922 0,transparent 42%),var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1080px,calc(100% - 40px)); margin:auto; padding:58px 0 52px; } .eyebrow { color:var(--amber); font-size:.76rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:760px; margin:10px 0 14px; font-size:clamp(2.2rem,6vw,4.5rem); line-height:1.02; letter-spacing:-.055em; } .lede { max-width:700px; margin:0 0 30px; color:var(--muted); font-size:1.15rem; }
.status { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid #8b6a4d; border-radius:999px; background:#372821; color:#ffd995; font-size:.86rem; } .status i { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px #d8a84e22; }
.video-card { margin:42px 0 0; padding:14px; border:1px solid #76594b99; border-radius:20px; background:#171313aa; box-shadow:0 22px 70px #09070766; } video { display:block; width:100%; height:auto; aspect-ratio:1100/700; border-radius:12px; background:#100d0d; }
figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:13px 4px 1px; color:var(--muted); font-size:.9rem; } a { color:#a8d6c6; text-underline-offset:3px; }
section { margin-top:52px; } h2 { margin:0 0 16px; font-size:1.45rem; letter-spacing:-.02em; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
article { padding:21px; border:1px solid #76594b66; border-radius:14px; background:linear-gradient(145deg,#342824cc,#2b211fcc); } article h3 { margin:0 0 7px; font-size:1rem; color:#ffe6b6; } article p { margin:0; color:var(--muted); }
pre { overflow:auto; margin:0; padding:18px 20px; border:1px solid #76594b66; border-radius:14px; background:#171313cc; color:#ffe6b6; } .review { border-left:3px solid var(--amber); padding:4px 0 4px 17px; color:#ead9bd; } .review p { margin:0; }
footer { margin-top:52px; color:#9d8775; font-size:.82rem; } @media (max-width:650px) { main { width:calc(100% - 26px); padding-top:36px; } .grid { grid-template-columns:1fr; } figcaption { display:block; } figcaption span { display:block; margin-top:5px; } }
</style>
</head>
<body>
<main>
<div class="eyebrow">muxg · native appearance</div>
<h1>Fonts and config for muxg</h1>
<p class="lede">Slice 2 gives the native client a font config file. It keeps the original legacy appearance by default while making font family and point size configurable.</p>
<div class="status"><i aria-hidden="true"></i>Recorded demo approved · 6 September 2026</div>
<figure class="video-card">
<video controls playsinline preload="metadata" poster="preview.png" width="1100" height="700" aria-label="Native appearance slice 2 demo">
<source src="demo.mp4" type="video/mp4">
Your browser cannot play this video. <a href="demo.mp4">Download the demo video</a>.
</video>
<figcaption><span>33.2 seconds · 1100 × 700 · NVIDIA · isolated headless Sway at 200%</span><span>No audio · restart cuts at 10.2s and 25.8s · <a href="demo.mp4">direct video</a></span></figcaption>
</figure>
<section>
<h2>What this slice achieves</h2>
<div class="grid">
<article><h3>Strict, small config</h3><p>Config is read from <code>$XDG_CONFIG_HOME/mux/config</code>, falling back to <code>~/.config/mux/config</code>. Unknown keys and malformed values identify the file and line. Unavailable fonts identify the requested family. Each key appears once.</p></article>
<article><h3>Predictable precedence</h3><p>CLI family and size options override their matching config values. Legacy <code>--font-px</code> remains available and is rejected when combined with the decimal point size flag.</p></article>
<article><h3>Ghostty-style points</h3><p><code>font-family = "CommitMono Nerd Font Mono"</code> and <code>font-size = 12.4</code> are the demo configuration. Fractions survive display scaling and the selected family stays in use when display scale changes.</p></article>
<article><h3>Font coverage</h3><p>Regular, bold, italic, bold italic, and icon glyphs use the selected family. Restart the client to apply config edits. Font fallback and programming ligatures remain separate work.</p></article>
</div>
</section>
<section>
<h2>Configuration used in the demo</h2>
<pre><code># $XDG_CONFIG_HOME/mux/config
font-family = "CommitMono Nerd Font Mono"
font-size = 12.4</code></pre>
<p style="margin:14px 0 0;color:#c4aa8d">Changing this file takes effect on the next launch. The demo restarts muxg while keeping its sessions, then exercises CLI font overrides.</p>
</section>
<section>
<h2>What to review</h2>
<div class="review"><p>The user approved this recorded demo on 6 September 2026 (“lgtm, continue to next sprint”). With no config, the original colors remain selected. Ghostty theme-file loading is the next agreed slice; ligatures remain a later discussion.</p></div>
</section>
<section>
<h2>Validation status</h2>
<p style="margin:0;color:#c4aa8d">CI, native units and the full native integration suite passed. Config, CLI overrides, shell survival, Nerd Font icons and 200% → 100% → 150% → 200% scale changes passed on NVIDIA Wayland. Both NVIDIA stress runs passed: default-font frame p99 19.47 ms and configured Nerd Font 18.83 ms (20 ms limit); sampled input-to-painted upper bounds were 70.3 ms and 55.5 ms (250 ms limit). Frame timing includes retained-frame readback and vsync. Earlier NVIDIA failures remain recorded; these runs do not establish a performance improvement. No physical-display or macOS validation is claimed.</p>
</section>
<footer>Native appearance slice 2 · review artifact</footer>
</main>
</body>
</html>