💄 site logo

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,

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

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

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">