fix: correct mobile connector/node geometry accounting for ol padding

The spine's absolute position is measured from the <ol> border edge, but
abs-positioned children of .timeline-item use the item's padding box as
reference. With px-4 (16px) on .timeline and margin-left: 30px on the item,
the item left sits at 46px from the <ol> border. Spine right = 22px, so
relative to item = -24px. Fixed connector to left:-24px/width:24px and
node to left:-30px so both touch the spine correctly on mobile.

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 829cbcbc13537a72d5d0acfd47e9f08620bae7e5..4516fadebad4e6725418f0b73522fc210312469e 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -534,8 +534,14 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
   /* Each timeline row — block, full width, positioned context for abs children */
   .timeline-item {
     @apply relative mb-10;
-    /* Mobile: push card right of the left spine (spine 20px + 2px + gap 8px = 30px; use 36px for breathing room) */
-    margin-left: 36px;
+    /*
+      Mobile geometry (.timeline has px-4 = 16px padding):
+      spine left = 20px from <ol> border → 20-16 = 4px from item's containing block.
+      We want card to start ~8px right of spine right edge (22px from <ol> = 6px from block).
+      Use margin-left: 30px so card starts at 16+30=46px from <ol>, 24px right of spine right.
+      abs children: spine left relative to item = 4 - 30 = -26px.
+    */
+    margin-left: 30px;
   }
 
   @screen md {
@@ -549,9 +555,13 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
     @apply absolute;
     top: 20px;
     height: 2px;
-    /* Mobile: spine right edge at 22px, item left at 36px → offset = -14px, width = 14px */
-    left: -14px;
-    width: 14px;
+    /*
+      Mobile: .timeline px-4(16px) + item margin-left(30px) = 46px from <ol> border.
+      Spine right edge = 22px from <ol> border = 22-46 = -24px from item left.
+      Connector: left=-24px, width=24px → touches spine right and card left edge.
+    */
+    left: -24px;
+    width: 24px;
   }
 
   @screen md {
@@ -575,8 +585,11 @@ html.theme-light picture img[src="/images/default_thumbnail_dark.png"] {
   .timeline-node {
     @apply absolute rounded-full z-10;
     top: 14px;
-    /* Mobile: spine center = 21px, item left = 36px → node left = 21-5-36 = -20px */
-    left: -20px;
+    /*
+      Mobile: spine center = 21px from <ol> border = 21-46 = -25px from item left.
+      Node (10px wide): left = -25 - 5 = -30px.
+    */
+    left: -30px;
     width: 10px;
     height: 10px;
     border: 2px solid var(--bg);

diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index c330e5fc90f9c7a58bc90912513dce5d2fafcc4b..8bd38ce3a9d403b49289492788279c394accf661 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -1574,8 +1574,14 @@ button,
 .timeline-item {
   position: relative;
   margin-bottom: 2.5rem;
-  /* Mobile: push card right of the left spine (spine 20px + 2px + gap 8px = 30px; use 36px for breathing room) */
-  margin-left: 36px;
+  /*
+      Mobile geometry (.timeline has px-4 = 16px padding):
+      spine left = 20px from <ol> border → 20-16 = 4px from item's containing block.
+      We want card to start ~8px right of spine right edge (22px from <ol> = 6px from block).
+      Use margin-left: 30px so card starts at 16+30=46px from <ol>, 24px right of spine right.
+      abs children: spine left relative to item = 4 - 30 = -26px.
+    */
+  margin-left: 30px;
 }
 
 @media (min-width: 768px) {
@@ -1590,9 +1596,13 @@ button,
   position: absolute;
   top: 20px;
   height: 2px;
-  /* Mobile: spine right edge at 22px, item left at 36px → offset = -14px, width = 14px */
-  left: -14px;
-  width: 14px;
+  /*
+      Mobile: .timeline px-4(16px) + item margin-left(30px) = 46px from <ol> border.
+      Spine right edge = 22px from <ol> border = 22-46 = -24px from item left.
+      Connector: left=-24px, width=24px → touches spine right and card left edge.
+    */
+  left: -24px;
+  width: 24px;
 }
 
 @media (min-width: 768px) {
@@ -1621,8 +1631,11 @@ button,
   z-index: 10;
   border-radius: 9999px;
   top: 14px;
-  /* Mobile: spine center = 21px, item left = 36px → node left = 21-5-36 = -20px */
-  left: -20px;
+  /*
+      Mobile: spine center = 21px from <ol> border = 21-46 = -25px from item left.
+      Node (10px wide): left = -25 - 5 = -30px.
+    */
+  left: -30px;
   width: 10px;
   height: 10px;
   border: 2px solid var(--bg);