valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(prose): ensure headings and links are adaptive and readable in both themes
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 09:23:24 +01:00
parent de0c566c04
commit 5aa58cbd4a
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/tailwind.css
View File

@@ -38,8 +38,10 @@
--font-serif: "Playfair Display", serif; --font-serif: "Playfair Display", serif;
--font-heading: "Playfair Display", serif; --font-heading: "Playfair Display", serif;
--font-sans: "Urbanist", sans-serif; --font-sans: "Urbanist", sans-serif;
}
/* Typography (Prose) - Mapping to semantic variables */ /* Base Theme Variables applied to html for maximum inheritance */
html {
--tw-prose-body: var(--text-primary); --tw-prose-body: var(--text-primary);
--tw-prose-headings: var(--brand-primary); --tw-prose-headings: var(--brand-primary);
--tw-prose-links: var(--brand-primary); --tw-prose-links: var(--brand-primary);
@@ -64,6 +66,9 @@ html[data-theme='light'] {
--text-primary: #2d2114; --text-primary: #2d2114;
--text-secondary: #624a29; --text-secondary: #624a29;
--text-tertiary: #7d5e31; --text-tertiary: #7d5e31;
/* Use a darker gold shade in light mode for proper readability/contrast */
--brand-primary: var(--color-brand-700);
--brand-secondary: var(--color-brand-800);
} }
@layer base { @layer base {
@@ -79,6 +84,7 @@ html[data-theme='light'] {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-family: var(--font-heading);
color: var(--brand-primary); color: var(--brand-primary);
transition: color 0.3s ease;
} }
} }
@@ -103,9 +109,11 @@ html[data-theme='light'] {
max-width: 100%; max-width: 100%;
} }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { /* Force prose headings to use our brand-primary which is now adaptive */
.prose :where(h1, h2, h3, h4, h5, h6) {
color: var(--brand-primary);
font-family: var(--font-heading); font-family: var(--font-heading);
@apply font-bold tracking-tight; @apply font-bold tracking-tight transition-colors duration-300;
} }
.prose a { .prose a {