From 505d4a3c7071d6cf12f9e2fd0a617bbd527dab81 Mon Sep 17 00:00:00 2001
From: Bingus_Violet <violetbutagain@gmail.com>
Date: Mon, 18 Dec 2023 07:43:26 -0600
Subject: [PATCH] Better Flakes

---
 resources/mainPage.html | 12 ++++++------
 static/style.css        |  8 +++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/resources/mainPage.html b/resources/mainPage.html
index 2e5b049..5396ddd 100644
--- a/resources/mainPage.html
+++ b/resources/mainPage.html
@@ -11,7 +11,7 @@
 
     <meta content="Welcome to Violet's Purgatory" property="og:title" />
     <meta
-        content="I'm Violet, a 14yo web and game developer. On my site i'm hosting various services, so please check out the site for more info!!!"
+        content="I'm Violet, a web and game developer. On my site i'm hosting various services, so please check out the site for more info!!!"
         property="og:description" />
     <meta content="https://api.lanyard.rest/534132311781015564.png" property="og:image" />
     <meta content="#a200ff" data-react-helmet="true" name="theme-color" />
@@ -25,7 +25,7 @@
     <div class="fadediv">
         <div class="container-fluid row" id="card">
             <h2>Violet</h2>
-            <div class="col-sm-12" style="display: flex; justify-content: center; align-items: center;">
+            <div style="display: flex; justify-content: center; align-items: center;">
                 <img src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
                 <div>
                     <p>They/Them</p>
@@ -34,7 +34,7 @@
                     {LANYARD_STATUS}
                 </div>
             </div>
-            <div class="col-sm-12">
+            <div>
                 <hr>
                 <p class="chip"><a href="./hosted">Stuff i'm hosting!</a></p>
                 <p class="chip"><a href="./socials">Socials</a></p>
@@ -45,14 +45,14 @@
         <p><em>The world's worst developer</em></p>
         <noscript>
             <p style="font-size: 0.9rem;">Fun fact: This website uses no Javascript! Everything dynamic (E.G. The discord status) is done
-                server-side, so enjoy :D <br> P.S. Your really cool, I look up to people like u :> (Atleast, assuming you disabled javascript urself...)</p>
+                server-side, so enjoy :D</p>
         </noscript>
         {LANYARD_FULL}
         {SOCIALS}
         
         {MASTODON_FEED}
-    </div>
 
-    {SEASONAL_EFFECT}
+        {SEASONAL_EFFECT}
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index ee0664f..7afff48 100644
--- a/static/style.css
+++ b/static/style.css
@@ -50,6 +50,7 @@ a {
 }
 
 .chip {
+    position: relative;
     z-index: 3;
     font-size: 1.3rem;
     border: 2px gray solid;
@@ -235,9 +236,10 @@ hr {
 
 .snowflake {
     color: white;
-    font-size: 0.5rem;
+    font-size: 0.5em;
     font-family: Arial, sans-serif;
     text-shadow: 0 0 5px #000;
+    visibility: hidden;
 }
 
 .snowflake,
@@ -249,10 +251,12 @@ hr {
 
 @keyframes snowflakes-fall {
     0% {
+        visibility: visible;
         transform: translateY(0)
     }
 
     100% {
+        visibility: visible;
         transform: translateY(110vh)
     }
 }
@@ -276,12 +280,14 @@ hr {
     user-select: none;
     cursor: default;
     animation-name: snowflakes-shake;
+    animation-delay: 0.5s;
     animation-duration: 3s;
     animation-timing-function: ease-in-out
 }
 
 .snowflake .inner {
     animation-duration: 10s;
+    animation-delay: 0.5s;
     animation-name: snowflakes-fall;
     animation-timing-function: linear
 }