mirror of
https://github.com/MewoLab/AquaDX.git
synced 2026-02-06 16:57:27 +08:00
83 lines
1.8 KiB
Svelte
83 lines
1.8 KiB
Svelte
<main id="home" class="no-margin">
|
|
<h1>AquaNet</h1>
|
|
<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">
|
|
@import "../vars"
|
|
|
|
#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
|
|
|
|
margin-top: -$nav-height
|
|
|
|
> h1
|
|
font-family: Quicksand, $font
|
|
user-select: none
|
|
|
|
// Gap between text characters
|
|
letter-spacing: 0.2em
|
|
margin-top: 0
|
|
opacity: 0.9
|
|
|
|
.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%)
|
|
|
|
@media (max-width: 500px)
|
|
align-items: center
|
|
padding-left: 0
|
|
</style> |