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

28
Writings/HowToBuildARaft_Annotated.html
View File

@@ -6,7 +6,7 @@
<title>How to Build a Raft — Annotated</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Glass+Antiqua&family=Crimson+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -68,7 +68,7 @@ body {
opacity: 0.85;
}
.site-title {
font-family: 'Cinzel Decorative', serif;
font-family: 'Glass Antiqua', serif;
font-size: clamp(1.5rem, 4.5vw, 3rem);
font-weight: 700;
color: #f3e5bb;
@@ -78,7 +78,7 @@ body {
text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 30px rgba(200,150,50,0.15);
}
.site-subtitle {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.8rem;
color: rgba(220,195,140,0.65);
letter-spacing: 0.3em;
@@ -99,7 +99,7 @@ body {
flex-wrap: wrap;
}
.nav-btn {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.16em;
@@ -166,7 +166,7 @@ body {
hyphens: auto;
}
.story-body > p:first-of-type::first-letter {
font-family: 'Cinzel Decorative', serif;
font-family: 'Glass Antiqua', serif;
font-size: 3.9em;
float: left;
line-height: 0.75;
@@ -227,7 +227,7 @@ body {
.decode-label {
display: block;
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.63rem;
letter-spacing: 0.22em;
text-transform: uppercase;
@@ -236,7 +236,7 @@ body {
}
.decode-term {
display: block;
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--forest);
@@ -247,7 +247,7 @@ body {
.decode-link {
display: block;
margin-top: 0.45rem;
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.68rem;
color: var(--forest);
text-decoration: none;
@@ -310,7 +310,7 @@ body {
background: linear-gradient(to right, rgba(45,90,46,0.07), transparent);
}
.lightbox-title {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--forest);
@@ -336,7 +336,7 @@ body {
color: var(--ink);
}
.lightbox-body h3 {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
@@ -371,7 +371,7 @@ body {
justify-content: space-between;
align-items: center;
gap: 0.75rem;
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.79rem;
font-weight: 600;
letter-spacing: 0.06em;
@@ -409,7 +409,7 @@ body {
/* ── SECTION HEADERS ── */
.section-title {
font-family: 'Cinzel Decorative', serif;
font-family: 'Glass Antiqua', serif;
font-size: clamp(1.25rem, 3.5vw, 1.8rem);
color: var(--forest);
text-align: center;
@@ -428,7 +428,7 @@ body {
/* ── FURTHER READING ── */
.reading-group-title {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
@@ -459,7 +459,7 @@ body {
flex: 1 1 200px;
}
.reading-tag {
font-family: 'Cinzel', serif;
font-family: 'Glass Antiqua', serif;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;