Merge branch 'main' of https://github.com/birminghamdsa-ntc/birmingha…

…mdsa.github.io
dsa-ntc · Aug 23, 2023 · 869322f · 869322f
2 parents 10ac25d + 72ab3fe
commit 869322f
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -33,19 +33,33 @@ <h6 class="my-0 text-black-tint-2">{{ post.date | date: "%b %-d, %Y" }}</h6>
         </a> -->
         <style>
           .slideshow {
+            background-color: lightgray;
             position: relative;
             width: 100%;
-            height: 33.33vh;
+            aspect-ratio: 4 / 3 !important;
             margin: auto;
             overflow: hidden;
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            align-items: center;
           }
 
-          .slideshow img {
-            object-position: center center;
+          .slideshow div.slide {
+            flex-flow: column nowrap;
+            justify-content: center;
+            align-items: center;
+            background-color: lightgray;
+            margin: auto;
+          }
+
+          .slideshow div img {
             max-width: 100%;
             max-height: 100%;
+            width: auto;
+            height: auto;
             margin: auto !important;
-            object-fit: cover !important;
+
           }
 
           .slideshow a.previous,
@@ -70,6 +84,11 @@ <h6 class="my-0 text-black-tint-2">{{ post.date | date: "%b %-d, %Y" }}</h6>
             user-select: none;
           }
 
+          .previous {
+            left: 0;
+            border-radius: 0 3px 3px 0;
+          }
+
           .next {
             right: 0;
             border-radius: 3px 0 0 3px;
@@ -96,9 +115,6 @@ <h6 class="my-0 text-black-tint-2">{{ post.date | date: "%b %-d, %Y" }}</h6>
           <div class="slide">
             <img src="/assets/images/slideshow/5.webp">
           </div>
-          <div class="slide">
-            <img src="/assets/images/slideshow/6.webp">
-          </div>
           <div class="slide">
             <img src="/assets/images/slideshow/7.webp">
           </div>
@@ -108,9 +124,6 @@ <h6 class="my-0 text-black-tint-2">{{ post.date | date: "%b %-d, %Y" }}</h6>
           <div class="slide">
             <img src="/assets/images/slideshow/9.webp">
           </div>
-          <div class="slide">
-            <img src="/assets/images/slideshow/10.webp">
-          </div>
           <div class="slide">
             <img src="/assets/images/slideshow/11.webp">
           </div>
@@ -176,13 +189,13 @@ <h6 class="my-0 text-black-tint-2">{{ post.date | date: "%b %-d, %Y" }}</h6>
             for (i = 0; i < slides.length; i++) {
               slides[i].style.display = "none";
             }
-            slides[slideIndex - 1].style.display = "block";
+            slides[slideIndex - 1].style.display = "flex";
           }
 
-          // Automatically change slides every 5 seconds.
+          // Automatically change slides every ten seconds.
           setInterval(function () {
             plusSlides(1);
-          }, 5000);
+          }, 10000);
         </script>
       </div>
     </div>