fix: correct timeline layout bugs — desktop stacking, connector geometry, thumbnail ratio

- Remove flex from .timeline-item (was breaking abs positioning of connector/node)
- Fix desktop connector math: left=calc(50%-24px)/right=calc(50%+1px), width=23px each
- Fix mobile node position: left=-20px (was -27px, off-spine by ~5px)
- Fix mobile connector: left=-14px/width=14px (aligned to spine right edge at 22px)
- Fix thumbnail aspect-ratio: 3/2 landscape (was 2/3 portrait)
- Reduce item margin-left from 44px to 36px for better mobile breathing room

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 49 insertions, 57 deletions

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index a64fb66..c330e5f 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1548,13 +1548,14 @@ button,
   padding-bottom: 3rem;
 }
 
-/* Vertical spine — center on desktop, left on mobile */
+/* Vertical spine */
 
 .timeline::before {
   content: '';
   position: absolute;
   top: 0px;
   bottom: 0px;
+  /* Mobile: fixed 20px from container left edge */
   left: 20px;
   width: 2px;
   background: linear-gradient(to bottom, var(--accent), var(--accent2, var(--accent)));
@@ -1568,21 +1569,18 @@ button,
   }
 }
 
-/* Each timeline row */
+/* Each timeline row — block, full width, positioned context for abs children */
 
 .timeline-item {
   position: relative;
   margin-bottom: 2.5rem;
-  /* Mobile: offset right of left spine */
-  margin-left: 44px;
+  /* Mobile: push card right of the left spine (spine 20px + 2px + gap 8px = 30px; use 36px for breathing room) */
+  margin-left: 36px;
 }
 
 @media (min-width: 768px) {
   .timeline-item {
     margin-left: 0;
-    display: flex;
-    align-items: flex-start;
-    /* Each item takes full width; card is positioned via padding inside */
   }
 }
 
@@ -1592,23 +1590,27 @@ button,
   position: absolute;
   top: 20px;
   height: 2px;
-  /* Mobile: from spine (left:22px) to card left edge (left:44px) */
-  left: -22px;
-  width: 22px;
+  /* Mobile: spine right edge at 22px, item left at 36px → offset = -14px, width = 14px */
+  left: -14px;
+  width: 14px;
 }
 
 @media (min-width: 768px) {
-  /* Desktop: driven by .timeline-item--left / --right modifier */
+  /*
+      spine center = 50% of item. Spine is 2px: left edge at 50%-1px, right at 50%+1px.
+      Cards occupy [0 .. 50%-24px] (left) or [50%+24px .. 100%] (right).
+      Left connector: left=50%-24px, width=23px → touches card right edge and spine left.
+      Right connector: left=50%+1px, width=23px → touches spine right and card left.
+    */
 
   .timeline-item--left .timeline-connector {
-    right: calc(50% - 28px + 1px);
-    left: auto;
-    width: 28px;
+    left: calc(50% - 24px);
+    width: 23px;
   }
 
   .timeline-item--right .timeline-connector {
-    left: calc(50% + 28px - 28px);
-    width: 28px;
+    left: calc(50% + 1px);
+    width: 23px;
   }
 }
 
@@ -1619,8 +1621,8 @@ button,
   z-index: 10;
   border-radius: 9999px;
   top: 14px;
-  /* Mobile: on left spine at left:20px, node is 10px → left:15px */
-  left: -27px;
+  /* Mobile: spine center = 21px, item left = 36px → node left = 21-5-36 = -20px */
+  left: -20px;
   width: 10px;
   height: 10px;
   border: 2px solid var(--bg);
@@ -1631,15 +1633,7 @@ button,
     width: 12px;
     height: 12px;
     top: 14px;
-    left: calc(50% - 6px);
-    /* Override mobile left positioning */
-    transform: none;
-  }
-
-  /* Reset mobile left for desktop — node always on center spine */
-
-  .timeline-item--left .timeline-node,
-    .timeline-item--right .timeline-node {
+    /* Desktop: spine center = 50% of item. Node center on spine: left = 50% - 6px */
     left: calc(50% - 6px);
   }
 }
@@ -1670,6 +1664,9 @@ article.border.border-border\/30.rounded-lg.timeline-card.group.bg-bg {
 }
 
 .timeline-card {
+  /* Mobile: column (thumb on top) */
+  flex-direction: column;
+  width: 100%;
   transition: box-shadow 0.2s, transform 0.2s;
 }
 
@@ -1677,10 +1674,28 @@ article.border.border-border\/30.rounded-lg.timeline-card.group.bg-bg {
   transform: translateY(-2px);
 }
 
-/* Mobile: full width */
+@media (min-width: 768px) {
+  /* Desktop: push card into left or right half via item padding */
 
-.timeline-card {
-  width: 100%;
+  .timeline-item--left {
+    padding-right: calc(50% + 24px);
+  }
+
+  .timeline-item--right {
+    padding-left: calc(50% + 24px);
+  }
+
+  /* Left card: thumb outer-left, body inner-right */
+
+  .timeline-item--left .timeline-card {
+    flex-direction: row;
+  }
+
+  /* Right card: body inner-left, thumb outer-right */
+
+  .timeline-item--right .timeline-card {
+    flex-direction: row-reverse;
+  }
 }
 
 /* ---- Thumbnail panel ---- */
@@ -1696,16 +1711,17 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
 }
 
 .timeline-thumb {
-  /* Mobile: full width banner on top — handled by flex-direction:column on mobile card */
+  /* Mobile: full-width banner */
   width: 100%;
   height: 90px;
 }
 
 @media (min-width: 768px) {
   .timeline-thumb {
-    width: 38%;
+    /* 3:2 landscape: wider than tall */
+    width: 40%;
     height: auto;
-    aspect-ratio: 2 / 3;
+    aspect-ratio: 3 / 2;
   }
 }
 
@@ -1731,30 +1747,6 @@ article.border.border-border\/30.rounded-lg.timeline-thumb.group.bg-bg {
   padding: 1rem;
 }
 
-/* Mobile card stacks thumbnail above body */
-
-.timeline-card {
-  flex-direction: column;
-}
-
-@media (min-width: 768px) {
-  .timeline-card {
-    flex-direction: row;
-  }
-
-  /* Left card: thumb first (outer=left), body second */
-
-  .timeline-item--left .timeline-card {
-    flex-direction: row;
-  }
-
-  /* Right card: body first (inner=left), thumb last (outer=right) */
-
-  .timeline-item--right .timeline-card {
-    flex-direction: row-reverse;
-  }
-}
-
 /* ---- Meta row (TYPE · date) ---- */
 
 .timeline-meta {