Minor theme tweaking

randomThemer.js

@@ -1,7 +1,8 @@
 function rain() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css"> <script src="/themes/rain/script.js"></script>`
+    html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css">` 
+
     html += `<div class="rainStuff"><div class="rainContainer">`
 
     var amount = 7
@@ -57,77 +58,29 @@ function rain() {
     return html
 }
 
-function purpleMagic() {
+function halloween() {
     var html = ""
 
-    html += `<link rel="stylesheet" type="text/css" href="/themes/magic/style.css"> <script src="/themes/magic/script.js"></script>`
+    html += `<link rel="stylesheet" type="text/css" href="/themes/halloween/style.css">` 
-    html += `<div class="magicStuff"><div class="magicContainer">`
-
-    var amount = 15
-
-    for (let index = 0; index < amount; index++) {
-        html += `<div class="particle"></div>`
-    }
-    html += "<style>"
-    for (let index = 0; index < amount; index++) {
-        html += `
-        .particle:nth-of-type(${index + 1}) {
-            animation: magic${index} ${((Math.round(Math.random() * 10) / 10) * 0.3) + 20}s linear, sway 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate;
-            animation-delay: ${Math.round(Math.random() * 100) / 100 * 20}s;
-            animation-iteration-count: infinite;
-
-        }
-        `
-
-        if (index % 2 == 0) {
-            html.replace("alternate", "alternate-reverse")
-        }
-        
-        var pos = Math.round(Math.random() * 100)
-
-        html += `@keyframes magic${index} {    `
-
-            html += `
-        0% {
-            top: 110vh;
-            right: ${pos}%;
-            visibility: visible;
-        }
-
-        90% {
-            top: -10vh;
-            right: ${pos}%;
-            visibility: visible;
-        }
-        90.1% {
-            visibility: hidden;
-        }
-        `
-
-        html += `}`
-
-    }
-    html += "</style>"
-    html += "</div></div>"
 
     return html
 }
 
-function code() {
-    return '<link rel="stylesheet" type="text/css" href="/themes/code/style.css">' // <script src="/themes/code/script.js"></script>'
-}
-
-var events = []
-events = events.concat(Array(10).fill(""))
-events.push(rain())
-
-events = events.concat(Array(10).fill(""))
-events.push(purpleMagic())
-
 module.exports = {
     returnTheme: function() {
         var time = new Date()
-        return events[time.getDate() % events.length]
+
+        // return halloween()
+
+        if (time.getMonth() + 1 == 10) {
+            return halloween()
+        } 
+
+        else if (time.getDate() % 10 == 0) {
+            return rain()
+        }
+
+        return ""
     },
 
 }

static/themes/code/script.js

@@ -1,29 +0,0 @@
-function typeWriter(elem, delay) {
-    var elemText = elem.text().split('')
-    elem.text('_'.repeat(elemText.length))
-    var i = 0
-    function nextLetter() {
-        elem.text(elemText.slice(0, i).join('') + '_'.repeat(elemText.length - i))
-        if (i < elemText.length) {
-            setTimeout(() => {
-                i++
-                nextLetter()
-            }, 20)
-        }
-    }
-    setTimeout(() => {
-        if (elem.text() == '_'.repeat(elemText.length)) {
-            nextLetter()
-        }
-    }, delay);
-}
-
-// $(document).ready(() => {
-//     var i = 0
-//     var arr = $("span").each((_, item) => {
-//         if ($(item).text().length > 0) {
-//             i++
-//             typeWriter($(item), i * 150)
-//         }
-//     })
-// })

static/themes/code/style.css

@@ -1,16 +0,0 @@
-* {
-    font-family: "Consolas", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New";
-}
-
-body {
-    background: black;
-}
-
-.mainTitle, .mainTitle > span {
-    color: limegreen !important;
-}
-
-.mainTitle {
-    animation: typer 2s linear;
-    margin: auto;
-}

static/themes/magic/script.js

@@ -1,34 +0,0 @@
-$(document).ready(() => {
-    function particle() {
-        var particle = $("<div></div>")
-        particle.addClass("particle")
-        particle.css("left", (Math.random() * 100).toString() + "%")
-        particle.css("visibility", "visible")
-        particle.css("top", "100%")
-        var anim = "sway 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95)"
-        if (Math.round(Math.random()) == 1) {
-            anim += " alternate"
-        } else {
-            anim += " alternate-reverse"
-        }
-        particle.css("animation", anim)
-
-        particle.animate({
-            "top": "-5%"
-        }, (((Math.round(Math.random() * 10) / 10) * 0.3) + 20) * 1000, () => {
-            particle.remove()
-        })
-
-        $(".magicContainer").append(particle)
-}
-
-    $(".magicContainer > *").remove()
-
-    function loop() {
-        particle()
-        setTimeout(() => {
-            loop()
-        }, 1000);
-    }
-    loop()
-})

static/themes/magic/style.css

@@ -1,44 +0,0 @@
-
-#card {
-    background-color: rgba(25, 0, 70, 1);
-    /* backdrop-filter: blur(5px); */
-}
-.magicStuff {
-    position: sticky;
-    top: 0;
-    height: 0;
-    z-index: 0;
-    pointer-events: none;
-}
-
-.magicContainer {
-    height: 100vh;
-    width: 100vw;
-    top: 0px;
-    left: 0vw;
-    position: absolute;
-    overflow: hidden;
-}
-
-.particle {
-    position: absolute;
-    width: 5px;
-    aspect-ratio: 1/1;
-    background-color: rgb(100, 70, 255);
-    /* background-image: radial-gradient(rgba(175, 0, 255, 1) 0% 25%, rgba(175, 0, 255, 0.6) 25% 50%, rgba(175, 0, 255, 0.3) 50% 75%, rgba(0, 0, 255, 0)); */
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-body {
-    background: linear-gradient(black, rgb(50, 0, 90));
-}
-
-@keyframes sway {
-    from {
-        transform: translateX(-30px);
-    }
-    to {
-        transform: translateX(30px);
-    }
-}

static/themes/rain/script.js

@@ -1,28 +0,0 @@
-$(document).ready(() => {
-    function particle() {
-        var particle = $("<div></div>")
-        particle.addClass("rainDrop")
-        particle.css("left", (Math.random() * 100).toString() + "%")
-        particle.css("visibility", "visible")
-        particle.css("top", "-10%")
-
-        particle.animate({
-            "top": "110%",
-            "easing": "linear"
-        }, 600, () => {
-            particle.remove()
-        })
-
-        $(".rainContainer").append(particle)
-}
-
-    $(".rainContainer > *").remove()
-
-    function loop() {
-        particle()
-        setTimeout(() => {
-            loop()
-        }, 100 * (Math.random() + 0.25));
-    }
-    loop()
-})