deploy: 0832a13

marcantondahmen · Jul 31, 2023 · 9eac86a · 9eac86a
1 parent babf760
commit 9eac86a
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 9 deletions.
diff --git a/demo.css b/demo.css
@@ -336,7 +336,7 @@ body {
 body {
   max-width: 88rem;
   margin: auto;
-  padding: 0 1.75rem;
+  padding: 0 2rem;
 }
 img.hero {
   width: 100%;
@@ -353,7 +353,7 @@ img.hero {
     border: none;
     aspect-ratio: 1.2;
     object-fit: cover;
-    margin: -3rem -1.75rem;
+    margin: -3rem -2rem;
     width: 100vw;
     max-width: 100vw;
   }
@@ -437,7 +437,8 @@ summary::-webkit-details-marker {
 }
 pre code.hljs {
   display: block;
-  overflow-x: auto;
+  max-height: 40rem;
+  overflow: auto;
   padding: 1em;
 }
 code.hljs {
@@ -492,6 +493,7 @@ code.hljs {
 .emgithub-file .hljs-style-dark .hljs-selector-id,
 .emgithub-file .hljs-style-dark .hljs-string,
 .emgithub-file .hljs-style-dark .hljs-template-tag,
+.emgithub-file .hljs-style-dark .hljs-attribute,
 .emgithub-file .hljs-style-dark .hljs-type {
   color: var(--code-accent-2);
 }
@@ -612,7 +614,7 @@ nav :first-child a {
   --st-collapse-icon-size: 0.9rem;
   display: flex;
   flex-direction: column;
-  margin: 1.5rem 0;
+  margin: 2rem 0;
 }
 .tree__label {
   display: flex;
@@ -664,6 +666,53 @@ nav :first-child a {
   border-style: dashed;
   cursor: move !important;
 }
+.tree__subnodes .tree__node {
+  --line-color: hsl(217, 12%, 22%);
+  position: relative;
+}
+.tree__subnodes .tree__node:not(:last-child):before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  left: calc((var(--st-subnodes-padding-left) / -2) + 8px);
+  border-left: 2px solid var(--line-color);
+}
+.tree__subnodes .tree__label > span {
+  position: relative;
+}
+.tree__subnodes .tree__label > span:before {
+  content: '';
+  position: absolute;
+  left: -1.4rem;
+  top: -6px;
+  height: calc(100% + 6px);
+  border-left: 2px solid var(--line-color);
+  mix-blend-mode: lighten;
+}
+:last-child > .tree__subnodes .tree__label > span:before {
+  height: calc(50% + 6px);
+}
+.tree__subnodes .tree__label > span:after {
+  content: '';
+  position: absolute;
+  left: -1.4rem;
+  top: 0;
+  width: calc(1.4rem - 4px);
+  height: 50%;
+  border-bottom: 2px solid var(--line-color);
+  mix-blend-mode: lighten;
+}
+.tree__collapse {
+  z-index: 3;
+}
+.my-icon {
+  margin-left: -0.05rem;
+  font-size: 0.85rem;
+  background-color: var(--background);
+}
+.my-tree {
+  margin: 2rem 0;
+}
 
 :root {
   --color: hsl(217, 12%, 90%);

diff --git a/index.html b/index.html
@@ -25,11 +25,11 @@
 			property="og:image"
 			content="https://raw.githubusercontent.com/marcantondahmen/sortable-tree/master/assets/readme.png"
 		/>
-		<link rel="stylesheet" href="demo.css?t=1690815954740" />
+		<link rel="stylesheet" href="demo.css?t=1690819254830" />
 		<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/highlightjs-line-numbers.min.js"></script>
-		<script defer src="demo.js?t=1690815954740"></script>
-	<link href="sortable-tree.css?5c49ea60695ca4878e2f" rel="stylesheet"><script src="sortable-tree.js?5c49ea60695ca4878e2f"></script></head>
+		<script defer src="demo.js?t=1690819254830"></script>
+	<link href="sortable-tree.css?6cd3fdb2b7f0caa7d2f9" rel="stylesheet"><script src="sortable-tree.js?6cd3fdb2b7f0caa7d2f9"></script></head>
 	<body>
 		<nav>
 			<span>
@@ -229,8 +229,8 @@ <h2>No Theme</h2>
 				<p>
 					By default, the included styles only cover the most basic
 					functionality such as collapsing and indentation. You can
-					assign your CSS classes to the rendered elements as well as
-					fully customize the render function. Without any theming,
+					assign your own CSS classes to the rendered elements as well
+					as fully customize the render function. Without any theming,
 					the generated tree looks as follows. In addition to that,
 					the basic styles are controlled by
 					<a
@@ -242,6 +242,14 @@ <h2>No Theme</h2>
 				</p>
 				<demo-embed name="unstyled"></demo-embed>
 				<div id="tree-unstyled"></div>
+
+				<h2>Custom Theme</h2>
+				<p>
+					The theme that is used here on this example page can be
+					found in the repository and serves as a good boiler plate
+					for custom themes.
+				</p>
+				<script src="https://marcantondahmen.github.io/emgithub/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fmarcantondahmen%2Fsortable-tree%2Fblob%2Fmaster%2Fdemo%2Ftree.less%3Fts%3D2&style=dark&type=code&showLineNumbers=on&showFullPath=on&showCopy=on"></script>
 			</main>
 		</div>
 	</body>