[S] Style home page

AquaNet/src/App.svelte

@@ -9,9 +9,7 @@
 </script>
 
 <Router {url}>
-  <div>
-    <Route path="/"><Home /></Route>
-    <Route path="/u/:userId" component={UserHome}></Route>
-    <Route path="/u/:userId/mai/rating" component={MaimaiRating}></Route>
-  </div>
+  <Route path="/"><Home /></Route>
+  <Route path="/u/:userId" component={UserHome}></Route>
+  <Route path="/u/:userId/mai/rating" component={MaimaiRating}></Route>
 </Router>

AquaNet/src/app.sass

@@ -1,10 +1,17 @@
 @import "vars"
 @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap')
 
+html
+  height: 100%
+
 body
   font-family: $font
   line-height: 1.5
   font-weight: 400
+  width: 100%
+  height: 100%
+  margin: 0
+  overflow-x: hidden
 
   color-scheme: light dark
   color: rgba(255, 255, 255, 0.87)
@@ -23,15 +30,6 @@ a
 a:hover
   color: $c-main
 
-
-body
-  margin: 0
-  display: flex
-  place-items: center
-  min-width: 320px
-  min-height: 100vh
-
-
 h1
   font-size: 3.2em
   line-height: 1.1
@@ -42,10 +40,15 @@ h1
 
 
 #app
+  width: 100%
+  height: 100%
+
+
+main:not(.no-margin)
   max-width: 1280px
   margin: 0 auto
-  padding: 2rem
   width: 100%
+  height: 100%
 
 
 button
@@ -56,6 +59,7 @@ button
   font-weight: 500
   font-family: inherit
   background-color: #1a1a1a
+  opacity: 0.9
   cursor: pointer
   transition: border-color 0.25s
 

AquaNet/src/pages/Home.svelte

@@ -1,9 +1,15 @@
-<main id="home">
+<main id="home" class="no-margin">
   <h1>AquaNet</h1>
-  <div>
+  <div class="btn-group">
     <button>Login</button>
     <button>Sign Up</button>
   </div>
+
+  <div class="light-pollution">
+    <div class="l1"></div>
+    <div class="l2"></div>
+    <div class="l3"></div>
+  </div>
 </main>
 
 <style lang="sass">
@@ -11,6 +17,17 @@
 
   #home
     color: $c-main
+    position: relative
+    width: 100%
+    height: 100%
+    padding-left: 100px
+    overflow: hidden
+
+    box-sizing: border-box
+
+    display: flex
+    flex-direction: column
+    justify-content: center
 
     > h1
       font-family: Quicksand, $font
@@ -18,9 +35,44 @@
 
       // Gap between text characters
       letter-spacing: 0.2em
+      margin-top: 0
+      opacity: 0.9
     
-    > div
+    .btn-group
       display: flex
       gap: 8px
-    
+
+    .light-pollution
+      pointer-events: none
+      opacity: 0.6
+
+      > div
+        position: absolute
+        z-index: -1
+
+      .l1
+        left: -560px
+        top: 90px
+        height: 1130px
+        width: 1500px
+        $color: rgb(158, 110, 230)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
+      .l2
+        left: -200px
+        top: 560px
+        height: 1200px
+        width: 1500px
+        $color: rgb(92, 195, 250)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
+      .l3
+        left: -600px
+        opacity: 0.7
+        top: -630px
+        width: 1500px
+        height: 1000px
+        $color: rgb(230, 110, 156)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
 </style>