Smaller main font size

static/css/main.css

@@ -14,7 +14,7 @@ body {
   margin: 0px;
   padding: 0px;
   font-family: 'Liberation Mono', monospace;
-  font-size: 14pt;
+  font-size: 11pt;
   background-color: #fff;
   height: 100%;
 }
@@ -22,6 +22,13 @@ h1 {
   margin-top: 0px;
   font-size: 1em;
 }
+h2 {
+  margin-top: 32px;
+  font-size: 0.9em;
+}
+button {
+  font-size: 1em;
+}
 #blackout {
   position: absolute;
   left: 0px;
@@ -45,7 +52,6 @@ h1 {
   padding: 16px;
   border-bottom: 1px solid #aaa;
   user-select: none;
-  font-size: 0.85em;
   -webkit-tap-highlight-color: transparent;
 }
 #menu .item.separator {
@@ -106,22 +112,27 @@ h1 {
   color: #0a0;
 }
 #properties {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: #333;
-  background: #fff;
-  border: 2px solid #000;
   padding: 16px;
-  z-index: 1025;
+}
+#properties .key {
+  margin-top: 8px;
+}
+#properties .key.locked {
+  color: #888;
+}
+#properties .key.locked:after {
+  content: " (locked)";
+}
+#properties .key label {
+  margin-left: 8px;
 }
 header {
   display: grid;
   grid-area: header;
   grid-template-columns: min-content 1fr repeat(3, min-content);
   align-items: center;
-  padding: 0px;
+  padding: 8px 0px;
   color: #333c11;
   background: linear-gradient(to right, #009fff, #ec2f4b);
   background: linear-gradient(to right, #f5af19, #f12711);
@@ -146,12 +157,16 @@ header .tree img {
 header .name {
   font-weight: bold;
   padding-left: 16px;
+  font-size: 1.25em;
 }
 header .add {
-  font-size: 2em;
   padding-right: 16px;
   cursor: pointer;
 }
+header .add img {
+  cursor: pointer;
+  height: 24px;
+}
 header .keys {
   padding-right: 16px;
 }
@@ -160,7 +175,7 @@ header .keys img {
   height: 24px;
 }
 header .menu {
-  font-size: 1.25em;
+  font-size: 1.75em;
   padding-right: 16px;
   cursor: pointer;
   user-select: none;
@@ -171,7 +186,6 @@ header .menu {
   padding: 16px;
   background-color: #333;
   color: #ddd;
-  font-size: 0.85em;
 }
 #tree .node {
   display: grid;
@@ -217,7 +231,6 @@ header .menu {
 }
 .crumbs .crumb {
   margin-right: 8px;
-  font-size: 0.8em;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -247,7 +260,6 @@ header .menu {
   margin-right: 12px;
   margin-bottom: 16px;
   white-space: nowrap;
-  font-size: 0.8em;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -260,13 +272,13 @@ header .menu {
   font-weight: bold;
   margin-top: 32px;
   margin-bottom: 32px;
+  font-size: 1.5em;
 }
 .node-content {
   grid-area: content;
   justify-self: center;
   word-wrap: break-word;
   font-family: monospace;
-  font-size: 0.85em;
   color: #333;
   width: calc(100% - 32px);
   max-width: 900px;
@@ -285,6 +297,7 @@ header .menu {
   /* 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: 1em;
 }
 .grow-wrap::after {
   /* Note the weird space! Needed to preventy jumpy behavior */
@@ -355,9 +368,12 @@ header .menu {
   padding: 32px;
   color: #333;
 }
+#keys p {
+  max-width: 80ex;
+}
 #keys .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;
@@ -378,6 +394,20 @@ header .menu {
 #keys .key-list .description {
   cursor: pointer;
   padding-bottom: 4px;
+  user-select: none;
+  text-decoration: underline;
+}
+#keys .key-list .view {
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: underline;
+}
+#keys .key-list .hex-key {
+  grid-column: 1 / -1;
+  border: 1px solid #aaa;
+  padding: 16px;
+  margin-bottom: 16px;
 }
 .layout-tree {
   display: grid;

static/images/add.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="127.99999"
+   height="127.99999"
+   viewBox="0 0 33.866664 33.866666"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   sodipodi:docname="add.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#3770ce"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6568542"
+     inkscape:cx="28.195883"
+     inkscape:cy="32.526912"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2190"
+     inkscape:window-height="1404"
+     inkscape:window-x="1463"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d6d6d6"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-57.706364,-79.853668)">
+    <rect
+       style="color:#000000;overflow:visible;fill:#ffffff;fill-rule:evenodd;stroke-width:3.175;paint-order:markers stroke fill;stop-color:#000000"
+       id="rect232"
+       width="33.866669"
+       height="7.4083333"
+       x="57.706364"
+       y="93.082832" />
+    <rect
+       style="color:#000000;overflow:visible;fill:#ffffff;fill-rule:evenodd;stroke-width:3.175;paint-order:markers stroke fill;stop-color:#000000"
+       id="rect396"
+       width="33.866665"
+       height="7.4083333"
+       x="79.853668"
+       y="-78.343864"
+       transform="rotate(90)" />
+  </g>
+</svg>

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;