Tree render and navigation with note rendering

static/css/notes2.css

@@ -17,15 +17,10 @@ html {
     display: none;
   }
 }
-/*
-#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;
   border-left: 2px solid #333;
@@ -37,9 +32,11 @@ html {
   display: grid;
   position: relative;
   justify-items: center;
+  margin-top: 8px;
   margin-bottom: 8px;
   margin-left: 24px;
   margin-right: 24px;
+  cursor: pointer;
 }
 #tree #logo img {
   width: 128px;
@@ -85,12 +82,18 @@ html {
 #tree .node .children.collapsed {
   display: none;
 }
+#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 .crumbs {
   display: flex;
@@ -114,6 +117,10 @@ html {
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+#crumbs .crumbs .crumb a {
+  text-decoration: none;
+  color: inherit;
+}
 #crumbs .crumbs .crumb:after {
   content: "•";
   margin-left: 8px;