From 2b548e0463d5b720c4eb4ce51236c05cba49b462 Mon Sep 17 00:00:00 2001
From: "Calvin A. Allen" <calvin@codingwithcalvin.net>
Date: Thu, 29 Jan 2026 10:38:31 -0500
Subject: [PATCH] fix(blog): use CSS-based icons for lightbox buttons

Replace font characters with CSS-generated shapes for nav arrows and
close button. This ensures icons stay perfectly centered on hover.
---
 src/layouts/PostLayout.astro |  6 +++---
 src/styles/global.css        | 42 +++++++++++++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 82f306e..dbbcad2 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -100,12 +100,12 @@ const year = date.getFullYear();
             <span class="lightbox-title">Full-size image</span>
             <span class="lightbox-hint">Click outside or press Esc to close</span>
           </div>
-          <button class="lightbox-nav lightbox-prev" aria-label="Previous image">&#8249;</button>
+          <button class="lightbox-nav lightbox-prev" aria-label="Previous image"></button>
           <div class="lightbox-container">
             <img src="" alt="" />
           </div>
-          <button class="lightbox-nav lightbox-next" aria-label="Next image">&#8250;</button>
-          <button class="lightbox-close" aria-label="Close">&times;</button>
+          <button class="lightbox-nav lightbox-next" aria-label="Next image"></button>
+          <button class="lightbox-close" aria-label="Close"></button>
           <div class="lightbox-footer">
             <span class="lightbox-counter"></span>
           </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index a4210b8..5972648 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -183,8 +183,7 @@ code {
   right: 1rem;
   background: var(--color-primary);
   border: none;
-  color: white;
-  font-size: 1.5rem;
+  font-size: 0;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
@@ -196,6 +195,24 @@ code {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.lightbox-close::before,
+.lightbox-close::after {
+  content: '';
+  position: absolute;
+  width: 1.1rem;
+  height: 2.5px;
+  background: white;
+  border-radius: 1px;
+}
+
+.lightbox-close::before {
+  transform: rotate(45deg);
+}
+
+.lightbox-close::after {
+  transform: rotate(-45deg);
+}
+
 .lightbox-close:hover {
   background: var(--color-primary-hover);
   transform: scale(1.1);
@@ -227,7 +244,7 @@ code {
   background: var(--color-primary);
   border: none;
   color: white;
-  font-size: 2rem;
+  font-size: 0;
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
@@ -240,6 +257,25 @@ code {
   z-index: 10;
 }
 
+.lightbox-nav::before {
+  content: '';
+  display: block;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-top: 2.5px solid white;
+  border-right: 2.5px solid white;
+}
+
+.lightbox-prev::before {
+  transform: rotate(-135deg);
+  margin-left: 0.2rem;
+}
+
+.lightbox-next::before {
+  transform: rotate(45deg);
+  margin-right: 0.2rem;
+}
+
 .lightbox-nav:hover:not(.disabled) {
   background: var(--color-primary-hover);
   transform: translateY(-50%) scale(1.1);