From 365e6790a21739d6405b534380f25c7d192f81f5 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Sat, 8 Nov 2025 23:00:55 -0800
Subject: [PATCH] Refactor: Preview pure Stain (no lowercase fallback)

---
 index.html | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index f164edd..9b5d133 100644
--- a/index.html
+++ b/index.html
@@ -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();