diff --git a/JetStream.css b/JetStream.css index 997077f5..948754fe 100644 --- a/JetStream.css +++ b/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,6 +495,7 @@ dt:target { from { opacity: 0; } + to { opacity: 1; } @@ -476,10 +503,11 @@ dt:target { @keyframes scaledown { from { - transform: scale(1.3,1.3); + transform: scale(1.3, 1.3); } + to { - transform: scale(1,1); + transform: scale(1, 1); } } @@ -487,6 +515,7 @@ dt:target { 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; }