slow-steps 0.1.1 → 0.1.6

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 (48) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/.DS_Store +0 -0
  3. data/_includes/footer/footer_full.html +42 -18
  4. data/_includes/functions/calc-svg-coord.html +40 -0
  5. data/_includes/functions/pull_page_args.html +31 -0
  6. data/_includes/head/.DS_Store +0 -0
  7. data/_includes/head/head.html +1 -2
  8. data/_includes/scripts.html +12 -0
  9. data/_includes/vimeoPlayer.html +12 -0
  10. data/_layouts/about.html +53 -21
  11. data/_layouts/default.html +2 -4
  12. data/_layouts/env/clinician.html +96 -25
  13. data/_layouts/env/landing.html +35 -18
  14. data/_layouts/env/pwp.html +100 -30
  15. data/_layouts/feed.html +7 -3
  16. data/_layouts/full-width.html +11 -0
  17. data/_sass/_functions.sass +2 -0
  18. data/_sass/_mixins.sass +100 -0
  19. data/_sass/_variables.sass +5 -0
  20. data/_sass/about.sass +16 -30
  21. data/_sass/colors/_variables.sass +27 -6
  22. data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
  23. data/_sass/colors/env/_clinician.sass +1 -1
  24. data/_sass/colors/global.sass +2 -0
  25. data/_sass/env/breakpoints/768.sass +15 -42
  26. data/_sass/env/clinician.sass +35 -133
  27. data/_sass/env/landing.sass +35 -53
  28. data/_sass/env/pwp.sass +44 -152
  29. data/_sass/feed.sass +43 -23
  30. data/_sass/footer_full.sass +139 -48
  31. data/_sass/global.sass +297 -4
  32. data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
  33. data/_sass/navigation/burger.sass +1 -1
  34. data/_sass/navigation/env/clinician.sass +1 -10
  35. data/_sass/navigation/env/landing.sass +6 -9
  36. data/_sass/navigation/env/pwp.sass +1 -14
  37. data/_sass/navigation/global.sass +4 -3
  38. data/assets/css/env/gaitq_clinician.sass +9 -5
  39. data/assets/css/env/gaitq_landing.sass +4 -0
  40. data/assets/css/env/gaitq_pwp.sass +8 -4
  41. data/assets/css/gaitq_about.sass +22 -0
  42. data/assets/css/gaitq_global.sass +8 -4
  43. data/assets/css/gaitq_post.sass +1 -0
  44. data/assets/js/mobile-nav-slider.js +2 -2
  45. data/assets/js/svg_aos.js +25 -0
  46. data/assets/js/svg_text_width.js +44 -0
  47. metadata +15 -5
  48. data/assets/css/img_handler.sass +0 -5
@@ -1,3 +1,11 @@
1
+ /* Last full read through 30/12/2020
2
+ *
3
+ *##############################################
4
+ *# Global /_sass/global.sass
5
+ *##############################################
6
+ *
7
+ */
8
+
1
9
  // Global CSS that doesnt fall into any of the categories set out by the _sass dir structure
2
10
 
3
11
  // Stop any CSS animations on load. We remove this class from the body tag after load, using assets/js/animate_after_load.js
@@ -8,7 +16,32 @@
8
16
  -o-transition: none !important
9
17
 
10
18
  .fullwidth__wrap
11
- width: 100vw
19
+ width: 90vw
20
+ max-width: 800px
21
+ margin: auto
22
+ margin-top: $navbar-height + $secondary-navbar-height + 5vh
23
+ & > p
24
+ padding: 3rem 0
25
+ & > ol li, ul li
26
+ padding: 1rem 0
27
+
28
+ .two__col
29
+ display: flex
30
+ flex-wrap: wrap
31
+ width: 100%
32
+
33
+ .two__col--elem
34
+ padding: 1rem 0
35
+
36
+ .two__col--left,
37
+ .two__col--right
38
+ width: 100%
39
+
40
+ .no--mobile
41
+ display: none
42
+
43
+ .h-100
44
+ height: 100%
12
45
 
13
46
  .d-none
14
47
  display: none
@@ -16,22 +49,234 @@
16
49
  .d-block
17
50
  display: block
18
51
 
19
- .bg--dark
20
- background-color: $opd-grey-neutral
21
-
22
52
  .bg--light
23
53
  background-color: $white
24
54
 
25
55
  .no-touch__wrap
26
56
  padding: 18vh 0 10vh 0
27
57
 
