futuro 1.0.8 → 1.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/html/assign/page.liquid +2 -1
- data/_includes/html/assign/site.liquid +30 -21
- data/_includes/html/layout/footer.liquid +5 -1
- data/_includes/html/overlay/browse/page.liquid +1 -1
- data/_includes/html/page/content/loop/screen/header.liquid +45 -2
- data/_includes/html/page/header.liquid +1 -2
- data/_includes/html/page/layout/home.liquid +17 -7
- data/_includes/html/page/topbar.liquid +28 -17
- data/_includes/html/page/topbar/navigation/link.liquid +22 -0
- data/_includes/svg/site/icon.liquid +39 -19
- data/_sass/area/topbar.scss +1 -1
- data/_sass/block/chart.scss +2 -1
- data/_sass/block/form/screen.scss +62 -29
- data/_sass/block/util.scss +3 -0
- data/_sass/futuro.core.scss +2 -0
- data/_sass/helpers/extends.scss +0 -17
- data/_sass/helpers/mixins/layout.scss +0 -1
- data/_sass/helpers/mixins/theme.scss +3 -5
- data/_sass/helpers/themes.scss +14 -13
- data/_sass/helpers/variables.scss +24 -244
- data/_sass/helpers/variables/colors.scss +290 -0
- data/_sass/link/book.scss +8 -6
- data/_sass/link/navigation.scss +11 -7
- data/_sass/title/book.scss +9 -0
- data/_sass/title/page.scss +2 -0
- data/_sass/title/type.scss +1 -0
- data/assets/js/footer/custom/1_Settings.js +1 -2
- data/assets/js/footer/custom/2_Check.width.js +6 -23
- data/assets/js/footer/custom/4_Setup.home.js +3 -1
- data/assets/js/footer/custom/4_Setup.overlays.js +56 -56
- data/assets/js/footer/custom/4_Start.browse.js +3 -67
- data/assets/js/footer/custom/5_Util.share.js +0 -75
- data/assets/js/footer/custom/5_WhatsOn.js +7 -7
- data/assets/js/footer/custom/5_respond.scroller.js +11 -0
- data/assets/js/footer/vendor/futuro/browsr.js +269 -0
- data/assets/js/footer/vendor/futuro/checkr.js +41 -0
- data/assets/js/footer/vendor/futuro/ovrly.js +102 -0
- data/assets/js/footer/vendor/{gsap-draw.js → gsap/draw.js} +0 -0
- data/assets/js/footer/vendor/{gsap-morph.js → gsap/morph.js} +0 -0
- data/assets/js/footer/vendor/{gsap-scramble.js → gsap/scramble.js} +0 -0
- data/assets/js/footer/vendor/gsap/scroll.js +11 -0
- data/assets/js/footer/vendor/{gsap-text.js → gsap/text.js} +0 -0
- data/assets/js/footer/vendor/{jquery.min.js → jquery.js} +0 -0
- data/assets/js/footer/vendor/{parsley.min.js → parsley.js} +0 -0
- data/assets/js/futuro.footer.custom.js +1 -1
- data/assets/js/futuro.footer.vendor.js +426 -314
- data/assets/js/futuro.header.legacy.js +4 -3
- data/assets/js/futuro.header.legacy.shopify.js +4 -3
- data/assets/js/futuro.header.vendor.js +4 -3
- data/assets/js/header/vendor/gsap.js +4 -3
- metadata +16 -15
- data/_includes/svg/site/book/orwell.svg +0 -1
- data/_includes/svg/site/book/woolf.svg +0 -1
- data/assets/js/footer/custom/3_Setup.browse.js +0 -298
- data/assets/js/footer/custom/5_Animate.scroller.js +0 -16
- data/assets/js/footer/custom/5_Respond.browse.js +0 -42
- data/assets/js/footer/vendor/scrollmagic-gsap.js +0 -310
- data/assets/js/footer/vendor/scrollmagic.js +0 -3
@@ -0,0 +1,290 @@
|
|
1
|
+
|
2
|
+
// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
|
3
|
+
// function for collecting multiple sass maps
|
4
|
+
|
5
|
+
@function map-collect($maps...) {
|
6
|
+
$collection: ();
|
7
|
+
|
8
|
+
@each $map in $maps {
|
9
|
+
$collection: map-merge($collection, $map);
|
10
|
+
}
|
11
|
+
|
12
|
+
@return $collection;
|
13
|
+
}
|
14
|
+
|
15
|
+
$ux-colors : (
|
16
|
+
|
17
|
+
generic : (
|
18
|
+
base : #fe5900,
|
19
|
+
dark : darken(#fe5900,10%),
|
20
|
+
light : lighten(#fe5900,24%),
|
21
|
+
xlight : lighten(#fe5900,48%)
|
22
|
+
),
|
23
|
+
|
24
|
+
dodgers : (
|
25
|
+
base : #0092FF,
|
26
|
+
dark : darken(#0092FF,10%),
|
27
|
+
light : lighten(#0092FF,24%),
|
28
|
+
xlight : lighten(#0092FF,48%)
|
29
|
+
),
|
30
|
+
|
31
|
+
error : (
|
32
|
+
base : #e61717, // untested
|
33
|
+
dark : darken(#e61717,10%), // untested
|
34
|
+
light : lighten(#e61717,23%), // untested
|
35
|
+
xlight : lighten(#e61717,46%) // untested
|
36
|
+
),
|
37
|
+
|
38
|
+
success : (
|
39
|
+
base : #468847, // untested
|
40
|
+
dark : darken(#468847,10%), // untested
|
41
|
+
light : lighten(#468847,26%), // untested
|
42
|
+
xlight : lighten(#468847,52%) // untested
|
43
|
+
)
|
44
|
+
|
45
|
+
);
|
46
|
+
|
47
|
+
$tier-colors : (
|
48
|
+
|
49
|
+
level-a : (
|
50
|
+
base : #e61717
|
51
|
+
),
|
52
|
+
|
53
|
+
level-b : (
|
54
|
+
base : #0099e6
|
55
|
+
),
|
56
|
+
|
57
|
+
level-c : (
|
58
|
+
base : #ff8001
|
59
|
+
),
|
60
|
+
|
61
|
+
level-d : (
|
62
|
+
base : #3bb300
|
63
|
+
),
|
64
|
+
|
65
|
+
level-e : (
|
66
|
+
base : #8b3788
|
67
|
+
),
|
68
|
+
|
69
|
+
level-f : (
|
70
|
+
base : #e60073
|
71
|
+
),
|
72
|
+
|
73
|
+
level-g : (
|
74
|
+
base : #b35900
|
75
|
+
),
|
76
|
+
|
77
|
+
level-y : (
|
78
|
+
base : #ffaa00
|
79
|
+
),
|
80
|
+
|
81
|
+
level-l : (
|
82
|
+
base : #b8b8b8
|
83
|
+
)
|
84
|
+
|
85
|
+
);
|
86
|
+
|
87
|
+
$artform-colors : (
|
88
|
+
|
89
|
+
theatre : (
|
90
|
+
base : #019fc6
|
91
|
+
),
|
92
|
+
|
93
|
+
talks : (
|
94
|
+
base : #ff9000
|
95
|
+
),
|
96
|
+
|
97
|
+
music : (
|
98
|
+
base : #dc3636
|
99
|
+
),
|
100
|
+
|
101
|
+
classical : (
|
102
|
+
base : #bf8f3a
|
103
|
+
),
|
104
|
+
|
105
|
+
cinema : (
|
106
|
+
base : #259d31
|
107
|
+
),
|
108
|
+
|
109
|
+
tours : (
|
110
|
+
base : #718ab2
|
111
|
+
),
|
112
|
+
|
113
|
+
hire : (
|
114
|
+
base : #412f79, // untested
|
115
|
+
dark : darken(#412f79,0%), // untested
|
116
|
+
light : lighten(#412f79,32%), // untested
|
117
|
+
xlight : lighten(#412f79,64%) // untested
|
118
|
+
),
|
119
|
+
|
120
|
+
members : (
|
121
|
+
base : #5d91e5, // untested
|
122
|
+
dark : darken(#5d91e5,10%), // untested
|
123
|
+
light : lighten(#5d91e5,18%), // untested
|
124
|
+
xlight : lighten(#5d91e5,35%) // untested
|
125
|
+
),
|
126
|
+
|
127
|
+
art : (
|
128
|
+
base : #f90082
|
129
|
+
),
|
130
|
+
|
131
|
+
shop : (
|
132
|
+
base : #23D5B0, // untested
|
133
|
+
dark : darken(#23D5B0,0%), // untested
|
134
|
+
light : lighten(#23D5B0,25%), // untested
|
135
|
+
xlight : lighten(#23D5B0,50%) // untested
|
136
|
+
)
|
137
|
+
|
138
|
+
);
|
139
|
+
|
140
|
+
$mindset-colors : (
|
141
|
+
|
142
|
+
addicts : (
|
143
|
+
base : #e6433a,
|
144
|
+
dark : darken(#e6433a,10%), // untested
|
145
|
+
light : lighten(#e6433a,20%), // untested
|
146
|
+
xlight : lighten(#e6433a,40%) // untested
|
147
|
+
),
|
148
|
+
|
149
|
+
family : (
|
150
|
+
base : #029ddf,
|
151
|
+
dark : darken(#029ddf,10%), // untested
|
152
|
+
light : lighten(#029ddf,20%), // untested
|
153
|
+
xlight : lighten(#029ddf,40%) // untested
|
154
|
+
),
|
155
|
+
|
156
|
+
receptive : (
|
157
|
+
base : #b25400,
|
158
|
+
dark : darken(#b25400,10%), // untested
|
159
|
+
light : lighten(#b25400,20%), // untested
|
160
|
+
xlight : lighten(#b25400,40%) // untested
|
161
|
+
),
|
162
|
+
|
163
|
+
value : (
|
164
|
+
base : #5fb641,
|
165
|
+
dark : darken(#5fb641,10%), // untested
|
166
|
+
light : lighten(#5fb641,20%), // untested
|
167
|
+
xlight : lighten(#5fb641,40%) // untested
|
168
|
+
),
|
169
|
+
|
170
|
+
next : (
|
171
|
+
base : #ffa905,
|
172
|
+
dark : darken(#ffa905,10%), // untested
|
173
|
+
light : lighten(#ffa905,20%), // untested
|
174
|
+
xlight : lighten(#ffa905,40%) // untested
|
175
|
+
),
|
176
|
+
|
177
|
+
maybe : (
|
178
|
+
base : #974597,
|
179
|
+
dark : darken(#974597,10%), // untested
|
180
|
+
light : lighten(#974597,20%), // untested
|
181
|
+
xlight : lighten(#974597,40%) // untested
|
182
|
+
)
|
183
|
+
|
184
|
+
);
|
185
|
+
|
186
|
+
$wgp-colors : (
|
187
|
+
|
188
|
+
paradise : (
|
189
|
+
base : #e8396c,
|
190
|
+
dark : darken(#e8396c,10%), // untested
|
191
|
+
light : lighten(#e8396c,20%), // untested
|
192
|
+
xlight : lighten(#e8396c,40%) // untested
|
193
|
+
),
|
194
|
+
|
195
|
+
artforall : (
|
196
|
+
base : #f9ae00
|
197
|
+
),
|
198
|
+
|
199
|
+
park : (
|
200
|
+
base : #009640
|
201
|
+
),
|
202
|
+
|
203
|
+
news : (
|
204
|
+
base : #009fe3
|
205
|
+
)
|
206
|
+
|
207
|
+
);
|
208
|
+
|
209
|
+
$design-colors : (
|
210
|
+
|
211
|
+
system : (
|
212
|
+
base : #6e46a0
|
213
|
+
),
|
214
|
+
|
215
|
+
brand : (
|
216
|
+
base : #ff8200
|
217
|
+
),
|
218
|
+
|
219
|
+
supply : (
|
220
|
+
base : #f00a0a
|
221
|
+
),
|
222
|
+
|
223
|
+
demo : (
|
224
|
+
base : #005a9b
|
225
|
+
)
|
226
|
+
|
227
|
+
);
|
228
|
+
|
229
|
+
$gradient-colors : (
|
230
|
+
|
231
|
+
smoke : (
|
232
|
+
base : #E6E6E6,
|
233
|
+
dark : darken(#E6E6E6,10%),
|
234
|
+
light : lighten(#E6E6E6,50%),
|
235
|
+
xlight : lighten(#E6E6E6,75%)
|
236
|
+
),
|
237
|
+
|
238
|
+
gray : (
|
239
|
+
base : #CCCCCC,
|
240
|
+
dark : darken(#CCCCCC,10%),
|
241
|
+
light : lighten(#CCCCCC,50%),
|
242
|
+
xlight : lighten(#CCCCCC,75%)
|
243
|
+
),
|
244
|
+
|
245
|
+
gun : (
|
246
|
+
base : #666666, // untested
|
247
|
+
dark : darken(#666666,10%), // untested
|
248
|
+
light : lighten(#666666,32%), // untested
|
249
|
+
xlight : lighten(#666666,56%) // untested
|
250
|
+
),
|
251
|
+
|
252
|
+
slate : (
|
253
|
+
base : #333333, // tested
|
254
|
+
dark : darken(#333333,10%), // tested
|
255
|
+
light : lighten(#333333,50%), // tested
|
256
|
+
xlight : lighten(#333333,75%) // tested
|
257
|
+
),
|
258
|
+
|
259
|
+
carbon : (
|
260
|
+
base : #1A1A1A,
|
261
|
+
dark : darken(#1A1A1A,10%),
|
262
|
+
light : lighten(#1A1A1A,50%),
|
263
|
+
xlight : lighten(#1A1A1A,75%)
|
264
|
+
),
|
265
|
+
|
266
|
+
coal : (
|
267
|
+
base : #0D0D0D,
|
268
|
+
dark : darken(#0D0D0D,10%),
|
269
|
+
light : lighten(#0D0D0D,50%),
|
270
|
+
xlight : lighten(#0D0D0D,75%)
|
271
|
+
)
|
272
|
+
|
273
|
+
);
|
274
|
+
|
275
|
+
$colormap : map-collect($ux-colors,
|
276
|
+
$tier-colors,
|
277
|
+
$artform-colors,
|
278
|
+
$mindset-colors,
|
279
|
+
$wgp-colors,
|
280
|
+
$design-colors,
|
281
|
+
$gradient-colors);
|
282
|
+
|
283
|
+
// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
|
284
|
+
// function for more concise usage of map-get()
|
285
|
+
|
286
|
+
@function setcolor($scheme, $tone: base) {
|
287
|
+
|
288
|
+
@return map-get(map-get($colormap, $scheme), $tone);
|
289
|
+
|
290
|
+
}
|
data/_sass/link/book.scss
CHANGED
@@ -1,15 +1,17 @@
|
|
1
1
|
|
2
2
|
.link.book {
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
height: getbook(large,width) * 4;
|
4
|
+
width: getbook(large,width);
|
5
|
+
text-decoration: none;
|
6
|
+
place-content: center;
|
7
|
+
display: grid;
|
8
|
+
|
7
9
|
@media#{map-get($query,max767)} {
|
8
|
-
width:
|
10
|
+
width: getbook(medium,width);
|
9
11
|
}
|
10
12
|
|
11
13
|
@media#{map-get($query,max599)} {
|
12
|
-
width:
|
14
|
+
width: getbook(small,width);
|
13
15
|
}
|
14
16
|
}
|
15
17
|
|
data/_sass/link/navigation.scss
CHANGED
@@ -5,12 +5,16 @@
|
|
5
5
|
line-height: 1.1;
|
6
6
|
padding: 0 20px;
|
7
7
|
display: grid;
|
8
|
+
}
|
8
9
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
10
|
+
.link.navigation > button {
|
11
|
+
text-transform: capitalize;
|
12
|
+
border-radius: 0;
|
13
|
+
line-height: 1.1;
|
14
|
+
color: inherit;
|
15
|
+
padding: 0;
|
16
|
+
}
|
17
|
+
|
18
|
+
.link.navigation.home > button {
|
19
|
+
border-bottom: 3px solid;
|
16
20
|
}
|
data/_sass/title/page.scss
CHANGED
@@ -5,6 +5,7 @@
|
|
5
5
|
|
6
6
|
.title.page-chapter {
|
7
7
|
@include RotateTitle(top right);
|
8
|
+
position: absolute;
|
8
9
|
right: 78px;
|
9
10
|
top: 56px;
|
10
11
|
}
|
@@ -12,6 +13,7 @@
|
|
12
13
|
.title.page-weight {
|
13
14
|
@include RotateTitle;
|
14
15
|
left: calc(100% - 58px);
|
16
|
+
position: absolute;
|
15
17
|
text-align: right;
|
16
18
|
bottom: 56px;
|
17
19
|
}
|
data/_sass/title/type.scss
CHANGED
@@ -1,25 +1,8 @@
|
|
1
1
|
|
2
|
-
Print.width = () => {
|
3
|
-
var size = $(document)[0].documentElement.clientWidth,
|
4
|
-
more = Site.desktop.width - size + "px",
|
5
|
-
percent = (100/Site.desktop.width) * size + "%";
|
6
|
-
|
7
|
-
$(".width").html(more);
|
8
|
-
gsap.set(Overlay.mobile.bar,{width:percent});
|
9
|
-
}
|
10
|
-
|
11
|
-
Check.width = () => {
|
12
|
-
if (!Site.desktop.active) {
|
13
|
-
gsap.set(".site",{ clearProps : "display" });
|
14
|
-
gsap.set(Overlay.mobile.screen,{ display : Config.display });
|
15
|
-
Print.width();
|
16
|
-
} else {
|
17
|
-
gsap.set(Overlay.mobile.screen,{ clearProps : "display" });
|
18
|
-
gsap.set(".site",{ display : Config.display });
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
2
|
if (!Config.respond) {
|
23
|
-
|
24
|
-
|
25
|
-
|
3
|
+
Checkr(Site.desktop.active);
|
4
|
+
|
5
|
+
$(window).resize(() => {
|
6
|
+
Checkr(Site.desktop.active);
|
7
|
+
});
|
8
|
+
}
|
@@ -1,92 +1,92 @@
|
|
1
1
|
|
2
|
-
const ChangeScreen = (index,value,state) => {
|
2
|
+
// const ChangeScreen = (index,value,state) => {
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
4
|
+
// let source = Overlay.custom[index],
|
5
|
+
// target = ".area.overlay-" + source.name,
|
6
|
+
// input = $(".input.text-search"),
|
7
|
+
// results = $(".wrap.results");
|
8
8
|
|
9
|
-
|
9
|
+
// if (state == "close") {
|
10
10
|
|
11
|
-
|
12
|
-
|
13
|
-
|
11
|
+
// gsap.set("body",{
|
12
|
+
// clearProps : "overflow"
|
13
|
+
// });
|
14
14
|
|
15
|
-
gsap.set(target, {
|
16
|
-
|
17
|
-
});
|
15
|
+
// gsap.set(target, {
|
16
|
+
// clearProps : "display"
|
17
|
+
// });
|
18
18
|
|
19
|
-
|
19
|
+
// source.open = false;
|
20
20
|
|
21
|
-
if (value.name == "search") {
|
21
|
+
// if (value.name == "search") {
|
22
22
|
|
23
|
-
|
23
|
+
// input.val("");
|
24
24
|
|
25
|
-
|
25
|
+
// results.empty();
|
26
26
|
|
27
|
-
}
|
27
|
+
// }
|
28
28
|
|
29
|
-
|
29
|
+
// } else {
|
30
30
|
|
31
|
-
gsap.set("body", {
|
32
|
-
|
33
|
-
});
|
31
|
+
// gsap.set("body", {
|
32
|
+
// overflow : "hidden"
|
33
|
+
// });
|
34
34
|
|
35
|
-
gsap.set(target, {
|
36
|
-
|
37
|
-
});
|
35
|
+
// gsap.set(target, {
|
36
|
+
// display : Config.display
|
37
|
+
// });
|
38
38
|
|
39
|
-
|
39
|
+
// source.open = true;
|
40
40
|
|
41
|
-
if (value.name == "search") {
|
41
|
+
// if (value.name == "search") {
|
42
42
|
|
43
|
-
|
43
|
+
// input.focus();
|
44
44
|
|
45
|
-
}
|
46
|
-
|
47
|
-
}
|
45
|
+
// }
|
46
|
+
// }
|
47
|
+
// }
|
48
48
|
|
49
|
-
const BuildScreens = (index,value) => {
|
50
|
-
|
51
|
-
|
49
|
+
// const BuildScreens = (index,value) => {
|
50
|
+
// let button = Overlay.button + "." + value.name,
|
51
|
+
// exit = Overlay.exit + "." + value.name;
|
52
52
|
|
53
|
-
|
54
|
-
|
55
|
-
|
53
|
+
// $(button).click(function() {
|
54
|
+
// ChangeScreen(index,value,"open");
|
55
|
+
// });
|
56
56
|
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
}
|
57
|
+
// $(exit).click(function() {
|
58
|
+
// ChangeScreen(index,value,"close");
|
59
|
+
// });
|
60
|
+
// }
|
61
61
|
|
62
|
-
const KeyUp = (e) => {
|
62
|
+
// const KeyUp = (e) => {
|
63
63
|
|
64
|
-
|
64
|
+
// $(Overlay.custom).map((index,value) => {
|
65
65
|
|
66
|
-
|
66
|
+
// if (value.open && e.keyCode == 27) { ChangeScreen(index,value,"close"); }
|
67
67
|
|
68
|
-
|
68
|
+
// if (!value.open && !Site.inFocus) {
|
69
69
|
|
70
|
-
|
70
|
+
// if (e.keyCode == 65 && value.name == "about") { ChangeScreen(index,value,"open"); }
|
71
71
|
|
72
|
-
|
72
|
+
// if (e.keyCode == 66 && value.name == "browse") { ChangeScreen(index,value,"open"); }
|
73
73
|
|
74
|
-
|
74
|
+
// if (e.keyCode == 83 && value.name == "search") { ChangeScreen(index,value,"open"); }
|
75
75
|
|
76
|
-
|
76
|
+
// }
|
77
77
|
|
78
|
-
|
78
|
+
// });
|
79
79
|
|
80
|
-
}
|
80
|
+
// }
|
81
81
|
|
82
|
-
$(Overlay.custom).map((index,value) => {
|
82
|
+
// $(Overlay.custom).map((index,value) => {
|
83
83
|
|
84
|
-
|
84
|
+
// BuildScreens(index,value);
|
85
85
|
|
86
|
-
});
|
86
|
+
// });
|
87
87
|
|
88
|
-
$(document).keyup(function(e) {
|
88
|
+
// $(document).keyup(function(e) {
|
89
89
|
|
90
|
-
|
90
|
+
// KeyUp(e);
|
91
91
|
|
92
|
-
});
|
92
|
+
// });
|