mirror of
https://github.com/multipleof4/stain.otf.git
synced 2026-01-13 16:17:55 +00:00
209 lines
5.0 KiB
HTML
209 lines
5.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Stain Font Preview</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
:root{
|
|
--bg:#f7f7f9;
|
|
--fg:#111;
|
|
--accent:#2b6cb0;
|
|
--border:#d0d0dd;
|
|
--mono:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0;}
|
|
body{
|
|
background:var(--bg);
|
|
color:var(--fg);
|
|
font-family:var(--mono);
|
|
padding:24px;
|
|
line-height:1.5;
|
|
}
|
|
h1{
|
|
font-size:28px;
|
|
margin-bottom:8px;
|
|
}
|
|
h2{
|
|
font-size:18px;
|
|
margin:24px 0 8px;
|
|
}
|
|
p{margin:4px 0 8px;}
|
|
.row{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:16px;
|
|
margin:8px 0 16px;
|
|
align-items:flex-start;
|
|
}
|
|
label{
|
|
display:block;
|
|
font-size:12px;
|
|
text-transform:uppercase;
|
|
letter-spacing:.08em;
|
|
color:#555;
|
|
margin-bottom:4px;
|
|
}
|
|
.sample{
|
|
padding:12px 10px;
|
|
border-radius:6px;
|
|
border:1px solid var(--border);
|
|
background:#fff;
|
|
min-height:56px;
|
|
display:flex;
|
|
align-items:center;
|
|
font-size:26px;
|
|
overflow-x:auto;
|
|
}
|
|
textarea{
|
|
width:100%;
|
|
padding:8px 10px;
|
|
border-radius:6px;
|
|
border:1px solid var(--border);
|
|
resize:vertical;
|
|
font-family:var(--mono);
|
|
font-size:13px;
|
|
background:#fff;
|
|
color:var(--fg);
|
|
}
|
|
.meta{
|
|
font-size:11px;
|
|
color:#666;
|
|
margin-top:4px;
|
|
}
|
|
.tag{
|
|
display:inline-block;
|
|
padding:1px 6px;
|
|
border-radius:10px;
|
|
border:1px solid var(--border);
|
|
font-size:10px;
|
|
margin-left:4px;
|
|
color:#444;
|
|
}
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
|
|
gap:10px;
|
|
margin-top:6px;
|
|
}
|
|
.cell{
|
|
padding:10px;
|
|
border-radius:6px;
|
|
border:1px solid var(--border);
|
|
background:#fff;
|
|
text-align:center;
|
|
font-size:28px;
|
|
}
|
|
.cell span{
|
|
display:block;
|
|
font-size:10px;
|
|
color:#777;
|
|
margin-top:4px;
|
|
letter-spacing:.08em;
|
|
text-transform:uppercase;
|
|
}
|
|
.pill{
|
|
font-size:10px;
|
|
padding:2px 6px;
|
|
border-radius:10px;
|
|
background:var(--accent);
|
|
color:#fff;
|
|
margin-left:6px;
|
|
}
|
|
a{
|
|
color:var(--accent);
|
|
text-decoration:none;
|
|
}
|
|
a:hover{text-decoration:underline;}
|
|
</style>
|
|
<style>
|
|
@font-face{
|
|
font-family:"Stain";
|
|
src:url("./Stain-Regular.ttf") format("truetype");
|
|
font-style:normal;
|
|
font-weight:400;
|
|
font-display:swap;
|
|
}
|
|
.stain{font-family:"Stain",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
|
|
.candara{font-family:"Candara","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Stain Regular <span class="pill">Preview</span></h1>
|
|
<p>Compare Stain with Candara and system fonts in light mode.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>Quick comparison</h2>
|
|
<div class="row">
|
|
<div>
|
|
<label>Stain</label>
|
|
<div class="sample stain" id="stainSample">
|
|
Aa Bb Cc — Stain
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label>Candara / Fallback</label>
|
|
<div class="sample candara" id="candaraSample">
|
|
Aa Bb Cc — Candara / system
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="meta">
|
|
Note: Current build implements glyphs for A B C a b c only.
|
|
Other characters fall back to system fonts.
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Custom text</h2>
|
|
<p>Type something to view it in Stain alongside Candara / system.</p>
|
|
<textarea id="input" rows="2">Aa Bb Cc Stain vs Candara</textarea>
|
|
<div class="row">
|
|
<div>
|
|
<label>Stain</label>
|
|
<div class="sample stain" id="stainCustom"></div>
|
|
</div>
|
|
<div>
|
|
<label>Candara / Fallback</label>
|
|
<div class="sample candara" id="candaraCustom"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Per-glyph view</h2>
|
|
<p>Available Stain glyphs so far:</p>
|
|
<div class="grid stain">
|
|
<div class="cell">A<span>U+0041</span></div>
|
|
<div class="cell">B<span>U+0042</span></div>
|
|
<div class="cell">C<span>U+0043</span></div>
|
|
<div class="cell">a<span>U+0061</span></div>
|
|
<div class="cell">b<span>U+0062</span></div>
|
|
<div class="cell">c<span>U+0063</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="meta">
|
|
<p>
|
|
Built automatically on push by GitHub Actions.
|
|
See repository history for Stain font evolution.
|
|
</p>
|
|
</section>
|
|
|
|
<script>
|
|
const input=document.getElementById("input");
|
|
const stainCustom=document.getElementById("stainCustom");
|
|
const candaraCustom=document.getElementById("candaraCustom");
|
|
const sync=()=>{
|
|
const v=input.value||"";
|
|
stainCustom.textContent=v;
|
|
candaraCustom.textContent=v;
|
|
};
|
|
input.addEventListener("input",sync);
|
|
window.addEventListener("load",sync);
|
|
</script>
|
|
</body>
|
|
</html>
|