Smaller main font size

static/less/main.less

@@ -27,6 +27,15 @@ h1 {
 	font-size: 1em;
 }
 
+h2 {
+	margin-top: 32px;
+	font-size: 0.9em;
+}
+
+button {
+	font-size: 1em;
+}
+
 #blackout {
 	position: absolute;
 	left: 0px;
@@ -51,7 +60,6 @@ h1 {
 		padding: 16px;
 		border-bottom: 1px solid #aaa;
 		user-select: none;
-		font-size: 0.85em;
 		-webkit-tap-highlight-color: transparent;
 
 		&.separator {
@@ -125,16 +133,22 @@ h1 {
 }
 
 #properties {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-
 	color: #333;
-	background: #fff;
-	border: 2px solid #000;
 	padding: 16px;
-	z-index: 1025;
+
+	.key {
+		margin-top: 8px;
+
+		&.locked {
+			color: #888;
+		}
+		&.locked:after {
+			content: " (locked)";
+		}
+		label {
+			margin-left: 8px;
+		}
+	}
 }
 
 header {
@@ -143,7 +157,7 @@ header {
 	grid-template-columns: min-content 1fr repeat(3, min-content);
 	align-items: center;
 	//background: @accent_1;
-	padding: 0px;
+	padding: 8px 0px;
 	color: darken(@accent_1, 35%);
 	background: linear-gradient(to right, #009fff, #ec2f4b);
 	background: linear-gradient(to right, #f5af19, #f12711);
@@ -170,12 +184,17 @@ header {
 	.name {
 		font-weight: bold;
 		padding-left: 16px;
+		font-size: 1.25em;
 	}
 
 	.add {
-		font-size: 2em;
 		padding-right: 16px;
 		cursor: pointer;
+
+		img {
+			cursor: pointer;
+			height: 24px;
+		}
 	}
 
 	.keys {
@@ -188,7 +207,7 @@ header {
 	}
 
 	.menu {
-		font-size: 1.25em;
+		font-size: 1.75em;
 		padding-right: 16px;
 		cursor: pointer;
 		user-select: none;
@@ -201,7 +220,6 @@ header {
 	padding: 16px;
 	background-color: #333;
 	color: #ddd;
-	font-size: 0.85em;
 
 	.node {
 		display: grid;
@@ -261,7 +279,6 @@ header {
 
 	.crumb {
 		margin-right: 8px;
-		font-size: 0.8em;
 		cursor: pointer;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -296,7 +313,6 @@ header {
 		margin-right: 12px;
 		margin-bottom: 16px;
 		white-space: nowrap;
-		font-size: 0.8em;
 		cursor: pointer;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
@@ -311,6 +327,7 @@ header {
 	font-weight: bold;
 	margin-top: 32px;
 	margin-bottom: 32px;
+	font-size: 1.5em;
 }
 
 .node-content {
@@ -318,7 +335,6 @@ header {
 	justify-self: center;
 	word-wrap: break-word;
 	font-family: monospace;
-	font-size: 0.85em;
 	color: #333;
 	width: calc(100% - 32px);
 	max-width: 900px;
@@ -339,6 +355,7 @@ header {
 	/* 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;
 	grid-area: content;
+	font-size: 1.0em;
 }
 .grow-wrap::after {
 	/* Note the weird space! Needed to preventy jumpy behavior */
@@ -420,9 +437,13 @@ header {
 	padding: 32px;
 	color: #333;
 
+	p {
+		max-width: 80ex;
+	}
+
 	.key-list {
 		display: grid;
-		grid-template-columns: min-content 1fr;
+		grid-template-columns: min-content 1fr min-content;
 		grid-gap: 12px 12px;
 		align-items: end;
 		margin-top: 16px;
@@ -441,6 +462,22 @@ header {
 		.description {
 			cursor: pointer;
 			padding-bottom: 4px;
+			user-select: none;
+			text-decoration: underline;
+		}
+
+		.view {
+			white-space: nowrap;
+			cursor: pointer;
+			user-select: none;
+			text-decoration: underline;
+		}
+
+		.hex-key {
+			grid-column: 1 / -1;
+			border: 1px solid #aaa;
+			padding: 16px;
+			margin-bottom: 16px;
 		}
 	}
 }

static/less/theme.less

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