Rewrite

static/css/main.css

@@ -1,7 +1,14 @@
 html {
   box-sizing: border-box;
   background: #efede8;
-  font-size: 14pt;
+  font-family: "Liberation Mono", monospace;
+  font-size: 14px;
+  margin: 0px;
+  padding: 0px;
+}
+body {
+  margin: 0px;
+  padding: 0px;
 }
 *,
 *:before,

static/css/notes2.css

@@ -1,5 +1,12 @@
+html {
+  background-color: #fff;
+}
+#notes2 {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  min-height: 100vh;
+}
 #tree {
-  grid-area: tree;
   padding: 16px;
   background-color: #333;
   color: #ddd;
@@ -30,9 +37,99 @@
 #tree .node .children {
   padding-left: 24px;
   margin-left: 8px;
-  border-left: 1px solid #555;
+  border-left: 1px solid #444;
   grid-column: 1 / -1;
 }
 #tree .node .children.collapsed {
   display: none;
 }
+#crumbs {
+  margin: 16px;
+}
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px 16px;
+  background: #e4e4e4;
+  color: #333;
+  border-radius: 6px;
+}
+.crumbs .crumb {
+  margin-right: 8px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.crumbs .crumb:after {
+  content: "•";
+  margin-left: 8px;
+  color: #fe5f55;
+}
+.crumbs .crumb:last-child {
+  margin-right: 0;
+}
+.crumbs .crumb:last-child:after {
+  content: '';
+  margin-left: 0px;
+}
+/* ============================================================= *
+ * Textarea replicates the height of an element expanding height *
+ * ============================================================= */
+.grow-wrap {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+  font-size: 1em;
+}
+.grow-wrap::after {
+  /* Note the weird space! Needed to preventy jumpy behavior */
+  content: attr(data-replicated-value) " ";
+  /* This is how textarea text behaves */
+  width: calc(100% - 32px);
+  max-width: 900px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: #f0f;
+  background: rgba(0, 255, 255, 0.5);
+  justify-self: center;
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+}
+.grow-wrap > textarea {
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  resize: none;
+  /* Firefox shows scrollbar on growth, you can hide like this. */
+  overflow: hidden;
+}
+.grow-wrap > textarea,
+.grow-wrap::after {
+  /* Identical styling required!! */
+  padding: 0.5rem;
+  font: inherit;
+  /* Place on top of each other */
+  grid-area: 1 / 1 / 2 / 2;
+}
+/* ============================================================= */
+.node-name {
+  background: #fff;
+  color: #000;
+  text-align: center;
+  font-weight: bold;
+  margin-top: 32px;
+  margin-bottom: 32px;
+  font-size: 1.5em;
+}
+.node-content {
+  justify-self: center;
+  word-wrap: break-word;
+  font-family: monospace;
+  color: #333;
+  width: calc(100% - 32px);
+  max-width: 900px;
+  resize: none;
+  border: none;
+  outline: none;
+}
+.node-content:invalid {
+  background: #f5f5f5;
+  padding-top: 16px;
+}