forked from zooniverse/floatingforests
-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.styl
285 lines (255 loc) · 6.41 KB
/
project.styl
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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
@import url(http://fonts.googleapis.com/css?family=Open\+Sans:400,300,700,800)
LIME_GREEN = #b9d663
TURQ = #4ed1ff
AQUA = #34a6a8
MARINE = #00485b
OPAQUE_MARINE = rgba(0, 72, 91, 0.7)
OPAQUE_AQUA = rgba(48, 154, 156, 0.9)
SUBJECT_HEIGHT = 484
SUBJECT_WIDTH = 532
LEFT_OFFSET = -(SUBJECT_WIDTH / 2)
LEFT_OFFSET_ADJUST = 50
.capitalized-text
text-transform uppercase
font-weight 700
letter-spacing 2px
@import './pages/secondary-pages'
@import './tutorial/tutorial'
@import './classify/menu'
@import './classify/buttons'
@import './classify/summary'
@import './classify/subject-loader'
@import './classify/metadata'
@import './user-goals/user-goals'
@import './zooniverse/profile'
@import './zooniverse/footer'
#readymade
div
font-family 'Open Sans' sans-serif
-webkit-font-smoothing: antialiased
button
outline none
border 0
&:hover
cursor pointer
.home-content
display none
&[data-location-hash="#/"]
.readymade-site-link
opacity 1.0
.readymade-main-stack
width 90%
margin 150px auto 100px auto
.readymade-site-background
opacity 1
&:after
display none
.home-content
height 850px
padding-top 185px
display block !important
background-color #fff
color AQUA
overflow auto
p
line-height 2em
h2
@extend .capitalized-text
font-size 18px
// pages to be full screen width:
&[data-location-hash="#/classify"]
&[data-location-hash="#/about"]
&[data-location-hash="#/education"]
&[data-location-hash="#/team"]
&[data-location-hash="#/profile"]
.readymade-main-stack
margin 0
width auto
.readymade-frame-controls
display none
.readymade-main-stack
overflow auto
min-height 500px
.readymade-discuss-page
width auto
.readymade-site-background-effect
display none
.readymade-site-header
transition background-color 0.5s ease
.readymade-site-background
opacity 0.8
&:after
content ""
background-color AQUA
opacity 0.7
height 100%
width 100%
position absolute
.readymade-project-producer
display none
.readymade-project-title
font-size 14px
font-weight 700
letter-spacing 2px
.readymade-project-description
font-weight 400
font-size 20px
display inline-block
margin-bottom 20px
.readymade-project-summary
font-size 50px
font-weight 800
text-transform uppercase
letter-spacing 5px
margin-bottom 10px
.readymade-site-link
text-transform none
font-weight 400
font-size 14px
opacity 0.6
margin-bottom 10px
display inline-block
letter-spacing 0px
&:hover
background transparent
&.active
opacity 1
background-color transparent
&:nth-child(1) // hide home link
display none
&:active
color LIME_GREEN
.readymade-classifier
.readymade-decision-tree-container
display block
width unit(SUBJECT_WIDTH, 'px')
margin 0 auto
.decision-tree
padding 0 !important
button[name="decision-tree-go-back"]
display none
.decision-tree-question
display none
.decision-tree-choice
display none
.decision-tree-confirmation
width unit(SUBJECT_WIDTH, 'px')
overflow auto
margin 30px 0
.decision-tree-task
display block !important // prevent decision tree from blinking in between subjects
.readymade-subject-viewer-container
width 100%
padding 0
border-radius 0px
min-height unit(SUBJECT_HEIGHT, 'px')
position relative
display block
background none
.marking-surface
height unit(SUBJECT_HEIGHT, 'px')
width unit(SUBJECT_WIDTH, 'px')
cursor url("cursor.svg"), auto
.marking-surface-svg
border-radius 5px
.readymade-subject-viewer
width unit(SUBJECT_WIDTH, 'px')
margin 0 auto
.left-image, .right-image
position absolute
top 0px
border-radius 5px
transition all 1s ease
.right-image
left 50%
width unit(SUBJECT_WIDTH, 'px')
height unit(SUBJECT_HEIGHT, 'px')
margin-left unit(LEFT_OFFSET, 'px')
transition-property all
transition-duration 1.0s
right auto
pointer-events none
img
height unit(SUBJECT_HEIGHT, 'px')
width unit(SUBJECT_WIDTH, 'px')
border-radius 5px
.right-image-overlay
background-color OPAQUE_MARINE
border-radius 5px
position absolute
opacity 0.7
height 100%
width 100%
transition all 1s
&.invisible
opacity 0
&.right
left 100%
margin-left unit(LEFT_OFFSET + LEFT_OFFSET_ADJUST, 'px')
&.offscreen-right
margin-left unit((SUBJECT_WIDTH / 2) + LEFT_OFFSET_ADJUST , 'px')
@media screen and (max-width: 1070px)
left 100%
margin-left unit(SUBJECT_WIDTH / 2, 'px')
.readymade-home-page
max-width 850px
text-shadow none
.readymade-footer
display inline
.readymade-call-to-action
@extend .capitalized-text
background-color LIME_GREEN
color #fff
box-shadow none
border-radius 5px
height 50px
min-width 150px
margin 0
line-height 50px
font-size 15px
padding 0 20px
&:hover
background-color darken(LIME_GREEN, 5)
#stats-box
margin-top 20px
font-size 20px
letter-spacing 1px
color LIME_GREEN
font-weight 800
span:nth-child(even)
margin-right 10px
.stats-label
font-style normal
text-transform none
font-weight 400
color #FFF
#no-more-subjects
width 100%
text-align center
padding-top 100px
h1
margin-bottom 40px
a
color LIME_GREEN
// nav responsiveness
@media screen and (max-width: 1050px)
.readymade-site-header
background-color rgba(185, 214, 99, 0.67)
.readymade-site-links
margin 20px 0 0 0
padding-bottom 20px
.zooniverse-info.piece
span
display none
@media screen and (max-width: 800px)
.readymade-site-links
display block
.readymade-site-link
padding 0
margin-right 10px
::selection
color #fff
background AQUA
::-moz-selection
color #fff
background AQUA