slow-steps 0.3.2 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/_config.yml +3 -3
  4. data/_includes/contact-form.html +1 -1
  5. data/_includes/cookie-consent.html +21 -0
  6. data/_includes/footer/footer.html +64 -7
  7. data/_includes/footer/footer_redesign.html +139 -0
  8. data/_includes/forms/mc-register.html +124 -110
  9. data/_includes/functions/calc-svg-coord.html +2 -0
  10. data/_includes/functions/reposition-svg-labels.html +44 -0
  11. data/_includes/head/descriptors/og-meta.html +1 -2
  12. data/_includes/head/descriptors/structured-data.html +3 -3
  13. data/_includes/head/descriptors/twitter-meta.html +1 -1
  14. data/_includes/{google-analytics.html → head/google-analytics.html} +9 -2
  15. data/_includes/head/head.html +6 -4
  16. data/_includes/head/stylesheets.html +3 -0
  17. data/_includes/image-post.html +3 -1
  18. data/_includes/image.html +1 -1
  19. data/_includes/navigation/global.html +20 -4
  20. data/_includes/scripts.html +3 -1
  21. data/_layouts/about.html +1 -1
  22. data/_layouts/careers.html +1 -1
  23. data/_layouts/contact.html +1 -1
  24. data/_layouts/default.html +4 -1
  25. data/_layouts/env/clinician.html +8 -8
  26. data/_layouts/env/landing.html +6 -6
  27. data/_layouts/env/pwp.html +4 -4
  28. data/_layouts/error-page.html +1 -1
  29. data/_layouts/faq.html +4 -1
  30. data/_layouts/feed.html +3 -3
  31. data/_layouts/full-width.html +1 -1
  32. data/_layouts/post.html +3 -3
  33. data/_layouts/register.html +1 -1
  34. data/_sass/_colors/_variables.sass +2 -0
  35. data/_sass/_functions.sass +9 -0
  36. data/_sass/_mixins.sass +6 -3
  37. data/_sass/about.sass +3 -1
  38. data/_sass/breakpoints/about.sass +11 -2
  39. data/_sass/collage.sass +1 -1
  40. data/_sass/contact.sass +2 -2
  41. data/_sass/env/breakpoints/768.sass +16 -11
  42. data/_sass/env/clinician.sass +12 -8
  43. data/_sass/env/landing.sass +18 -3
  44. data/_sass/env/pwp.sass +11 -3
  45. data/_sass/faq.sass +9 -1
  46. data/_sass/feed.sass +2 -2
  47. data/_sass/footer.sass +174 -14
  48. data/_sass/footer_redesign.sass +353 -0
  49. data/_sass/forms/mc-forms.sass +9 -0
  50. data/_sass/global.sass +89 -8
  51. data/_sass/navigation/_variables.sass +3 -3
  52. data/_sass/navigation/base.sass +14 -4
  53. data/_sass/navigation/breakpoints/1024.sass +48 -9
  54. data/_sass/navigation/burger.sass +1 -1
  55. data/_sass/post.sass +7 -1
  56. data/_sass/typography/_variables.sass +1 -1
  57. data/_sass/typography/resets.sass +2 -2
  58. data/assets/css/env/gaitq_clinician.sass +1 -1
  59. data/assets/css/env/gaitq_landing.sass +1 -1
  60. data/assets/css/env/gaitq_pwp.sass +1 -1
  61. data/assets/css/gaitq_errors.sass +1 -1
  62. data/assets/js/mobile-nav-slider.js +1 -1
  63. data/assets/js/svg_text_width.js +4 -4
  64. metadata +7 -6
  65. data/_includes/footer/footer_full.html +0 -79
  66. data/_includes/functions/pull_page_args.html +0 -31
  67. data/_sass/footer_full.sass +0 -183
@@ -191,3 +191,12 @@ input.switch
191
191
  padding: 5rem
192
192
  background-color: $pure-white
193
193
  border-radius: 20px
194
+
195
+
196
+ .response
197
+ padding: 2rem 0
198
+
199
+ .mce_inline_error
200
+ padding: 1rem 0
201
+ font-size: $sm-font-size
202
+ color: $led
data/_sass/global.sass CHANGED
@@ -87,6 +87,7 @@ body
87
87
  object-fit: cover
88
88
  object-position: center
89
89
  width: 100%
90
+ display: inherit
90
91
 
