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.
- checksums.yaml +4 -4
- data/_includes/.DS_Store +0 -0
- data/_includes/footer/footer_full.html +42 -18
- data/_includes/functions/calc-svg-coord.html +40 -0
- data/_includes/functions/pull_page_args.html +31 -0
- data/_includes/head/.DS_Store +0 -0
- data/_includes/head/head.html +1 -2
- data/_includes/scripts.html +12 -0
- data/_includes/vimeoPlayer.html +12 -0
- data/_layouts/about.html +53 -21
- data/_layouts/default.html +2 -4
- data/_layouts/env/clinician.html +96 -25
- data/_layouts/env/landing.html +35 -18
- data/_layouts/env/pwp.html +100 -30
- data/_layouts/feed.html +7 -3
- data/_layouts/full-width.html +11 -0
- data/_sass/_functions.sass +2 -0
- data/_sass/_mixins.sass +100 -0
- data/_sass/_variables.sass +5 -0
- data/_sass/about.sass +16 -30
- data/_sass/colors/_variables.sass +27 -6
- data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
- data/_sass/colors/env/_clinician.sass +1 -1
- data/_sass/colors/global.sass +2 -0
- data/_sass/env/breakpoints/768.sass +15 -42
- data/_sass/env/clinician.sass +35 -133
- data/_sass/env/landing.sass +35 -53
- data/_sass/env/pwp.sass +44 -152
- data/_sass/feed.sass +43 -23
- data/_sass/footer_full.sass +139 -48
- data/_sass/global.sass +297 -4
- data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
- data/_sass/navigation/burger.sass +1 -1
- data/_sass/navigation/env/clinician.sass +1 -10
- data/_sass/navigation/env/landing.sass +6 -9
- data/_sass/navigation/env/pwp.sass +1 -14
- data/_sass/navigation/global.sass +4 -3
- data/assets/css/env/gaitq_clinician.sass +9 -5
- data/assets/css/env/gaitq_landing.sass +4 -0
- data/assets/css/env/gaitq_pwp.sass +8 -4
- data/assets/css/gaitq_about.sass +22 -0
- data/assets/css/gaitq_global.sass +8 -4
- data/assets/css/gaitq_post.sass +1 -0
- data/assets/js/mobile-nav-slider.js +2 -2
- data/assets/js/svg_aos.js +25 -0
- data/assets/js/svg_text_width.js +44 -0
- metadata +15 -5
- data/assets/css/img_handler.sass +0 -5
data/_sass/global.sass
CHANGED
@@ -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:
|
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
|
-
|
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:
|
25
|
-
height:
|
27
|
+
top: (100% - $brand-height) / 2
|
28
|
+
height: $brand-height
|
26
29
|
|
27
30
|
.nav-list
|
28
31
|
display: flex
|
@@ -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
|
-
|
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
|
-
|
11
|
-
|
12
|
-
|
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
|
-
|
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
|
-
|
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:
|
19
|
+
z-index: 99
|
20
20
|
|
21
21
|
.nav-brand
|
22
22
|
width: 30vw
|
23
23
|
padding-left: 3vw
|
24
|
-
z-index:
|
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%)
|