From 0aaec4181fd48508d667371033dce1496dd973f5 Mon Sep 17 00:00:00 2001
From: Bingus_Violet <violetbutagain@gmail.com>
Date: Thu, 8 Feb 2024 17:25:10 -0600
Subject: [PATCH] CSS

---
 pageUpdater.js    | 16 ++++++++--------
 static/index.html | 17 +++--------------
 static/style.css  | 39 +++++++++++++++++++++++++++++----------
 3 files changed, 40 insertions(+), 32 deletions(-)
diff --git a/pageUpdater.js b/pageUpdater.js
index 044e882..c87469a 100644
--- a/pageUpdater.js
+++ b/pageUpdater.js
@@ -7,20 +7,20 @@ var highlightedWords = config.highlightedWords
 function makeStars() {
     var html = ""
 
-    for (let index = 0; index < 15; index++) {
-        html += `<div class="star"></div>`
+    for (let index = 0; index < 35; index++) {
+        html += `<div class="rainDrop"></div>`
     }
     html += "<style>"
-    for (let index = 0; index < 15; index++) {
+    for (let index = 0; index < 35; index++) {
         html += `
-        .star:nth-of-type(${index + 1}) {
-            animation: starAnim${index} ${15 + (Math.random() * 15)}s linear;
+        .rainDrop:nth-of-type(${index + 1}) {
+            animation: rainAnim${index} 1s linear;
             animation-iteration-count: infinite;
-            animation-delay: ${-Math.random() * 15}s;
+            animation-delay: ${Math.random() * 15}s;
         }
         `
         var rando = Math.random() * 100
-        html += `@keyframes starAnim${index} {
+        html += `@keyframes rainAnim${index} {
             0% {
                 top: -10vh;
                 right: ${rando}vw;
@@ -29,7 +29,7 @@ function makeStars() {
     
             100% {
                 top: 110vh;
-                right: calc(${rando}vw + ${5 - (Math.random() * 10)}vw);
+                right: calc(${rando}vw);
             }
         }`
         
diff --git a/static/index.html b/static/index.html
index 9cf13da..02184d6 100644
--- a/static/index.html
+++ b/static/index.html
@@ -22,22 +22,11 @@
 </head>
 
 <body>
-    <h1>Welcome to <span>Violet's&nbsp;Purgatory</span></h1>
+    <h1>Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
     {BG_EFFECT}
     <main>
-        <p>Currently i'm working on the new system for word highlighting!</p>
-        <p>You can see that it is pretty much the same as before, outside of the code being a little bit shorter and
-            more dispersed (I didn't know until recently that "replaceAll" was a function...)</p>
-        <p>The big difference, is unlike the original site, this can apply to all pages!</p>
-
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sint magnam laborum architecto ratione est illo praesentium nemo dolorem quisquam at ipsum dignissimos accusantium, tenetur optio nisi culpa sapiente eum!
-        Aperiam, iste. Distinctio iste rem minus explicabo aut, nostrum voluptatum earum sit eveniet, qui harum! At eaque minus dolor, aliquam reiciendis dicta, obcaecati magni dolore nulla vero tempore. Dolor, odio.
-        Fugiat distinctio temporibus ipsa corporis. Rem suscipit atque enim debitis illo animi reiciendis, aliquid ea, neque corporis aut asperiores reprehenderit repudiandae porro veritatis. Autem magni eius enim amet expedita molestiae!
-        Aspernatur ipsam unde porro non, veritatis error! Ipsam nisi fugiat totam, dolore magnam, placeat aperiam aliquam porro necessitatibus et corrupti libero ea officia odio ad quisquam beatae rerum cumque aspernatur.
-        Earum officia quae doloribus culpa veritatis ea architecto provident, nesciunt, assumenda excepturi ipsam pariatur incidunt nobis animi quis fugiat saepe autem a alias tenetur adipisci fuga eos quidem repellat. Fugiat?
-        Pariatur incidunt maxime corrupti dolores impedit ullam quos, in architecto perferendis, culpa sint? Aspernatur impedit repudiandae hic eum veritatis molestiae debitis, incidunt ut pariatur provident explicabo nemo id molestias cumque.
-        Ab cumque accusamus alias. Temporibus beatae assumenda, accusamus nisi vitae qui laboriosam, animi minima sequi officia id exercitationem aliquid quaerat ipsum neque inventore, sint delectus sit dolorem quod! Error, repellendus?
-        Sapiente, minus autem, placeat fugit ipsam iste consequuntur quidem, aperiam natus vero labore reiciendis itaque temporibus non porro? Nostrum laboriosam debitis enim amet? Possimus non sed quas magnam placeat aliquid.</p>
+        <hr>
+        {RANDOM_QUOTE}
     </main>
 </body>
 
diff --git a/static/style.css b/static/style.css
index 0dc230f..f32d3bc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -9,7 +9,7 @@
 * {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
-    font-weight: 200;
+    font-weight: 400;
     text-align: center;
     color: white;
 }
@@ -22,35 +22,54 @@ body {
 main {
     opacity: 1;
     animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    width: 90%;
+    max-width: 1000px;
+    margin: auto;
 }
 
 body>h1 {
     animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
     margin: auto;
     max-width: 75%;
+    /* outline: 1px white solid; */
 }
 
-.star {
+hr {
+    border: 2px rgba(100, 0, 150, 0.5) solid;
+    margin: 20px;
+}
+
+.rainDrop {
     position: fixed;
     z-index: -2;
     visibility: hidden;
-    font-size: 0.35rem;
-    width: 40px;
-    height: 40px;
-    background: radial-gradient(white, rgb(255, 255, 255, 0.25) 10%, transparent 50%);
+    width: 4px;
+    height: 120px;
+    background: rgba(0, 0, 150, 0.5);
+}
+
+.mainTitle {
+    font-size: 2.75rem;
+    color: rgb(215, 80, 255);
+    display: block;
+}
+
+.note {
+    color: gray;
+    font-size: 0.9rem;
 }
 
 @keyframes mainText {
     0% {
-        transform: translateY(50vh) scale(1.5);
+        transform: translateY(calc(50vh - 2rem)) scale(1.5);
         opacity: 0;
-        height: 0px;
+        height: 4rem;
     }
 
     50% {
         opacity: 1;
-        height: 0px;
-        transform: translateY(50vh) scale(1);
+        height: 4rem;
+        transform: translateY(calc(50vh - 2rem)) scale(1);
     }
 
     100% {
