From 737693db60dcaecfb8653b3824627463dbd74891 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Tue, 3 Feb 2026 09:11:35 -0500
Subject: [PATCH] fix: remove custom CSS, centralize prose styling in tailwind
 config

- Remove custom CSS <style> tags from docs template (violates guidelines)
- Move prose typography customization to tailwind.config.ts
- Use theme tokens for all colors (adjustable with theme)
- Set code blocks to background.secondary (darker than primary)
- Remove duplicate inline typography config from both templates
- Now uses single source of truth for documentation styling
---
 tailwind.config.ts   | 28 +++++++++++++++++++++++++++-
 templates/docs.templ | 35 +++--------------------------------
 2 files changed, 30 insertions(+), 33 deletions(-)
diff --git a/tailwind.config.ts b/tailwind.config.ts
index ec1f9e2..3ab6024 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -27,7 +27,33 @@ const config: Config = {
         'text-secondary': '#565f89',
         'accent': '#7aa2f7',
         'border': '#414868',
-      }
+      },
+      typography: ({ theme }) => ({
+        invert: {
+          css: {
+            '--tw-prose-pre-bg': theme('colors.background.secondary'),
+            code: {
+              backgroundColor: theme('colors.background.primary'),
+              color: theme('colors.text.primary'),
+              fontWeight: '400',
+            },
+            'code::before': {
+              content: '""',
+            },
+            'code::after': {
+              content: '""',
+            },
+            'pre code': {
+              backgroundColor: 'transparent',
+              color: 'inherit',
+            },
+            pre: {
+              backgroundColor: theme('colors.background.secondary'),
+              color: theme('colors.text.primary'),
+            },
+          },
+        },
+      }),
     }
   },
   plugins: [
diff --git a/templates/docs.templ b/templates/docs.templ
index 8964cae..2d4a912 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -24,7 +24,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 							colors: {
 								background: {
 									primary: '#1a1b26',
-									secondary: '#24283b',
+									secondary: '#16161e',
 								},
 								text: {
 									primary: '#c0caf5',
@@ -36,20 +36,7 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 						},
 					}
 				}
-			}
 			</script>
-			<style>
-				.prose pre {
-					background-color: #14151f !important;
-				}
-				.prose code {
-					background-color: #1a1b26 !important;
-					color: #c0caf5 !important;
-				}
-				.prose pre code {
-					background-color: transparent !important;
-				}
-			</style>
 		</head>
 		<body class="bg-background-primary text-text-primary font-sans antialiased">
 			<!-- Mobile Menu Button -->
@@ -387,7 +374,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 							colors: {
 								background: {
 									primary: '#1a1b26',
-									secondary: '#24283b',
+									secondary: '#16161e',
 								},
 								text: {
 									primary: '#c0caf5',
@@ -396,23 +383,7 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
 								border: '#414868',
 								accent: '#7aa2f7',
 							},
-							typography: ({ theme }) => ({
-								invert: {
-									css: {
-										code: {
-											backgroundColor: theme('colors.background.primary'),
-											color: theme('colors.text.primary'),
-										},
-										'pre code': {
-											backgroundColor: 'transparent',
-										},
-										pre: {
-											backgroundColor: '#14151f',
-										},
-									},
-								},
-							}),
-						}
+						},
 					}
 				}
 			</script>
