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%;