-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathstyle.sass
255 lines (228 loc) · 6.8 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
---
---
@import "base"
@import "navbar"
html, body, #wrapper
background: $off-light
border: none
box-sizing: border-box
font-family: $sans-serif
margin: 0
min-height: 100%
outline: none
padding: 0
transition: $transition-val
width: 100%
body
overflow-y: auto
::selection
background: $primary-light
::-moz-selection
background: $primary-light
@keyframes backgroundScroll
from
background-position: 0 0
to
background-position: -1000px 0
@-webkit-keyframes backgroundScroll
from
background-position: 0 0
to
background-position: -1000px 0
a, a:link, a:hover, a:focus
color: $primary-dark
outline: none
transition: $transition-val
h1, h2, h3, h4, h5, h6
font-family: $serif
#Home
-webkit-animation-fill-mode: forwards
-webkit-animation: backgroundScroll 15s ease infinite
animation-fill-mode: forwards
animation: backgroundScroll 15s ease infinite
background-attachment: fixed
background-color: $primary-dark
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23490775' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23630063'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E")
background-repeat: repeat
h1, h3
color: #FFF
padding: 40px 0 0
h1
font-size: 4rem
@media( #{$bp-sm})
font-size: 3.5rem
p
color: $off-light
padding: 20px 0
.intro-content
min-height: 100vh
padding: 4rem auto 1rem
& > div:first-child
margin-top: 5rem
.poster-panel
min-height: 100vh
padding: 1rem auto 6rem
& > .poster
margin-top: 5rem
@media( #{$bp-sm})
min-height: 75vh
.btn
background: rgba(#8c52ff, .8)
color: #FFF
border: none
&:hover
background: rgba(#8c52ff, 1)
#landing-logo
box-shadow: 0 0 100px rgba($off-light, 0.5)
max-width: 150px
margin-top: 100px
border-radius: 4px
#About
margin-top: 4rem
p
font-size: 1.2rem
margin-bottom: 4rem
ul
font-size: 1.2rem
margin-bottom: 4rem
margin-left: -1rem
#End-Game
background-color: #000
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E")
padding: 12rem 0
h2
color: $off-light
display: block
margin-bottom: 0
text-align: center
.btn
background: $primary-light
border-radius: 5px
box-shadow: 0 0 100px 20px rgba($off-light, 0.5)
color: $primary-dark
font-size: 1.4rem
margin: 1rem auto 0
position: relative
width: 10rem
&:hover
background: rgba($primary-light,.9)
@media( #{$bp-md})
margin: 0 2rem
#suggestion-grid
margin: 1rem auto 5rem
h3
margin-bottom: 1rem
margin-top: 1rem
text-align: center
.suggestion-card
border-radius: 1.2rem
border: none
box-shadow: 0 5px 10px rgba($off-dark, 0.3)
box-sizing: border-box
display: block
float: left
margin: 1rem auto
padding: 4rem 0
text-align: center
transition: all .3s ease-in-out
width: 100%
&:hover
background: #FFF
box-shadow: 0 10px 30px rgba($off-dark, 0.4)
@media( #{$bp-md})
width: 48%
margin: 1rem 1%
@media( #{$bp-lg})
width: 30%
margin: 1rem 1.666666%
#suggest-one
margin: 1rem auto
padding: 4rem 0
text-align: center
width: 100%
@media( #{$bp-md})
margin: 1rem 25%
width: 50%
@media( #{$bp-lg})
margin: 1rem 20%
width: 60%
.primary-card
color: #FFF
background: rgba(72, 38, 155, 0.8)
transform: scale(1.05)
&:hover
background: #FFF
color: $primary-dark
#Hero
background: linear-gradient(-135deg, $primary-dark 0%,$primary-dark 55%,#8132ff 100%)
color: #FFF
padding: 12rem 0 2rem
@media( #{$bp-md})
background: linear-gradient(15deg, $primary-dark 0%,$primary-dark 55%,#8132ff 100%)
h1
font-size: 2.5rem
padding: 1rem 0 0
h3
margin-bottom: 2rem
margin-top: 1rem
p
font-size: 1.2rem
margin: 0 0 2rem
table
border-radius: 6px
margin: 0 auto
overflow: hidden
width: 100%
th
min-width: 160px
td
min-width: 380px
.poster
box-shadow: 0 7px 15px rgba($off-dark, 0.3)
display: block
margin: 0 auto
max-width: 960px
overflow: hidden
transition: all .3s ease-in-out
width: 100%
@media( #{$bp-md})
border-radius: .5rem
.old-pic
filter: grayscale(1)
&:hover
filter: grayscale(0)
#FAQ
h1
color: $primary-dark
font-size: 2.5rem
padding: 40px 0 0
ul
font-size: 1.2rem
margin: 3rem 0 2rem -1rem
.event-card-group
display: grid
gap: 20px 20px
@media( #{$bp-md})
grid-template-columns: 1fr 1fr
.event-card
box-shadow: 0 5px 10px rgba($off-dark, 0.3)
transition: all .3s ease-in-out
box-sizing: border-box
border-radius: 1.2rem
border: none
float: left
padding: 2rem .5rem
text-align: center
width: 100%
&:hover
box-shadow: 0 10px 30px rgba($off-dark, 0.4)
a.badge
color: $off-light
box-shadow: 0 2px 10px rgba($off-dark, 0.3)
&:hover
box-shadow: 0 5px 15px rgba($off-dark, 0.4)
ul li
border: none
background: inherit
.bg-transparent
background: none