feat: add slideshow functionality and styles to enhance image display

src/css/custom.css

@@ -1053,4 +1053,84 @@
     display: inline-block;
     width: 100%; /* Set a base width */
     aspect-ratio: 4 / 1; /* Maintain the aspect ratio */
+}
+
+/* Slideshow styles */
+.slideshow-container {
+    max-width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.slideshow-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.slides {
+    display: none;
+    width: 100%;
+}
+
+.slides img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 500px;
+    object-fit: contain;
+}
+
+/* Update to fix slideshow image sizing */
+.slides img {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    max-height: 400px;
+    margin: 0 auto;
+    object-fit: contain;
+}
+
+.slideshow-text {
+    width: 100%;
+    padding: 15px;
+    text-align: center;
+    color: #333; /* Dark color for text */
+}
+
+.slideshow-text p {
+    margin: 0;
+    padding: 0;
+}
+
+.more-link {
+    margin-top: 8px;
+    font-size: 0.9rem;
+}
+
+/* Fading animation */
+.fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from {opacity: .4} 
+    to {opacity: 1}
+}
+
+/* Responsive styling for slideshow */
+@media screen and (max-width: 768px) {
+    .slideshow-text {
+        padding: 10px;
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .slideshow-text {
+        padding: 8px;
+        font-size: 12px;
+    }
 }

src/css/extra.css

@@ -6,6 +6,7 @@
 }
 
 .md-typeset {
+
     .admonition.frequent-question,
     details.frequent-question,
     .admonition.faq,
@@ -14,24 +15,24 @@
     }
 
     .frequent-question, .faq {
-        & > .admonition-title, & > summary {
+        &>.admonition-title, &>summary {
             background-color: var(--admonition-bg-color-base);
         }
 
-        & > .admonition-title::before, & > summary::before {
+        &>.admonition-title::before, &>summary::before {
             background-color: var(--admonition-border-color);
         }
     }
 
     .frequent-question {
-        & > .admonition-title::before, & > summary::before {
+        &>.admonition-title::before, &>summary::before {
             -webkit-mask-image: var(--icon-frequent-question);
             mask-image: var(--icon-frequent-question);
         }
     }
 
     .faq {
-        & > .admonition-title::before, & > summary::before {
+        &>.admonition-title::before, &>summary::before {
             -webkit-mask-image: var(--icon-faq);
             mask-image: var(--icon-faq);
         }
@@ -39,17 +40,18 @@
 }
 
 mark.state1 {
-    background-color: #ffd699; /* A somewhat orange color */
+    background-color: #ffd699;
+    /* A somewhat orange color */
 }
 
 mark.state2 {
     background-color: #ffcccc;
 }
-  
+
 mark.state3 {
     background-color: #ccccff;
 }
-  
+
 mark.state4 {
     background-color: #ccffcc;
 }
@@ -60,4 +62,74 @@ mark.state4 {
 
 .faq {
     color: #FF8D1A
+}
+
+.slideshow-container {
+    max-width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.slideshow-wrapper {
+    width: 100%;
+    position: relative;
+}
+
+.slides {
+    display: none;
+    width: 100%;
+}
+
+.slides img {
+    width: 100%;
+    height: auto;
+    display: block;
+    max-height: 500px;
+    object-fit: contain;
+}
+
+.slideshow-text {
+    width: 100%;
+    padding: 15px;
+    text-align: center;
+    color: #333;
+    /* Dark color for text */
+}
+
+.slideshow-text p {
+    margin: 0;
+    padding: 0;
+}
+
+/* Fading animation */
+.fade {
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@keyframes fade {
+    from {
+        opacity: .4
+    }
+
+    to {
+        opacity: 1
+    }
+}
+
+/* Responsive styling */
+@media screen and (max-width: 768px) {
+    .slideshow-text {
+        padding: 10px;
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .slideshow-text {
+        padding: 8px;
+        font-size: 12px;
+    }
 }

src/js/custom.js

@@ -1,6 +1,6 @@
-window.onload = function() {
+window.onload = function () {
     // Hide the loading message when tweets are loaded
-    var hideLoadingMessage = function() {
+    var hideLoadingMessage = function () {
         var loadingMessage = document.getElementById('loadingMessage');
         if (loadingMessage) {
             loadingMessage.style.display = 'none';
@@ -18,7 +18,7 @@ window.onload = function() {
 
             // Find all twitter tweets and show them
             var tweets = document.querySelectorAll('.twitter-tweet');
-            tweets.forEach(function(tweet) {
+            tweets.forEach(function (tweet) {
                 tweet.classList.add('twitter-tweet-loaded');
             });
 
@@ -40,18 +40,18 @@ window.onload = function() {
         const twitterPosts = document.querySelector('.twitter-posts');
         const prevButton = document.querySelector('.twitter-nav-prev');
         const nextButton = document.querySelector('.twitter-nav-next');
-        
+
         if (twitterPosts && prevButton && nextButton) {
             const tweetWidth = 300; // Width of each tweet
             const scrollAmount = tweetWidth + 16; // Width + gap
-            
+
             prevButton.addEventListener('click', () => {
                 twitterPosts.scrollBy({
                     left: -scrollAmount,
                     behavior: 'smooth'
                 });
             });
-            
+
             nextButton.addEventListener('click', () => {
                 twitterPosts.scrollBy({
                     left: scrollAmount,
@@ -65,7 +65,7 @@ window.onload = function() {
     setTimeout(initTwitterNavigation, 200);
 };
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     const dialogue = document.querySelector('.gibby-dialogue');
 
     function toggleDialogue() {
@@ -78,4 +78,31 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Start the cycle after 1 second
     setTimeout(toggleDialogue, 1000);
-});
+});
+
+// Slideshow functionality
+document.addEventListener("DOMContentLoaded", function () {
+    let slideIndex = 0;
+    showSlides();
+
+    function showSlides() {
+        const slides = document.getElementsByClassName("slides");
+
+        // Hide all slides
+        for (let i = 0; i < slides.length; i++) {
+            slides[i].style.display = "none";
+        }
+
+        // Increment slide index and reset if needed
+        slideIndex++;
+        if (slideIndex > slides.length) {
+            slideIndex = 1;
+        }
+
+        // Show the current slide
+        slides[slideIndex - 1].style.display = "block";
+
+        // Change slide every 6 seconds
+        setTimeout(showSlides, 6000);
+    }
+});