slow-steps 0.1.11 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE +21 -0
  3. data/README.md +35 -37
  4. data/_config.yml +1 -1
  5. data/_includes/footer/footer_full.html +15 -3
  6. data/_includes/functions/calc-svg-coord.html +18 -23
  7. data/_includes/functions/pull_page_args.html +3 -3
  8. data/_includes/head/head.html +9 -30
  9. data/_includes/head/stylesheets.html +20 -0
  10. data/_includes/image-post.html +12 -0
  11. data/_includes/image.html +50 -5
  12. data/_includes/navigation/global.html +47 -53
  13. data/_includes/scripts.html +9 -8
  14. data/_includes/vimeoPlayer.html +9 -10
  15. data/_layouts/about.html +17 -3
  16. data/_layouts/careers.html +22 -0
  17. data/_layouts/contact.html +1 -1
  18. data/_layouts/env/clinician.html +12 -29
  19. data/_layouts/env/pwp.html +13 -54
  20. data/_layouts/faq.html +12 -3
  21. data/_layouts/feed.html +1 -2
  22. data/_layouts/full-width.html +25 -2
  23. data/_sass/_colors/README.md +27 -0
  24. data/_sass/_colors/_clinician.sass +7 -0
  25. data/_sass/_colors/_mixins.sass +14 -0
  26. data/_sass/_colors/_pwp.sass +6 -0
  27. data/_sass/{colors → _colors}/_variables.sass +8 -17
  28. data/_sass/_colors/collection.sass +3 -0
  29. data/_sass/_mixins.sass +14 -5
  30. data/_sass/about.sass +46 -4
  31. data/_sass/breakpoints/about.sass +28 -4
  32. data/_sass/collage.sass +129 -0
  33. data/_sass/contact.sass +11 -42
  34. data/_sass/env/landing.sass +7 -7
  35. data/_sass/faq.sass +28 -3
  36. data/_sass/feed.sass +17 -5
  37. data/_sass/footer.sass +1 -1
  38. data/_sass/footer_full.sass +23 -13
  39. data/_sass/forms/mc-forms.sass +3 -3
  40. data/_sass/global.sass +40 -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} +21 -20
  44. data/_sass/navigation/breakpoints/1024.sass +33 -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 +26 -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 +9 -3
  57. data/assets/css/gaitq_post.sass +5 -5
  58. data/assets/images/augmented_image.png +0 -0
  59. metadata +23 -31
  60. data/_includes/.DS_Store +0 -0
  61. data/_includes/head/.DS_Store +0 -0
  62. data/_includes/head/env/conditional.html +0 -2
  63. data/_sass/colors/breakpoints/1024.sass +0 -20
  64. data/_sass/colors/burger.sass +0 -22
  65. data/_sass/colors/env/_clinician.sass +0 -16
  66. data/_sass/colors/env/_pwp.sass +0 -16
  67. data/_sass/colors/global.sass +0 -2
  68. data/_sass/colors/navigation.sass +0 -13
  69. data/_sass/navigation/env/clinician.sass +0 -38
  70. data/_sass/navigation/env/landing.sass +0 -19
  71. data/assets/css/gaitq_about.sass +0 -22
  72. data/assets/css/gaitq_feed.sass +0 -12
  73. data/assets/css/gaitq_global.sass +0 -34
  74. data/assets/fonts/.DS_Store +0 -0
  75. data/assets/fonts/Quicksand/OFL.txt +0 -93
  76. data/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf +0 -0
  77. data/assets/fonts/Quicksand/README.txt +0 -67
  78. data/assets/fonts/Quicksand/static/Quicksand-Bold.ttf +0 -0
  79. data/assets/fonts/Quicksand/static/Quicksand-Light.ttf +0 -0
  80. data/assets/fonts/Quicksand/static/Quicksand-Medium.ttf +0 -0
  81. data/assets/fonts/Quicksand/static/Quicksand-Regular.ttf +0 -0
  82. data/assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf +0 -0
  83. data/assets/fonts/fontawesome-free-5.11.2-web/.DS_Store +0 -0
data/_sass/contact.sass CHANGED
@@ -3,7 +3,7 @@
3
3
  .contact__wrapper
4
4
  display: flex
5
5
  width: 100%
6
- background-color: $white
6
+ background-color: $pure-white
7
7
  padding: 5rem 0
8
8
  flex-direction: column
