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;