💄 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;
     }