Changeset 2900f1d in Klonkt

Timestamp:

06/19/2026 08:08:06 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

3b6e04a

Parents:

b919a67

Message:

fix: button text unreadable on hover (a:hover overrode accent button text color)

The global a:hover{color:var(--accent)} flipped the text color of every accent
button that is an <a> to the accent color → text = button background = unreadable
(noticeable on sites with a vivid accent, e.g. sound-fabrics #ef2840). Override
added: button anchors keep their own text color on hover (.btn/.epk-btn = ink;
primary/danger/success/feature = white). style.css cache-buster v9->v10.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -296 +296 @@
 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: color var(--transition), text-decoration-color var(--transition); }
 a:hover { color: var(--accent); text-decoration-color: var(--accent); }
+/* Knop-ankers houden hun eigen tekstkleur bij hover. Zonder dit overschrijft de
+   globale a:hover{color:accent} de knop-tekst → die wordt dezelfde kleur als de
+   accent-achtergrond en valt weg (vooral op sites met een felle accent). */
+a.btn:hover, a.epk-btn:hover { color: var(--ink); }
+a.btn-primary:hover, a.btn-danger:hover, a.btn-success:hover, a.button:hover,
+a.epk-btn-primary:hover, a.dls-btn:hover, a.sh-tix:hover, a.dl-go:hover { color: #fff; text-decoration-color: currentColor; }
 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; text-decoration: none; }
 blockquote { margin: 2em 0; padding: .25em 0 .25em 1.25em; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.15em; color: var(--ink-soft); }

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=9">
+<link rel="stylesheet" href="/assets/css/style.css?v=10">
 
 <!-- Audio player styles: loaded on every page so the mini-player works