fix(blog): use CSS-based icons for lightbox buttons (#61)

Author: CalvinAllen

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>

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);