💄 images for comic nav

app.py

@@ -1,7 +1,7 @@
 import os
 from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
-from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER
+from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, USE_ICON_NAV
 import markdown
 
 app = Flask(__name__)
@@ -16,7 +16,8 @@ def inject_global_settings():
     return {
         'header_image': HEADER_IMAGE,
         'footer_image': FOOTER_IMAGE,
-        'compact_footer': COMPACT_FOOTER
+        'compact_footer': COMPACT_FOOTER,
+        'use_icon_nav': USE_ICON_NAV
     }
 
 

comics_data.py

@@ -23,6 +23,10 @@ FOOTER_IMAGE = None # 'footer.jpg'
 # Compact mode: single line, no border, horizontal layout
 COMPACT_FOOTER = True
 
+# Global setting: Set to True to use icon images for navigation buttons
+# Icons should be in static/images/icons/ (first.png, previous.png, next.png, latest.png)
+USE_ICON_NAV = True
+
 COMICS = [
     {
         'number': 1,

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

templates/comic.html

@@ -47,22 +47,60 @@
 
     <div class="comic-navigation">
         <div class="nav-buttons">
-            {% if comic.number > 1 %}
+            {% if use_icon_nav %}
-                <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
+                {# Icon-based navigation #}
-                <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
+                {% if comic.number > 1 %}
-            {% else %}
+                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
-                <span class="btn btn-nav btn-disabled">First</span>
+                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
-                <span class="btn btn-nav btn-disabled">Previous</span>
+                    </a>
-            {% endif %}
+                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
+                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
+                    </a>
+                {% else %}
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="First">
+                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
+                    </span>
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Previous">
+                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
+                    </span>
+                {% endif %}
 
-            <span class="comic-date-display">{{ comic.formatted_date }}</span>
+                <span class="comic-date-display">{{ comic.formatted_date }}</span>
 
-            {% if comic.number < total_comics %}
+                {% if comic.number < total_comics %}
-                <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
+                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
-                <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
+                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
+                    </a>
+                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
+                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
+                    </a>
+                {% else %}
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
+                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
+                    </span>
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Latest">
+                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
+                    </span>
+                {% endif %}
             {% else %}
-                <span class="btn btn-nav btn-disabled">Next</span>
+                {# Text-based navigation #}
-                <span class="btn btn-nav btn-disabled">Latest</span>
+                {% if comic.number > 1 %}
+                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
+                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
+                {% else %}
+                    <span class="btn btn-nav btn-disabled">First</span>
+                    <span class="btn btn-nav btn-disabled">Previous</span>
+                {% endif %}
+
+                <span class="comic-date-display">{{ comic.formatted_date }}</span>
+
+                {% if comic.number < total_comics %}
+                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
+                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
+                {% else %}
+                    <span class="btn btn-nav btn-disabled">Next</span>
+                    <span class="btn btn-nav btn-disabled">Latest</span>
+                {% endif %}
             {% endif %}
         </div>
     </div>

templates/index.html

@@ -30,22 +30,60 @@
 
     <div class="comic-navigation">
         <div class="nav-buttons">
-            {% if comic.number > 1 %}
+            {% if use_icon_nav %}
-                <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
+                {# Icon-based navigation #}
-                <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
+                {% if comic.number > 1 %}
-            {% else %}
+                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
-                <span class="btn btn-nav btn-disabled">First</span>
+                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
-                <span class="btn btn-nav btn-disabled">Previous</span>
+                    </a>
-            {% endif %}
+                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
+                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
+                    </a>
+                {% else %}
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="First">
+                        <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
+                    </span>
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Previous">
+                        <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
+                    </span>
+                {% endif %}
 
-            <span class="comic-date-display">{{ comic.formatted_date }}</span>
+                <span class="comic-date-display">{{ comic.formatted_date }}</span>
 
-            {% if comic.number < total_comics %}
+                {% if comic.number < total_comics %}
-                <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
+                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
-                <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
+                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
+                    </a>
+                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
+                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
+                    </a>
+                {% else %}
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
+                        <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
+                    </span>
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Latest">
+                        <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
+                    </span>
+                {% endif %}
             {% else %}
-                <span class="btn btn-nav btn-disabled">Next</span>
+                {# Text-based navigation #}
-                <span class="btn btn-nav btn-disabled">Latest</span>
+                {% if comic.number > 1 %}
+                    <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
+                    <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
+                {% else %}
+                    <span class="btn btn-nav btn-disabled">First</span>
+                    <span class="btn btn-nav btn-disabled">Previous</span>
+                {% endif %}
+
+                <span class="comic-date-display">{{ comic.formatted_date }}</span>
+
+                {% if comic.number < total_comics %}
+                    <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
+                    <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
+                {% else %}
+                    <span class="btn btn-nav btn-disabled">Next</span>
+                    <span class="btn btn-nav btn-disabled">Latest</span>
+                {% endif %}
             {% endif %}
         </div>
     </div>