slow-steps 0.1.13 → 0.3.2

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 (81) hide show
  1. checksums.yaml +4 -4
  2. data/_config.yml +1 -1
  3. data/_includes/footer/footer_full.html +1 -1
  4. data/_includes/functions/calc-svg-coord.html +18 -23
  5. data/_includes/functions/pull_page_args.html +3 -3
  6. data/_includes/head/head.html +9 -30
  7. data/_includes/head/stylesheets.html +20 -0
  8. data/_includes/image-post.html +12 -0
  9. data/_includes/image.html +50 -5
  10. data/_includes/navigation/global.html +56 -57
  11. data/_includes/scripts.html +9 -8
  12. data/_includes/vimeoPlayer.html +1 -2
  13. data/_layouts/about.html +7 -2
  14. data/_layouts/contact.html +1 -1
  15. data/_layouts/env/clinician.html +12 -29
  16. data/_layouts/env/landing.html +4 -4
  17. data/_layouts/env/pwp.html +13 -54
  18. data/_layouts/faq.html +1 -1
  19. data/_layouts/feed.html +1 -2
  20. data/_layouts/full-width.html +25 -2
  21. data/_sass/_colors/README.md +27 -0
  22. data/_sass/_colors/_clinician.sass +7 -0
  23. data/_sass/_colors/_mixins.sass +14 -0
  24. data/_sass/_colors/_pwp.sass +6 -0
  25. data/_sass/{colors → _colors}/_variables.sass +8 -17
  26. data/_sass/_colors/collection.sass +3 -0
  27. data/_sass/_mixins.sass +14 -5
  28. data/_sass/about.sass +7 -6
  29. data/_sass/breakpoints/about.sass +4 -4
  30. data/_sass/collage.sass +1 -0
  31. data/_sass/contact.sass +8 -39
  32. data/_sass/env/clinician.sass +1 -0
  33. data/_sass/env/landing.sass +7 -7
  34. data/_sass/env/pwp.sass +1 -0
  35. data/_sass/faq.sass +2 -2
  36. data/_sass/feed.sass +17 -5
  37. data/_sass/footer.sass +1 -1
  38. data/_sass/footer_full.sass +18 -8
  39. data/_sass/forms/mc-forms.sass +3 -3
  40. data/_sass/global.sass +37 -35
  41. data/_sass/navigation/README.md +35 -0
  42. data/_sass/navigation/_variables.sass +5 -6
  43. data/_sass/navigation/{global.sass → base.sass} +20 -20
  44. data/_sass/navigation/breakpoints/1024.sass +32 -15
  45. data/_sass/navigation/burger.sass +9 -3
  46. data/_sass/navigation/clinician.sass +31 -0
  47. data/_sass/navigation/collection.sass +9 -0
  48. data/_sass/navigation/colors.sass +8 -0
  49. data/_sass/navigation/no-nav.sass +32 -0
  50. data/_sass/navigation/{env/pwp.sass → pwp.sass} +12 -16
  51. data/_sass/post.sass +2 -7
  52. data/_sass/typography/_variables.sass +4 -0
  53. data/assets/css/env/gaitq_clinician.sass +24 -8
  54. data/assets/css/env/gaitq_landing.sass +21 -3
  55. data/assets/css/env/gaitq_pwp.sass +28 -8
  56. data/assets/css/gaitq_errors.sass +21 -3
  57. data/assets/css/gaitq_post.sass +5 -5
  58. data/assets/images/augmented_image.png +0 -0
  59. metadata +20 -29
  60. data/_includes/head/env/conditional.html +0 -2
  61. data/_sass/colors/breakpoints/1024.sass +0 -20
  62. data/_sass/colors/burger.sass +0 -22
  63. data/_sass/colors/env/_clinician.sass +0 -16
  64. data/_sass/colors/env/_pwp.sass +0 -16
  65. data/_sass/colors/global.sass +0 -2
  66. data/_sass/colors/navigation.sass +0 -13
  67. data/_sass/navigation/env/clinician.sass +0 -38
  68. data/_sass/navigation/env/landing.sass +0 -19
  69. data/assets/css/gaitq_about.sass +0 -22
  70. data/assets/css/gaitq_feed.sass +0 -12
  71. data/assets/css/gaitq_global.sass +0 -34
  72. data/assets/fonts/.DS_Store +0 -0
  73. data/assets/fonts/Quicksand/OFL.txt +0 -93
  74. data/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf +0 -0
  75. data/assets/fonts/Quicksand/README.txt +0 -67
  76. data/assets/fonts/Quicksand/static/Quicksand-Bold.ttf +0 -0
  77. data/assets/fonts/Quicksand/static/Quicksand-Light.ttf +0 -0
  78. data/assets/fonts/Quicksand/static/Quicksand-Medium.ttf +0 -0
  79. data/assets/fonts/Quicksand/static/Quicksand-Regular.ttf +0 -0
  80. data/assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf +0 -0
  81. data/assets/fonts/fontawesome-free-5.11.2-web/.DS_Store +0 -0
