shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

commit b20c91be88b832d57847ee52c23763d86dd7cd2a
parent 03d7ac9ad6583a9af78d46da3effc228104033f5
Author: knutsen <samuel@knutsen.co>
Date:   Thu, 24 Jun 2021 12:08:13 +0100

Don't show mascot until loaded (JS enabled only)

Diffstat:
Mpublic/image.js | 6++++++
Mpublic/style.css | 5+++--
2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/image.js b/public/image.js @@ -2,13 +2,19 @@ const YUI_COUNT = 17; const mascot = document.getElementById("mascot"); const favicon = document.querySelector("link[rel~='icon']"); +mascot.style.opacity = 0; const randomYui = () => { const pick = Math.floor(1 + Math.random() * YUI_COUNT); const stem = "/mascots/" + pick; + mascot.style.opacity = 0; mascot.setAttribute("src", stem + ".png"); favicon.setAttribute("href", stem + "-square.png"); + const loaded = () => { mascot.style.opacity = .85 }; + if (mascot.complete) loaded(); + else mascot.addEventListener('load', loaded); + useColourScheme({ 11: 'pink', 15: 'green', diff --git a/public/style.css b/public/style.css @@ -166,8 +166,9 @@ pre code { max-height: var(--mascot-height); max-width: var(--mascot-max-width); position: fixed; - bottom:0em; - right:0; + bottom: 0; + right: 0; + transition: all .15s ease; opacity: .85; }