mirror of
https://github.com/multipleof4/stain.otf.git
synced 2026-01-13 16:17:55 +00:00
100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Stain Font</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<style>
|
|
:root {
|
|
--bg: #f8f7f2;
|
|
--ink: #1a1a1a;
|
|
--accent: #a6a6a6;
|
|
}
|
|
@font-face { font-family: "Stain"; src: url("./dist/Stain.otf") format("opentype"); }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; min-height: 100vh;
|
|
background: var(--bg); color: var(--ink);
|
|
font-family: "Stain", sans-serif;
|
|
overflow-x: hidden;
|
|
padding: 2rem;
|
|
}
|
|
/* Creative ink stains */
|
|
.stain-mark {
|
|
position: absolute; z-index: -1; pointer-events: none; opacity: 0.06;
|
|
background: #000; border-radius: 50%; filter: blur(30px);
|
|
}
|
|
.s1 { top: -5%; left: -5%; width: 40vw; height: 40vw; }
|
|
.s2 { bottom: -10%; right: -5%; width: 50vw; height: 50vw; }
|
|
.s3 { top: 40%; left: 60%; width: 200px; height: 200px; filter: blur(60px); opacity: 0.08; }
|
|
|
|
.container {
|
|
max-width: 900px; margin: 0 auto;
|
|
min-height: 85vh; display: flex; flex-direction: column; justify-content: space-between;
|
|
}
|
|
header {
|
|
text-align: center;
|
|
border-bottom: 4px solid var(--ink);
|
|
padding-bottom: 2rem; margin-bottom: 4rem;
|
|
border-radius: 0 0 50% 50% / 0 0 10px 10px; /* Ink bleed edge */
|
|
}
|
|
h1 { font-size: clamp(4rem, 15vw, 9rem); margin: 0; line-height: 0.8; text-transform: uppercase; }
|
|
|
|
/* Dictionary definition block */
|
|
.def-block { margin-bottom: 4rem; }
|
|
.word { font-size: clamp(3rem, 8vw, 5rem); margin: 0 0 1rem; display: block; }
|
|
.pos { font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 1.5rem; font-style: italic; }
|
|
.meaning {
|
|
font-size: clamp(1.2rem, 3.5vw, 2rem);
|
|
line-height: 1.2;
|
|
margin-bottom: 1.5rem;
|
|
padding-left: 1.5rem;
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.info { text-align: center; font-size: 1.1rem; color: var(--accent); margin: 3rem 0; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
|
|
.download-area { text-align: center; margin-top: auto; }
|
|
.btn {
|
|
display: inline-block; padding: 1.5rem 3rem;
|
|
font-size: 2rem; color: var(--bg); background: var(--ink);
|
|
text-decoration: none; border-radius: 90% 40% 80% 30% / 40% 80% 50% 70%; /* organic blot shape */
|
|
transition: 0.2s ease;
|
|
}
|
|
.btn:hover { transform: scale(1.05) rotate(-1deg); border-radius: 50% 90% 30% 80% / 90% 30% 70% 40%; }
|
|
.repo-link { display: block; margin-top: 2rem; color: var(--ink); text-decoration: none; font-size: 1rem; }
|
|
.repo-link:hover { text-decoration: underline; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stain-mark s1"></div>
|
|
<div class="stain-mark s2"></div>
|
|
<div class="stain-mark s3"></div>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1>Stain Font</h1>
|
|
</header>
|
|
|
|
<section class="def-block">
|
|
<span class="word">stain</span>
|
|
<span class="pos">noun</span>
|
|
<div class="meaning">1. a colored patch or dirty mark that is difficult to remove.</div>
|
|
<div class="meaning">2. a mark of disgrace associated with a particular circumstance quality or person.</div>
|
|
</section>
|
|
|
|
<section class="info">
|
|
A programmatic font inspired by Candara.<br>
|
|
Designed by [REDACTED].<br>
|
|
Open Source. Public Domain.
|
|
</section>
|
|
|
|
<section class="download-area">
|
|
<a href="./dist/Stain.otf" class="btn" download>Download Stain.OTF</a>
|
|
<a href="https://github.com/multipleof4/stain.otf" class="repo-link">github.com / multipleof4 / stain.otf</a>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|