diff --git a/static/style.css b/static/style.css index 824a8d8..dc08765 100644 --- a/static/style.css +++ b/static/style.css @@ -136,7 +136,6 @@ body nav input { /* Node styling */ .node { - max-width: min(650px, 100ex); margin: 0 auto; } @@ -149,6 +148,73 @@ body nav input { display: none; } +/* Item list */ +.node .contents ul { + --tree-spacing : 1rem; + --tree-line-separation: 0.5rem; + --tree-color: #ccc; + --tree-border-radius: 10px; + list-style: none; + /* margin-left: var(--tree-spacing); */ +} + +.node .contents ul li { + position: relative; +} + +.node .contents ul li::after { + content: '●'; + color: var(--tree-color); + position: absolute; + /* left: calc(var(--tree-spacing) - 0.5ex); */ + /* Shown on right */ + left: -1ex; + /* Shown on left */ + top: calc(-0.5ex - 2px); +} + +.node .contents ul li::before { + content: ' '; + width: var(--tree-spacing); + display: inline-block; + border-bottom: 2px solid var(--tree-color); + vertical-align: super; + margin-right: var(--tree-line-separation); +} + +/* Nested item list */ +.node .contents ul ul { + padding: 0; + margin-left: calc(var(--tree-spacing)); +} + +.node .contents ul ul li { + /* margin-left: 1ex; */ + border-left: 2px solid var(--tree-color); +} + +.node .contents ul ul li::after { + left: calc(var(--tree-spacing) * 2 - 0.5ex); +} + +.node .contents ul ul li::before { + width: calc(var(--tree-spacing) * 2); + height: calc(var(--tree-spacing) + 5px); + margin-top: -100%; + border-radius: 0; + top: calc(-0.5ex - 2px); + border-left: 2px solid var(--tree-color); + margin-left: -2px; +} + +.node .contents ul ul li:last-child::before { + border-bottom-left-radius: var(--tree-border-radius); +} + +.node .contents ul li:last-child { + border-color: transparent; +} + .node .node.collapsed > .title::before { content: "›"; vertical-align: text-bottom; @@ -240,10 +306,10 @@ li .tag::after { } a.internal::before { - content: '{ '; + content: '{ '; } a.internal::after { - content: ' }'; + content: ' }'; } /* Code blocks */