@@ -25,7 +25,7 @@
25
25
 
26
26
  .team__head
27
27
  border-bottom: none
28
- border-right: solid 1px $opd-blue-confidence
28
+ border-right: solid 1px $opd-blue
29
29
  display: block
30
30
  height: auto
31
31
  width: auto
@@ -49,7 +49,7 @@
49
49
  padding: 2rem 4rem 2rem 2rem
50
50
  transform: rotate(0)
51
51
  white-space: nowrap
52
- color: $opd-blue-confidence
52
+ color: $opd-blue
53
53
  border: solid 1px rgba($env-primary, 0)
54
54
  margin: 2rem 0
55
55
  &:not(.team__title--active)
@@ -71,7 +71,7 @@
71
71
 
72
72
  .team__members
73
73
  //padding: 10rem
74
- color: $opd-blue-confidence
74
+ color: $opd-blue
75
75
  background-color: $white
76
76
 
77
77
  .team__title--active
@@ -80,7 +80,7 @@
80
80
  padding-right: 1rem !important
81
81
  color: $env-primary !important
82
82
  background-color: $white
83
- border: solid 1px $opd-blue-confidence
83
+ border: solid 1px $opd-blue
84
84
  border-right: solid 1px $white
85
85
  transform: translateX(1px)
86
86
  text-align: right
@@ -60,6 +60,7 @@
60
60
 
61
61
  .collage__image__wrap-2
62
62
  height: 50%
63
+ top: 0
63
64
  width: 40%
64
65
  left: 30%
65
66
  animation-delay: 100ms
@@ -17,7 +17,9 @@
17
17
  padding: 0 1rem
18
18
 
19
19
  .form-instruction
20
- padding-bottom: 2rem
20
+ padding-bottom: $font-size
21
+ padding-top: $lg-font-size
22
+ color: $env-primary
21
23
 
22
24
  .contact-form
23
25
  width: 100%
@@ -30,7 +32,7 @@
30
32
  padding: 2rem
31
33
  label
32
34
  font-size: $font-size * .8
33
- color: $black
35
+ color: $env-secondary
34
36
 
35
37
  .google-map
36
38
  width: 100%
@@ -52,13 +54,15 @@
52
54
  .fas
53
55
  color: $env-primary
54
56
  a
55
- color: $black
57
+ color: $env-secondary
56
58
  transition: all .2s ease-in-out
57
59
  //text-decoration: none
58
60
  &:hover
59
61
  color: $env-primary
60
62
  .social-media-link
61
- font-size: $font-size * 1.4
63
+ font-size: $lg-font-size
64
+ color: $env-secondary
65
+ padding-right: $lg-font-size
62
66
 
63
67
  .form-element
64
68
  width: 100%
@@ -87,22 +91,6 @@
87
91
  width: auto
88
92
  position: relative
89
93
 
90
- .social-media
91
- display: flex
92
- justify-content: center
93
- padding: 0
94
- margin: 0
95
- z-index: 9999
96
-
97
- .social-media-item
98
- list-style: none
99
- padding-right: 2rem
100
-
101
- .social-media-link
102
- color: $grey
103
- transition: all .3s ease-in-out
104
-
105
-
106
94
 
107
95
  @media screen and ( min-width: 1024px )
