Wip

static/less/login.less

@@ -30,4 +30,12 @@
 		font-size: 0.8em;
 		align-self: center;
 	}
+
+	.auth-failed {
+		margin-top: 32px;
+		color: #a00;
+		background: #fff;
+		padding: 16px;
+		border-radius: 8px;
+	}
 }

static/less/main.less

@@ -4,7 +4,7 @@ html, body {
 	margin: 0px;
 	padding: 0px;
 	font-family: 'Liberation Mono', monospace;
-	font-size: 16pt;
+	font-size: @fontsize;
 
 	background-color: @background;
 }
@@ -14,6 +14,63 @@ h1 {
 }
 
 #app {
-	padding: 32px;
 	color: #fff;
 }
+
+.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);
+
+	.crumb {
+		margin-right: 8px;
+		font-size: 0.8em;
+		cursor: pointer;
+	}
+
+	.crumb:after {
+		content: ">";
+		margin-left: 8px;
+		color: darken(@accent_1, 15%);
+	}
+
+	.crumb:last-child {
+		margin-right: 0;
+	}
+	.crumb:last-child:after {
+		content: '';
+		margin-left: 0px;
+	}
+
+}
+
+.child-nodes {
+	display: flex;
+	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;
+
+	.child-node {
+		padding: 8px;
+		border-radius: 8px;
+		background-color: darken(@background, 12.5%);
+		margin-right: 16px;
+		margin-bottom: 16px;
+		white-space: nowrap;
+		font-size: 0.8em;
+		cursor: pointer;
+	}
+}
+
+.node-name {
+	padding: 16px;
+}
+
+.node-content {
+	padding: 32px;
+}

static/less/theme.less

@@ -1,2 +1,4 @@
+@fontsize: 14pt;
 @background: #494949;
 @accent_1: #ecbf00;
+@accent_2: #abc837;