Tree render and navigation with note rendering

static/less/notes2.less

@@ -46,16 +46,10 @@ html {
 	}
 }
 
-/*
-#tree-native {
-	grid-area: tree;
-}
-*/
-
 #tree {
 	grid-area: tree;
-	padding: 16px 32px;
-	background-color: #333;
+	display: grid;
+	padding: 16px 0px 16px 16px;
 	color: #ddd;
 	z-index: 100; // Over crumbs shadow
 	border-left: 2px solid #333;
@@ -68,9 +62,12 @@ html {
 		display: grid;
 		position: relative;
 		justify-items: center;
+		margin-top: 8px;
 		margin-bottom: 8px;
 		margin-left: 24px;
 		margin-right: 24px;
+		cursor: pointer;
+
 		img {
 			width: 128px;
 			left: -20px;
@@ -130,12 +127,19 @@ html {
 	}
 }
 
+#tree-nodes {
+	padding: 16px 32px;
+	background-color: #333;
+	border-radius: 8px;
+	box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);
+}
+
 #crumbs {
 	grid-area: crumbs;
 	display: grid;
 	align-items: start;
 	justify-items: center;
-	margin: 0px 16px;
+	margin: 16px 16px;
 
 	.crumbs {
 		background: #e4e4e4;
@@ -160,6 +164,11 @@ html {
 			cursor: pointer;
 			user-select: none;
 			-webkit-tap-highlight-color: transparent;
+
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
 		}
 
 		.crumb:after {