metrics are working!!!

capsulflask/static/style.css

@@ -61,12 +61,15 @@ main {
 }
 
 .full-margin {
+  width: 100%;
   margin: 3rem 0;
 }
 .half-margin {
+  width: 100%;
   margin: 1.5rem 0;
 }
 .third-margin {
+  width: 100%;
   margin: 1rem 0;
 }
 
@@ -79,6 +82,12 @@ main {
 .wrap {
   flex-wrap: wrap;
 }
+.row.grid-large > div {
+  flex: 1 1 20em;
+}
+.row.grid-small > div {
+  flex: 0 0 8em;
+}
 .justify-start {
   justify-content: flex-start;
 }
@@ -163,6 +172,12 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+input[type=image].submit {
+  background-color: #0000;
+}
+
+
+
 h1, h2, h3, h4, h5 {
   font-size:calc(0.40rem + 1vmin);
   margin: initial;
@@ -174,6 +189,10 @@ ul li {
   margin: 0.5em 0;
 }
 
+hr {
+  width: 100%;
+}
+
 table{
   border-collapse: collapse;
 }
@@ -188,6 +207,15 @@ table.small td, table.small th {
   font: calc(0.35rem + 0.83vmin) monospace;
   padding: 0.1em 1em;
 }
+table.small td.metrics {
+  padding: 0;
+}
+td.metrics img {
+  margin-left: -20px;
+  margin-right: -20px;
+  margin-top: -5px;
+  margin-bottom: -5px;
+}
 th {
   border-right: 4px solid #241e1e;
   text-align: left;
@@ -204,6 +232,13 @@ td {
   to   {  color: rgba(221, 169, 56, 0.2); }
 }
 
+div.metric {
+  display: flex;
+  align-items: last baseline;
+  flex-direction: column;
+  margin: 0.7em;
+}
+
 .code {
   display: inline-block;
   padding: 0.5em 1.2em;