91
92
  .image__filter--mix
92
93
  @include image-filter--mix
@@ -101,9 +102,35 @@ body
101
102
  text-align: center
102
103
  width: 100vw
103
104
 
104
- & > *
105
+
106
+ & > p
107
+ opacity: 0
105
108
  padding-top: 12px
109
+ animation: fadeInAnimation ease 1s
110
+ animation-delay: .8s
111
+ animation-iteration-count: 1
112
+ animation-fill-mode: forwards
113
+
114
+ & > h1, h2, h3, h4, h5
115
+ animation: zoomInAnimation ease .6s
116
+ animation-iteration-count: 1
117
+ animation-fill-mode: forwards
118
+
119
+ @keyframes zoomInAnimation
120
+ 0%
121
+ transform: scale(0)
122
+ opacity: 0
123
+
124
+ 100%
125
+ transform: scale(1)
126
+ opacity: 1
106
127
 
128
+ @keyframes fadeInAnimation
129
+ 0%
130
+ opacity: 0
131
+
132
+ 100%
133
+ opacity: 1
107
134
 
108
135
  .hero__strap--center
109
136
  //padding-top: $navbar-height
@@ -180,7 +207,8 @@ body
180
207
  stroke-width: 1
181
208
 
182
209
  & > .svg--text
183
- font-size: $font-size * .8
210
+ font-size: $lg-font-size
211
+ font-weight: $heavy-font
184
212
 
185
213
  .svg__labels.hidden
186
214
 
@@ -208,6 +236,13 @@ body
208
236
  & > .trans-right
209
237
  animation: trans-in-right .6s ease-in-out
210
238
 
239
+ // This is digusting! We need to tweak the actual html so we can readilly access these elements.
240
+ .svg__labels--red
241
+ & > svg > * > *
242
+ fill: darken($opd-coral, 10)
243
+ & > svg > * > line
244
+ stroke: darken($opd-coral,10)!important
245
+
211
246
 
212
247
  $svg-text-offset: 60px
213
248
 
@@ -261,6 +296,7 @@ $svg-text-offset: 60px
261
296
  display: flex
262
297
  padding: 0
263
298
  margin: 0
299
+ line-height: 0
264
300
 
265
301
  .social-media-item
266
302
  list-style: none
@@ -314,9 +350,8 @@ $svg-text-offset: 60px
314
350
 
315
351
  // This is basically a button and should to be centralised
316
352
  .action__call
317
- bottom: 0
318
- font-size: $font-size * .8
319
- margin: -100px auto
353
+ font-size: $font-size
354
+ margin: 0 auto
320
355
  padding: 2rem
321
356
  position: relative
322
357
  text-decoration: none
@@ -327,14 +362,14 @@ $svg-text-offset: 60px
327
362
  content: ''
328
363
  display: block
329
364
  height: 6rem
330
- left: 0
365
+ left: -1rem
331
366
  position: absolute
332
- top: 0
367
+ top: .5rem
333
368
  transition: .2s ease
334
369
  width: 6rem
335
370
 
336
371
  span
337
- font-weight: 900
372
+ font-weight: $heavy-font
338
373
  position: relative
339
374
 
340
375
  svg
@@ -358,3 +393,49 @@ $svg-text-offset: 60px
358
393
 
359
394
  span
360
395
  color: $white
396
+
397
+
398
+ .cc-window
399
+ background-color: $opd-blue
400
+ display: flex
401
+ align-items: center
402
+ position: fixed
403
+
404
+ .cc-message
405
+ width: 80vw
406
+ padding: 3rem 2rem
407
+ color: $pure-white
408
+
409
+ .cc-compliance
410
+ width: 20vw
411
+ border-style: none
412
+ height: 100%
413
+
414
+
415
+
416
+ .cc-dismiss
417
+ display: flex
418
+ flex-wrap: nowrap
419
+ background-color: $opd-coral
420
+ border-style: none
421
+ color: $pure-white
422
+ border-radius: 6px
423
+
424
+ &:hover
425
+ background-color: lighten($opd-coral, 10)
426
+
427
+ .cc-link
428
+ text-decoration: none
429
+ color: lighten($opd-coral, 10)
430
+
431
+ &:hover
432
+ color: $opd-coral
433
+
434
+
435
+ .skip-link
436
+ margin: 0
437
+ position: absolute
438
+ padding: 0
439
+ width: 1px
440
+ height: 1px
441
+ overflow: hidden
@@ -6,15 +6,15 @@
6
6
 
