💄 images for comic nav

static/css/style.css

@@ -360,6 +360,32 @@ main {
     color: var(--color-disabled);
 }
 
+/* Icon-based navigation buttons */
+.btn-icon-nav {
+    display: inline-block;
+    cursor: pointer;
+    transition: opacity var(--transition-speed);
+}
+
+.btn-icon-nav img {
+    height: 2rem;
+    width: auto;
+    display: block;
+}
+
+.btn-icon-nav:hover {
+    opacity: 0.7;
+}
+
+.btn-icon-disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+.btn-icon-disabled:hover {
+    opacity: 0.3;
+}
+
 .comic-date-display {
     padding: 0 var(--space-sm);
     color: var(--color-text);
@@ -469,6 +495,10 @@ main {
         font-size: var(--font-size-sm);
     }
 
+    .btn-icon-nav img {
+        height: 1.5rem;
+    }
+
     .comic-date-display {
         font-size: var(--font-size-xs);
         flex-basis: 100%;
@@ -476,6 +506,18 @@ main {
         padding-top: var(--space-xs);
     }
 
+    /* Keep icon navigation on single line on mobile */
+    .nav-buttons:has(.btn-icon-nav) {
+        flex-wrap: nowrap;
+    }
+
+    .nav-buttons:has(.btn-icon-nav) .comic-date-display {
+        flex-basis: auto;
+        padding-top: 0;
+        font-size: var(--font-size-xs);
+        white-space: nowrap;
+    }
+
     .nav-buttons {
         flex-wrap: wrap;
     }

static/js/comic-nav.js

@@ -175,23 +175,26 @@
     function updateNavButtons(currentNumber, formattedDate) {
         const navButtons = document.querySelector('.nav-buttons');
 
+        // Detect if using icon navigation
+        const isIconNav = navButtons.children[0].classList.contains('btn-icon-nav');
+
         // First button
         const firstBtn = navButtons.children[0];
         if (currentNumber > 1) {
-            firstBtn.className = 'btn btn-nav';
+            firstBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             firstBtn.onclick = (e) => { e.preventDefault(); loadComic(1); };
         } else {
-            firstBtn.className = 'btn btn-nav btn-disabled';
+            firstBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             firstBtn.onclick = null;
         }
 
         // Previous button
         const prevBtn = navButtons.children[1];
         if (currentNumber > 1) {
-            prevBtn.className = 'btn btn-nav';
+            prevBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             prevBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber - 1); };
         } else {
-            prevBtn.className = 'btn btn-nav btn-disabled';
+            prevBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             prevBtn.onclick = null;
         }
 
@@ -203,20 +206,20 @@
         // Next button
         const nextBtn = navButtons.children[3];
         if (currentNumber < totalComics) {
-            nextBtn.className = 'btn btn-nav';
+            nextBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             nextBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber + 1); };
         } else {
-            nextBtn.className = 'btn btn-nav btn-disabled';
+            nextBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             nextBtn.onclick = null;
         }
 
         // Latest button
         const latestBtn = navButtons.children[4];
         if (currentNumber < totalComics) {
-            latestBtn.className = 'btn btn-nav';
+            latestBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             latestBtn.onclick = (e) => { e.preventDefault(); loadComic(totalComics); };
         } else {
-            latestBtn.className = 'btn btn-nav btn-disabled';
+            latestBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             latestBtn.onclick = null;
         }
     }