9
9
 
@@ -17,27 +17,30 @@
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%
24
26
  display: block
25
27
 
26
28
  form
29
+ background-color: $white
27
30
  border: solid 1px rgba($env-primary, .2)
28
31
  border-radius: 4px
29
32
  padding: 2rem
30
33
  label
31
34
  font-size: $font-size * .8
32
- color: $black
35
+ color: $env-secondary
33
36
 
34
37
  .google-map
35
- //grid-area: googleMap
36
38
  width: 100%
37
39
 
38
40
  //padding: 0 5rem
39
41
  //filter: sepia(.3)
40
42
  iframe
43
+ border-radius: 4px
41
44
  width: 100%
42
45
  height: 40vh
43
46
  border: solid 1px rgba($env-primary, .2)
@@ -51,13 +54,15 @@
51
54
  .fas
52
55
  color: $env-primary
53
56
  a
54
- color: $black
57
+ color: $env-secondary
55
58
  transition: all .2s ease-in-out
56
59
  //text-decoration: none
57
60
  &:hover
58
61
  color: $env-primary
59
62
  .social-media-link
60
- font-size: $font-size * 1.4
63
+ font-size: $lg-font-size
64
+ color: $env-secondary
65
+ padding-right: $lg-font-size
61
66
 
62
67
  .form-element
63
68
  width: 100%
@@ -86,22 +91,6 @@
86
91
  width: auto
87
92
  position: relative
88
93
 
89
- .social-media
90
- display: flex
91
- justify-content: center
92
- padding: 0
93
- margin: 0
94
- z-index: 9999
95
-
96
- .social-media-item
97
- list-style: none
98
- padding-right: 2rem
99
-
100
- .social-media-link
101
- color: $grey
102
- transition: all .3s ease-in-out
103
-
104
-
105
94
 
106
95
  @media screen and ( min-width: 1024px )
107
96
 
@@ -109,7 +98,6 @@
109
98
  display: flex
110
99
  flex-direction: row
111
100
  width: 100%
112
- background-color: $white
113
101
  padding: 5rem 0
114
102
 
115
103
  .contact--left
@@ -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
data/_sass/env/landing.sass CHANGED
@@ -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
data/_sass/faq.sass CHANGED
@@ -11,19 +11,25 @@
11
11
  width: 60%
12
12
 
13
13
  .faq__question
14
+ display: flex
15
+ justify-content: space-between
14
16
  width: 100%
15
17
  padding: 1rem 0
16
- background-color: rgba($opd-blue-trust, .2)
18
+ background-color: rgba($opd-light-blue, .2)
17
19
  border-radius: 4px
18
20
  cursor: pointer
19
21
  transition: .2s ease-in-out
20
22
 
21
23
  &:hover
22
- background-color: rgba($opd-blue-trust, 1)
24
+ background-color: rgba($opd-light-blue, 1)
23
25
 
24
- & > *
26
+ & > .faq__question--title
25
27
  padding-left: 1rem
26
28
 
29
+ & > .fas
30
+ padding-right: 1rem
31
+ transition: .4s ease-in-out
32
+
27
33
  .faq__answer
28
34
  max-height: 0
29
35
  overflow: hidden
@@ -35,3 +41,22 @@
35
41
  .faq__answer--reveal
36
42
  max-height: 1000px
37
43
  transition: .6s ease-in-out
44
+
45
+ .faq__question--reveal
46
+ & > .fas
47
+ transform: rotateX(180deg) translateY(.5rem)
48
+
49
+ .faq__contact
50
+ width: 100vw
51
+ background-color: lighten($env-primary, 0%)
52
+ padding: 4rem 0
53
+
54
+ .contact-form
55
+ width: 95%
56
+ margin: auto
57
+ max-width: 600px
58
+
59
+ .faq__contact--strap
60
+ text-align: center
61
+ padding: 4rem 0
62
+ color: $white
data/_sass/feed.sass CHANGED
@@ -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)
data/_sass/footer.sass CHANGED
@@ -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
data/_sass/footer_full.sass CHANGED
@@ -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
@@ -88,7 +97,7 @@
88
97
  line-height: 3rem
89
98
  list-style: none
90
99
 
91
- .ft__sitemap--submenu li a
100
+ .ft--link
92
101
  color: $pure-white
93
102
 
94
103
  .ft__sitemap--env-wrap
