CSS fixes for info button (#126)

- improve info button styling
- format CSS

Author: camillobruni

JetStream.css

@@ -34,14 +34,15 @@
     --text-color-very-subtle: #8E8E93;
     --heading-color: #2C98D1;
     --link-hover-color: #0086BF;
-    --button-color-primary: rgb(52,170,220);
+    --button-color-primary: rgb(52, 170, 220);
     --error-text-color: #d24a59;
     --benchmark-heading-color: rgb(183, 183, 183);
     --benchmark-error-text-color: #ff8686;
     --benchmark-done-result-color: #4A4A4A;
 }
 
-html,  svg text {
+html,
+svg text {
     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
     font-size: 62.5%;
     font-synthesis: none;
@@ -126,7 +127,7 @@ img {
     text-align: center;
 }
 
-.summary + .summary {
+.summary+.summary {
     padding-top: 5px;
     margin-top: 5px;
 }
@@ -135,7 +136,8 @@ img {
     display: none;
 }
 
-article, .summary {
+article,
+.summary {
     max-width: 70rem;
     margin: 0 auto 1rem;
     opacity: 0;
@@ -149,13 +151,19 @@ h1 {
 }
 
 
-h2, h3, h4, h5, h6 {
-     color: var(--heading-color);
-     text-align: left;
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--heading-color);
+    text-align: left;
 }
 
 
-h4, h5, h6 {
+h4,
+h5,
+h6 {
     margin-bottom: 0;
 }
 
@@ -165,7 +173,8 @@ p {
     margin: 0 0 3rem 0;
 }
 
-h5, h6 {
+h5,
+h6 {
     font-size: 1.6rem;
 }
 
@@ -206,7 +215,7 @@ a.button {
     text-decoration: none;
     font-size: 2rem;
     background-color: var(--button-color-primary);
-    background-image: linear-gradient(180deg, rgba(134,217,255,1) -80%, rgb(52,170,220) 100%);
+    background-image: linear-gradient(180deg, rgba(134, 217, 255, 1) -80%, rgb(52, 170, 220) 100%);
     color: var(--text-color-inverse);
     border: 1px solid var(--button-color-primary);
     border-radius: 2px;
@@ -255,7 +264,8 @@ a.button {
     margin: 0 auto 1rem;
 }
 
-.error h2, .error p {
+.error h2,
+.error p {
     color: var(--error-text-color);
     margin-bottom: 0;
     text-align: center;
@@ -318,24 +328,34 @@ a.button {
 
 }
 
-.benchmark h4, .benchmark .result, .benchmark label, .benchmark .plot  {
+.benchmark h4,
+.benchmark .result,
+.benchmark label,
+.benchmark .plot {
     color: transparent;
-    background: linear-gradient(160deg, rgba(249,249,249,1) 0%, rgba(238,238,238,1) 100%);
+    background: linear-gradient(160deg, rgba(249, 249, 249, 1) 0%, rgba(238, 238, 238, 1) 100%);
     border-radius: 3px;
 }
 
 .benchmark h3 {
-    color:  var(--benchmark-heading-color);
+    color: var(--benchmark-heading-color);
 }
 
-.benchmark-running h4, .benchmark-running .result, .benchmark-running label,  .benchmark-running .plot {
+.benchmark-running h4,
+.benchmark-running .result,
+.benchmark-running label,
+.benchmark-running .plot {
     color: var(--color-secondary);
     background-color: var(--color-secondary);
     background-image: none;
 }
 
 
-.benchmark-done h3, .benchmark-done h4, .benchmark-done .result, .benchmark-done label,  .benchmark-done .plot {
+.benchmark-done h3,
+.benchmark-done h4,
+.benchmark-done .result,
+.benchmark-done label,
+.benchmark-done .plot {
     background-color: transparent;
     background-image: none;
     -webkit-touch-callout: revert;
@@ -345,7 +365,10 @@ a.button {
     user-select: text;
 }
 
-.benchmark-error h4, .benchmark-error .result, .benchmark-error label, .benchmark-error  .plot {
+.benchmark-error h4,
+.benchmark-error .result,
+.benchmark-error label,
+.benchmark-error .plot {
     color: var(--benchmark-error-text-color);
     background-color: var(--benchmark-error-text-color);
     background-image: none;
@@ -373,16 +396,19 @@ a.button {
 
 .benchmark a.info {
     display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    font-style: italic;
-    font-weight: bold;
+    width: 1.5rem;
+    height: 1.5rem;
     border-radius: 100%;
     background-color: var(--benchmark-heading-color);
     color: var(--text-color-inverse) !important;
-    width: 1em;
-    height: 1em;
     user-select: none;
+    text-align: center;
+    vertical-align: middle;
+    font-style: italic;
+    font-weight: bold;
+    font-family: 'Times New Roman', Times, serif;
+    line-height: 1.6rem;
+    margin-top: -0.2rem;
 
 }
 
@@ -469,24 +495,27 @@ dt:target {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
 
 @keyframes scaledown {
     from {
-        transform: scale(1.3,1.3);
+        transform: scale(1.3, 1.3);
     }
+
     to {
-        transform: scale(1,1);
+        transform: scale(1, 1);
     }
 }
 
 @keyframes shine {
     0% {
         background-position: -1200px center;
     }
+
     100% {
         background-position: 100vw center;
     }
@@ -497,6 +526,7 @@ dt:target {
         opacity: 0;
         transform: rotateY(-85deg) translateZ(200px);
     }
+
     to {
         opacity: 1;
         transform: rotateY(0deg) translateZ(0px);
@@ -517,7 +547,8 @@ dt:target {
     }
 
 
-    article, .summary {
+    article,
+    .summary {
         padding-top: 10rem;
         margin: 0 1rem;
     }