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;