From 145ddb4765b2cf2e5053ab1e3ba8bbafa5f731d1 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Tue, 3 Feb 2026 13:21:55 +0000
Subject: [PATCH] fix(timeline): centre line behind cards on mobile for
 full-width layout

- Move timeline line to centre on mobile instead of left gutter
- Remove left padding from cards to maximise horizontal space
- Reposition dots to top-centre of each card border on mobile
- Make card background fully opaque so line doesn't show through
- Desktop alternating layout unchanged
---
 templates/partials/timeline_month.html |  2 +-
 templates/styles.css                   | 31 +++++++++++++++-----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/templates/partials/timeline_month.html b/templates/partials/timeline_month.html
index 3c26b6d..96fe4cd 100644
--- a/templates/partials/timeline_month.html
+++ b/templates/partials/timeline_month.html
@@ -15,7 +15,7 @@
     class="timeline-node absolute h-5 w-5 rounded-full border-4 border-amber-50 bg-amber-600"
     aria-hidden="true"
   ></span>
-  <div class="rounded-lg border border-amber-200 bg-amber-50/80 p-5 shadow-sm text-left">
+  <div class="rounded-lg border border-amber-200 bg-amber-50 p-5 shadow-sm text-left">
     <div class="flex flex-wrap items-center justify-between gap-2">
       <span
         class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-amber-200 text-amber-800"
diff --git a/templates/styles.css b/templates/styles.css
index 1723eb8..d760107 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -47,20 +47,21 @@ a {
 
 /* Timeline layout */
 
-/* Mobile: single column with line on left */
+/* Mobile: single column, centred line behind cards */
 .timeline-line {
-  left: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .timeline-item {
-  padding-left: 3rem;
+  padding-left: 0;
 }
 
 .timeline-node {
-  left: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
+  left: 50%;
+  top: -10px;
+  transform: translateX(-50%);
+  z-index: 2;
 }
 
 .timeline-heading {
@@ -166,17 +167,17 @@ a {
     flex-direction: column;
   }
 
-  .timeline-line {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
   .timeline-item {
     width: 50%;
-    padding-left: 0;
     padding-right: 0;
   }
 
+  /* Reset node to side-of-card positioning on desktop */
+  .timeline-node {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   /* Left side items (odd) - counts only .timeline-item children, skipping month headings */
   .timeline-item:nth-child(odd of .timeline-item) {
     align-self: flex-start;
@@ -186,6 +187,8 @@ a {
   .timeline-item:nth-child(odd of .timeline-item) .timeline-node {
     right: -10px;
     left: auto;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   /* Right side items (even) */
@@ -196,6 +199,8 @@ a {
 
   .timeline-item:nth-child(even of .timeline-item) .timeline-node {
     left: -10px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   /* Allow vertical overlap between alternating cards (skip first item) */