From f9a93abc98474fd50cebd7de81e992dcad85c318 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 25 Dec 2021 09:42:15 +0100 Subject: Snow improvements --- assets/css/objects/_icon.scss | 8 +++++--- content/script.js | 13 +++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss index d074f55..f80f422 100644 --- a/assets/css/objects/_icon.scss +++ b/assets/css/objects/_icon.scss @@ -7,8 +7,8 @@ @include object(namespace()) { display: block; - width: 16px; - height: 16px; + width: iro-px-to-rem(16px); + height: iro-px-to-rem(16px); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; @@ -21,7 +21,9 @@ @include modifier('snow') { position: fixed; z-index: 9999; - top: -20px; + top: -1.2em; + width: 1em; + height: 1em; animation: fall linear forwards; stroke-width: 2px; color: #fff; diff --git a/content/script.js b/content/script.js index df5a9c0..b972200 100644 --- a/content/script.js +++ b/content/script.js @@ -12,21 +12,22 @@ function createSnowFlake() { const snowFlake = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const snowFlakeInner = document.createElementNS("http://www.w3.org/2000/svg", "use"); + const aniDuration = (Math.random() * 3 + 2) * 1000; + snowFlakeInner.setAttribute("href", "/symbols.svg#icon-asterisk"); - snowFlake.classList.add("o-icon"); - snowFlake.classList.add("o-icon--snow"); - snowFlake.ariaHidden = true; + snowFlake.classList.add("o-icon", "o-icon--snow"); + snowFlake.setAttribute("aria-hidden", "true"); - snowFlake.style.width = Math.random() * 10 + 10 + 'px'; + snowFlake.style.fontSize = Math.random() * 0.5 + 0.7 + 'em'; snowFlake.style.left = Math.random() * window.innerWidth + 'px'; - snowFlake.style.animationDuration = Math.random() * 3 + 2 + 's'; + snowFlake.style.animationDuration = aniDuration + 'ms'; snowFlake.style.opacity = Math.random(); snowFlake.appendChild(snowFlakeInner); document.body.appendChild(snowFlake); - setTimeout(() => { snowFlake.remove(); }, 5000); + setTimeout(() => { snowFlake.remove(); }, aniDuration); } setInterval(createSnowFlake, 100); -- cgit v1.2.3-70-g09d2