toolbar is only icons, added image slideshow

css/default.scss

@@ -153,18 +153,6 @@ article .header {
     display: inline;
     margin: 0 0.6rem;
   }
-  .gallery {
-  }
-
-.photo {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.photo > img {
-    width: 100%;
-    height: auto;
-}
 }
 
 @media (min-width: 640px) {
@@ -196,21 +184,45 @@ article .header {
     float: left;
     font-size: 1.8rem;
   }
+}
+/* Next & previous buttons */
+.prev, .next {
+  cursor: pointer;
+  width: auto;
+  padding: 16px;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
 .gallery {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
   align-items: center;
+  display: flex;
+  gap: 10px;
 }
 
 .photo {
-    flex-basis: 50%;
+    display: none;
+    max-height: 50%;
+    flex: 1;
 }
+
 .photo > img {
-    width: 100%;
+  max-width: 100%;
-    height: auto;
+  height: 50vh;
-}
 }
 
 .svg-img {

gallery.html

@@ -1,9 +1,39 @@
 ---
 title: Photo Gallery
 ---
+<script>
+let slideIndex = 0;
+let slides;
+
+document.addEventListener("DOMContentLoaded", function() {
+    slides = document.querySelectorAll(".photo");
+    slideIndex = Math.floor(Math.random() * slides.length);
+    showSlide(slideIndex);
+});
+
+// Next/previous controls
+function changeSlides(n) {
+    slideIndex += n;
+
+    if (slideIndex >= slides.length) {
+        slideIndex = 0;
+    }
+
+    if (slideIndex < 0) {
+        slideIndex = slides.length - 1;
+    }
+    
+    showSlide(slideIndex);
+}
+
+function showSlide(n) {
+    slides.forEach((slide, i) => {
+        slide.style.display = i === n ? "inherit" : "none";
+    }); 
+}
+
+</script>
+
 <p>
-These are some of my favorite photos I've taken over the course of several years. They were all taken on film, and with the exception of a few, they were completely developed by myself. I develop a negative and then scan it using an Epson scanner and then store them in my digital archive. I use an old Canon Rebel EOS, shooting entirely on manual mode. The color photos were mostly taken on cheap FUJI reels, while the black and white are ILFORD reels.
+These are some of my favorite photos I've taken over the course of several years. These are mostly self-developed film photos, although some of them are from my new digital camera. My workflow is to develop a negative and then scan it using an Epson scanner; I then store it digitally. I use an old Canon Rebel EOS, shooting entirely on manual mode. The color photos were mostly taken on cheap FUJI reels, while the black and white are ILFORD reels.
-
-
-I recently acquired a digital version of the Rebel. Some of the photos here were taken using that machine.
 </p>

templates/default.html

@@ -37,8 +37,8 @@
                 <a href="/">rshyn.site</a>
             </div>
             <nav>
-                <a href="/">Home</a>
+                <a href="/" title="Home page"><i class="fa-solid fa-house"></i></a>
-                <a href="/gallery.html" title="Photo gallery">Photos</a>
+                <a href="/gallery.html" title="Photo gallery"><i class="fa-solid fa-image"></i></a>
                 <a href="https://github.com/rostyhn" title="Github"><i class="fa-brands fa-github"></i></a>
                 <a href="https://git.rshyn.site/explore/repos" title="Self-hosted Gitea instance"><i class="fa-brands fa-git-alt"></i></a>
                 <button id="btn-switch" title="Switch light / dark mode"><i class="fa-solid fa-circle-half-stroke"></i></button>

templates/gallery.html

@@ -1,4 +1,11 @@
 $body$
 <div class="gallery">
-    $art$
+    <div>
+        <a class="prev" onclick="changeSlides(-1)">&#10094;</a>
     </div>
+    $art$
+    <div>
+        <a class="next" onclick="changeSlides(1)">&#10095;</a>
+    </div>
+</div>
+<br/>