style: make links less subtle with visible underlines (#138)

ubmit · claude · web-flow · commit 6d9fee08aa55 · 2026-03-14T20:58:45.000Z
Co-authored-by: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/components/SubtleLink.astro b/src/components/SubtleLink.astro
@@ -11,7 +11,7 @@ const { href, target } = Astro.props;
   href={href}
   target={target}
   rel="noopener noreferrer"
-  class="decoration-ledger-line hover:text-gray-1200 underline underline-offset-4 transition-colors"
+  class="decoration-gray-600 hover:text-gray-1200 hover:decoration-gray-800 underline underline-offset-4 transition-colors"
 >
   <slot /></a
 >
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -49,11 +49,15 @@
   }
 
   .prose a {
-    color: var(--color-gray-1100);
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-gray-400);
+    text-underline-offset: 4px;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
   }
 
   .prose a:hover {
     color: var(--color-gray-1200);
+    text-decoration-color: var(--color-gray-600);
   }
 
   .prose code {

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const { href, target } = Astro.props;`
`11`	`11`	`href={href}`
`12`	`12`	`target={target}`
`13`	`13`	`rel="noopener noreferrer"`
`14`		`- class="decoration-ledger-line hover:text-gray-1200 underline underline-offset-4 transition-colors"`
	`14`	`+ class="decoration-gray-600 hover:text-gray-1200 hover:decoration-gray-800 underline underline-offset-4 transition-colors"`
`15`	`15`	`>`
`16`	`16`	`<slot /></a`
`17`	`17`	`>`
Original file line number	Diff line number	Diff line change
`@@ -49,11 +49,15 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`.prose a {`
`52`		`- color: var(--color-gray-1100);`
	`52`	`+ text-decoration-line: underline;`
	`53`	`+ text-decoration-color: var(--color-gray-400);`
	`54`	`+ text-underline-offset: 4px;`
	`55`	`+ transition: color 0.2s ease, text-decoration-color 0.2s ease;`
`53`	`56`	`}`
`54`	`57`
`55`	`58`	`.prose a:hover {`
`56`	`59`	`color: var(--color-gray-1200);`
	`60`	`+ text-decoration-color: var(--color-gray-600);`
`57`	`61`	`}`
`58`	`62`
`59`	`63`	`.prose code {`