add design to hp

src/public/css/common.css

@@ -3,8 +3,8 @@
     --color-bg: #000000;
     --color-fg: #ffffff;
     --color-in-focus-from-bg: #383838;
-    --link-color: #626262;
-    --link-hover-color: #3f3f3f;
+    --link-color: #d2d2d2;
+    --link-hover-color: #ababab;
 }
 
 @media (prefers-color-scheme: light) {
@@ -13,8 +13,8 @@
         --color-bg: #ffffff;
         --color-fg: #000000;
         --color-in-focus-from-bg: #b2b2b2;
-        --link-color: #858585;
-        --link-hover-color: #bcbcbc;
+        --link-color: #b0b0b0;
+        --link-hover-color: #6e6e6e;
     }
 }
 
@@ -30,7 +30,6 @@ ol,
 input,
 textarea,
 select {
-    background-color: var(--color-bg);
     color: var(--color-fg);
 }
 

src/public/css/home.css

@@ -1,5 +1,14 @@
 @import url('./common.css');
 
+svg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+}
+
 html,
 body {
     text-transform: lowercase;

src/views/index.ejs

@@ -26,6 +26,51 @@
     <noscript>
         JavaScript is required to use this app.
     </noscript>
+
+    <svg preserveAspectRatio="xMidYMid slice" viewBox="10 10 80 80">
+        <defs>
+            <style>
+                @keyframes rotate {
+                    0% {
+                        transform: rotate(0deg);
+                    }
+
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
+
+                .out-top {
+                    animation: rotate 20s linear infinite;
+                    transform-origin: 13px 25px;
+                }
+
+                .in-top {
+                    animation: rotate 10s linear infinite;
+                    transform-origin: 13px 25px;
+                }
+
+                .out-bottom {
+                    animation: rotate 25s linear infinite;
+                    transform-origin: 84px 93px;
+                }
+
+                .in-bottom {
+                    animation: rotate 15s linear infinite;
+                    transform-origin: 84px 93px;
+                }
+            </style>
+        </defs>
+        <path fill="#9b5de5" class="out-top"
+            d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" />
+        <path fill="#f15bb5" class="in-top"
+            d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" />
+        <path fill="#00bbf9" class="out-bottom"
+            d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" />
+        <path fill="#00f5d4" class="in-bottom"
+            d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" />
+    </svg>
+
     <main id="main" style="display: none;">
         <h1>TopRanks</h1>
         <h4>See your top ranking artists/tracks in a unique way.</h4>