diff --git a/comics_data.py b/comics_data.py index a0bfaff..0aa16b3 100644 --- a/comics_data.py +++ b/comics_data.py @@ -8,13 +8,15 @@ COMICS = [ 'filename': 'comic-001.jpg', 'date': '2025-01-01', '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, 'filename': 'comic-002.jpg', 'date': '2025-01-08', 'alt_text': 'The second comic', + 'full_width': True }, { 'number': 3, @@ -22,6 +24,6 @@ COMICS = [ 'filename': 'comic-003.jpg', 'date': '2025-01-15', 'alt_text': 'The third comic', - 'author_note': 'Things are getting interesting!' + 'author_note': 'Things are getting interesting!', }, ] diff --git a/static/css/style.css b/static/css/style.css index 7aeb788..fb46d1d 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -160,6 +160,34 @@ main { 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 { margin-bottom: 1.5rem; padding-bottom: 1rem; diff --git a/templates/comic.html b/templates/comic.html index efd92f4..2fa96bd 100644 --- a/templates/comic.html +++ b/templates/comic.html @@ -5,7 +5,7 @@ {% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %} {% block content %} -
+

{{ comic.title if comic.title else '#' ~ comic.number }}

{{ comic.date }}