💄 full width archive

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;
     }