mirror of
https://github.com/multipleof4/stain.otf.git
synced 2026-01-13 16:17:55 +00:00
Delete index.html
This commit is contained in:
205
index.html
205
index.html
@@ -1,205 +0,0 @@
|
||||
<!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", 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.
|
||||
All A–Z, a–z, digits, and core punctuation are custom Stain glyphs.
|
||||
</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 pvSys = document.getElementById("pvSys");
|
||||
const pvStain = document.getElementById("pvStain");
|
||||
const btnSystem = document.getElementById("btnSystem");
|
||||
const btnStain = document.getElementById("btnStain");
|
||||
|
||||
function syncText() {
|
||||
const v = textArea.value || " ";
|
||||
pvDisplay.textContent = v;
|
||||
pvSentence.textContent = v;
|
||||
pvSys.textContent = v;
|
||||
pvStain.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>
|
||||
Reference in New Issue
Block a user