108
96
 
@@ -120,9 +108,6 @@
120
108
  width: 60%
121
109
  padding: 0 5rem
122
110
 
123
- .form-instruction
124
- padding-bottom: 2rem
125
-
126
111
  .contact-form
127
112
  width: 100%
128
113
  display: block
@@ -155,7 +140,6 @@
155
140
  .fas
156
141
  color: $env-primary
157
142
  a
158
- color: $black
159
143
  transition: all .2s ease-in-out
160
144
  text-decoration: none
161
145
  &:hover
@@ -210,18 +194,3 @@
210
194
  &::after
211
195
  opacity: 1
212
196
  transition: all 0.3s
213
-
214
- .social-media
215
- display: flex
216
- justify-content: flex-start
217
- padding: 0
218
- margin: 0
219
- z-index: 9999
220
-
221
- .social-media-item
222
- list-style: none
223
- padding-right: 2rem
224
-
225
- .social-media-link
226
- color: $grey
227
- transition: all .3s ease-in-out
@@ -21,6 +21,7 @@
21
21
  .hero__follow
22
22
  background-color: $env-primary
23
23
  top: 59.5vh
24
+ top: calc(var(--vh, 1vh) * 59.5)
24
25
 
25
26
  .segment__keywords
26
27
  align-items: center
@@ -48,10 +48,10 @@ $landing-height: 100vh
48
48
  @include image-filter--mix
49
49
 
50
50
  .env--pwp
51
- background-color: $opd-orange-confidence
51
+ background-color: $opd-coral
52
52
 
53
53
  .env--clinician
54
- background-color: $opd-blue-confidence
54
+ background-color: $opd-blue
55
55
 
56
56
  @media screen and ( min-width: 768px )
57
57
 
@@ -101,12 +101,12 @@ $landing-height: 100vh
101
101
  width: 40%
102
102
 
103
103
  .primary__cta
104
- background-color: $opd-blue-trust
105
- border: solid 1px $opd-blue-trust
106
- color: $opd-blue-confidence
104
+ background-color: $opd-light-blue
105
+ border: solid 1px $opd-light-blue
106
+ color: $opd-blue
107
107
  &:hover
108
108
  background-color: transparent
109
- color: $opd-blue-trust
109
+ color: $opd-light-blue
110
110
 
111
111
  .secondary__cta
112
112
  background-color: transparent
@@ -114,7 +114,7 @@ $landing-height: 100vh
114
114
  color: $white
115
115
  &:hover
116
116
  background-color: $white
117
- color: $opd-blue-confidence
117
+ color: $opd-blue
118
118
 
119
119
  .primary__cta, .secondary__cta
120
120
  &:hover
@@ -27,6 +27,7 @@
27
27
  .hero__follow
28
28
  background-color: $env-primary
29
29
  bottom: 4.5vh
30
+ bottom: calc(var(--vh, 1vh) * 4.5)
30
31
 
31
32
  .segment__wrap
32
33
  display: flex
@@ -15,13 +15,13 @@
15
15
  justify-content: space-between
16
16
  width: 100%
17
17
  padding: 1rem 0
18
- background-color: rgba($opd-blue-trust, .2)
18
+ background-color: rgba($opd-light-blue, .2)
19
19
  border-radius: 4px
20
20
  cursor: pointer
21
21
  transition: .2s ease-in-out
22
22
 
23
23
  &:hover
24
- background-color: rgba($opd-blue-trust, 1)
24
+ background-color: rgba($opd-light-blue, 1)
25
25
 
26
26
  & > .faq__question--title
27
27
  padding-left: 1rem
@@ -6,7 +6,8 @@
6
6
  width: 80vw
7
7
  max-width: 1200px
8
8
  margin: auto
9
-
9
+ color: $env-primary
10
+
10
11
 
11
12
  .post__feed
12
13
  display: flex
@@ -19,10 +20,10 @@
19
20
  .feed__card
20
21
  display: flex
21
22
  flex-direction: column
22
- width: 200px
23
+ //width: 200px
23
24
  max-width: 360px
24
25
  //height: 220px
25
- margin: 20px
26
+ //margin: 20px
26
27
  overflow: hidden
