jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Font refactor: replace generic display fonts across Videos + Writings

Browse Source 
Renegade Storyteller:
- Ribeye Marrow → Amarante (Art Nouveau, cleaner mobile rendering)
- h1 floor reduced 4rem → 3rem
- h1::before letter-spacing tightened on mobile (was overflowing narrow screens)

Writings (11 files via script):
- Bebas Neue → Fredericka the Great (4 files)
- Anton → Rubik Glitch (2 files)
- Cinzel / Cinzel Decorative → Glass Antiqua (5 files)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
JL Kruger
2026-03-27 15:50:20 +02:00
parent 2f5c06fee8
commit fc60904e69
12 changed files with 113 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Writings/iwashere-annotated.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Was Here — Annotated Edition</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=IM+Fell+English:ital@0;1&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
@@ -76,7 +76,7 @@ body {
/* Illuminated corner flourishes */
.site-header::before,
.site-header::after {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 3.5rem;
color: var(--gold-dim);
position: absolute;
@@ -103,7 +103,7 @@ body {
}
.header-ornament-top {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 1.4rem;
color: var(--gold-dim);
letter-spacing: 0.6em;
@@ -112,7 +112,7 @@ body {
}
h1 {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-weight: 700;
font-size: clamp(2.8rem, 10vw, 6rem);
letter-spacing: 0.12em;
@@ -128,7 +128,7 @@ h1 {
}
.header-subtitle {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.75rem;
letter-spacing: 0.35em;
color: var(--forest-dim);
@@ -151,7 +151,7 @@ h1 {
opacity: 0.5;
}
.header-rule span {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.9rem;
color: var(--gold-dim);
letter-spacing: 0.3em;
@@ -184,7 +184,7 @@ h1 {
background: transparent; border: none;
border-bottom: 2px solid transparent;
color: var(--ink-dim);
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.68rem; letter-spacing: 0.22em;
padding: 1rem 1.4rem 0.8rem;
cursor: pointer; transition: all 0.2s;
@@ -214,7 +214,7 @@ h1 {
/* ── DROP CAP — for each named section ────────── */
.section-opener::first-letter {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 4.2em;
font-weight: 700;
float: left;
@@ -244,7 +244,7 @@ h1 {
position: relative;
}
.section-head-num {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.62rem;
letter-spacing: 0.4em;
text-transform: uppercase;
@@ -253,7 +253,7 @@ h1 {
margin-bottom: 0.1rem;
}
.section-head-title {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 1rem;
letter-spacing: 0.2em;
color: var(--forest-dim);
@@ -277,7 +277,7 @@ h1 {
.fear-refrain::before, .fear-refrain::after {
content: '✦';
font-style: normal;
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
color: var(--border-dim);
font-size: 0.6rem;
position: absolute;
@@ -297,7 +297,7 @@ h1 {
position: relative;
}
.catalogue-label {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
@@ -316,7 +316,7 @@ h1 {
padding: 4rem 0 2rem;
}
.final-words {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.18em;
@@ -345,7 +345,7 @@ h1 {
margin-top: 3.5rem;
}
.challenge-box .ch-label {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.62rem; letter-spacing: 0.28em;
color: var(--ink-faint); margin-bottom: 0.5rem;
}
@@ -394,12 +394,12 @@ h1 {
.decode-label {
display: block;
font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em;
font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
color: var(--forest-faint); margin-bottom: 0.25rem;
}
.decode-term {
display: block;
font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.06em;
font-family: 'Glass Antiqua', serif; font-size: 1rem; letter-spacing: 0.06em;
color: var(--gold-faint); margin-bottom: 0.4rem;
}
.decoder-panel .panel-body {
@@ -444,7 +444,7 @@ h1 {
.mn-label {
display: block;
font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.28em;
font-family: 'Glass Antiqua', serif; font-size: 0.6rem; letter-spacing: 0.28em;
color: var(--ink-faint); margin-bottom: 0.25rem;
}
.marginnote-panel .panel-body {
@@ -489,7 +489,7 @@ h1 {
background: var(--vellum-dark); position: sticky; top: 0;
}
.lb-title {
font-family: 'Cinzel', serif; font-size: 1rem;
font-family: 'Glass Antiqua', serif; font-size: 1rem;
letter-spacing: 0.1em; color: var(--forest);
}
.lb-close {
@@ -502,7 +502,7 @@ h1 {
.lb-close:hover { background: var(--forest); color: var(--gold-faint); border-color: var(--forest); }
.lb-body { padding: 1.6rem; }
.lb-body h3 {
font-family: 'Cinzel', serif; font-size: 0.68rem;
font-family: 'Glass Antiqua', serif; font-size: 0.68rem;
letter-spacing: 0.25em; color: var(--forest-dim);
margin: 1.4rem 0 0.5rem; padding-bottom: 0.35rem;
border-bottom: 1px solid var(--vellum-aged);
@@ -525,7 +525,7 @@ h1 {
background: var(--vellum-mid); border: none; width: 100%;
text-align: left; padding: 0.95rem 1.1rem; cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em;
font-family: 'Glass Antiqua', serif; font-size: 0.72rem; letter-spacing: 0.1em;
color: var(--ink-dim); transition: all 0.18s; gap: 1rem;
}
.acc-trigger:hover { background: var(--vellum-dark); color: var(--ink-mid); }
@@ -553,7 +553,7 @@ h1 {
padding: 4rem 1.5rem 6rem;
}
.edu-wrap > h2 {
font-family: 'Cinzel', serif; font-weight: 600;
font-family: 'Glass Antiqua', serif; font-weight: 600;
font-size: clamp(1.6rem, 4vw, 2.2rem);
letter-spacing: 0.12em; color: var(--forest);
margin-bottom: 0.2rem;
@@ -567,7 +567,7 @@ h1 {
/* ── FURTHER READING ────────────────────────── */
.reading-section h3 {
font-family: 'Cinzel', serif; font-size: 0.65rem;
font-family: 'Glass Antiqua', serif; font-size: 0.65rem;
letter-spacing: 0.28em; color: var(--forest-dim);
margin: 2rem 0 0.65rem; padding-bottom: 0.4rem;
border-bottom: 1px solid var(--vellum-aged);