mirror of
https://github.com/Rushilwiz/eldrow.git
synced 2025-04-03 20:20:17 -04:00
133 lines
2.2 KiB
Sass
133 lines
2.2 KiB
Sass
$serif: 'Playfair Display', serif
|
|
$sans-serif: 'Raleway', sans-serif
|
|
|
|
$color-present: #c9b458
|
|
$color-correct: #6aaa64
|
|
$color-absent: #787c7e
|
|
|
|
$key-color-present: #c9b458
|
|
$key-color-correct: #6aaa64
|
|
$key-color-absent: #787c7e
|
|
|
|
*
|
|
padding: 0
|
|
margin: 0
|
|
box-sizing: border-box
|
|
|
|
body
|
|
width: 100vw
|
|
height: 100vh
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
user-select: none
|
|
|
|
header
|
|
font-family: $serif
|
|
font-size: 1.5rem
|
|
font-weight: 700
|
|
margin-bottom: 1rem
|
|
transform: scale(-1, 1)
|
|
|
|
p
|
|
font-size: 1.2rem
|
|
font-weight: 400
|
|
margin-bottom: 1rem
|
|
|
|
.game
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
gap: 1.5rem
|
|
font-family: $sans-serif
|
|
|
|
.board
|
|
display: flex
|
|
flex-direction: column
|
|
gap: .5rem
|
|
|
|
.row
|
|
display: flex
|
|
flex-direction: row
|
|
gap: .5rem
|
|
|
|
.cell
|
|
width: 4rem
|
|
height: 4rem
|
|
border: 2px solid #9b9b9b
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
font-size: 2rem
|
|
font-weight: 800
|
|
transform: scale(-1, 1)
|
|
|
|
&.correct
|
|
background-color: $color-correct
|
|
color: #fff
|
|
border: none
|
|
|
|
&.present
|
|
background-color: $color-present
|
|
color: #fff
|
|
border: none
|
|
|
|
&.absent
|
|
background-color: $color-absent
|
|
color: #fff
|
|
border: none
|
|
|
|
.letters
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 1rem
|
|
font-size: 1.2rem
|
|
font-weight: 100
|
|
|
|
.row
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: center
|
|
gap: 1rem
|
|
|
|
.letter
|
|
width: 3rem
|
|
height: 4rem
|
|
border: 2px solid black
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
font-size: 1rem
|
|
font-weight: 800
|
|
cursor: pointer
|
|
transition: all 0.3s
|
|
transform: scale(-1, 1)
|
|
|
|
#backspace
|
|
width: 5rem
|
|
|
|
svg
|
|
transform: scale(-1, 1)
|
|
width: 50%
|
|
|
|
|
|
#enter
|
|
width: 5rem
|
|
|
|
footer
|
|
font-family: $serif
|
|
font-size: 1rem
|
|
font-weight: 400
|
|
margin-top: 1rem
|
|
|
|
a
|
|
color: #000
|
|
text-decoration: none
|
|
font-weight: 700
|
|
transition: all 0.3s
|
|
|
|
&:hover
|
|
color: #f00 |