diff --git a/app.py b/app.py index f78a1da..da9ab0b 100644 --- a/app.py +++ b/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, diff --git a/comics_data.py b/comics_data.py index 141ed6d..c005b88 100644 --- a/comics_data.py +++ b/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 diff --git a/static/css/style.css b/static/css/style.css index 0de4670..5da2ea8 100644 --- a/static/css/style.css +++ b/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; } diff --git a/templates/archive.html b/templates/archive.html index b0d1265..0ae760c 100644 --- a/templates/archive.html +++ b/templates/archive.html @@ -1,21 +1,27 @@ {% extends "base.html" %} {% block content %} - {# Close container for full-width mode #} +{% endif %} + +

Comic Archive

Browse all {{ comics|length }} comics

-
-
+
+
+ +{% if archive_full_width %} +
{# Reopen container for footer #} +{% endif %} {% endblock %}