27
28
  border-radius: 0
28
29
  //box-shadow: 0 0 6px rgba($env-primary,.8)
@@ -54,7 +55,7 @@
54
55
 
55
56
  .feed__card--text
56
57
  padding: 2rem 0
57
- color: $opd-blue-confidence
58
+ color: $opd-blue
58
59
  font-size: $font-size
59
60
 
60
61
  .feed__card--link
@@ -68,7 +69,7 @@
68
69
 
69
70
  .feed__card--meta
70
71
  font-size: $font-size * .5
71
- padding: 1rem 0
72
+ padding: 0
72
73
  & > span
73
74
  font-weight: 600
74
75
 
@@ -76,3 +77,14 @@
76
77
 
77
78
  .feed__card--meta
78
79
  font-size: $font-size * .7
80
+
81
+ .feed__card
82
+ display: flex
83
+ flex-direction: column
84
+ width: 200px
85
+ max-width: 360px
86
+ //height: 220px
87
+ margin: 20px
88
+ overflow: hidden
89
+ border-radius: 0
90
+ //box-shadow: 0 0 6px rgba($env-primary,.8)
@@ -1,6 +1,6 @@
1
1
  .ft__wrap
2
2
  max-width: 100vw
3
- background-color: $opd-grey-neutral
3
+ background-color: $opd-grey
4
4
  padding: 3rem 2rem
5
5
 
6
6
  .ft__base
@@ -1,11 +1,19 @@
1
+
2
+
1
3
  .ft__wrapper
2
- @include footer-bg($opd-blue-confidence)
4
+ @include footer-bg($opd-blue)
3
5
  border-top: solid 1px $white
4
6
  color: $white
5
7
  display: flex
6
8
  flex-wrap: wrap
7
9
  padding: 5vh 5vw
8
10
 
11
+ .social-media-link
12
+ font-size: $font-size
13
+ padding-right: $sm-font-size
14
+ //color: $white
15
+
16
+
9
17
  .ft__head
10
18
  display: flex
11
19
  margin: 5vh 5vw
@@ -19,7 +27,7 @@
19
27
  width: 90vw
20
28
 
21
29
  .ft__col
22
- //border-left: solid 1px rgba($opd-blue-trust, .05)
30
+ //border-left: solid 1px rgba($opd-light-blue, .05)
23
31
  box-sizing: border-box
24
32
  padding: 0 5vw
25
33
  width: 90vw
@@ -37,7 +45,7 @@
37
45
 
38
46
  .ft__contact
39
47
  .site__logo
40
- @include logo-color($opd-blue-trust)
48
+ @include logo-color($white)
41
49
  width: 40vw
42
50
 
43
51
  .ft__sitemap
@@ -49,10 +57,11 @@
49
57
 
50
58
  .ft__base
51
59
  align-items: center
52
- border-top: solid 1px $opd-blue-trust
60
+ border-top: solid 1px $opd-light-blue
53
61
  display: flex
54
- flex-wrap: nowrap
55
- justify-content: space-between
62
+ flex-wrap: wrap
63
+
64
+ justify-content: space-around
56
65
  min-width: 100%
57
66
  width: 100%
58
67
  a,
@@ -69,7 +78,7 @@
69
78
  justify-content: space-between
70
79
 
71
80
  .ft__sitemap--header
72
- border-bottom: 1px solid $opd-blue-trust
81
+ border-bottom: 1px solid $opd-light-blue
73
82
  color: $pure-white
74
83
  font-size: 2rem
75
84
  font-weight: 600
@@ -131,6 +140,7 @@
131
140
  font-size: $font-size * .8
132
141
 
133
142
  .ft__base
143
+ justify-content: space-between
134
144
  a,
135
145
  p
136
146
  font-size: $font-size * .7
@@ -147,7 +157,7 @@
147
157
 
148
158
  .copyright
149
159
  &::after
150
- content: ' Limited'
160
+ content: ' Ltd.'
151
161
 
152
162
  .ft__sitemap--header
153
163
  font-size: 1.8rem
@@ -77,7 +77,7 @@ input.switch
77
77
  input.switch
