From ad3bb89dc9c35f37bdd538a8c4b05fc932a6732f Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Sat, 10 Feb 2024 00:40:56 -0500
Subject: [PATCH] [+] Home site

---
 AquaNet/src/App.svelte            |  2 ++
 AquaNet/src/app.sass              | 24 ++++++++----------------
 AquaNet/src/pages/Home.svelte     | 29 ++++++++++++++++++++++++++---
 AquaNet/src/pages/UserHome.svelte |  0
 AquaNet/src/vars.sass             |  4 ++++
 5 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 AquaNet/src/pages/UserHome.svelte
 create mode 100644 AquaNet/src/vars.sass

diff --git a/AquaNet/src/App.svelte b/AquaNet/src/App.svelte
index 6ed149e5..012a591c 100644
--- a/AquaNet/src/App.svelte
+++ b/AquaNet/src/App.svelte
@@ -3,6 +3,7 @@
   import Home from "./pages/Home.svelte";
 
   import MaimaiRating from "./pages/MaimaiRating.svelte";
+  import UserHome from "./pages/UserHome.svelte";
 
   export let url = "";
 </script>
@@ -10,6 +11,7 @@
 <Router {url}>
   <div>
     <Route path="/"><Home /></Route>
+    <Route path="/u/:userId" component={UserHome}></Route>
     <Route path="/u/:userId/mai/rating" component={MaimaiRating}></Route>
   </div>
 </Router>
diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 91157f64..dd47332b 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -1,11 +1,14 @@
+@import "vars"
+@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap')
+
 body
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
+  font-family: $font
   line-height: 1.5
   font-weight: 400
 
   color-scheme: light dark
   color: rgba(255, 255, 255, 0.87)
-  background-color: #242424
+  background-color: $c-bg
 
   font-synthesis: none
   text-rendering: optimizeLegibility
@@ -14,11 +17,11 @@ body
 
 a
   font-weight: 500
-  color: #646cff
+  color: $c-darker
   text-decoration: inherit
 
 a:hover
-  color: #535bf2
+  color: $c-main
 
 
 body
@@ -57,18 +60,7 @@ button
   transition: border-color 0.25s
 
 button:hover
-  border-color: #646cff
+  border-color: $c-main
 
 button:focus, button:focus-visible
   outline: 4px auto -webkit-focus-ring-color
-
-@media (prefers-color-scheme: light)
-  body
-    color: #213547
-    background-color: #ffffff
-  
-  a:hover
-    color: #747bff
-  
-  button
-    background-color: #f9f9f9
diff --git a/AquaNet/src/pages/Home.svelte b/AquaNet/src/pages/Home.svelte
index e38ef163..935d4a31 100644
--- a/AquaNet/src/pages/Home.svelte
+++ b/AquaNet/src/pages/Home.svelte
@@ -1,3 +1,26 @@
-<main>
-  owo
-</main>
\ No newline at end of file
+<main id="home">
+  <h1>AquaNet</h1>
+  <div>
+    <button>Login</button>
+    <button>Sign Up</button>
+  </div>
+</main>
+
+<style lang="sass">
+  @import "../vars"
+
+  #home
+    color: $c-main
+
+    > h1
+      font-family: Quicksand, $font
+      user-select: none
+
+      // Gap between text characters
+      letter-spacing: 0.2em
+    
+    > div
+      display: flex
+      gap: 8px
+    
+</style>
\ No newline at end of file
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/AquaNet/src/vars.sass b/AquaNet/src/vars.sass
new file mode 100644
index 00000000..ae6f8fe1
--- /dev/null
+++ b/AquaNet/src/vars.sass
@@ -0,0 +1,4 @@
+$font: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif
+$c-main: #b3c6ff
+$c-darker: #646cff
+$c-bg: #242424
\ No newline at end of file