mirror of
https://github.com/multipleof4/stain.otf.git
synced 2026-01-13 16:17:55 +00:00
Feat: Light mode Stain font comparison page
This commit is contained in:
208
dist/index.html
vendored
Normal file
208
dist/index.html
vendored
Normal file
@@ -0,0 +1,208 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user