Automatic SQL updates

static/less/login.less

@@ -10,10 +10,9 @@
 		margin-bottom: 32px;
 		width: 100%;
 		border: 0px;
-		border-bottom: 1px solid #fff;
+		border-bottom: 1px solid #444;
 
 		font-size: 18pt;
-		color: #fff;
 		background-color: @background;
 		
 		&:focus {
@@ -25,10 +24,14 @@
 		max-width: 300px;
 		border: 1px solid #666;
 		background: @background;
-		color: #fff;
+		color: #444;
 		padding: 16px 32px;
-		font-size: 0.8em;
+		font-size: 1em;
 		align-self: center;
+
+		&:hover {
+			background: #ddd;
+		}
 	}
 
 	.auth-failed {

static/less/main.less

@@ -30,9 +30,55 @@ h1 {
 	color: #fff;
 }
 
+#menu-blackout {
+	display: none;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	z-index: 1024;
+	background: rgba(0, 0, 0, 0.35);
+
+	&.show {
+		display: initial;
+	}
+}
+
+#menu {
+	display: none;
+	position: absolute;
+	top: 24px;
+	right: 24px;
+	background: #fff;
+	color: #000;
+	border: 2px solid #000;
+	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
+	z-index: 1025;
+
+	&.show {
+		display: initial;
+	}
+
+	.item {
+		padding: 16px;
+		border-bottom: 1px solid #aaa;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+
+		&:hover {
+			background: #ddd;
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+}
+
 header {
 	display: grid;
-	grid-template-columns: 1fr min-content;
+	grid-template-columns: 1fr min-content min-content;
 	align-items: center;
 	background: @accent_1;
 	padding: 0px;
@@ -53,6 +99,14 @@ header {
 		padding-right: 16px;
 		cursor: pointer;
 	}
+
+	.menu {
+		font-size: 1.25em;
+		padding-right: 16px;
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
 }
 
 .crumbs {
@@ -117,7 +171,7 @@ header {
 
 .node-content {
 	justify-self: center;
-	padding: 0px 32px 32px 32px;
+	padding: 0px 32px;
 	white-space: pre-wrap;
 	font-size: 0.85em;
 	color: #333;
@@ -126,11 +180,16 @@ header {
 	&[contenteditable] {
 		outline: 0px solid transparent;
 	}
+
+	&:empty {
+		background: #ddd;
+		height: 48px;
+	}
 }
 
 @media only screen and (max-width: 100ex) {
 	.node-content {
-		width: initial;
+		width: 100%;
 		justify-self: start;
 	}
 }