From 0e3df605c74b68e7842a0f8dcc72ec0b7d79e40f Mon Sep 17 00:00:00 2001
From: David Ball <david@daball.me>
Date: Sun, 14 Jul 2024 21:52:34 -0400
Subject: [PATCH] fix: Carousel buttons weren't vertically centered on iOS
 Safari.

---
 src/components/ImageCarousel.astro | 60 ++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro
index 1d4e51c..08a4668 100644
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@@ -22,9 +22,9 @@ let index = 1;
     {images?.map(image => (
         <div class="carousel-slide carousel-fade">
             <div class="carousel-number">
-                {index++} / {images.length}
+            {index++} of {images.length}
             </div>
-            <img class="carousel-img" src={image.src} defer />
+            <img class="carousel-img" src={image.src} />
             {image.title &&
                 <div class="carousel-caption" class="text">
                     {image.title}
@@ -34,12 +34,14 @@ let index = 1;
     ))}
     <!-- Next and previous buttons -->
     <div class="carousel-btn-prev">
+      <div class="overlay"></div>
       <a>
         <span>&#10094;</span>
         <div class="dummy"></div>
       </a>
     </div>
     <div class="carousel-btn-next">
+      <div class="overlay"></div>
       <a>
         <span>&#10095;</span>
         <div class="dummy"></div>
@@ -121,37 +123,71 @@ image-carousel {
   vertical-align: middle;
   white-space: nowrap;
   font-size: 0;
-  display: flex;
   opacity: 0.8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.carousel-btn-prev {
+.carousel-btn-prev, .carousel-btn-prev .overlay {
   border-radius: 7px 0 0 7px;
 }
-.carousel-btn-next {
+.carousel-btn-next, .carousel-btn-next .overlay {
   right: 0;
   border-radius: 0 7px 7px 0;
 }
 .carousel-btn-prev > a, .carousel-btn-next > a {
-  position: absolute;
+  position: relative;
   display: block;
   text-align: center;
-  height: 100%;
+  /* height: 100%; */
   width: 100%;
   background-color: transparent;
-  opacity: 0;
+  opacity: 1;
+  color: #63666d;
+  filter: invert(1);
+  mix-blend-mode: difference;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+/* .carousel-btn-prev > a span, .carousel-btn-next > a span {
+  position: relative;
+  top: 50%;
+  bottom: 50%;
+  width: 40px;
+  left: 0px;
+} */
 .carousel-btn-prev .dummy, .carousel-btn-next .dummy {
   height: 100%;
 }
+.carousel-btn-prev .overlay, .carousel-btn-next .overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  left: 0;
+  height: 100%;
+  background-color: transparent;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .carousel-btn-prev span, .carousel-btn-next span {
   font-size: 1.2rem;
   position: relative;
   top: 50%;
 }
-.carousel-btn-prev:is(:hover, :focus-within) > a, .carousel-btn-next:is(:hover, ::focus-within) > a {
+.carousel-btn-prev:is(:hover, :focus-within) > .overlay, .carousel-btn-next:is(:hover, ::focus-within) > .overlay {
   background-color: #23262d;
   opacity: 0.8;
 }
+.carousel-btn-prev:is(:hover, :focus-within) > a, .carousel-btn-next:is(:hover, ::focus-within) > a {
+  opacity: 0.8;
+  color: #fff;
+  /* background-color: #23262d; */
+  filter: unset;
+  mix-blend-mode: unset;
+}
 .carousel-btn-prev:is(:hover, :focus-within), .carousel-btn-next:is(:hover, :focus-within) {
   background-color: #23262d;
   background-image: none;
@@ -202,10 +238,10 @@ image-carousel {
 }
 .carousel-fade {
   animation-name: fade;
-  animation-duration: 1.5s;
+  animation-duration: 0.6s;
 }
-@keyframes .carousel-fade {
-  from {opacity: .4}
+@keyframes fade {
+  from {opacity: .1}
   to {opacity: 1}
 }
 </style>