Add styling for threads

This supports threaded remarks using a

    ::: thread
    - This is a first comment.

      - This is a reply.

    - This is a second comment.
    ::::::::::

syntax.

diff --git a/style.css b/style.css
index 5d8c5c888858c77c965ab5b3d6a854d6a38bb6e9..d53f8892dff4fd758f35cf5c1d93e21fb5f283f0 100644 (file)
--- a/style.css
+++ b/style.css
@@ -21,9 +21,17 @@ blockquote blockquote{ Border: None; Padding: 0; Box-Shadow: None; Font-Size: Sm
 blockquote blockquote blockquote{ Margin-Inline: 2CH; Font-Size: Inherit; Font-Weight: 250 }
 blockquote p+p{ Margin: 0; Text-Indent: 1EM }
 blockquote p+p *{ Text-Indent: 0 }
 blockquote blockquote blockquote{ Margin-Inline: 2CH; Font-Size: Inherit; Font-Weight: 250 }
 blockquote p+p{ Margin: 0; Text-Indent: 1EM }
 blockquote p+p *{ Text-Indent: 0 }

+:is(p,ol,ul),.thread li+li>:is(p,ol,ul):First-Child{ Margin: 0 }
+:is(p,ol,ul)+:is(p,ol,ul),li+li>:is(p,ol,ul):First-Child{ Margin-Block-Start: .75EM }
+ol,ul{ Margin-Block: .75EM; Padding-Inline: 2EM 0 }
+.thread :is(ol,ul){ Padding-Inline: 0; List-Style-Type: None }
+.thread>:is(ol,ul){ Border-Block-Start: Medium Double; Border-Block-End: Medium Solid; Border-Inline-Start: Thin Dotted; Border-Inline-End: Thin Solid; Border-Radius: .5EM; Padding-Block: .75EM; Padding-Inline: 1EM }
+.thread li{ Display: Block; Position: Relative; Margin-Block-Start: .5EM; Border-Block-Start: Thin Dashed; Padding-Block-Start: .5EM; Padding-Inline-Start: 2EM; Margin-Trim: Block }
+.thread>:is(ol,ul)>li:First-Child{ Margin-Block-Start: -.5EM; Border-Block-Start: None }
+.thread li::before{ Position: Absolute; Inset-Block-Start: .5EM; Inset-Inline-Start: 0; Content: "💭" }
+.thread li li li li li :is(ol,ul){ Padding-Inline: 0; List-Style-Position: Inside }
+dl{ Margin-Block: 1EM }

 dt{ Margin-Block: 1EM .5EM; Font-Weight: 650 }
 dt{ Margin-Block: 1EM .5EM; Font-Weight: 650 }

-p{ Margin: 0 }
-p+p,li+li>p{ Margin-Block-Start: .75EM }

 hr{ Margin-Block: .5EM; Border-Block-Start: Thin Dashed; Border-Block-End: None; Border-Inline: None }
 :Any-Link[href^="/Special:NotFound?path="]{ Color: Firebrick }
 span.sig{ Font-Style: Italic; Font-Weight: Bold }
 hr{ Margin-Block: .5EM; Border-Block-Start: Thin Dashed; Border-Block-End: None; Border-Inline: None }
 :Any-Link[href^="/Special:NotFound?path="]{ Color: Firebrick }
 span.sig{ Font-Style: Italic; Font-Weight: Bold }