diff options
4 files changed, 46 insertions, 3 deletions
diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css index f2182a6..1588b61 100644 --- a/themes/danix-xyz-hacker/assets/css/main.css +++ b/themes/danix-xyz-hacker/assets/css/main.css @@ -23,6 +23,12 @@ --type-quote: #00ff88; --type-link: #38bdf8; --type-photo: #ec4899; + /* Article type text colors - dark (all black for WCAG AA) */ + --type-tech-text: #000000; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #000000; } /* Light theme overrides */ @@ -46,6 +52,12 @@ html.theme-light { --type-quote: #008f5a; --type-link: #0284c7; --type-photo: #be185d; + /* Article type text colors - light (mixed for WCAG AA) */ + --type-tech-text: #ffffff; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #ffffff; } /* No-JS fallback: prefers-color-scheme light */ @@ -69,6 +81,11 @@ html.theme-light { --type-quote: #008f5a; --type-link: #0284c7; --type-photo: #be185d; + --type-tech-text: #ffffff; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #ffffff; } } diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index 362d7df..8604392 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -2583,6 +2583,10 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg { white-space: nowrap; } +.whitespace-nowrap { + white-space: nowrap; +} + .rounded { border-radius: 0.25rem; } @@ -2695,6 +2699,11 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg { padding-right: 0.5rem; } +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -3013,6 +3022,12 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg { --type-quote: #00ff88; --type-link: #38bdf8; --type-photo: #ec4899; + /* Article type text colors - dark (all black for WCAG AA) */ + --type-tech-text: #000000; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #000000; } /* Light theme overrides */ @@ -3037,6 +3052,12 @@ html.theme-light { --type-quote: #008f5a; --type-link: #0284c7; --type-photo: #be185d; + /* Article type text colors - light (mixed for WCAG AA) */ + --type-tech-text: #ffffff; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #ffffff; } /* No-JS fallback: prefers-color-scheme light */ @@ -3061,6 +3082,11 @@ html.theme-light { --type-quote: #008f5a; --type-link: #0284c7; --type-photo: #be185d; + --type-tech-text: #ffffff; + --type-life-text: #000000; + --type-quote-text: #000000; + --type-link-text: #000000; + --type-photo-text: #ffffff; } } diff --git a/themes/danix-xyz-hacker/layouts/partials/article-card.html b/themes/danix-xyz-hacker/layouts/partials/article-card.html index 0f5cfb9..d803464 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-card.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-card.html @@ -41,8 +41,8 @@ <!-- Type badge pill overlay --> {{ if $typeData }} <div - class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity" - style="background-color: var(--type-{{ $articleType }});" + class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity" + style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);" > {{ i18n $articleType }} </div> diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html index 63b2a97..94c78a5 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-header.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html @@ -63,7 +63,7 @@ <!-- Type badge --> {{ if and $typeData $hasType }} - <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200 text-white" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }});"> + <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"> {{ i18n $articleType }} </span> {{ end }} |