[+] Home site

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>

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

AquaNet/src/pages/Home.svelte

@@ -1,3 +1,26 @@
-<main>
-  owo
-</main>
+<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>

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