Optional full width comics.

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!',
     },
 ]

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;

templates/comic.html

@@ -5,7 +5,7 @@
 {% block og_image %}{{ request.url_root }}static/images/thumbs/{{ comic.filename }}{% endblock %}
 
 {% 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">
         <h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
         <p class="comic-date">{{ comic.date }}</p>