multipleof4/stain.otf
1
0
Fork 0
mirror of https://github.com/multipleof4/stain.otf.git synced 2026-01-13 16:17:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Preview pure Stain (no lowercase fallback)

Browse Source
This commit is contained in:
multipleof4
2025-11-08 23:00:55 -08:00
parent d2def65ee6
commit 365e6790a2
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -4,13 +4,11 @@
<meta charset="UTF-8" />
<title>StainFont Preview</title>
<style>
* {
box-sizing: border-box;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, -sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
background: #050505;
color: #f5f5f5;
}
@@ -111,7 +109,7 @@ a.button-link:hover {
font-display: swap;
}
.preview-text.stain {
font-family: "Stain", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-family: "Stain", sans-serif;
}
.preview-text.system {
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
@@ -130,7 +128,7 @@ a.button-link:hover {
<p>A readable experimental sans serif inspired by Candara’s soft geometry.</p>
<label for="text">Custom Preview Text</label>
<textarea id="text">StainFont Regular — CLEAN, HUMAN, READABLE.
<textarea id="text">StainFont Regular — clean, human, readable.
The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="controls">
@@ -145,7 +143,7 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="preview">
<div class="preview-label">StainFont — Large Display</div>
<div class="preview-text stain" id="pvDisplay">
StainFont Regular — CLEAN, HUMAN, READABLE.
StainFont Regular — clean, human, readable.
</div>
</div>
<div class="preview">
@@ -167,7 +165,7 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
<div class="note">
This page uses a generated TTF from the repository build scripts.
Update the generator to iterate on proportions, contrast, and spacing as needed.
All A–Z, a–z, digits, and core punctuation are custom Stain glyphs.
</div>
<script src="./vendor/paper-full.min.js"></script>
@@ -175,6 +173,8 @@ The quick brown fox jumps over the lazy dog 0123456789.</textarea>
const textArea = document.getElementById("text");
const pvDisplay = document.getElementById("pvDisplay");
const pvSentence = document.getElementById("pvSentence");
const pvSys = document.getElementById("pvSys");
const pvStain = document.getElementById("pvStain");
const btnSystem = document.getElementById("btnSystem");
const btnStain = document.getElementById("btnStain");
@@ -182,6 +182,8 @@ function syncText() {
const v = textArea.value || " ";
pvDisplay.textContent = v;
pvSentence.textContent = v;
pvSys.textContent = v;
pvStain.textContent = v;
}
textArea.addEventListener("input", syncText);
syncText();