diff --git a/index.js b/index.js index d20bb47..0575a89 100644 --- a/index.js +++ b/index.js @@ -181,6 +181,56 @@ function pageUpdate() { html = html.replace("{MASTODON_FEED}", mastoData.HTML) + var now = new Date() + currentMonth = now.getMonth() + 1 + + if ([11, 12, 1].includes(currentMonth)) { // The Below HTML is copy and pasted from that one site :> + html = html.replace("{SEASONAL_EFFECT}", ` + +
+

I love the winter :>

+`) + } else { + html = html.replace("{SEASONAL_EFFECT}", "") + } + fs.writeFileSync(path.join(__dirname, 'static/index.html'), html) } diff --git a/resources/mainPage.html b/resources/mainPage.html index bfc92fa..2e5b049 100644 --- a/resources/mainPage.html +++ b/resources/mainPage.html @@ -21,6 +21,7 @@

Welcome to Violet's Purgatory

+

Violet

@@ -51,5 +52,7 @@ {MASTODON_FEED}
+ + {SEASONAL_EFFECT} \ No newline at end of file diff --git a/static/style.css b/static/style.css index 6bee3e5..ee0664f 100644 --- a/static/style.css +++ b/static/style.css @@ -50,6 +50,7 @@ a { } .chip { + z-index: 3; font-size: 1.3rem; border: 2px gray solid; border-radius: 6px; @@ -76,6 +77,8 @@ a { margin: auto; padding: 0; display: flex; + position: relative; + z-index: 3; } .activity>p { @@ -134,7 +137,8 @@ hr { margin: 20px auto; width: 95%; max-width: 800px; - + z-index: 3; + position: relative; } .me { @@ -227,4 +231,153 @@ hr { opacity: 1; transform: none; } +} + +.snowflake { + color: white; + font-size: 0.5rem; + font-family: Arial, sans-serif; + text-shadow: 0 0 5px #000; +} + +.snowflake, +.snowflake .inner { + z-index: 1; + animation-iteration-count: infinite; + animation-play-state: running +} + +@keyframes snowflakes-fall { + 0% { + transform: translateY(0) + } + + 100% { + transform: translateY(110vh) + } +} + +@keyframes snowflakes-shake { + + 0%, + 100% { + transform: translateX(0) + } + + 50% { + transform: translateX(80px) + } +} + +.snowflake { + position: fixed; + top: -10%; + -webkit-user-select: none; + user-select: none; + cursor: default; + animation-name: snowflakes-shake; + animation-duration: 3s; + animation-timing-function: ease-in-out +} + +.snowflake .inner { + animation-duration: 10s; + animation-name: snowflakes-fall; + animation-timing-function: linear +} + +.snowflake:nth-of-type(0) { + left: 1%; + animation-delay: 0s +} + +.snowflake:nth-of-type(0) .inner { + animation-delay: 0s +} + +.snowflake:first-of-type { + left: 10%; + animation-delay: 1s +} + +.snowflake:first-of-type .inner, +.snowflake:nth-of-type(8) .inner { + animation-delay: 1s +} + +.snowflake:nth-of-type(2) { + left: 20%; + animation-delay: .5s +} + +.snowflake:nth-of-type(2) .inner, +.snowflake:nth-of-type(6) .inner { + animation-delay: 6s +} + +.snowflake:nth-of-type(3) { + left: 30%; + animation-delay: 2s +} + +.snowflake:nth-of-type(11) .inner, +.snowflake:nth-of-type(3) .inner { + animation-delay: 4s +} + +.snowflake:nth-of-type(4) { + left: 40%; + animation-delay: 2s +} + +.snowflake:nth-of-type(10) .inner, +.snowflake:nth-of-type(4) .inner { + animation-delay: 2s +} + +.snowflake:nth-of-type(5) { + left: 50%; + animation-delay: 3s +} + +.snowflake:nth-of-type(5) .inner { + animation-delay: 8s +} + +.snowflake:nth-of-type(6) { + left: 60%; + animation-delay: 2s +} + +.snowflake:nth-of-type(7) { + left: 70%; + animation-delay: 1s +} + +.snowflake:nth-of-type(7) .inner { + animation-delay: 2.5s +} + +.snowflake:nth-of-type(8) { + left: 80%; + animation-delay: 0s +} + +.snowflake:nth-of-type(9) { + left: 90%; + animation-delay: 1.5s +} + +.snowflake:nth-of-type(9) .inner { + animation-delay: 3s +} + +.snowflake:nth-of-type(10) { + left: 25%; + animation-delay: 0s +} + +.snowflake:nth-of-type(11) { + left: 65%; + animation-delay: 2.5s } \ No newline at end of file