78
78
  &:checked
79
79
  + .icon
80
- background: $opd-blue-trust
80
+ background: $opd-light-blue
81
81
 
82
82
  ~
83
83
  .yes
@@ -126,13 +126,13 @@ input.switch
126
126
  background: $env-primary
127
127
 
128
128
  .styled-checkbox:checked
129
- background: $opd-orange-confidence
129
+ background: $opd-coral
130
130
 
131
131
  + .icon span
132
132
  left: calc(100% - 25.732px)
133
133
 
134
134
  &:before
135
- background: $opd-blue-trust
135
+ background: $opd-light-blue
136
136
 
137
137
  .content__gdpr
138
138
  display: flex
@@ -22,11 +22,14 @@ body
22
22
  background-color: $white
23
23
 
24
24
  .fullwidth__wrap
25
- width: 90vw
26
- max-width: 800px
27
- margin: auto
28
- margin-top: $navbar-height + $secondary-navbar-height + 5vh
25
+ background-color: $white
26
+ width: 100vw
27
+ padding-top: $navbar-height + $secondary-navbar-height + 5vh
28
+ & > *
29
+ margin: auto
30
+ max-width: 800px
29
31
  & > p
32
+
30
33
  padding: 3rem 0
31
34
  & > ol li, ul li
32
35
  padding: 1rem 0
@@ -135,9 +138,15 @@ body
135
138
  transform: scaleY(2)
136
139
 
137
140
 
141
+ .image--caption
142
+ font-size: $font-size * .7
143
+ color: $grey
144
+ padding: 1rem 0
145
+ text-align: center
146
+
138
147
  // Block colors and sizes
139
148
  .strap--opd-trust
140
- @include opd-blue-trust
149
+ @include opd-light-blue
141
150
 
142
151
 
143
152
  .strap__100
@@ -243,32 +252,28 @@ $svg-text-offset: 60px
243
252
  stop-opacity: 1
244
253
 
245
254
  .svg__augment--pulse
246
- animation: pulse-ring 2s $bezier-pulse infinite
247
255
  fill: $led
248
256
 
249
- @keyframes pulse-ring
250
- 0%
251
- opacity: .5
252
- r: .1
253
257
 
254
- 50%
255
- opacity: .2
258
+ // Social icons wraped in <a's
256
259
 
257
- 100%
258
- opacity: 0
259
- r: 2
260
+ .social-media
261
+ display: flex
262
+ padding: 0
263
+ margin: 0
260
264
 
265
+ .social-media-item
266
+ list-style: none
261
267
 
262
- // Social icons wraped in <a's
263
- .social
264
- color: $grey
265
- text-decoration: none
268
+ .social-media-link
269
+ @include default-trans
270
+ color: $white
266
271
 
267
272
  .yaml--link
268
273
  color: inherit
269
274
  text-decoration: none
270
275
  &:hover
271
- color: $opd-blue-trust
276
+ color: $opd-light-blue
272
277
 
273
278
 
274
279
  @media screen and ( min-width: 768px )
@@ -288,26 +293,23 @@ $svg-text-offset: 60px
288
293
  max-width: 600px
289
294
  margin: 0 auto
290
295
 
291
- .social--Facebook
296
+ .social-media-item
292
297
  &:hover
293
- color: $facebook-primary
298
+ .social--Facebook
299
+ color: $facebook-primary
294
300
 
295
- .social--Twitter
296
- &:hover
297
- color: $twitter-primary
301
+ .social--Twitter
302
+ color: $twitter-primary
298
303
 
299
- .social--LinkedIn
300
- &:hover
301
- color: $linkedin-primary
304
+ .social--LinkedIn
305
+ color: $linkedin-primary
302
306
 
303
- .social--Instagram
304
- &:hover
305
- color: $instagram-primary
307
+ .social--Instagram
308
+ color: $instagram-primary
306
309
 
307
- .social--Website,
308
- .social--Email
309
- &:hover
310
- color: $opd-blue-trust
310
+ .social--Website,
311
+ .social--Email
312
+ color: $opd-light-blue
311
313
 
312
314
 
313
315
  // This is basically a button and should to be centralised