150 lines
3.0 KiB
Sass
150 lines
3.0 KiB
Sass
// Home Screen styles
|
|
|
|
.home-screen
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: center
|
|
min-height: 100%
|
|
padding: 2rem
|
|
position: relative
|
|
|
|
// Pixel art floating items in background
|
|
&:before, &:after
|
|
content: ''
|
|
position: absolute
|
|
width: 12px
|
|
height: 12px
|
|
background-color: $pixel-blue
|
|
animation: pixel-float 3s infinite alternate ease-in-out
|
|
z-index: -1
|
|
|
|
&:before
|
|
top: 15%
|
|
left: 20%
|
|
box-shadow: 0 0 10px $pixel-blue
|
|
animation-delay: 0s
|
|
|
|
&:after
|
|
bottom: 20%
|
|
right: 15%
|
|
background-color: $pixel-purple
|
|
box-shadow: 0 0 10px $pixel-purple
|
|
animation-delay: 1.5s
|
|
|
|
.logo
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
margin-bottom: 3rem
|
|
|
|
.logo-image
|
|
image-rendering: pixelated
|
|
width: 180px
|
|
height: auto
|
|
margin-bottom: 1.5rem
|
|
animation: pixel-float 3s infinite ease-in-out
|
|
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5))
|
|
|
|
h1
|
|
font-size: 2.5rem
|
|
margin: 0
|
|
font-family: 'Press Start 2P', monospace
|
|
color: $primary
|
|
animation: pixel-flash 3s infinite
|
|
letter-spacing: 2px
|
|
text-transform: uppercase
|
|
|
|
.card
|
|
background-color: $card-bg
|
|
padding: 2rem
|
|
box-shadow: 8px 8px 0 #000
|
|
border: 4px solid #000
|
|
width: 100%
|
|
max-width: 500px
|
|
position: relative
|
|
overflow: visible
|
|
|
|
// Pixel art decorations
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
top: -10px
|
|
left: -10px
|
|
width: 20px
|
|
height: 20px
|
|
background-color: $accent
|
|
z-index: 1
|
|
animation: pixel-rotate 8s linear infinite
|
|
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
bottom: -10px
|
|
right: -10px
|
|
width: 20px
|
|
height: 20px
|
|
background-color: $primary
|
|
z-index: 1
|
|
animation: pixel-rotate 8s linear infinite reverse
|
|
|
|
@keyframes pixel-rotate
|
|
0%
|
|
transform: rotate(0deg)
|
|
100%
|
|
transform: rotate(360deg)
|
|
|
|
.tabs
|
|
display: flex
|
|
margin-bottom: 1.5rem
|
|
border-bottom: 4px solid #000
|
|
|
|
button
|
|
flex: 1
|
|
background: none
|
|
border: 4px solid #000
|
|
border-bottom: none
|
|
color: $text-muted
|
|
font-family: 'Press Start 2P', monospace
|
|
font-size: 0.7rem
|
|
padding: 0.75rem 0.5rem
|
|
position: relative
|
|
text-transform: uppercase
|
|
transition: all 0.2s ease
|
|
cursor: pointer
|
|
|
|
&:hover:not(.active)
|
|
background-color: rgba($primary, 0.2)
|
|
color: $text
|
|
|
|
&.active
|
|
background-color: $primary
|
|
color: #000
|
|
z-index: 1
|
|
|
|
&:after
|
|
content: ''
|
|
position: absolute
|
|
bottom: -4px
|
|
left: 0
|
|
width: 100%
|
|
height: 4px
|
|
background-color: $primary
|
|
|
|
.home-footer
|
|
margin-top: 2rem
|
|
text-align: center
|
|
color: $text-muted
|
|
font-style: italic
|
|
|
|
@keyframes pulse
|
|
0%
|
|
transform: scale(1)
|
|
opacity: 1
|
|
50%
|
|
transform: scale(1.1)
|
|
opacity: 0.8
|
|
100%
|
|
transform: scale(1)
|
|
opacity: 1
|