✨ plain mode

app.py

@@ -1,6 +1,6 @@
 import os
 from flask import Flask, render_template, abort, jsonify, request
-from comics_data import COMICS, FULL_WIDTH_DEFAULT
+from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT
 
 app = Flask(__name__)
 
@@ -17,12 +17,22 @@ def is_full_width(comic):
     return FULL_WIDTH_DEFAULT
 
 
+def is_plain(comic):
+    """Determine if a comic should be plain mode based on global and per-comic settings"""
+    # If comic explicitly sets plain, use that value
+    if 'plain' in comic:
+        return comic['plain']
+    # Otherwise use the global default
+    return PLAIN_DEFAULT
+
+
 def enrich_comic(comic):
     """Add computed properties to comic data"""
     if comic is None:
         return None
     enriched = comic.copy()
     enriched['full_width'] = is_full_width(comic)
+    enriched['plain'] = is_plain(comic)
     return enriched
 
 

comics_data.py

@@ -5,6 +5,10 @@
 # Individual comics can override this with 'full_width': False
 FULL_WIDTH_DEFAULT = False
 
+# Global setting: Set to True to hide header and remove nav border by default
+# Individual comics can override this with 'plain': False
+PLAIN_DEFAULT = False
+
 COMICS = [
     {
         'number': 1,
@@ -13,14 +17,16 @@ COMICS = [
         'date': '2025-01-01',
         'alt_text': 'The very first comic',
         'author_note': 'This is where your comic journey begins!',
-        'full_width': True  # Optional: override FULL_WIDTH_DEFAULT for this comic
+        'full_width': True,  # Optional: override FULL_WIDTH_DEFAULT for this comic
+        'plain': True,  # Optional: override PLAIN_DEFAULT for this comic
     },
     {
         'number': 2,
         'filename': 'comic-002.jpg',
         'date': '2025-01-08',
         'alt_text': 'The second comic',
-        'full_width': True  # Override FULL_WIDTH_DEFAULT
+        'full_width': True,
+        'plain': True,
     },
     {
         'number': 3,

static/css/style.css

@@ -188,6 +188,12 @@ main {
     max-width: 100%;
 }
 
+/* Plain comic variant - no header, no nav border */
+.comic-container-plain .comic-navigation {
+    border-top: none;
+    padding-top: 0;
+}
+
 .comic-header {
     margin-bottom: 1.5rem;
     padding-bottom: 1rem;

static/js/comic-nav.js

@@ -27,6 +27,8 @@
 
     // Update the page with comic data
     function displayComic(comic) {
+        const title = comic.title || `#${comic.number}`;
+
         // Update container class for full-width option
         const container = document.querySelector('.comic-container');
         if (comic.full_width) {
@@ -35,12 +37,33 @@
             container.classList.remove('comic-container-fullwidth');
         }
 
-        // Update title
+        // Update container class for plain mode
-        const title = comic.title || `#${comic.number}`;
+        if (comic.plain) {
-        document.querySelector('.comic-header h1').textContent = title;
+            container.classList.add('comic-container-plain');
+        } else {
+            container.classList.remove('comic-container-plain');
+        }
 
-        // Update date
+        // Show/hide header based on plain mode
-        document.querySelector('.comic-date').textContent = comic.date;
+        const header = document.querySelector('.comic-header');
+        if (comic.plain) {
+            if (header) {
+                header.style.display = 'none';
+            }
+        } else {
+            if (header) {
+                header.style.display = 'block';
+            } else {
+                // Create header if it doesn't exist
+                const newHeader = document.createElement('div');
+                newHeader.className = 'comic-header';
+                newHeader.innerHTML = '<h1></h1><p class="comic-date"></p>';
+                container.insertBefore(newHeader, container.firstChild);
+            }
+            // Update title and date
+            document.querySelector('.comic-header h1').textContent = title;
+            document.querySelector('.comic-date').textContent = comic.date;
+        }
 
         // Update image and its link
         const comicImageDiv = document.querySelector('.comic-image');

templates/comic.html

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