From cbfd4ef3333118adee4f240f7dfb6c290207dfdf Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 31 Oct 2024 18:47:07 +0800
Subject: [PATCH] Rewrite line indent style logic

I know, it's still messy
---
 src/app.css | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/app.css b/src/app.css
index f9335457..d5e97da7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -381,12 +381,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 
 .timeline.contextual {
-  --default-line-start: 40px;
-  --thread-start: 40px;
-  --line-start: 40px;
+  --indent-large-start: 40px;
+  --indent-small-start: 10px;
+  --thread-start: var(--indent-small-start);
+  --line-start: var(--indent-small-start);
   --line-width: 3px;
   --line-end: calc(var(--line-start) + var(--line-width));
-  --default-line-end: calc(var(--default-line-start) + var(--line-width));
+  --indent-large-end: calc(var(--indent-large-start) + var(--line-width));
+  --indent-small-end: calc(var(--indent-small-start) + var(--line-width));
   --line-margin-end: 16px;
   --line-radius: 10px;
   --line-diameter: calc(var(--line-radius) * 2);
@@ -398,7 +400,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     --line-curve: -45deg;
   }
 
-  .descendant.thread:has(+ .descendant:not(.thread)):after {
+  > li:is(.hero:has(+ .thread), .thread, .ancestor) {
+    --thread-start: var(--indent-large-start);
+    --line-start: var(--indent-large-start);
+    --line-end: calc(var(--line-start) + var(--line-width));
+  }
+
+  > li.descendant.thread:has(+ .descendant:not(.thread)):after {
     position: absolute;
     inset-inline-start: 10px;
     bottom: 0;
@@ -453,13 +461,6 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     background-size: var(--curves-radius);
     background-position: top var(--backward), bottom var(--forward);
   }
-
-  > li.hero:has(+ .descendant:not(.thread)),
-  > li.descendant:not(.thread) {
-    --thread-start: 10px;
-    --line-start: 10px;
-    --line-end: calc(var(--line-start) + var(--line-width));
-  }
 }
 .timeline.contextual > li {
   background-image: linear-gradient(
@@ -471,23 +472,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
     transparent var(--line-end),
     transparent
   );
-  &.hero:not(:first-child, :last-child, :only-child) {
+  &.hero:not(:has(+ .thread), :first-child, :only-child, :last-child) {
     background-image: linear-gradient(
         var(--line-dir),
         transparent,
-        transparent var(--line-start),
-        var(--comment-line-color) var(--line-start),
-        var(--comment-line-color) var(--line-end),
-        transparent var(--line-end),
+        transparent var(--indent-small-start),
+        var(--comment-line-color) var(--indent-small-start),
+        var(--comment-line-color) var(--indent-small-end),
+        transparent var(--indent-small-end),
         transparent
       ),
       linear-gradient(
         var(--line-dir),
         transparent,
-        transparent var(--default-line-start),
-        var(--comment-line-color) var(--default-line-start),
-        var(--comment-line-color) var(--default-line-end),
-        transparent var(--default-line-end),
+        transparent var(--indent-large-start),
+        var(--comment-line-color) var(--indent-large-start),
+        var(--comment-line-color) var(--indent-large-end),
+        transparent var(--indent-large-end),
         transparent
       );
     background-size: 100% 50%;