From 5df78018f8375f44dd6ad53e1f395594e60f7eb6 Mon Sep 17 00:00:00 2001 From: multipleof4 Date: Wed, 19 Nov 2025 10:04:51 -0800 Subject: [PATCH] Refactor: SVG ink bleed effects + brutalist paper layout --- index.html | 213 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 120 insertions(+), 93 deletions(-) diff --git a/index.html b/index.html index 606f7ea..4f85219 100644 --- a/index.html +++ b/index.html @@ -1,108 +1,135 @@ - - - Stain Typeface - + /* Input Area */ + .input-zone { position:relative;grid-template-columns:1fr;min-height:80vh;display:flex;align-items:center;justify-content:center; } + textarea { + width:100%;background:transparent;border:none;color:var(--ink); + font-family:'Stain';font-size:clamp(3rem, 8vw, 8rem);line-height:0.9; + text-align:center;outline:none;resize:none; + min-height:50vh;overflow:hidden; + } + + /* Footer */ + footer { background:var(--ink);color:var(--bg);padding:4rem 2rem;text-align:center;font-family:sans-serif;font-size:0.8rem; } + footer a { color:#fff;text-decoration:none;opacity:0.6;margin:0 1rem; } + footer a:hover { opacity:1; } + + .dl-btn { + display:inline-block;margin-top:2rem;padding:1.5rem 4rem; + background:var(--bg);color:var(--ink);font-family:'Stain';font-size:2rem; + border-radius:50%;text-decoration:none; + transition:transform 0.3s ease; + } + .dl-btn:hover { transform:scale(1.1) rotate(-3deg); } + + -
- + + -
-

Stain

-
-
- A procedural OpenType typeface constructed with JavaScript.
- Organic curves meet rigorous logic. -
-
-
- -
-
- - -
- -
-
- Type Tester - -
- -
-
- - + - +
+

STAIN

+ Constructed Liquid Geometry +
+ +
+
Description
+
+

+ Stain is a display typeface simulating ink absorption on porous paper. + Strict Bezier curves compromised by organic bleeding logic. +

+
+
+ +
+ +
+ + + +