mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 header image

Browse Source
This commit is contained in:
mi
2025-11-07 21:33:47 +10:00
parent ed0a1aadb2
commit 9cb726312a
5 changed files with 53 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app.py
View File

@@ -1,7 +1,7 @@
import os import os
from datetime import datetime from datetime import datetime
from flask import Flask, render_template, abort, jsonify, request 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__) app = Flask(__name__)
@@ -9,6 +9,12 @@ app = Flask(__name__)
app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'your-secret-key') 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): def is_full_width(comic):
"""Determine if a comic should be full width based on global and per-comic settings""" """Determine if a comic should be full width based on global and per-comic settings"""
# If comic explicitly sets full_width, use that value # If comic explicitly sets full_width, use that value

5
comics_data.py
View File

@@ -9,6 +9,11 @@ FULL_WIDTH_DEFAULT = False
# Individual comics can override this with 'plain': False # Individual comics can override this with 'plain': False
PLAIN_DEFAULT = 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 = [ COMICS = [
{ {
'number': 1, 'number': 1,

29
static/css/style.css
View File

@@ -18,6 +18,19 @@ body {
padding: 0 1rem; 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 and Navigation */
header { header {
border-bottom: 3px solid #000; border-bottom: 3px solid #000;
@@ -25,6 +38,22 @@ header {
margin-bottom: 2rem; 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 { nav .container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

BIN
static/images/title.jpg LFS Normal file
View File

Binary file not shown.

10
templates/base.html
View File

@@ -33,12 +33,20 @@
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
</head> </head>
<body> <body>
<header> {% if header_image %}
<div class="site-header-image">
<img src="{{ url_for('static', filename='images/' + header_image) }}" alt="Sunday Comics Header">
</div>
{% endif %}
<header{% if header_image %} class="header-with-image"{% endif %}>
<nav> <nav>
<div class="container"> <div class="container">
{% if not header_image %}
<div class="nav-brand"> <div class="nav-brand">
<a href="{{ url_for('index') }}">Sunday Comics</a> <a href="{{ url_for('index') }}">Sunday Comics</a>
</div> </div>
{% endif %}
<ul class="nav-links"> <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('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('archive') }}" {% if request.endpoint == 'archive' %}class="active"{% endif %}>Archive</a></li>