58
+ // Hero div at the top of most pages
59
+ .hero
60
+ align-items: center
61
+ display: flex
62
+ justify-content: center
63
+
64
+ .hero-65
65
+ height: 65vh
66
+ height: calc(var(--vh, 1vh) * 65)
67
+
68
+ .hero-90
69
+ height: 90vh
70
+ height: calc(var(--vh, 1vh) * 90)
71
+
72
+ .hero__overlay
73
+ width: 100%
74
+ height: 100%
75
+ z-index: -1
76
+
77
+ .hero__image
78
+ object-fit: cover
79
+ object-position: center
80
+ width: 100%
81
+
82
+ .image__filter--mix
83
+ @include image-filter--mix
84
+
85
+ .hero__strap
86
+ align-items: center
87
+ color: $white
88
+ display: flex
89
+ justify-content: center
90
+ margin: 0
91
+ position: absolute
92
+ text-align: center
93
+ width: 100vw
94
+
95
+ & > *
96
+ padding-top: 12px
97
+
98
+
99
+ .hero__strap--center
100
+ padding-top: $navbar-height
101
+
102
+ span
103
+ animation-duration: .1s
104
+ animation-fill-mode: forwards
105
+ animation-iteration-count: 1
106
+ animation-name: fadeInOpacity
107
+ opacity: 0
108
+
109
+ .hero__strap--baseline
110
+ align-self: flex-end
111
+ flex-direction: column
112
+ padding-bottom: 5.5vh
113
+ padding-top: 2rem
114
+
115
+ .hero__follow
116
+ align-items: center
117
+ border-radius: 30px
118
+ color: $white
119
+ display: flex
120
+ height: 11vh
121
+ justify-content: center
122
+ position: absolute
123
+ width: 30px
124
+ z-index: 2
125
+
126
+ &::after
127
+ content: '\2193'
128
+ font-size: 20px
129
+ transform: scaleY(2)
130
+
131
+
132
+ // Block colors and sizes
133
+ .strap--opd-trust
134
+ @include opd-blue-trust
135
+
136
+
137
+ .strap__100
138
+ padding: 5rem 1rem
139
+ & > h2
140
+ padding: 1rem 0
141
+
142
+ @media screen and ( min-width: 768px )
143
+
144
+ .strap__100
145
+ padding: 10rem 5rem
146
+ & > h2
147
+ padding-bottom: 5rem
148
+ & > p
149
+ max-width: 800px
150
+ margin: 0 auto
151
+
152
+
153
+ // SVG augmenting text labels
154
+
155
+ .svg__labels
156
+
157
+ & > *
158
+ fill: $white
159
+
160
+ & > .svg--elem
161
+ transition: .4s ease-in-out
162
+
163
+ & > .svg--line
164
+ stroke: $white
165
+ stroke-width: 1
166
+
167
+ & > .svg--text
168
+ font-size: $font-size * .8
169
+
170
+ .svg__labels.hidden
171
+
172
+ & > .svg--circle
173
+ opacity: 0
174
+
175
+ & > .svg--text
176
+ opacity: 0
177
+
178
+ .svg__labels.not-hidden
179
+
180
+ & > .svg--circle
181
+ opacity: 1
182
+
183
+ & > .svg--text
184
+ transform: translateX(0)
185
+ opacity: 1
186
+
187
+ & > .svg--line
188
+ stroke-dashoffset: 0!important
189
+
190
+ & > .trans-left
191
+ animation: trans-in-left .6s ease-in-out
192
+
193
+ & > .trans-right
194
+ animation: trans-in-right .6s ease-in-out
195
+
196
+
197
+ $svg-text-offset: 60px
198
+
199
+ @keyframes trans-in-left
200
+ 0%
201
+ transform: translateX(-$svg-text-offset)
202
+
203
+ 100%
204
+ transform: translateX(0)
205
+
206
+ @keyframes trans-in-right
207
+ 0%
208
+ transform: translateX($svg-text-offset)
209
+
210
+ 100%
211
+ transform: translateX(0)
212
+
213
+
214
+
215
+ // SVG flashing LED used on env landing pages
216
+
217
+
218
+ .augmented-image
219
+ position: relative
220
+ display: flex
221
+
222
+ .svg__augment
223
+ position: absolute
224
+ top: 0
225
+ left: 0
226
+
227
+ .svg__augment--led
228
+ fill: url(#augmentLED)
229
+
230
+ #augmentLED
231
+ stop:first-child
232
+ stop-color: $pure-white
233
+ stop-opacity: 1
234
+
235
+ stop:last-child
236
+ stop-color: $led
237
+ stop-opacity: 1
238
+
239
+ .svg__augment--pulse
240
+ animation: pulse-ring 2s $bezier-pulse infinite
241
+ fill: $led
242
+
243
+ @keyframes pulse-ring
244
+ 0%
245
+ opacity: .5
246
+ r: .1
247
+
248
+ 50%
249
+ opacity: .2
250
+
251
+ 100%
252
+ opacity: 0
253
+ r: 2
254
+
255
+
28
256
  // Social icons wraped in <a's
29
257
  .social
30
258
  color: $grey
31
259
  text-decoration: none
32
260
 
261
+ .yaml--link
262
+ color: inherit
263
+ text-decoration: none
264
+ &:hover
265
+ color: $opd-blue-trust
266
+
267
+
33
268
  @media screen and ( min-width: 768px )
34
269
 
270
+ .fullwidth__wrap
271
+ .two__col--left
272
+ width: 30%
273
+
274
+ .two__col--right
275
+ width: 70%
276
+
277
+ .no--mobile
278
+ display: block
279
+
35
280
  .narrow__wrap
36
281
  width: 80vw
37
282
  max-width: 600px
@@ -53,3 +298,51 @@
53
298
  .social--Email
54
299
  &:hover
55
300
  color: $opd-blue-trust
301
+
302
+
303
+ // This is basically a button and should to be centralised
304
+ .action__call
305
+ bottom: 0
306
+ font-size: $font-size * .8
307
+ margin: -100px auto
308
+ padding: 2rem
309
+ position: relative
310
+ text-decoration: none
311
+ transition: .2s ease
312
+
313
+ &:before
314
+ border-radius: 3rem
315
+ content: ''
316
+ display: block
317
+ height: 6rem
318
+ left: 0
319
+ position: absolute
320
+ top: 0
321
+ transition: .2s ease
322
+ width: 6rem
323
+
324
+ span
325
+ font-weight: 900
326
+ position: relative
327
+
328
+ svg
329
+ fill: none
330
+ margin-left: 10px
331
+ position: relative
332
+ stroke-linecap: round
333
+ stroke-linejoin: round
334
+ stroke-width: 2
335
+ top: 0
336
+ transform: translateX(-10px)
337
+ transition: .2s ease
338
+
339
+ &:hover
340
+ &::before
341
+ width: 100%
342
+
343
+ svg
344
+ stroke: $white
345
+ transform: translateX(0)
346
+
347
+ span
348
+ color: $white
@@ -5,7 +5,9 @@
5
5
 
6
6
  // Everything here will be included in EVERY .html
7
7
 
8
- @media screen and ( min-width: 768px )
8
+ $brand-height: 55%
9
+
10
+ @media screen and ( min-width: 1024px )
9
11
 
10
12
  .navbar
11
13
  height: $navbar-height
@@ -18,11 +20,12 @@
18
20
  height: 10vh
19
21
  z-index: 999
20
22
  top: 7.5vh
23
+ //align-items: center
21
24
 
22
25
  .site__logo
23
26
  position: absolute
24
- top: 30%
25
- height: 40%
27
+ top: (100% - $brand-height) / 2
28
+ height: $brand-height
26
29
 
27
30
  .nav-list
28
31
  display: flex
@@ -4,7 +4,7 @@
4
4
  cursor: pointer
5
5
  display: block
6
6
  padding-right: 3vw
7
- z-index: 999
7
+ z-index: 9999
8
8
  & > div
9
9
  height: 2px
10
10
  margin: 7px
@@ -1,16 +1,7 @@
1
1
  // Navbar site logo
2
2
  // make sure we don't style any other instance so nest with .nav-brand
3
3
  .nav-brand
4
- .site__logo--group
5
- .site__logo--curve,
6
- .site__logo--legvert,
7
- .site__logo--leg45,
8
- .site__logo--g,
9
- .site__logo--a,
10
- .site__logo__i,
11
- .site__logo--t,
12
- .site__logo--Q
13
- fill: $env-primary
4
+ @include logo-color($env-primary)
14
5
 
15
6
 
16
7
  // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
@@ -7,13 +7,10 @@
7
7
  // Navbar site logo
8
8
  // make sure we don't style any other instance so nest with .nav-brand
9
9
  .nav-brand
10
- .site__logo--curve,
11
- .site__logo--legvert,
12
- .site__logo--leg45,
13
- .site__logo--g,
14
- .site__logo--a,
15
- .site__logo__i,
16
- .site__logo--t,
17
- .site__logo--Q
10
+ @include logo-color($white)
11
+ height: 14rem
12
+ transform: translateY(10vh)
18
13
 
19
- fill: $white
14
+ @media screen and ( min-width: 1024px )
15
+ .nav-brand
16
+ transform: translateY(-10vh)
@@ -2,20 +2,7 @@
2
2
  // Navbar site logo
3
3
  // make sure we don't style any other instance so nest with .nav-brand
4
4
  .nav-brand
5
- .site__logo--group
6
- .site__logo--curve
7
- fill: $opd-orange-confidence
8
- .site__logo--legvert
9
- fill: $opd-blue-confidence
10
- .site__logo--leg45
11
- fill: $opd-blue-trust
12
- .site__logo--g,
13
- .site__logo--a,
14
- .site__logo__i,
15
- .site__logo--t
16
- fill: $opd-blue-confidence
17
- .site__logo--Q
18
- fill: $opd-orange-confidence
5
+ @include logo-primary-colors
19
6
 
20
7
  // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
21
8
  .clinician-group, .gaitq-group
@@ -16,12 +16,12 @@
16
16
  top: 0
17
17
  white-space: nowrap
18
18
  width: 100%
19
- z-index: 999
19
+ z-index: 99
20
20
 
21
21
  .nav-brand
22
22
  width: 30vw
23
23
  padding-left: 3vw
24
- z-index: 2
24
+ z-index: 100
25
25
 
26
26
  .site__logo *
27
27
  transition: 2s ease-in
@@ -51,7 +51,8 @@
51
51
 
52
52
  .nav-group-content .nav-link
53
53
  font-size: 1.7rem
54
-
54
+ z-index: 100
55
+
55
56
  .nav-active
56
57
  // we toggle this class in mobile-nav-slider.js on burger click
57
58
  transform: translateX(0%)