From e3d4315f7f87c0dafeafe43bf3b9f7fab419e521 Mon Sep 17 00:00:00 2001
From: mi <hola@puercito.net>
Date: Thu, 13 Nov 2025 15:23:38 +1000
Subject: [PATCH] :lipstick: site logo

---
 app.py                 | 10 ++++++----
 comics_data.py         | 11 +++++++++++
 static/css/style.css   | 32 ++++++++++++++++++++++++++++++++
 static/images/logo.png |  3 +++
 templates/base.html    | 11 ++++++++++-
 5 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 static/images/logo.png

diff --git a/app.py b/app.py
index c323e46..75b3f94 100644
--- a/app.py
+++ b/app.py
@@ -2,10 +2,10 @@ import os
 from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
 from comics_data import (
-    COMICS, COMIC_NAME, SITE_URL, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE,
-    COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS,
-    USE_FOOTER_SOCIAL_ICONS, SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE, SOCIAL_EMAIL,
-    API_SPEC_LINK
+    COMICS, COMIC_NAME, SITE_URL, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, LOGO_IMAGE, LOGO_MODE,
+    HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, USE_COMIC_NAV_ICONS,
+    USE_HEADER_NAV_ICONS, USE_FOOTER_SOCIAL_ICONS, SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE,
+    SOCIAL_EMAIL, API_SPEC_LINK
 )
 import markdown
 
@@ -21,6 +21,8 @@ def inject_global_settings():
     return {
         'comic_name': COMIC_NAME,
         'site_url': SITE_URL,
+        'logo_image': LOGO_IMAGE,
+        'logo_mode': LOGO_MODE,
         'header_image': HEADER_IMAGE,
         'footer_image': FOOTER_IMAGE,
         'compact_footer': COMPACT_FOOTER,
diff --git a/comics_data.py b/comics_data.py
index 8ae4778..f75dd0b 100644
--- a/comics_data.py
+++ b/comics_data.py
@@ -16,6 +16,17 @@ FULL_WIDTH_DEFAULT = False
 # Individual comics can override this with 'plain': False
 PLAIN_DEFAULT = False
 
+# Global setting: Path to site logo (relative to static/images/)
+# Set to None to disable logo
+# Example: LOGO_IMAGE = 'logo.png' will use static/images/logo.png
+LOGO_IMAGE = 'logo.png'
+
+# Global setting: Logo display mode
+# 'beside' - Display logo next to the site title
+# 'replace' - Replace the site title with the logo
+# Only applies when LOGO_IMAGE is set
+LOGO_MODE = 'beside'
+
 # Global setting: Path to header image (relative to static/images/)
 # Set to None to disable header image
 # Example: HEADER_IMAGE = 'title.jpg' will use static/images/title.jpg
diff --git a/static/css/style.css b/static/css/style.css
index 5da2ea8..f520d18 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -135,6 +135,30 @@ nav .container {
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wide);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.nav-logo {
+    height: 2.5rem;
+    width: auto;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.nav-logo-beside {
+    /* Logo displayed beside the title */
+}
+
+.nav-logo-replace {
+    /* Logo replaces the title - can be larger */
+    height: 3rem;
+}
+
+.nav-title {
+    /* Title text when displayed beside logo */
+    display: inline-block;
 }
 
 .nav-links {
@@ -528,6 +552,14 @@ main {
         font-size: var(--font-size-xl);
     }
 
+    .nav-logo {
+        height: 2rem;
+    }
+
+    .nav-logo-replace {
+        height: 2.5rem;
+    }
+
     .nav-links {
         gap: var(--space-md);
     }
diff --git a/static/images/logo.png b/static/images/logo.png
new file mode 100644
index 0000000..c1fd237
--- /dev/null
+++ b/static/images/logo.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8b984949019377811e133bee8cbf5f79832f543608cf80e1b66041114602fa40
+size 128646
diff --git a/templates/base.html b/templates/base.html
index a68bbd7..7896fb4 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -44,7 +44,16 @@
             <div class="container">
                 {% if not header_image %}
                 <div class="nav-brand">
-                    <a href="{{ url_for('index') }}">{{ comic_name }}</a>
+                    <a href="{{ url_for('index') }}">
+                        {% if logo_image and logo_mode == 'beside' %}
+                            <img src="{{ url_for('static', filename='images/' + logo_image) }}" alt="{{ comic_name }} Logo" class="nav-logo nav-logo-beside">
+                            <span class="nav-title">{{ comic_name }}</span>
+                        {% elif logo_image and logo_mode == 'replace' %}
+                            <img src="{{ url_for('static', filename='images/' + logo_image) }}" alt="{{ comic_name }}" class="nav-logo nav-logo-replace">
+                        {% else %}
+                            {{ comic_name }}
+                        {% endif %}
+                    </a>
                 </div>
                 {% endif %}
                 <ul class="nav-links">