futuro 1.0.8 → 1.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/html/assign/page.liquid +2 -1
  3. data/_includes/html/assign/site.liquid +30 -21
  4. data/_includes/html/layout/footer.liquid +5 -1
  5. data/_includes/html/overlay/browse/page.liquid +1 -1
  6. data/_includes/html/page/content/loop/screen/header.liquid +45 -2
  7. data/_includes/html/page/header.liquid +1 -2
  8. data/_includes/html/page/layout/home.liquid +17 -7
  9. data/_includes/html/page/topbar.liquid +28 -17
  10. data/_includes/html/page/topbar/navigation/link.liquid +22 -0
  11. data/_includes/svg/site/icon.liquid +39 -19
  12. data/_sass/area/topbar.scss +1 -1
  13. data/_sass/block/chart.scss +2 -1
  14. data/_sass/block/form/screen.scss +62 -29
  15. data/_sass/block/util.scss +3 -0
  16. data/_sass/futuro.core.scss +2 -0
  17. data/_sass/helpers/extends.scss +0 -17
  18. data/_sass/helpers/mixins/layout.scss +0 -1
  19. data/_sass/helpers/mixins/theme.scss +3 -5
  20. data/_sass/helpers/themes.scss +14 -13
  21. data/_sass/helpers/variables.scss +24 -244
  22. data/_sass/helpers/variables/colors.scss +290 -0
  23. data/_sass/link/book.scss +8 -6
  24. data/_sass/link/navigation.scss +11 -7
  25. data/_sass/title/book.scss +9 -0
  26. data/_sass/title/page.scss +2 -0
  27. data/_sass/title/type.scss +1 -0
  28. data/assets/js/footer/custom/1_Settings.js +1 -2
  29. data/assets/js/footer/custom/2_Check.width.js +6 -23
  30. data/assets/js/footer/custom/4_Setup.home.js +3 -1
  31. data/assets/js/footer/custom/4_Setup.overlays.js +56 -56
  32. data/assets/js/footer/custom/4_Start.browse.js +3 -67
  33. data/assets/js/footer/custom/5_Util.share.js +0 -75
  34. data/assets/js/footer/custom/5_WhatsOn.js +7 -7
  35. data/assets/js/footer/custom/5_respond.scroller.js +11 -0
  36. data/assets/js/footer/vendor/futuro/browsr.js +269 -0
  37. data/assets/js/footer/vendor/futuro/checkr.js +41 -0
  38. data/assets/js/footer/vendor/futuro/ovrly.js +102 -0
  39. data/assets/js/footer/vendor/{gsap-draw.js → gsap/draw.js} +0 -0
  40. data/assets/js/footer/vendor/{gsap-morph.js → gsap/morph.js} +0 -0
  41. data/assets/js/footer/vendor/{gsap-scramble.js → gsap/scramble.js} +0 -0
  42. data/assets/js/footer/vendor/gsap/scroll.js +11 -0
  43. data/assets/js/footer/vendor/{gsap-text.js → gsap/text.js} +0 -0
  44. data/assets/js/footer/vendor/{jquery.min.js → jquery.js} +0 -0
  45. data/assets/js/footer/vendor/{parsley.min.js → parsley.js} +0 -0
  46. data/assets/js/futuro.footer.custom.js +1 -1
  47. data/assets/js/futuro.footer.vendor.js +426 -314
  48. data/assets/js/futuro.header.legacy.js +4 -3
  49. data/assets/js/futuro.header.legacy.shopify.js +4 -3
  50. data/assets/js/futuro.header.vendor.js +4 -3
  51. data/assets/js/header/vendor/gsap.js +4 -3
  52. metadata +16 -15
  53. data/_includes/svg/site/book/orwell.svg +0 -1
  54. data/_includes/svg/site/book/woolf.svg +0 -1
  55. data/assets/js/footer/custom/3_Setup.browse.js +0 -298
  56. data/assets/js/footer/custom/5_Animate.scroller.js +0 -16
  57. data/assets/js/footer/custom/5_Respond.browse.js +0 -42
  58. data/assets/js/footer/vendor/scrollmagic-gsap.js +0 -310
  59. 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
+ }
@@ -1,15 +1,17 @@
1
1
 
2
2
  .link.book {
3
- width: map-get($book,large);
4
- display: block;
5
- fill: white;
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: map-get($book,medium);
10
+ width: getbook(medium,width);
9
11
  }
10
12
 
11
13
  @media#{map-get($query,max599)} {
12
- width: map-get($book,small);
14
+ width: getbook(small,width);
13
15
  }
14
16
  }
15
17
 
@@ -5,12 +5,16 @@
5
5
  line-height: 1.1;
6
6
  padding: 0 20px;
7
7
  display: grid;
8
+ }
8
9
 
9
- button {
10
- text-transform: capitalize;
11
- border-radius: 0;
12
- line-height: 1.1;
13
- color: inherit;
14
- padding: 0;
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
  }
@@ -0,0 +1,9 @@
1
+
2
+ .title.book {
3
+ @include RotateTitle(center);
4
+ @extend %bold;
5
+ font-size: getbook(large,title);
6
+ pointer-events: none;
7
+ position: relative;
8
+ color: white;
9
+ }
@@ -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
  }
