-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.sass
157 lines (129 loc) · 2.98 KB
/
style.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
@font-face
font-family: "HUN"
src: url("/hun.ttf")
:root
--cell-size: 34px
--board-width: 10
--board-height: 20
--color-debug: green
--color-cell-default: #000
--color-board-border: #fff
--color-background: rgba(0, 0, 0, 0.5)
--z-front: 2
--z-row-clear: 3
--z-overlay: 4
*
box-sizing: border-box
user-select: none
html,
body
height: 100%
margin: 0
padding: 0
html
font-size: 25px
letter-spacing: 2px
text-shadow: 0 0 15px #ffffff98
body
position: relative
display: flex
justify-content: center
align-items: center
flex-direction: column
background: url("/wallpaper.jpg")
overflow: hidden
font-family: "HUN", sans-serif
color: #fff
h1, h2, h3, h4, h5, h6
margin: 0
.title
font-size: 2rem
.background-cover
content: ""
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0, 0, 0, 0.7)
#board
display: grid
grid-template-columns: repeat(var(--board-width), var(--cell-size))
grid-template-rows: repeat(var(--board-height), var(--cell-size))
gap: 1px
border: 3px solid var(--color-board-border)
border-top: none
border-radius: 2px
border-top-left-radius: 0
border-top-right-radius: 0
overflow: hidden
z-index: var(--z-front)
background: var(--color-background)
transition: transform 0.1s ease-in-out
box-shadow: 0 0 60px #ffffff46
.cell
background-color: var(--color-cell-default)
background-size: var(--cell-size)
text-align: center
font-size: 10px
&.projection
background-image: url("/tetromino-projection.png")
&.red
background-image: url("/tetromino-red.png")
&.purple
background-image: url("/tetromino-purple.png")
&.green
background-image: url("/tetromino-green.png")
&.lightgreen
background-image: url("/tetromino-lightgreen.png")
&.orange
background-image: url("/tetromino-orange.png")
&.pink
background-image: url("/tetromino-pink.png")
&.yellow
background-image: url("/tetromino-yellow.png")
.particle
position: absolute
background-color: #fff
border-radius: 50%
&.action
z-index: 2
.props
pointer-events: none
z-index: var(--z-overlay)
> *
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
.score-alert
background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff)
background-size: 400% 100%
-webkit-background-clip: text
background-clip: text
color: transparent
transition: opacity 0.2s ease, transform 0.2s ease
font-size: 4rem
opacity: 0
font-weight: bolder
text-shadow: 0 0 30px #6666ffa4
.grid
display: grid
grid-template-columns: auto 1fr
gap: 0.5rem
z-index: var(--z-front)
.bottom
width: 100%
text-align: center
z-index: var(--z-front)
.stats
display: flex
flex-direction: column
justify-content: flex-end
align-items: flex-end
.stat-title
font-weight: lighter
font-size: 0.8rem
margin-bottom: 0.2rem
.stat-value
font-size: 2rem