Tree focus

static/css/markdown.css

@@ -1,11 +1,12 @@
 .el-node-markdown {
 	h1 {
 		border-bottom: 1px solid #ccc;
-		margin-top: 48px;
+		margin-top: 32px;
 		margin-bottom: 8px;
 
 		display: inline-block;
 		font-size: 1.25em;
+
 		border-radius: 8px;
 		color: #fff;
 		background-color: var(--color1);
@@ -27,4 +28,44 @@
 		content: "> ";
 		color: var(--color1);
 	}
+
+	img {
+		max-width: var(--thumbnail-width);
+		max-height: var(--thumbnail-height);
+	}
+
+	table {
+		border: 1px solid #ccc;
+		border-collapse: collapse;
+
+		th {
+			text-align: left;
+			padding: 8px;
+		}
+
+		th,
+		td {
+			border: 1px solid #ccc;
+			padding: 8px;
+		}
+	}
+
+	code {
+		background-color: #f8f8f8;
+		border: 1px solid #ccc;
+		padding: 2px 4px;
+		border-radius: 4px;
+	}
+
+	pre {
+		background-color: #f8f8f8;
+		border: 1px solid #ccc;
+		padding: 8px;
+		border-radius: 4px;
+
+		code {
+			border: unset;
+			padding: unset;
+		}
+	}
 }

static/css/notes2.css

@@ -2,6 +2,8 @@
 
 :root {
 	--content-width: 900px;
+	--thumbnail-width: 300px;
+	--thumbnail-height: 100px;
 }
 
 html {
@@ -55,10 +57,18 @@ html {
 	z-index: 100;
 	border-left: 2px solid #333;
 
-	&:focus {
-		border-left: 2px solid #fe5f55;
+	n2-tree {
+		border: 2px solid #333;
 	}
 
+	&:focus-within {
+		n2-tree {
+			border: 2px solid #fe5f55;
+		}
+
+	}
+
+
 	#logo {
 		display: grid;
 		position: relative;
@@ -315,6 +325,7 @@ n2-nodeui {
 		.el-node-content {
 			display: none;
 		}
+
 		.el-node-markdown {
 			display: block;
 		}