From 86e36d5b79affad49412f3e6050e54847ff7ccd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Mart=C3=ADnez=20Portela?=
 <sergio@codigoparallevar.com>
Date: Mon, 21 Nov 2022 00:09:52 +0100
Subject: [PATCH] Fix consistency between Webkit & Gecko.

Also, minor style fixes.
---
 static/style.css | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/static/style.css b/static/style.css
index dc08765..1b32ce3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -151,11 +151,11 @@ body nav input {
 /* Item list */
 .node .contents ul {
     --tree-spacing : 1rem;
+    --tree-radius  : 0.75ex;
     --tree-line-separation: 0.5rem;
     --tree-color: #ccc;
     --tree-border-radius: 10px;
     list-style: none;
-    /* margin-left: var(--tree-spacing); */
 }
 
 .node .contents ul li {
@@ -163,36 +163,43 @@ body nav input {
 }
 
 .node .contents ul li::after {
-    content: '●';
-    color: var(--tree-color);
+    content: '';
+    display: block;
     position: absolute;
-    /* left: calc(var(--tree-spacing) - 0.5ex); */
-    /* Shown on right */
-    left: -1ex;
-    /* Shown on left */
-    top: calc(-0.5ex - 2px);
+    top: calc(var(--tree-spacing) / 2 - var(--tree-radius));
+    left: calc(var(--tree-spacing) - var(--tree-radius) - 1px);
+    width: calc(2 * var(--tree-radius));
+    height: calc(2 * var(--tree-radius));
+    border-radius: 50%;
+    background: var(--tree-color);
 }
 
 .node .contents ul li::before {
     content: ' ';
     width: var(--tree-spacing);
     display: inline-block;
-    border-bottom: 2px solid var(--tree-color);
+    border-bottom: 2px dashed var(--tree-color);
     vertical-align: super;
-    margin-right: var(--tree-line-separation);
+    margin-right: calc(var(--tree-line-separation) + 0.5ex);
+    margin-left: -2px;
 }
 
 /* Nested item list */
 .node .contents ul ul {
     padding: 0;
     margin-left: calc(var(--tree-spacing));
+    list-style: none;
 }
 
 .node .contents ul ul li {
-    /* margin-left: 1ex; */
+    margin-left: calc(0px - var(--tree-radius) / 2 + 2px);
     border-left: 2px solid var(--tree-color);
 }
 
+.node .contents ul ul li::marker {
+    content: '';
+}
+
 .node .contents ul ul li::after {
     left: calc(var(--tree-spacing) * 2 - 0.5ex);
 }
@@ -204,14 +211,14 @@ body nav input {
     border-radius: 0;
     top: calc(-0.5ex - 2px);
     border-left: 2px solid var(--tree-color);
-    margin-left: -2px;
+    border-bottom-style: solid;
 }
 
-.node .contents ul ul li:last-child::before {
+.node .contents ul ul li:last-of-type::before {
     border-bottom-left-radius: var(--tree-border-radius);
 }
 
-.node .contents ul li:last-child {
+.node .contents ul li:last-of-type {
     border-color: transparent;
 }
 
@@ -382,7 +389,7 @@ article.post {
     border-right: 1px solid #000;
     padding-left: 0.75ex;
 }
-.site-header .site-links .fancy-link:last-child {
+.site-header .site-links .fancy-link:last-of-type {
     border: none;
 }
 
@@ -525,6 +532,10 @@ tr.__table-separator {
         border: 1px solid rgba(255,255,255,0.5);
     }
 
+    .node .contents ul {
+        --tree-color: #666;
+    }
+
     /* Tables. */
     table, th, td, tr {
         border: 1px solid #eee;