Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

refactor: use Tailwind typography config instead of custom CSS

Browse Source 
Replaced custom <style> blocks with Tailwind Typography plugin configuration
to set dark theme colors for code blocks. This complies with the project
guideline of no custom CSS - all styling now uses Tailwind utilities.

Changes:
- Removed <style> tags from docs templates
- Added typography.extend.invert.css configuration to tailwind.config
- Code blocks now use #14151f background (slightly darker than main #1a1b26)
- Inline code uses theme colors from Tailwind config
- Copy buttons still work with same functionality
This commit is contained in:
john-okeefe
2026-02-02 21:16:46 -05:00
parent 9b58533a81
commit 121b955334
2 changed files with 63 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/docs.templ
+34 -28
View File
@@ -15,19 +15,6 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js"></script>
<style>
/* Fix code block backgrounds for dark theme */
.prose pre {
background-color: #1a1b26 !important;
}
.prose code {
background-color: #1a1b26 !important;
color: #a9b1d6 !important;
}
.prose pre code {
background-color: transparent !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js"></script>
<script>
tailwind.config = {
@@ -45,7 +32,23 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
},
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',
},
},
},
}),
}
}
}
@@ -379,19 +382,6 @@ templ DocsLayoutWithExplorer(nav Navigation, doc Document, user User, explorer A
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lunr-flex@1.0.5/lunr.flex.min.js"></script>
<style>
/* Fix code block backgrounds for dark theme */
.prose pre {
background-color: #14151f !important;
}
.prose code {
background-color: #1a1b26 !important;
color: #a9b1d6 !important;
}
.prose pre code {
background-color: transparent !important;
}
</style>
<script>
tailwind.config = {
darkMode: 'class',
@@ -408,7 +398,23 @@ 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',
},
},
},
}),
}
}
}