From 89cfe7bdec474db0c669c70f247a66feaeb9362c Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Mon, 20 Jul 2026 12:11:29 -0700
Subject: [PATCH] fix subpixel shift when link hover brackets appear

---
 public/theme.css | 47 +++++++++++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/public/theme.css b/public/theme.css
index a947127..ea6dcb7 100644
--- a/public/theme.css
+++ b/public/theme.css
@@ -356,28 +356,32 @@ nav {
   justify-content: flex-end;
   list-style: none;
   padding-block: var(--stack-small);
-  padding-inline: 1ch;
+  padding-inline: 0;
 }
 .display-prefs-nav summary::-webkit-details-marker {
   display: none;
 }
-.display-prefs-nav summary:hover {
-  padding-inline: 0;
+.display-prefs-nav summary::before {
+  color: transparent;
+  text-shadow: none;
+  content: "[" / "";
 }
-.display-prefs-nav summary:hover::before {
-  color: var(--color-glow);
-  content: "[";
+.display-prefs-nav summary::after {
+  color: transparent;
+  text-shadow: none;
+  content: "]" / "";
 }
+.display-prefs-nav summary:hover::before,
 .display-prefs-nav summary:hover::after {
   color: var(--color-glow);
-  content: "]";
+  text-shadow: inherit;
 }
 .display-prefs-nav summary > span {
   translate: 0 -0.225em;
 }
 .display-prefs-panel {
   background-color: var(--color-bg);
-  border: 2px solid var(--color-accent);
+  border: 1px solid var(--color-accent);
   min-inline-size: 10em;
   padding-block: var(--stack-small);
   padding-inline: var(--gutter-small);
@@ -414,21 +418,30 @@ form p {
 a {
   color: var(--color-fg);
   margin: 0 -1ch;
-  padding: 0 1ch;
   text-decoration: underline;
   text-decoration-color: var(--color-glow);
 
-  &:hover::before {
-    color: var(--color-glow);
-    content: "[";
+  /* Brackets always occupy their space and hover only reveals them. Swapping
+     ch-based padding for a rendered glyph shifts the text by a subpixel,
+     because the fluid root font-size makes 1ch fractional.
+     The / "" keeps them out of the accessible name. */
+  &::before {
+    color: transparent;
+    text-shadow: none;
+    content: "[" / "";
   }
+  &::after {
+    color: transparent;
+    text-shadow: none;
+    content: "]" / "";
+  }
+  &:hover::before,
   &:hover::after {
     color: var(--color-glow);
-    content: "]";
+    text-shadow: inherit;
   }
   &:hover {
     color: var(--color-fg);
-    padding: 0;
     text-decoration: none;
   }
 }
@@ -439,10 +452,8 @@ footer a {
   margin: 0 auto;
   padding: 0;
 
-  &:hover::before {
-    content: none;
-  }
-  &:hover::after {
+  &::before,
+  &::after {
     content: none;
   }
 }