From ec2928b5101fa4ad0835efddc404051e4a9be28c Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Sun, 22 Mar 2026 15:08:49 +0800
Subject: [PATCH] style(css): add decorative underline on link hover states

Give links across hero, table entries, expand panel, and footer a
semi-transparent underline on hover using text-decoration-color and
text-underline-offset, so interactive affordances are more visible
without changing the base text color. Hero sub-links are split into
their own rule to carry the additional underline style independently.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/static/style.css | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/website/static/style.css b/website/static/style.css
index 24113ff..6f80e1a 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -190,11 +190,15 @@ kbd {
 }
 
 .hero-topbar-link:hover,
-.hero-sub a:hover,
 .hero-scrollcue:hover {
   color: var(--hero-text);
 }
 
+.hero-sub a:hover {
+  color: var(--hero-text);
+  text-decoration-color: oklch(100% 0 0 / 0.6);
+}
+
 .hero-topbar-actions {
   display: flex;
   align-items: center;
@@ -615,6 +619,9 @@ kbd {
 
 .col-name > a:hover {
   color: var(--accent-deep);
+  text-decoration: underline;
+  text-decoration-color: oklch(58% 0.16 45 / 0.4);
+  text-underline-offset: 0.2em;
 }
 
 th[data-sort] {
@@ -737,9 +744,11 @@ th[data-sort].sort-asc::after {
 
 .expand-desc a:hover,
 .expand-also-see a:hover,
-.expand-meta a:hover,
-.footer a:hover {
+.expand-meta a:hover {
   color: var(--accent);
+  text-decoration: underline;
+  text-decoration-color: oklch(58% 0.16 45 / 0.4);
+  text-underline-offset: 0.2em;
 }
 
 .expand-also-see,
@@ -869,6 +878,9 @@ th[data-sort].sort-asc::after {
 
 .footer a:hover {
   color: oklch(95% 0.01 80);
+  text-decoration: underline;
+  text-decoration-color: oklch(95% 0.01 80 / 0.4);
+  text-underline-offset: 0.2em;
 }
 
 .footer-brand {