mirror of
https://github.com/multipleof4/stain.otf.git
synced 2026-01-13 16:17:55 +00:00
204 lines
4.6 KiB
HTML
204 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>StainFont Preview</title>
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
padding: 2rem;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, -sans-serif;
|
||
background: #050505;
|
||
color: #f5f5f5;
|
||
}
|
||
h1 {
|
||
margin: 0 0 0.5rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
h2 {
|
||
margin: 2rem 0 0.75rem;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
opacity: 0.9;
|
||
}
|
||
p {
|
||
margin: 0.25rem 0;
|
||
opacity: 0.85;
|
||
font-size: 0.9rem;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin: 1.5rem 0 0.4rem;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
opacity: 0.9;
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
max-width: 900px;
|
||
height: 120px;
|
||
padding: 0.75rem;
|
||
border-radius: 4px;
|
||
border: 1px solid #333;
|
||
background: #111;
|
||
color: #f5f5f5;
|
||
resize: vertical;
|
||
font-size: 1rem;
|
||
line-height: 1.5;
|
||
}
|
||
.controls {
|
||
margin-top: 1rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
}
|
||
button,
|
||
a.button-link {
|
||
padding: 0.5rem 1.1rem;
|
||
border-radius: 4px;
|
||
border: none;
|
||
cursor: pointer;
|
||
background: #f5f5f5;
|
||
color: #000;
|
||
font-size: 0.8rem;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
}
|
||
button:hover,
|
||
a.button-link:hover {
|
||
background: #ddd;
|
||
}
|
||
.preview-wrap {
|
||
margin-top: 1.5rem;
|
||
display: grid;
|
||
gap: 0.9rem;
|
||
max-width: 900px;
|
||
}
|
||
.preview {
|
||
padding: 1.1rem 1rem 1.2rem;
|
||
border-radius: 4px;
|
||
background: #111;
|
||
border: 1px solid #333;
|
||
}
|
||
.preview-label {
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
opacity: 0.7;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.preview-text {
|
||
font-size: 2.1rem;
|
||
line-height: 1.25;
|
||
}
|
||
.preview-text.small {
|
||
font-size: 1.1rem;
|
||
}
|
||
.preview-text.mono {
|
||
font-size: 0.85rem;
|
||
}
|
||
@font-face {
|
||
font-family: "Stain";
|
||
src: url("./dist/Stain-Regular.ttf") format("truetype");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
.preview-text.stain {
|
||
font-family: "Stain", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
.preview-text.system {
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||
}
|
||
.note {
|
||
margin-top: 2rem;
|
||
max-width: 900px;
|
||
font-size: 0.78rem;
|
||
opacity: 0.6;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>StainFont Regular</h1>
|
||
<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.
|
||
The quick brown fox jumps over the lazy dog 0123456789.</textarea>
|
||
|
||
<div class="controls">
|
||
<button id="btnSystem">Use system font</button>
|
||
<button id="btnStain">Use StainFont</button>
|
||
<a class="button-link" href="./dist/Stain-Regular.ttf" download="Stain-Regular.ttf">
|
||
Download TTF
|
||
</a>
|
||
</div>
|
||
|
||
<div class="preview-wrap">
|
||
<div class="preview">
|
||
<div class="preview-label">StainFont — Large Display</div>
|
||
<div class="preview-text stain" id="pvDisplay">
|
||
StainFont Regular — CLEAN, HUMAN, READABLE.
|
||
</div>
|
||
</div>
|
||
<div class="preview">
|
||
<div class="preview-label">StainFont — Sentence Case</div>
|
||
<div class="preview-text stain small" id="pvSentence">
|
||
The quick brown fox jumps over the lazy dog 0123456789.
|
||
</div>
|
||
</div>
|
||
<div class="preview">
|
||
<div class="preview-label">System vs Stain Comparison (same text)</div>
|
||
<div class="preview-text system mono" id="pvSys">
|
||
StainFont mirrors a soft sans like Candara.
|
||
</div>
|
||
<div class="preview-text stain mono" id="pvStain">
|
||
StainFont mirrors a soft sans like Candara.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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.
|
||
</div>
|
||
|
||
<script src="./vendor/paper-full.min.js"></script>
|
||
<script>
|
||
const textArea = document.getElementById("text");
|
||
const pvDisplay = document.getElementById("pvDisplay");
|
||
const pvSentence = document.getElementById("pvSentence");
|
||
const btnSystem = document.getElementById("btnSystem");
|
||
const btnStain = document.getElementById("btnStain");
|
||
|
||
function syncText() {
|
||
const v = textArea.value || " ";
|
||
pvDisplay.textContent = v;
|
||
pvSentence.textContent = v;
|
||
}
|
||
textArea.addEventListener("input", syncText);
|
||
syncText();
|
||
|
||
btnSystem.addEventListener("click", () => {
|
||
document.querySelectorAll(".preview-text").forEach(el => {
|
||
el.classList.remove("stain");
|
||
el.classList.add("system");
|
||
});
|
||
});
|
||
btnStain.addEventListener("click", () => {
|
||
document.querySelectorAll(".preview-text").forEach(el => {
|
||
el.classList.remove("system");
|
||
el.classList.add("stain");
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|