From 339e1ed97cfc389c05eb87b22151bca2a6a03ed0 Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Sun, 22 Jan 2023 15:37:49 +0100
Subject: [PATCH] feed: style 3 levels of nested threads

instead of just adding 1 line for all replies to point to the
original note, using smaller profile pic for replies of replies
help to understand the context of the replies.

this is done without increasing indentation as heavy nesting can
mess up the layout so only indentation is visible and the space
for the actual content gets to small.

if needed users can inspect replies and navigate to the deeplink
to see how the next 3 levels are nested.
---
 src/cards.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/src/cards.css b/src/cards.css
index 255d421..006ee5a 100644
--- a/src/cards.css
+++ b/src/cards.css
@@ -1,6 +1,8 @@
 /* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
 .mbox {
   --profileimg-size: 4rem;
+  --profileimg-size-half: 2rem;
+  --profileimg-size-quarter: 1rem;
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -24,14 +26,11 @@
   align-self: start;
   background-color: var(--bgcolor-textinput);
   border-radius: var(--profileimg-size);
-  border: 1px solid transparent;
   flex-basis: var(--profileimg-size);
   height: var(--profileimg-size);
-  margin-right: 1rem;
-  /* padding-top: .5ch; */
+  margin-right: 1.5rem;
   max-height: var(--profileimg-size);
   max-width: var(--profileimg-size);
-  outline: .5rem solid var(--bgcolor);
   overflow: hidden;
   position: relative;
   z-index: 2;
@@ -111,19 +110,65 @@
   flex-grow: 1;
   position: relative;
 }
+.mobx-replies .mobx-replies {
+  --reply-padding: 3rem;
+  margin-bottom: 2px;
+  padding: 0 1rem 0 var(--reply-padding);
+}
+.mobx-replies .mobx-replies .mobx-replies {
+  --reply-padding: 0;
+}
 .mbox .mbox::before,
 .mobx-replies::before {
+  background-color: var(--bgcolor-inactive);
+  border: none;
+  content: "";
+  display: block;
+  height: 200vh;
+  left: var(--profileimg-size-half);
+  margin-left: -.2rem;
+  position: absolute;
+  top: -200vh;
+  width: .4rem;
+}
+.mobx-replies .mbox .mbox::before {
+  background: none;
+  border-color: var(--bgcolor-inactive);;
+  border-style: solid;
+  border-width: 0 0 .4rem .4rem;
+  content: "";
+  display: block;
+  height: var(--profileimg-size-quarter);
+  left: calc(-1 * var(--profileimg-size-quarter));
+  margin-left: -.2rem;
+  position: absolute;
+  top: 0;
+  width: .8rem;
+}
+.mobx-replies .mbox .mbox::after {
   background-color: var(--bgcolor-inactive);
   border: none;
   content: "";
   display: block;
   height: 100vh;
-  left: calc(.5 * var(--profileimg-size));
+  left: calc(-1 * var(--profileimg-size-quarter));
   margin-left: -.2rem;
   position: absolute;
   top: -100vh;
   width: .4rem;
 }
+/* support visualisation of 3 levels of thread nesting, rest render flat without line */
+.mbox .mobx-replies .mobx-replies::before,
+.mobx-replies .mobx-replies .mbox .mbox::before {
+  content: none;
+}
+.mobx-replies .mbox .mbox .mbox-img {
+  --profileimg-size: 2rem;
+  left: -.2rem;
+  margin-right: .5rem;
+  margin-top: .2rem;
+  position: relative;
+}
 
 [data-append]::after {
   color: var(--color-accent);