💄 full width archive

app.py

@@ -3,7 +3,7 @@ from datetime import datetime
 from flask import Flask, render_template, abort, jsonify, request
 from comics_data import (
     COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE,
-    COMPACT_FOOTER, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS,
+    COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS,
     USE_FOOTER_SOCIAL_ICONS, SOCIAL_INSTAGRAM, SOCIAL_YOUTUBE, SOCIAL_EMAIL,
     API_SPEC_LINK
 )
@@ -22,6 +22,7 @@ def inject_global_settings():
         'header_image': HEADER_IMAGE,
         'footer_image': FOOTER_IMAGE,
         'compact_footer': COMPACT_FOOTER,
+        'archive_full_width': ARCHIVE_FULL_WIDTH,
         'use_comic_nav_icons': USE_COMIC_NAV_ICONS,
         'use_header_nav_icons': USE_HEADER_NAV_ICONS,
         'use_footer_social_icons': USE_FOOTER_SOCIAL_ICONS,

comics_data.py

@@ -23,6 +23,10 @@ FOOTER_IMAGE = None # 'footer.jpg'
 # Compact mode: single line, no border, horizontal layout
 COMPACT_FOOTER = True
 
+# Global setting: Set to True to make archive page full-width with 4 columns (2 on mobile)
+# Full-width archive shows square thumbnails with only dates, no titles
+ARCHIVE_FULL_WIDTH = True
+
 # Global setting: Set to True to use icon images for comic navigation buttons
 # Icons should be in static/images/icons/ (first.png, previous.png, next.png, latest.png)
 USE_COMIC_NAV_ICONS = True

static/css/style.css

@@ -490,6 +490,38 @@ main {
     font-size: var(--font-size-sm);
 }
 
+/* Full-width Archive Mode */
+.page-header-fullwidth {
+    padding: 0 var(--space-xl);
+}
+
+.archive-content-fullwidth {
+    max-width: 100%;
+    padding: 0 var(--space-xl);
+}
+
+.archive-grid-fullwidth {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--space-lg);
+}
+
+.archive-item-fullwidth img {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    object-fit: cover;
+}
+
+.archive-item-fullwidth .archive-info {
+    text-align: center;
+    padding: var(--space-sm);
+}
+
+.archive-item-fullwidth .archive-date {
+    font-size: var(--font-size-md);
+    margin: 0;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .nav-brand a {
@@ -537,6 +569,19 @@ main {
         gap: 0.75rem;
     }
 
+    .archive-grid-fullwidth {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--space-md);
+    }
+
+    .page-header-fullwidth {
+        padding: 0 var(--space-md);
+    }
+
+    .archive-content-fullwidth {
+        padding: 0 var(--space-md);
+    }
+
     .comic-container {
         padding: 0.75rem;
     }

templates/archive.html

@@ -1,21 +1,27 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="page-header">
+{% if archive_full_width %}
+</div> {# Close container for full-width mode #}
+{% endif %}
+
+<div class="page-header{% if archive_full_width %} page-header-fullwidth{% endif %}">
     <h1>Comic Archive</h1>
     <p>Browse all {{ comics|length }} comics</p>
 </div>
 
-<section class="archive-content">
+<section class="archive-content{% if archive_full_width %} archive-content-fullwidth{% endif %}">
-    <div class="archive-grid">
+    <div class="archive-grid{% if archive_full_width %} archive-grid-fullwidth{% endif %}">
         {% for comic in comics %}
-        <div class="archive-item">
+        <div class="archive-item{% if archive_full_width %} archive-item-fullwidth{% endif %}">
             <a href="{{ url_for('comic', comic_id=comic.number) }}">
                 <img src="{{ url_for('static', filename='images/thumbs/' + comic.filename) }}"
                      onerror="this.onerror=null; this.src='{{ url_for('static', filename='images/thumbs/default.jpg') }}';"
                      alt="{{ comic.title if comic.title else '#' ~ comic.number }}">
                 <div class="archive-info">
+                    {% if not archive_full_width %}
                     <h3>#{{ comic.number }}{% if comic.title %}: {{ comic.title }}{% endif %}</h3>
+                    {% endif %}
                     <p class="archive-date">{{ comic.date }}</p>
                 </div>
             </a>
@@ -23,4 +29,8 @@
         {% endfor %}
     </div>
 </section>
+
+{% if archive_full_width %}
+<div class="container"> {# Reopen container for footer #}
+{% endif %}
 {% endblock %}