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

18
Writings/doomy-mcdoomface.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOOMY McDOOMFACE — A Doomsday Primer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Special+Elite&family=Share+Tech+Mono&family=Oswald:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0f0808;
@@ -79,7 +79,7 @@
}
.masthead-title {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: clamp(44px, 8vw, 82px);
line-height: 0.9;
color: var(--bg);
@@ -200,7 +200,7 @@
.story-byline a:hover { color: var(--yellow); }
.story-body h2 {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: clamp(22px, 4vw, 34px);
color: var(--yellow);
text-transform: uppercase;
@@ -328,7 +328,7 @@
}
.decoder-panel .decode-term {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 18px;
color: var(--yellow);
display: block;
@@ -395,7 +395,7 @@
}
.clock-time-display {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 58px;
color: var(--red);
line-height: 1;
@@ -425,7 +425,7 @@
}
.timeline-title {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 22px;
color: var(--yellow);
text-transform: uppercase;
@@ -450,7 +450,7 @@
}
.timeline-time {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 18px;
color: var(--red);
min-width: 90px;
@@ -599,7 +599,7 @@
/* === RESOURCES TAB === */
.resources-section-title {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 20px;
color: var(--yellow);
text-transform: uppercase;
@@ -731,7 +731,7 @@
}
.lightbox-body h3 {
font-family: 'Anton', sans-serif;
font-family: 'Rubik Glitch', sans-serif;
font-size: 24px;
color: var(--yellow);
text-transform: uppercase;