♿ date on all pages

static/css/style.css

@@ -265,15 +265,13 @@ main {
     color: #999;
 }
 
-.comic-number {
-    padding: 0.4rem 0.8rem;
-    background-color: #000;
-    color: #fff;
-    border: 2px solid #000;
+.comic-date-display {
+    padding: 0 0.5rem;
+    color: #000;
     font-weight: bold;
     margin: 0 0.25rem;
-    font-size: 0.8rem;
-    text-transform: uppercase;
+    font-size: 0.85rem;
+    font-style: italic;
 }
 
 /* Comic Transcript */
@@ -363,9 +361,8 @@ main {
         font-size: 0.75rem;
     }
 
-    .comic-number {
-        padding: 0.3rem 0.6rem;
-        font-size: 0.75rem;
+    .comic-date-display {
+        font-size: 0.7rem;
     }
 
     .archive-grid {

static/js/comic-nav.js

@@ -92,7 +92,7 @@
         }
 
         // Update navigation buttons
-        updateNavButtons(comic.number);
+        updateNavButtons(comic.number, comic.formatted_date);
 
         // Update page title
         document.title = `${title} - Sunday Comics`;
@@ -126,7 +126,7 @@
     }
 
     // Update navigation button states
-    function updateNavButtons(currentNumber) {
+    function updateNavButtons(currentNumber, formattedDate) {
         const navButtons = document.querySelector('.nav-buttons');
 
         // First button
@@ -149,8 +149,10 @@
             prevBtn.onclick = null;
         }
 
-        // Comic number display
-        navButtons.children[2].textContent = `Comic #${currentNumber}`;
+        // Comic date display
+        if (formattedDate) {
+            navButtons.children[2].textContent = formattedDate;
+        }
 
         // Next button
         const nextBtn = navButtons.children[3];
@@ -187,7 +189,10 @@
         const currentNumber = parseInt(document.querySelector('.comic-container').dataset.comicNumber || 0);
 
         if (currentNumber && totalComics) {
-            updateNavButtons(currentNumber);
+            // Get the formatted date from the DOM (already rendered by server)
+            const dateDisplay = document.querySelector('.comic-date-display');
+            const formattedDate = dateDisplay ? dateDisplay.textContent : null;
+            updateNavButtons(currentNumber, formattedDate);
             updateComicImageLink(currentNumber);
         }