diff --git a/index.html b/index.html index 198ff3d9..7715f92e 100644 --- a/index.html +++ b/index.html @@ -51,9 +51,6 @@ } async function initialize() { - if (!JetStreamParams.isDefault) { - showNonDefaultParams(); - } if (globalThis.allIsGood) { try { await JetStream.initialize(); @@ -71,6 +68,7 @@ } function showNonDefaultParams() { + document.body.classList.remove("animate"); document.body.classList.add("nonDefaultParams"); const body = document.querySelector("#non-standard-params-table tbody"); const nonDefaultParams = JetStreamParams.nonDefaultParams; @@ -89,7 +87,7 @@ - +

JetStream Next @@ -128,5 +126,10 @@

Non-standard Parameters

+ diff --git a/resources/JetStream.css b/resources/JetStream.css index 32fe3418..bceeb06f 100644 --- a/resources/JetStream.css +++ b/resources/JetStream.css @@ -180,13 +180,16 @@ img { background-size: contain; background-image: url("JetStreamNxLogo.svg"); color: transparent; - animation: swingin 350ms ease-out forwards; will-change: transform, opacity; height: 75px; } +body.animate .logo .logo-image { + animation: swingin 350ms ease-out forwards; +} + #jetstreams { - background-image: url("jetstreams.svg"); + background-image: url("jetstreams-static.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; @@ -194,6 +197,10 @@ img { margin: -2rem 0; } +body.animate #jetstreams { + background-image: url("jetstreams.svg"); +} + #jetstreams svg { width: 100%; max-height: 120px; @@ -220,6 +227,10 @@ article, .summary { max-width: 70rem; margin: 0 auto 0 auto; +} + +body.animate article, +body.animate .summary { opacity: 0; animation: fadein 0.5s ease-in-out forwards; animation-delay: 200ms; @@ -359,7 +370,8 @@ a.button { user-select: none; } -a.button { + +body.animate a.button { animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards; opacity: 0; } @@ -467,14 +479,17 @@ a.button { justify-content: space-around; gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 calc(-var(--gap) * -1); - animation: fadein 500ms ease-out forwards; - opacity: 0; overflow-y: auto; flex: 1; padding-bottom: var(--gap); box-sizing: border-box; } +body.animate #results { + animation: fadein 500ms ease-out forwards; + opacity: 0; +} + .benchmark { position: relative; flex: 1; diff --git a/resources/jetstreams-static.svg b/resources/jetstreams-static.svg new file mode 100644 index 00000000..a734b574 --- /dev/null +++ b/resources/jetstreams-static.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + \ No newline at end of file