From 95c050561b3a74f998160210e1bdcf7b50aa7bcd Mon Sep 17 00:00:00 2001
From: Bob Vandevliet <info@bvandevliet.nl>
Date: Sat, 7 Dec 2024 12:22:37 +0100
Subject: [PATCH] Better readable carousel captions.

---
 public/index.html    | 24 ++++++++++++------------
 src/scss/styles.scss | 23 ++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/public/index.html b/public/index.html
index b1691a5..317c263 100644
--- a/public/index.html
+++ b/public/index.html
@@ -111,32 +111,32 @@
           </p>
         </div>
         <div class="col-md mt-0">
-          <div id="carouselExampleCaptions" class="carousel slide">
-            <div class="carousel-indicators">
-              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
-            </div>
-            <div class="carousel-inner text-shadow">
+          <div id="carouselMyDrones" class="carousel slide">
+            <div class="carousel-inner">
               <div class="carousel-item active">
-                <img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
-                <div class="carousel-caption d-block">
+                <img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
+                <div class="carousel-caption">
                   <!-- <h3>First slide label</h3> -->
                   <p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
                 </div>
               </div>
               <div class="carousel-item">
-                <img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
-                <div class="carousel-caption d-block">
+                <img class="img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
+                <div class="carousel-caption">
                   <!-- <h3>Second slide label</h3> -->
                   <p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
                 </div>
               </div>
             </div>
-            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+            <div class="carousel-indicators">
+              <button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+              <button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Previous</span>
             </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
               <span class="carousel-control-next-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Next</span>
             </button>
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 6c62ea2..c6bfb88 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -17,7 +17,7 @@ $primary: $red; // Default: $blue
 
 // Include any default map overrides here
 $carousel-dark-indicator-active-bg: $white;
-$carousel-dark-caption-color:       $white;
+$carousel-dark-caption-color: $white;
 $carousel-dark-control-icon-filter: unset;
 
 // Include remainder of required parts
@@ -300,6 +300,27 @@ img.grayscale-effect {
   height: 100%;
 }
 
+.carousel-caption {
+  right: unset;
+  left: unset;
+  bottom: 0;
+  // @extend .text-shadow;
+}
+
+.carousel-indicators {
+  position: unset;
+  border-bottom-left-radius: var(--bs-border-radius);
+  border-bottom-right-radius: var(--bs-border-radius);
+}
+
+.carousel-caption,
+.carousel-indicators {
+  width: 100%;
+  background-color: rgba(22, 23, 25, 0.6) !important;
+  @extend .m-0;
+  @extend .p-0;
+}
+
 .list-group-item {
   background-color: inherit;
   border: solid var(--bs-body-bg);