Snow ❄️

NetCordDev · Dec 9, 2023 · d0d90a3 · d0d90a3
1 parent db52251
commit d0d90a3
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 3 deletions.
diff --git a/Documentation/templates/NetCord/layout/_master.tmpl b/Documentation/templates/NetCord/layout/_master.tmpl
@@ -58,6 +58,8 @@
   {{/_googleAnalyticsTagId}}
 
   <body class="tex2jax_ignore{{#_root}} root{{/_root}}" data-layout="{{_layout}}{{layout}}" data-yaml-mime="{{yamlmime}}">
+    <div id="snow-container" class="snow-container" aria-hidden="true"></div>
+
     <header class="bg-body border-bottom">
       <nav id="autocollapse" class="navbar navbar-expand-md" role="navigation">
         <div class="container-xxl flex-nowrap">

diff --git a/Documentation/templates/NetCord/public/main.css b/Documentation/templates/NetCord/public/main.css
@@ -13,6 +13,8 @@
     --blurple: #5865F2;
     --dark-blurple: #4752C4;
     --ligatures: none;
+    --snow-icon: "\f2bb";
+    --snowflake-color: #A0FFFF;
 }
 
 .navbar-nav {
@@ -45,6 +47,10 @@
     --ligatures: normal;
 }
 
+:root[snow="0"] {
+    --snow-icon: "\f2bc";
+}
+
 .logo {
     height: 30px;
     width: 30px;
@@ -209,3 +215,92 @@ code, .icon-ligatures:before {
 .nav-link {
     transition: inherit;
 }
+
+.icon-snow:before {
+    content: var(--snow-icon);
+}
+
+.snow-container {
+    pointer-events: none;
+}
+
+.snowflake {
+    position: fixed;
+    top: -10%;
+    z-index: 9999;
+    color: var(--snowflake-color);
+    animation-name: snowflake-fall, snowflake-shake;
+    animation-duration: 10s, 3.5s;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+    user-select: none;
+    cursor: default;
+}
+
+    .snowflake:nth-of-type(1) {
+        left: 10%;
+    }
+
+    .snowflake:nth-of-type(2) {
+        left: 20%;
+        animation-delay: 6s, 6s;
+    }
+
+    .snowflake:nth-of-type(3) {
+        left: 30%;
+        animation-delay: 2s, 2s;
+    }
+
+    .snowflake:nth-of-type(4) {
+        left: 40%;
+        animation-delay: 8s, 8s;
+    }
+
+    .snowflake:nth-of-type(5) {
+        left: 50%;
+        animation-delay: 3s, 3s;
+    }
+
+    .snowflake:nth-of-type(6) {
+        left: 60%;
+        animation-delay: 9s, 9s;
+    }
+
+    .snowflake:nth-of-type(7) {
+        left: 70%;
+        animation-delay: 4s, 4s;
+    }
+
+    .snowflake:nth-of-type(8) {
+        left: 80%;
+        animation-delay: 7s, 7s;
+    }
+
+    .snowflake:nth-of-type(9) {
+        left: 90%;
+        animation-delay: 1s, 1s;
+    }
+
+@keyframes snowflake-fall {
+    from {
+        top: -10%;
+    }
+
+    to {
+        top: 100%;
+    }
+}
+
+@keyframes snowflake-shake {
+    0% {
+        transform: translateX(-2.5vw);
+    }
+
+    50% {
+        transform: translateX(2.5vw);
+    }
+
+    100% {
+        transform: translateX(-2.5vw);
+    }
+}
diff --git a/Documentation/templates/NetCord/public/main.js b/Documentation/templates/NetCord/public/main.js
@@ -5,14 +5,45 @@ if (!ligatures)
 
 document.documentElement.setAttribute("ligatures", ligatures);
 
-function changeLigatures() {
+function toggleLigatures() {
     const ligatures = localStorage.getItem("ligatures");
     const newLigatures = ligatures == "1" ? "0" : "1";
 
     localStorage.setItem("ligatures", newLigatures);
     document.documentElement.setAttribute("ligatures", newLigatures);
 }
 
+function removeSnowflakes() {
+    const snowflakeContainer = document.getElementById('snow-container');
+    snowflakeContainer.replaceChildren();
+}
+
+function generateSnowflakes() {
+    const snowflakeContainer = document.getElementById('snow-container');
+
+    for (let i = 0; i < 9; i++) {
+        const snowflake = document.createElement('div');
+        snowflake.className = 'bi bi-snow snowflake';
+        snowflakeContainer.appendChild(snowflake);
+    }
+}
+
+function toggleSnow() {
+    const snow = localStorage.getItem("snow");
+    let newSnow;
+    if (snow == "1") {
+        removeSnowflakes();
+        newSnow = "0";
+    }
+    else {
+        generateSnowflakes();
+        newSnow = "1";
+    }
+
+    localStorage.setItem("snow", newSnow);
+    document.documentElement.setAttribute("snow", newSnow);
+}
+
 const iconLinks = [
     {
         title: 'GitHub',
@@ -27,11 +58,32 @@ const iconLinks = [
     {
         title: 'Toggle ligatures',
         icon: 'icon icon-ligatures',
-        onclick: 'window.docfx.changeLigatures()',
+        onclick: 'window.docfx.toggleLigatures()',
     }
 ];
 
+const month = new Date().getMonth();
+if (month == 11) {
+    let snow = localStorage.getItem("snow");
+
+    if (!snow)
+        localStorage.setItem("snow", snow = "1");
+
+    document.documentElement.setAttribute("snow", snow);
+
+    if (snow == "1")
+        generateSnowflakes();
+
+    iconLinks.push(
+        {
+            title: 'Toggle snow',
+            icon: 'bi icon-snow',
+            onclick: 'window.docfx.toggleSnow()',
+        });
+}
+
 export default {
-    changeLigatures,
+    toggleLigatures,
+    toggleSnow,
     iconLinks
 };