slow-steps 0.1.13 → 0.3.2

Sign up to get free protection for your applications and to get access to all the features.
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