7
7
  $navbar-height: 5vh
8
8
 
9
- $mobile-navbar-height: 10vh
10
-
11
9
  $secondary-navbar-height: 10vh
12
10
 
13
11
  $brand-height: 55%
14
12
 
15
13
  // change .nav-list.height manually in _sass/navbar/mobile.sass, can't figure out how to use calc --vh whith sass var
16
14
 
17
- $nav-list-height: 85vh
15
+ $mobile-navbar-height: 10vh
16
+
17
+ $mobile-nav-list-height: 90vh
18
18
 
19
19
  // ************* Colours *************
20
20
 
@@ -28,20 +28,23 @@
28
28
  width: 30vw
29
29
  padding-left: 3vw
30
30
  z-index: 1
31
+ margin-top: .7rem
32
+ // fudge fix for G making logo apear off-centre
31
33
 
32
34
  .site__logo *
33
35
  @include default-trans
34
36
 
37
+
35
38
  .nav-list
36
39
  border-bottom-left-radius: 80px
37
40
  font-size: 1.3rem
38
- height: $nav-list-height
39
- height: calc( var(--vh, 1vh) * 85 )
41
+ height: $mobile-nav-list-height
42
+ height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} )
40
43
  list-style: none
41
44
  margin: 0
42
- margin-block-start: 0
45
+ margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} )
43
46
  padding: 0
44
- padding-top: 15vh
47
+ padding-top: 0
45
48
  position: absolute
46
49
  right: 0
47
50
  top: 0
@@ -50,6 +53,12 @@
50
53
  width: 100vw
51
54
  box-sizing: content-box
52
55
  background-color: $env-primary
56
+ overflow: scroll
57
+
58
+ .nav-group-content
59
+ //text-indent: 2rem
60
+ .nav-link
61
+ margin: 3vh 20vw
53
62
 
54
63
  .nav-link
55
64
  margin: 6vh 15vw
@@ -68,6 +77,7 @@
68
77
  .nav-active
69
78
  // we toggle this class in mobile-nav-slider.js on burger click
70
79
  transform: translateX(0%)
80
+ box-shadow: -.2px .2px 0 rgba($pure-black, .3)
71
81
 
72
82
 
73
83
  .site__logo-active
@@ -21,7 +21,8 @@
21
21
  .nav-brand
22
22
  @include default-trans
23
23
  height: 8vh
24
- max-height: 100px
24
+ //max-height: 100px
25
+ // max-height breaks vertical centering
25
26
 
26
27
  .nav-scrolled
27
28
  background-color: $env-primary
@@ -31,9 +32,11 @@
31
32
  @include default-trans
32
33
  display: flex
33
34
  position: absolute
34
- max-width: 160px
35
+ //max-height: 100px
36
+ // max-height breaks vertical centering
35
37
  height: 10vh
36
38
  top: 7.5vh
39
+ margin-top: 0
37
40
 
38
41
  .site__logo
39
42
  position: absolute
@@ -50,10 +53,21 @@
50
53
  height: 5vh
51
54
  padding: 0
52
55
  background-color: inherit
56
+ box-shadow: none
57
+ margin-block-start: 0
58
+ padding: 0
59
+ overflow: visible
53
60
 
54
61
  .nav-group
55
62
  padding: 0 2rem
56
63
 
64
+ .nav-group-content
65
+ //text-indent: 2rem
66
+ &:last-child
67
+ margin-right: 10rem
68
+ .nav-link
69
+ margin: 0
70
+
57
71
  .nav-link
58
72
  align-items: center
59
73
  padding: 0
@@ -63,10 +77,31 @@
63
77
  overflow: hidden
64
78
  position: relative
65
79
 
80
+
66
81
  .sub-link,
67
82
  .subsub-link
68
83
  color: $env-primary
84
+ border-bottom: solid 1px $pure-white
85
+ span
86
+ padding: 1rem 0
69
87
 
88
+ .nav-cta
89
+ @include default-trans
90
+ color: $pure-white
91
+ background-color: $env-primary
92
+ //padding: 2rem 2rem!important
93
+ margin-right: 8rem!important
94
+ border-radius: 6px
95
+
96
+ span
97
+ padding: 0
98
+
99
+ &:before, &:after
100
+ display: none!important
101
+
102
+ &:hover
103
+ background-color: darken($env-primary,10)
104
+ border-bottom: none
70
105
 
