From 058cf058055bfd636ead1505f8c850ac9be46181 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 28 Oct 2024 18:49:24 +0800
Subject: [PATCH] Experimental comment threads making use of more space

---
 src/app.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 55e6db33..2d2ae805 100644
--- a/src/app.css
+++ b/src/app.css
@@ -395,6 +395,51 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   :dir(rtl) & {
     --line-curve: -45deg;
   }
+
+  .descendant.thread:has(+ .descendant:not(.thread)):after {
+    position: absolute;
+    inset-inline-start: 10px;
+    bottom: 0;
+    content: '';
+    display: block;
+    width: calc(var(--line-start) + var(--line-width) - 10px);
+    /* background-color: var(--bg-color);
+    border-bottom: var(--line-width) dotted var(--comment-line-color); */
+    height: calc(var(--line-diameter) - var(--line-width));
+    background-color: var(--bg-color);
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+        transparent calc(var(--line-radius) - var(--line-width)),
+        var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
+          var(--line-radius),
+        transparent var(--line-radius)
+      ),
+      radial-gradient(
+        circle at bottom var(--forward),
+        transparent calc(var(--line-radius) - var(--line-width)),
+        var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
+          var(--line-radius),
+        transparent var(--line-radius)
+      ),
+      radial-gradient(
+        circle at top var(--backward),
+        transparent calc(var(--line-radius) - var(--line-width)),
+        var(--comment-line-color) calc(var(--line-radius) - var(--line-width))
+          var(--line-radius),
+        transparent var(--line-radius)
+      );
+    background-position: var(--line-radius) 0, bottom var(--backward),
+      top var(--forward);
+    background-size: calc(100% - var(--line-radius) * 2) auto,
+      var(--line-radius), var(--line-radius);
+  }
+
+  > 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(
@@ -427,7 +472,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual
   > li.descendant:not(.thread)
   > :is(.status-link, .status-focus) {
-  padding-inline-start: 40px;
+  padding-inline-start: var(--line-start);
 }
 .timeline.contextual .replies[data-scroll-left]:not([data-scroll-left='0']) {
   background-color: var(--bg-color);