wip

static/less/main.less

@@ -1,5 +1,17 @@
 @import "theme.less";
 
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+[onClick] {
+        cursor: pointer;
+}
+
 html, body {
 	margin: 0px;
 	padding: 0px;
@@ -14,27 +26,54 @@ h1 {
 }
 
 #app {
+	display: grid;
 	color: #fff;
 }
 
+header {
+	display: grid;
+	grid-template-columns: 1fr min-content;
+	align-items: center;
+	background: @accent_1;
+	padding: 0px;
+	color: darken(@accent_1, 35%);
+
+	&.modified {
+		background: @accent_3;
+		color: lighten(@accent_3, 45%);
+	}
+
+	.name {
+		font-weight: bold;
+		padding-left: 16px;
+	}
+
+	.add {
+		font-size: 2em;
+		padding-right: 16px;
+		cursor: pointer;
+	}
+}
+
 .crumbs {
 	display: flex;
 	flex-wrap: wrap;
-	padding: 8px 16px;
-	background: @accent_1;
-	color: #000;
-	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.4);
+	padding: 16px;
+	background: #333;
+	color: #fff;
 
 	.crumb {
 		margin-right: 8px;
 		font-size: 0.8em;
 		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
 	}
 
 	.crumb:after {
-		content: ">";
+		content: "•";
 		margin-left: 8px;
-		color: darken(@accent_1, 15%);
+		color: @accent_1;
 	}
 
 	.crumb:last-child {
@@ -52,25 +91,46 @@ h1 {
 	flex-wrap: wrap;
 	
 	padding: 16px 16px 0px 16px;
-	background-color: darken(@background, 5%);
-	box-shadow: 0px 0px 16px -4px rgba(0,0,0,0.55) inset;
+	background-color: #505050;
 
 	.child-node {
 		padding: 8px;
 		border-radius: 8px;
-		background-color: darken(@background, 12.5%);
-		margin-right: 16px;
+		background-color: #2f2f2f;
+		margin-right: 12px;
 		margin-bottom: 16px;
 		white-space: nowrap;
 		font-size: 0.8em;
 		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
 	}
 }
 
 .node-name {
-	padding: 16px;
+	padding: 32px;
+	background: #fff;
+	color: #000;
+	text-align: center;
+	font-weight: bold;
 }
 
 .node-content {
-	padding: 32px;
+	justify-self: center;
+	padding: 0px 32px 32px 32px;
+	white-space: pre-wrap;
+	font-size: 0.85em;
+	color: #333;
+	width: 100ex;
+
+	&[contenteditable] {
+		outline: 0px solid transparent;
+	}
+}
+
+@media only screen and (max-width: 100ex) {
+	.node-content {
+		width: initial;
+		justify-self: start;
+	}
 }

static/less/theme.less

@@ -1,4 +1,5 @@
 @fontsize: 14pt;
-@background: #494949;
+@background: #fff;
 @accent_1: #ecbf00;
 @accent_2: #abc837;
+@accent_3: #c84a37;