@@ -114,7 +123,7 @@
114
123
  width: 60vw
115
124
 
116
125
  .ft__contact--list
117
- font-size: $font-size * .7
126
+ font-size: $font-size * .8
118
127
  li
119
128
  line-height: 4rem
120
129
  .address
@@ -126,14 +135,15 @@
126
135
 
127
136
  .ft__sitemap
128
137
  .ft__sitemap--env-header
129
- font-size: $font-size * .8
138
+ font-size: $font-size * .9
130
139
  .ft__sitemap--submenu
131
- font-size: $font-size * .7
140
+ font-size: $font-size * .8
132
141
 
133
142
  .ft__base
143
+ justify-content: space-between
134
144
  a,
135
145
  p
136
- font-size: $font-size * .6
146
+ font-size: $font-size * .7
137
147
 
138
148
  .legal-links
139
149
  flex-direction: row
@@ -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
data/_sass/forms/mc-forms.sass CHANGED
@@ -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
data/_sass/global.sass CHANGED
@@ -15,15 +15,21 @@
15
15
  -ms-transition: none !important
16
16
  -o-transition: none !important
17
17
 
18
+ *
19
+ box-sizing: border-box
20
+
18
21
  body
19
22
  background-color: $white
20
23
 
21
24
  .fullwidth__wrap
22
- width: 90vw
23
- max-width: 800px
24
- margin: auto
25
- 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
26
31
  & > p
32
+
27
33
  padding: 3rem 0
28
34
  & > ol li, ul li
29
35
  padding: 1rem 0
@@ -132,9 +138,15 @@ body
132
138
  transform: scaleY(2)
133
139
 
134
140
 
141
+ .image--caption
142
+ font-size: $font-size * .7
143
+ color: $grey
144
+ padding: 1rem 0
145
+ text-align: center
146
+
135
147
  // Block colors and sizes
136
148
  .strap--opd-trust
137
- @include opd-blue-trust
149
+ @include opd-light-blue
138
150
 
139
151
 
140
152
  .strap__100
@@ -240,32 +252,28 @@ $svg-text-offset: 60px
240
252
  stop-opacity: 1
241
253
 
242
254
  .svg__augment--pulse
243
- animation: pulse-ring 2s $bezier-pulse infinite
244
255
  fill: $led
245
256
 
246
- @keyframes pulse-ring
247
- 0%
248
- opacity: .5
249
- r: .1
250
257
 
251
- 50%
252
- opacity: .2
258
+ // Social icons wraped in <a's
253
259
 
254
- 100%
255
- opacity: 0
256
- r: 2
260
+ .social-media
261
+ display: flex
262
+ padding: 0
263
+ margin: 0
257
264
 
265
+ .social-media-item
266
+ list-style: none
258
267
 
259
- // Social icons wraped in <a's
260
- .social
261
- color: $grey
262
- text-decoration: none
268
+ .social-media-link
269
+ @include default-trans
270
+ color: $white
263
271
 
264
272
  .yaml--link
265
273
  color: inherit
266
274
  text-decoration: none
267
275
  &:hover
268
- color: $opd-blue-trust
276
+ color: $opd-light-blue
269
277
 
270
278
 
271
279
  @media screen and ( min-width: 768px )
@@ -285,26 +293,23 @@ $svg-text-offset: 60px
285
293
  max-width: 600px
286
294
  margin: 0 auto
287
295
 
288
- .social--Facebook
296
+ .social-media-item
289
297
  &:hover
290
- color: $facebook-primary
298
+ .social--Facebook
299
+ color: $facebook-primary
291
300
 
292
- .social--Twitter
293
- &:hover
294
- color: $twitter-primary
301
+ .social--Twitter
302
+ color: $twitter-primary
295
303
 
296
- .social--LinkedIn
297
- &:hover
298
- color: $linkedin-primary
304
+ .social--LinkedIn
305
+ color: $linkedin-primary
299
306
 
300
- .social--Instagram
301
- &:hover
302
- color: $instagram-primary
307
+ .social--Instagram
308
+ color: $instagram-primary
303
309
 
304
- .social--Website,
305
- .social--Email
306
- &:hover
307
- color: $opd-blue-trust
310
+ .social--Website,
311
+ .social--Email
312
+ color: $opd-light-blue
308
313
 
309
314
 
310
315
  // This is basically a button and should to be centralised