Snow improvements

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);