71
106
  // Surround current link with ticks
72
107
  .current--url
@@ -76,15 +111,18 @@
76
111
  height: 2px
77
112
  position: relative
78
113
  vertical-align: middle
79
- width: 6%
114
+ width: 6px
80
115
 
81
116
  &:before
82
- right: 0.5em
83
- margin-left: -10%
117
+ right: 3px
84
118
 
85
119
  &:after
86
- left: 0.5em
87
- margin-right: -10%
120
+ left: 3px
121
+
122
+ .current--env
123
+ span
124
+ border-bottom: solid 1px $pure-white
125
+
88
126
 
89
127
  .nav-group-content
90
128
  @include default-trans
@@ -139,12 +177,13 @@
139
177
 
140
178
  .nav-group-container
141
179
  .nav-link
142
- font-weight: 400
180
+ font-weight: $heavy-font
143
181
  text-transform: uppercase
144
182
  padding: 1rem 3rem
145
183
  &:not(.current--url)
146
184
  &:hover
147
- text-decoration: underline
185
+ span
186
+ border-bottom: solid 1px $env-primary
148
187
 
149
188
  .nav-group-container:hover > .nav-subsub-content
150
189
  visibility: visible
@@ -4,7 +4,7 @@
4
4
  cursor: pointer
5
5
  display: block
6
6
  padding-right: 3vw
7
- z-index: 1
7
+ z-index: 1000
8
8
  & > div
9
9
  background-color: $burger-color
10
10
  height: 2px
data/_sass/post.sass CHANGED
@@ -53,10 +53,16 @@
53
53
  .post__content--image
54
54
  display: block
55
55
  object-fit: cover
56
- object-position: top
56
+ object-position: center
57
57
  width: 100%
58
58
  height: 50vh
59
59
 
60
+ .image--north
61
+ object-position: top
62
+
63
+ .image--south
64
+ object-position: bottom
65
+
60
66
  .post__link
61
67
  color: $opd-blue
62
68
  text-decoration: none
@@ -20,6 +20,6 @@ $xlight-font: 100
20
20
 
21
21
  $light-font: 200
22
22
 
23
- $medium-font: 300
23
+ $medium-font: 400
24
24
 
25
25
  $heavy-font: 600
@@ -29,11 +29,11 @@ h3,
29
29
  h4,
30
30
  h5,
31
31
  h6
32
- font-weight: 400
32
+ font-weight: $heavy-font
33
33
 
34
34
  p,
35
35
  a
36
- font-weight: 200
36
+ font-weight: $medium-font
37
37
 
38
38
 
39
39
  .center-text
@@ -47,7 +47,7 @@ $baseurl: '{{ site.baseurl }}/'
47
47
 
48
48
  @import 'collage'
49
49
 
50
- @import 'footer_full'
50
+ @import 'footer_redesign'
51
51
 
52
52
  @import 'aos-overrides'
53
53
 
@@ -26,7 +26,7 @@ $baseurl: '{{ site.baseurl }}/'
26
26
 
27
27
 
28
28
 
29
- @import 'footer_full'
29
+ @import 'footer_redesign'
30
30
 
31
31
  @import 'aos-overrides'
32
32
 
@@ -49,7 +49,7 @@ $baseurl: '{{ site.baseurl }}/'
49
49
 
50
50
  // Footer
51
51
 
52
- @import 'footer_full'
52
+ @import 'footer_redesign'
53
53
 
54
54
  @import 'aos-overrides'
55
55
 
@@ -19,7 +19,7 @@
19
19
 
20
20
  // Footer
21
21
 
22
- @import 'footer_full'
22
+ @import 'footer_redesign'
23
23
 
24
24
  @import 'aos-overrides'
25
25
 
@@ -6,7 +6,7 @@ const navSlide = ()=>{
6
6
  const navBar = document.querySelector('.navbar');
7
7
 
8
8
  // watch for touch clicks on the burger
9
- burger.addEventListener('touchstart', () => {
9
+ burger.addEventListener('click', () => {
10
10
  // animate accordinaly
11
11
  navSlider.classList.toggle('nav-active');
12
12
  brand.classList.toggle('site__logo-active');