@@ -1,6 +1,7 @@
1
1
 
2
2
  %StylePage {
3
3
  @include RotateTitle;
4
+ position: absolute;
4
5
  bottom: 56px;
5
6
  left: 128px;
6
7
  }
@@ -1,6 +1,5 @@
1
1
 
2
- let shade = "rgba(0,0,0,0.05)",
3
- controller = new ScrollMagic.Controller();
2
+ gsap.registerPlugin(ScrollTrigger);
4
3
 
5
4
  Browse.able = false;
6
5
 
@@ -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
- $(Check.width());
24
- $(window).resize(Check.width());
25
- }
3
+ Checkr(Site.desktop.active);
4
+
5
+ $(window).resize(() => {
6
+ Checkr(Site.desktop.active);
7
+ });
8
+ }
@@ -32,4 +32,6 @@ Setup.home = () => {
32
32
 
33
33
  }
34
34
 
35
- if (Site.isLibrary) { if (Body.isHome) { $(Setup.home()); } }
35
+ if (Site.isLibrary && Body.isHome) {
36
+ $(Setup.home());
37
+ }
@@ -1,92 +1,92 @@
1
1
 
2
- const ChangeScreen = (index,value,state) => {
2
+ // const ChangeScreen = (index,value,state) => {
3
3
 
4
- let source = Overlay.custom[index],
5
- target = ".area.overlay-" + source.name,
6
- input = $(".input.text-search"),
7
- results = $(".wrap.results");
4
+ // let source = Overlay.custom[index],
5
+ // target = ".area.overlay-" + source.name,
6
+ // input = $(".input.text-search"),
7
+ // results = $(".wrap.results");
8
8
 
9
- if (state == "close") {
9
+ // if (state == "close") {
10
10
 
11
- gsap.set("body",{
12
- clearProps : "overflow"
13
- });
11
+ // gsap.set("body",{
12
+ // clearProps : "overflow"
13
+ // });
14
14
 
15
- gsap.set(target, {
16
- clearProps : "display"
17
- });
15
+ // gsap.set(target, {
16
+ // clearProps : "display"
17
+ // });
18
18
 
19
- source.open = false;
19
+ // source.open = false;
20
20
 
21
- if (value.name == "search") {
21
+ // if (value.name == "search") {
22
22
 
23
- input.val("");
23
+ // input.val("");
24
24
 
25
- results.empty();
25
+ // results.empty();
26
26
 
27
- }
27
+ // }
28
28
 
29
- } else {
29
+ // } else {
30
30
 
31
- gsap.set("body", {
32
- overflow : "hidden"
33
- });
31
+ // gsap.set("body", {
32
+ // overflow : "hidden"
33
+ // });
34
34
 
35
- gsap.set(target, {
36
- display : Config.display
37
- });
35
+ // gsap.set(target, {
36
+ // display : Config.display
37
+ // });
38
38
 
39
- source.open = true;
39
+ // source.open = true;
40
40
 
41
- if (value.name == "search") {
41
+ // if (value.name == "search") {
42
42
 
43
- input.focus();
43
+ // input.focus();
44
44
 
45
- }
46
- }
47
- }
45
+ // }
46
+ // }
47
+ // }
48
48
 
49
- const BuildScreens = (index,value) => {
50
- let button = Overlay.button + "." + value.name,
51
- exit = Overlay.exit + "." + value.name;
49
+ // const BuildScreens = (index,value) => {
50
+ // let button = Overlay.button + "." + value.name,
51
+ // exit = Overlay.exit + "." + value.name;
52
52
 
53
- $(button).click(function() {
54
- ChangeScreen(index,value,"open");
55
- });
53
+ // $(button).click(function() {
54
+ // ChangeScreen(index,value,"open");
55
+ // });
56
56
 
57
- $(exit).click(function() {
58
- ChangeScreen(index,value,"close");
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
- $(Overlay.custom).map((index,value) => {
64
+ // $(Overlay.custom).map((index,value) => {
65
65
 
66
- if (value.open && e.keyCode == 27) { ChangeScreen(index,value,"close"); }
66
+ // if (value.open && e.keyCode == 27) { ChangeScreen(index,value,"close"); }
67
67
 
68
- if (!value.open && !Site.inFocus) {
68
+ // if (!value.open && !Site.inFocus) {
69
69
 
70
- if (e.keyCode == 65 && value.name == "about") { ChangeScreen(index,value,"open"); }
70
+ // if (e.keyCode == 65 && value.name == "about") { ChangeScreen(index,value,"open"); }
71
71
 
72
- if (e.keyCode == 66 && value.name == "browse") { ChangeScreen(index,value,"open"); }
72
+ // if (e.keyCode == 66 && value.name == "browse") { ChangeScreen(index,value,"open"); }
73
73
 
74
- if (e.keyCode == 83 && value.name == "search") { ChangeScreen(index,value,"open"); }
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
- BuildScreens(index,value);
84
+ // BuildScreens(index,value);
85
85
 
86
- });
86
+ // });
87
87
 
88
- $(document).keyup(function(e) {
88
+ // $(document).keyup(function(e) {
89
89
 
90
- KeyUp(e);
90
+ // KeyUp(e);
91
91
 
92
- });
92
+ // });