From e4e65db802a13427534c878b617337e695bbdfb7 Mon Sep 17 00:00:00 2001
From: mi <hola@puercito.net>
Date: Thu, 13 Nov 2025 10:50:54 +1000
Subject: [PATCH] :lipstick: images for main nav

---
 app.py                          |  5 +++--
 comics_data.py                  |  8 ++++++--
 static/css/style.css            | 10 ++++++++++
 static/images/icons/alert.png   |  3 +++
 static/images/icons/archive.png |  3 +++
 static/images/icons/info.png    |  3 +++
 templates/base.html             | 18 +++++++++++++++---
 templates/comic.html            |  2 +-
 templates/index.html            |  2 +-
 9 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 static/images/icons/alert.png
 create mode 100644 static/images/icons/archive.png
 create mode 100644 static/images/icons/info.png

diff --git a/app.py b/app.py
index 513571c..bad4480 100644
--- a/app.py
+++ b/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
     }
 
 
diff --git a/comics_data.py b/comics_data.py
index bf42fb3..6744f1e 100644
--- a/comics_data.py
+++ b/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 = [
     {
diff --git a/static/css/style.css b/static/css/style.css
index 15f66df..fabdd3a 100644
--- a/static/css/style.css
+++ b/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);
diff --git a/static/images/icons/alert.png b/static/images/icons/alert.png
new file mode 100644
index 0000000..cd97902
--- /dev/null
+++ b/static/images/icons/alert.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:356e264e6f72a310df4f44b648a1d6a036f8d52420323f7f71eccfe6815cbcb0
+size 1721
diff --git a/static/images/icons/archive.png b/static/images/icons/archive.png
new file mode 100644
index 0000000..e346650
--- /dev/null
+++ b/static/images/icons/archive.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b8fcc5956f0aa01b3b37cd5ec0723718ebedf53ba306e781bba87bb916bbf05
+size 726
diff --git a/static/images/icons/info.png b/static/images/icons/info.png
new file mode 100644
index 0000000..cd34006
--- /dev/null
+++ b/static/images/icons/info.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2527238adaeb99757b947b509eeb0662b59034d9e53575f2b13720b68e7ef2e0
+size 1313
diff --git a/templates/base.html b/templates/base.html
index aeac9a5..6c74c02 100644
--- a/templates/base.html
+++ b/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><a href="{{ url_for('archive') }}" {% if request.endpoint == 'archive' %}class="active"{% endif %}>Archive</a></li>
-                    <li><a href="{{ url_for('about') }}" {% if request.endpoint == 'about' %}class="active"{% endif %}>About</a></li>
+                    <li>
+                        <a href="{{ url_for('index') }}" {% if request.endpoint == 'index' %}class="active"{% endif %}>
+                            {% 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>
diff --git a/templates/comic.html b/templates/comic.html
index 434f5f3..00bb878 100644
--- a/templates/comic.html
+++ b/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">
diff --git a/templates/index.html b/templates/index.html
index b3c0c02..e3a0234 100644
--- a/templates/index.html
+++ b/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">