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

Optional full width comics.

Browse Source
This commit is contained in:
mi
2025-11-07 18:14:09 +10:00
parent b6f6ee4b70
commit 30d9044950
3 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
comics_data.py
View File

@@ -8,13 +8,15 @@ COMICS = [
'filename': 'comic-001.jpg', 'filename': 'comic-001.jpg',
'date': '2025-01-01', 'date': '2025-01-01',
'alt_text': 'The very first comic', 'alt_text': 'The very first comic',
'author_note': 'This is where your comic journey begins!' 'author_note': 'This is where your comic journey begins!',
'full_width': True # Optional: removes border and expands image width
}, },
{ {
'number': 2, 'number': 2,
'filename': 'comic-002.jpg', 'filename': 'comic-002.jpg',
'date': '2025-01-08', 'date': '2025-01-08',
'alt_text': 'The second comic', 'alt_text': 'The second comic',
'full_width': True
}, },
{ {
'number': 3, 'number': 3,
@@ -22,6 +24,6 @@ COMICS = [
'filename': 'comic-003.jpg', 'filename': 'comic-003.jpg',
'date': '2025-01-15', 'date': '2025-01-15',
'alt_text': 'The third comic', 'alt_text': 'The third comic',
'author_note': 'Things are getting interesting!' 'author_note': 'Things are getting interesting!',
}, },
] ]

28
static/css/style.css
View File

@@ -160,6 +160,34 @@ main {
padding: 1rem; padding: 1rem;
} }
/* Full-width comic variant */
.comic-container-fullwidth {
border: none;
padding: 0;
}
.comic-container-fullwidth .comic-header,
.comic-container-fullwidth .comic-navigation,
.comic-container-fullwidth .comic-transcript {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.comic-container-fullwidth .comic-image {
width: calc(100vw - 4rem);
max-width: calc(100vw - 4rem);
margin-left: calc(-1 * (50vw - 50% - 2rem));
margin-right: calc(-1 * (50vw - 50% - 2rem));
}
.comic-container-fullwidth .comic-image img {
width: 100%;
max-width: 100%;
}
.comic-header { .comic-header {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-bottom: 1rem; padding-bottom: 1rem;

2
templates/comic.html
View File

@@ -5,7 +5,7 @@
{% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %} {% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %}
{% block content %} {% block content %}
<div class="comic-container" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}"> <div class="comic-container{% if comic.full_width %} comic-container-fullwidth{% endif %}" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
<div class="comic-header"> <div class="comic-header">
<h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1> <h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
<p class="comic-date">{{ comic.date }}</p> <p class="comic-date">{{ comic.date }}</p>