Snowflakes background for the holidayssss

whatyouhide · Dec 11, 2024 · e454a91 · e454a91
1 parent 3609acf
commit e454a91
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/sass/_holidays.scss b/sass/_holidays.scss
@@ -32,3 +32,17 @@ picture:has(.portrait-with-santa-hat) {
         }
     }
 }
+
+.snowflake {
+    position: absolute;
+    background-image: url('/assets/holidays/snowflake.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    /* Base size for snowflake */
+    width: 50px;
+    height: 50px;
+
+    /* Slightly transparent for effect */
+    opacity: 0.5;
+}
diff --git a/static/assets/holidays/snowflake.png b/static/assets/holidays/snowflake.png
diff --git a/templates/base.html b/templates/base.html
@@ -23,6 +23,40 @@
     {% endblock %}
 
     {% block json_ld %}{% endblock json_ld %}
+
+    <script>
+        function createSnowflakes() {
+            const snowflakesInARow = 15;
+            const snowflakeRows = 12;
+            const viewportJiggle = 8;
+            const body = document.body;
+
+            for (let row = 0; row < snowflakeRows; row++) {
+                for (let col = 0; col < snowflakesInARow; col++) {
+                    const snowflake = document.createElement('div');
+                    snowflake.classList.add('snowflake');
+
+                    // Random size (scale), rotation, and opacity.
+                    const scale = Math.random() * 0.8 + 0.2; // Scale between 0.2 and 1
+                    snowflake.style.width = `${50 * scale}px`;
+                    snowflake.style.height = `${50 * scale}px`;
+                    snowflake.style.transform = `rotate(${Math.random() * 360}deg)`;
+                    snowflake.style.opacity = `${Math.random() * 0.1}`; // Opacity between 0.5 and 1
+
+                    // Random position
+                    const startLeft = 100 * (col / snowflakesInARow);
+                    const startTop = 100 * (row / snowflakeRows);
+                    // Jiggle the position a bit to make it look more natural.
+                    snowflake.style.left = `${startLeft + Math.random() * viewportJiggle - (viewportJiggle / 2)}vw`;
+                    snowflake.style.top = `${startTop + Math.random() * viewportJiggle - (viewportJiggle / 2)}vh`;
+
+                    body.appendChild(snowflake);
+                }
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', createSnowflakes);
+    </script>
 </head>
 
 <body>

diff --git a/templates/index.html b/templates/index.html
@@ -4,7 +4,7 @@
 {% block header %}{% endblock header %}
 
 {% block content %}
-<div id="main" role="main" class="landing-page">
+<div id="main" role="main" class="landing-page snowflake-background">
   <div id="content-container">
     <div id="hero-container" class="container">
       <div id="hero-portrait-with-about-link">