update theme webpage

Author: GrumpyGopher

docs/assets/2508.0/MustardOS-Grid-Alt.webp

@@ -1,3 +1,21 @@
+document.querySelectorAll('.portfolio-item').forEach(item => {
+    const img = item.querySelector('img');
+    if (!img.dataset.images) return;
+    const base = img.dataset.imageBase || '';
+    const images = img.dataset.images.split(',');
+    let index = 0;
+  
+    item.querySelector('.prev').addEventListener('click', () => {
+        index = (index - 1 + images.length) % images.length;
+        img.src = base + images[index];
+    });
+  
+    item.querySelector('.next').addEventListener('click', () => {
+        index = (index + 1) % images.length;
+        img.src = base + images[index];
+    });
+});
+
 document.addEventListener('DOMContentLoaded', function() {
     // UI elements
     const deviceFilterMenu = document.getElementById('device-filter');
@@ -59,8 +77,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 isMatchingGroupIDFilter;
 
             // Only show items that match all filters
-            const parentItem = item.closest('a');
-            parentItem.style.display = isMatchingAllFilters ? 'block' : 'none';
+            item.style.display = isMatchingAllFilters ? 'block' : 'none';
         });
     }
 

docs/assets/2508.0/MustardOS-Grid-Carousel-2.webp

@@ -125,14 +125,11 @@ input[type="text"]::placeholder {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
+    row-gap: 40px;
     padding: 20px;
 
 }
 
-.portfolio a {
-    margin: 10px 0;
-}
-
 .portfolio-item {
     background-color: #4a4a4a;
     padding: 20px;
@@ -183,4 +180,33 @@ a {
 a:hover {
     text-decoration: none; 
     color: inherit; 
+}
+
+.image-wrap {
+  position: relative;   /* ← THIS is what fixes it */
+  display: inline-block;
+}
+
+.image-wrap .prev,
+.image-wrap .next {
+  position: absolute;
+  top: 26%;
+  transform: translateY(-26%);
+  z-index: 2;
+
+  background: none;
+  color: white;
+  border: none;
+  font-size: 2rem;
+  line-height: 1;
+  
+  cursor: pointer;
+}
+
+.image-wrap .prev {
+  left: -1.5rem;
+}
+
+.image-wrap .next {
+  right: -1.5rem;
 }