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/politics-annotated.html
View File

@@ -6,7 +6,7 @@
<title>What We Get Wrong About Politics</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=Bebas+Neue&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Special+Elite&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0b0907;
@@ -68,7 +68,7 @@ body::before {
}
.masthead-label {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 11px;
letter-spacing: 0.35em;
color: var(--red);
@@ -77,7 +77,7 @@ body::before {
}
.masthead-title {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: clamp(28px, 5vw, 52px);
line-height: 1;
letter-spacing: 0.04em;
@@ -115,7 +115,7 @@ body::before {
.tab-nav::-webkit-scrollbar-thumb { background: var(--red); }
.tab-btn {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
@@ -159,7 +159,7 @@ body::before {
/* ─── PROSE ─── */
.prose h2 {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 26px;
letter-spacing: 0.08em;
color: var(--red-bright);
@@ -253,7 +253,7 @@ body::before {
.decode-label {
display: block;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
@@ -267,7 +267,7 @@ body::before {
font-size: 14px;
color: var(--ochre);
margin-bottom: 8px;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
letter-spacing: 0.06em;
}
@@ -376,7 +376,7 @@ body::before {
}
.lightbox-title {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 18px;
letter-spacing: 0.1em;
color: var(--parchment);
@@ -404,7 +404,7 @@ body::before {
}
.lightbox-body h3 {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 16px;
letter-spacing: 0.1em;
color: var(--red-bright);
@@ -426,7 +426,7 @@ body::before {
/* ─── ACCORDION ─── */
.acc-section-title {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 22px;
letter-spacing: 0.08em;
color: var(--red-bright);
@@ -497,7 +497,7 @@ body::before {
/* ─── FURTHER READING ─── */
.reading-group-title {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 16px;
letter-spacing: 0.2em;
text-transform: uppercase;
@@ -533,7 +533,7 @@ body::before {
.reading-tag {
display: inline-block;
font-size: 10px;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
letter-spacing: 0.15em;
color: var(--red);
border: 1px solid var(--red);
@@ -565,7 +565,7 @@ body::before {
}
.callout-label {
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 10px;
letter-spacing: 0.3em;
color: var(--ochre);
@@ -577,7 +577,7 @@ body::before {
/* ─── STAMP ─── */
.stamp {
display: inline-block;
font-family: 'Bebas Neue', sans-serif;
font-family: 'Fredericka the Great', sans-serif;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;