💄 images for main 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, USE_ICON_NAV
+from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS
 import markdown
 
 app = Flask(__name__)
@@ -17,7 +17,8 @@ def inject_global_settings():
         'header_image': HEADER_IMAGE,
         'footer_image': FOOTER_IMAGE,
         'compact_footer': COMPACT_FOOTER,
-        'use_icon_nav': USE_ICON_NAV
+        'use_comic_nav_icons': USE_COMIC_NAV_ICONS,
+        'use_header_nav_icons': USE_HEADER_NAV_ICONS
     }
 
 

comics_data.py

@@ -23,9 +23,13 @@ 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
+# Global setting: Set to True to use icon images for comic navigation buttons
 # Icons should be in static/images/icons/ (first.png, previous.png, next.png, latest.png)
-USE_ICON_NAV = True
+USE_COMIC_NAV_ICONS = True
+
+# Global setting: Set to True to show icons next to main header navigation text
+# Uses alert.png for Latest, archive.png for Archive, info.png for About
+USE_HEADER_NAV_ICONS = True
 
 COMICS = [
     {

static/css/style.css

@@ -147,6 +147,9 @@ nav .container {
     color: var(--color-text);
     text-decoration: none;
     text-transform: lowercase;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
 }
 
 .nav-links a:hover,
@@ -154,6 +157,13 @@ nav .container {
     text-decoration: underline;
 }
 
+.nav-icon {
+    height: 1rem;
+    width: auto;
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* Main content */
 main {
     min-height: calc(100vh - 250px);

templates/base.html

@@ -48,9 +48,21 @@
                 </div>
                 {% endif %}
                 <ul class="nav-links">
-                    <li><a href="{{ url_for('index') }}" {% if request.endpoint == 'index' %}class="active"{% endif %}>Latest</a></li>
+                    <li>
-                    <li><a href="{{ url_for('archive') }}" {% if request.endpoint == 'archive' %}class="active"{% endif %}>Archive</a></li>
+                        <a href="{{ url_for('index') }}" {% if request.endpoint == 'index' %}class="active"{% endif %}>
-                    <li><a href="{{ url_for('about') }}" {% if request.endpoint == 'about' %}class="active"{% endif %}>About</a></li>
+                            {% if use_header_nav_icons %}<img src="{{ url_for('static', filename='images/icons/alert.png') }}" alt="" class="nav-icon">{% endif %}Latest
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ url_for('archive') }}" {% if request.endpoint == 'archive' %}class="active"{% endif %}>
+                            {% if use_header_nav_icons %}<img src="{{ url_for('static', filename='images/icons/archive.png') }}" alt="" class="nav-icon">{% endif %}Archive
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ url_for('about') }}" {% if request.endpoint == 'about' %}class="active"{% endif %}>
+                            {% if use_header_nav_icons %}<img src="{{ url_for('static', filename='images/icons/info.png') }}" alt="" class="nav-icon">{% endif %}About
+                        </a>
+                    </li>
                 </ul>
             </div>
         </nav>

templates/comic.html

@@ -47,7 +47,7 @@
 
     <div class="comic-navigation">
         <div class="nav-buttons">
-            {% if use_icon_nav %}
+            {% if use_comic_nav_icons %}
                 {# Icon-based navigation #}
                 {% if comic.number > 1 %}
                     <a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">

templates/index.html

@@ -30,7 +30,7 @@
 
     <div class="comic-navigation">
         <div class="nav-buttons">
-            {% if use_icon_nav %}
+            {% if use_comic_nav_icons %}
                 {# Icon-based navigation #}
                 {% if comic.number > 1 %}
                     <a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">