From 9cb726312ab053612059782dbc11b63ed59fce40 Mon Sep 17 00:00:00 2001 From: mi Date: Fri, 7 Nov 2025 21:33:47 +1000 Subject: [PATCH] :lipstick: header image --- app.py | 8 +++++++- comics_data.py | 5 +++++ static/css/style.css | 29 +++++++++++++++++++++++++++++ static/images/title.jpg | 3 +++ templates/base.html | 10 +++++++++- 5 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 static/images/title.jpg diff --git a/app.py b/app.py index 77d7e26..455edb9 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 +from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE app = Flask(__name__) @@ -9,6 +9,12 @@ app = Flask(__name__) app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'your-secret-key') +@app.context_processor +def inject_global_settings(): + """Make global settings available to all templates""" + return {'header_image': HEADER_IMAGE} + + def is_full_width(comic): """Determine if a comic should be full width based on global and per-comic settings""" # If comic explicitly sets full_width, use that value diff --git a/comics_data.py b/comics_data.py index bc5036d..fd37789 100644 --- a/comics_data.py +++ b/comics_data.py @@ -9,6 +9,11 @@ FULL_WIDTH_DEFAULT = False # Individual comics can override this with 'plain': False PLAIN_DEFAULT = False +# 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 +HEADER_IMAGE = 'title.jpg' + COMICS = [ { 'number': 1, diff --git a/static/css/style.css b/static/css/style.css index 435712f..3be0b44 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -18,6 +18,19 @@ body { padding: 0 1rem; } +/* Site Header Image */ +.site-header-image { + width: 100%; + overflow: hidden; + margin-bottom: 0; +} + +.site-header-image img { + width: 100%; + height: auto; + display: block; +} + /* Header and Navigation */ header { border-bottom: 3px solid #000; @@ -25,6 +38,22 @@ header { margin-bottom: 2rem; } +/* Header with image variant - no border, no padding, centered nav */ +header.header-with-image { + border-bottom: none; + padding: 1rem 0 0 0; + margin-bottom: 0.5rem; +} + +header.header-with-image nav .container { + justify-content: center; +} + +header.header-with-image .nav-links a { + font-size: 1.2rem; + font-weight: bold; +} + nav .container { display: flex; justify-content: space-between; diff --git a/static/images/title.jpg b/static/images/title.jpg new file mode 100644 index 0000000..4b76470 --- /dev/null +++ b/static/images/title.jpg @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0585aee40f29487755a1520faa146b164503a317b9fb4090c4183e5afb743867 +size 24010 diff --git a/templates/base.html b/templates/base.html index 1f29f53..87ae21a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -33,12 +33,20 @@ {% block extra_css %}{% endblock %} -
+ {% if header_image %} +
+ Sunday Comics Header +
+ {% endif %} + +