Add snow effect configuration options

tmshader · Dec 13, 2024 · 8d42655 · 8d42655
1 parent c6e0e63
commit 8d42655
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/_config.yml b/_config.yml
@@ -7,5 +7,19 @@ baseurl: /wishlist-template
 umami_url: https://tardis.tmshader.me/door-creak
 umami_id: 8e7fbf9c-2fcf-4c46-bcb7-b1a593a1031f
 
-# Set to "false" to disable snow effect
-snow: true
+# Set to "false" to disable the snow effect
+snow: true
+
+# This controls the opacity of the snowflakes
+snow-opacity: 80%
+
+# When set to "true" the snow effect appears behind the main content
+# (The effect may not be visible on phones with this option enabled)
+snow-behind: false
+
+# If you disable this option, all snowflakes will have equal size
+snow-variance: true
+
+# This controls the variance of the snowflake sizes
+# Use values from 0 to 1 (Example: 0.2)
+snow-variance-amount: 0.2
diff --git a/_includes/snow.html b/_includes/snow.html
@@ -2,16 +2,47 @@
     /* customizable snowflake styling */
     .snowflake {
         color: #fff;
-        font-size: 3em;
         font-family: Arial, sans-serif;
         text-shadow: 0 0 5px #05a;
     }
 
+    {% if site.snow-variance == true %}
+    .snowflake.snow-0 {
+        font-size: calc(3em * calc(1 - {{ site.snow-variance-amount | default: "0.2" }}));
+    }
+
+    .snowflake.snow-1 {
+        font-size: 3em;
+    }
+
+    .snowflake.snow-2 {
+        font-size: calc(3em * calc(1 + {{ site.snow-variance-amount | default: "0.2" }}));
+    }
+
+    @media (min-width: 768px) {
+        .snowflake.snow-0 {
+            font-size: calc(3em * calc(1 - {{ site.snow-variance-amount | default: "0.2" }}));
+        }
+
+        .snowflake.snow-1 {
+            font-size: 4em;
+        }
+
+        .snowflake.snow-2 {
+            font-size: calc(4em * calc(1 + {{ site.snow-variance-amount | default: "0.2" }}));
+        }
+    }
+    {% else %}
+    .snowflake {
+        font-size: 3em;
+    }
+
     @media (min-width: 768px) {
         .snowflake {
             font-size: 4em;
         }
     }
+    {% endif %}
 
     .snowflake,
     .snowflake .inner {
@@ -43,7 +74,12 @@
     .snowflake {
         position: fixed;
         top: -10%;
+        opacity: {{ site.snow-opacity }};
+        {% if site.snow-behind == true %}
+        z-index: -9999;
+        {% else %}
         z-index: 9999;
+        {% endif %}
         -webkit-user-select: none;
         user-select: none;
         cursor: default;
@@ -156,17 +192,17 @@
 </style>
 <div class="snowflakes" aria-hidden="true">
     {% for i in (1..4) %}
-    <div class="snowflake">
+    <div class="snowflake{% if site.snow-variance == true %} snow-{{ i | modulo: 3 }}{% endif %}">
         <div class="inner">&#10052;</div>
     </div>
     {% endfor %}
     {% for i in (5..8) %}
-    <div class="snowflake">
+    <div class="snowflake{% if site.snow-variance == true %} snow-{{ i | modulo: 3 }}{% endif %}">
         <div class="inner">&#10053;</div>
     </div>
     {% endfor %}
     {% for i in (9..12) %}
-    <div class="snowflake">
+    <div class="snowflake{% if site.snow-variance == true %} snow-{{ i | modulo: 3 }}{% endif %}">
         <div class="inner">&#10054;</div>
     </div>
     {% endfor %}