slow-steps 0.1.2 → 0.1.7

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 (43) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/contact-details.html +25 -0
  3. data/_includes/contact-form.html +18 -0
  4. data/_includes/footer/footer_full.html +42 -18
  5. data/_includes/gmap.html +5 -0
  6. data/_includes/head/head.html +1 -2
  7. data/_includes/navigation/global.html +11 -0
  8. data/_layouts/about.html +53 -21
  9. data/_layouts/contact.html +39 -0
  10. data/_layouts/default.html +2 -4
  11. data/_layouts/env/clinician.html +96 -25
  12. data/_layouts/env/landing.html +35 -18
  13. data/_layouts/env/pwp.html +27 -16
  14. data/_layouts/feed.html +1 -1
  15. data/_layouts/full-width.html +11 -0
  16. data/_sass/_functions.sass +2 -0
  17. data/_sass/_mixins.sass +76 -7
  18. data/_sass/_variables.sass +2 -0
  19. data/_sass/about.sass +14 -29
  20. data/_sass/colors/_variables.sass +25 -6
  21. data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
  22. data/_sass/colors/env/_clinician.sass +1 -1
  23. data/_sass/colors/global.sass +2 -0
  24. data/_sass/contact.sass +227 -0
  25. data/_sass/env/breakpoints/768.sass +5 -46
  26. data/_sass/env/clinician.sass +35 -133
  27. data/_sass/env/landing.sass +32 -33
  28. data/_sass/env/pwp.sass +37 -176
  29. data/_sass/footer_full.sass +139 -48
  30. data/_sass/global.sass +304 -4
  31. data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
  32. data/_sass/navigation/env/clinician.sass +1 -10
  33. data/_sass/navigation/env/landing.sass +6 -9
  34. data/_sass/navigation/env/pwp.sass +1 -14
  35. data/_sass/navigation/global.sass +9 -0
  36. data/assets/css/env/gaitq_clinician.sass +6 -4
  37. data/assets/css/env/gaitq_pwp.sass +6 -4
  38. data/assets/css/gaitq_about.sass +22 -0
  39. data/assets/css/gaitq_global.sass +4 -4
  40. data/assets/js/svg_aos.js +3 -3
  41. data/assets/js/svg_text_width.js +9 -1
  42. metadata +13 -5
  43. data/assets/css/img_handler.sass +0 -5
data/_sass/env/landing.sass CHANGED
@@ -1,6 +1,10 @@
1
- // Landing page with 768 breakpoint
2
-
3
- // Using Custom Properties to scale properly inside mobile viewports
1
+ /* Last full read through 27/12/2020
2
+ *
3
+ *##############################################
4
+ *# Landing sass /_sass/env/landing.sass
5
+ *##############################################
6
+ *
7
+ */
4
8
 
5
9
  // Fallback for browsers that do not support Custom Properties
6
10
  $landing-height: 100vh
@@ -12,41 +16,36 @@ $landing-height: 100vh
12
16
  height: calc(var(--vh, 1vh) * 100)
13
17
 
14
18
  .page__half
15
- display: flex
16
19
  align-items: flex-end
20
+ display: flex
17
21
  height: 50vh
18
22
  width: 100vw
19
23
 
20
24
  .env__text
25
+ color: $white
21
26
  display: flex
22
27
  flex-direction: column
23
- color: $white
24
28
 
25
29
  .landing__strap
26
30
  display: none
27
31
 
28
32
  .landing__link
29
- text-decoration: none
30
33
  color: $white
34
+ text-decoration: none
31
35
 
32
36
  .landing__title
33
37
  font-size: $font-size
38
+ padding: 2rem 0
34
39
  text-align: center
35
40
  width: 100vw
36
- padding: 2rem 0
37
41
 
38
42
  .hero__overlay
39
- position: absolute
40
- width: 100%
43
+ // additional css from glocal
41
44
  height: 50%
42
- z-index: -1
45
+ position: absolute
43
46
 
44
- .hero__image
45
- height: 100%
46
- width: 100%
47
- object-fit: cover
48
- opacity: .7
49
- filter: grayscale(.2) contrast(.2) brightness(1.6)
47
+ .hero__filter
48
+ @include image-filter--mix
50
49
 
51
50
  .env--pwp
52
51
  background-color: $opd-orange-confidence
@@ -54,7 +53,6 @@ $landing-height: 100vh
54
53
  .env--clinician
55
54
  background-color: $opd-blue-confidence
56
55
 
57
-
58
56
  @media screen and ( min-width: 768px )
59
57
 
60
58
  .landing__page
@@ -71,23 +69,21 @@ $landing-height: 100vh
71
69
  top: 50vh
72
70
  transition: .6s ease-in-out
73
71
 
74
-
75
72
  &:focus-within > .landing__strap
76
73
  @include reveal-landing-strap
77
74
 
78
75
  &:hover > .landing__strap
79
76
  @include reveal-landing-strap
80
77
 
81
-
82
78
  .landing__strap
83
79
  display: flex
84
80
  flex-direction: column
85
- justify-content: space-around
86
81
  height: 0
82
+ justify-content: space-around
83
+ max-width: 400px
87
84
  overflow: hidden
88
85
  transition: .2s ease-in-out
89
86
  width: 40vw
90
- max-width: 400px
91
87
 
92
88
  .landing__cta
93
89
  display: flex
@@ -95,48 +91,50 @@ $landing-height: 100vh
95
91
  justify-content: space-between
96
92
 
97
93
  > a
98
- transition: .3s ease-in-out
99
- width: 40%
100
- padding: 1rem 0
101
- border-radius: 6px
102
- text-decoration: none
103
- text-align: center
104
94
  align-self: center
95
+ border-radius: 6px
105
96
  box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
97
+ padding: 1rem 0
98
+ text-align: center
99
+ text-decoration: none
100
+ transition: .3s ease-in-out
101
+ width: 40%
106
102
 
107
103
  .primary__cta
108
104
  background-color: $opd-blue-trust
109
105
  border: solid 1px $opd-blue-trust
110
106
  color: $opd-blue-confidence
111
107
  &:hover
112
- color: $opd-blue-trust
113
108
  background-color: transparent
114
- box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
109
+ color: $opd-blue-trust
115
110
 
116
111
  .secondary__cta
117
- background-color: none
112
+ background-color: transparent
118
113
  border: solid 1px $white
119
114
  color: $white
120
115
  &:hover
121
- color: $opd-blue-confidence
122
116
  background-color: $white
117
+ color: $opd-blue-confidence
118
+
119
+ .primary__cta, .secondary__cta
120
+ &:hover
123
121
  box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
124
122
 
125
123
  .env__text.env--pwp
124
+ @include build-in(slide-from-left)
126
125
  border-radius: 6px 0 0 6px
127
126
  box-shadow: -12px 10px 10px -10px $grey
128
127
  right: 50%
129
128
  transform: translateX(0)
130
- @include build-in(slide-from-left)
131
129
  &:hover
132
130
  box-shadow: -20px 20px 20px -10px $grey
133
131
 
134
132
  .env__text.env--clinician
133
+ @include build-in(slide-from-right)
135
134
  border-radius: 0 6px 6px 0
136
135
  box-shadow: 12px 10px 10px -10px $grey
137
136
  left: 50%
138
137
  transform: translateX(0)
139
- @include build-in(slide-from-right)
140
138
  &:hover
141
139
  box-shadow: 20px 20px 20px -10px $grey
142
140
 
@@ -158,6 +156,7 @@ $landing-height: 100vh
158
156
  text-align: left
159
157
 
160
158
 
159
+
161
160
  @include slide-from-right
162
161
 
163
162
  @include slide-from-left
data/_sass/env/pwp.sass CHANGED
@@ -1,212 +1,73 @@
1
+ /* Last full read through 27/12/2020
2
+ *
3
+ *##############################################
4
+ *# pwp landing sass /_sass/env/pwp.sass
5
+ *##############################################
6
+ *
7
+ */
1
8
 
2
-
3
- .hero-image
4
- display: flex
5
- justify-content: center
6
- align-items: center
7
-
8
- .hero__pwp
9
- height: 90vh
10
- height: calc(var(--vh, 1vh) * 90)
9
+ .image__filter--blur
10
+ @include image-filter--blur
11
11
 
12
12
  .hero__overlay
13
- width: 100%
14
- height: 100%
15
- z-index: -1
16
-
17
- .hero__overlay--pwp
18
- background-color: $opd-orange-confidence
13
+ background-color: $env-primary
19
14
 
20
- .hero__image
21
- height: 100%
22
- width: 100%
23
- object-fit: cover
24
- object-position: center
15
+ .bg--env-100
16
+ background-color: $env-primary
25
17
 
26
- .hero__image--pwp
27
- opacity: .7
28
- filter: grayscale(.2) contrast(.2) brightness(1.6)
18
+ .bg--env-50
19
+ background-color: rgba($env-primary, .5)
29
20
 
30
- .hero__strap
31
- position: absolute
21
+ .hero__strap--env
32
22
  color: $env-secondary
33
- text-align: center
34
- padding-top: $navbar-height
35
23
 
36
24
  .hero__strap--start
37
25
  color: $env-primary
38
26
 
39
- .pwp__follow
40
- display: flex
41
- position: absolute
42
- bottom: 4.5vh
43
- width: 30px
44
- height: 11vh
27
+ .hero__follow
45
28
  background-color: $env-primary
46
- z-index: 2
47
- border-radius: 30px
48
- color: $white
49
- align-items: center
50
- justify-content: center
51
- &::after
52
- content: "\2193"
53
- font-size: 20px
54
- transform: scaleY(2)
55
-
56
-
57
- .augmented-image
58
- position: relative
59
- display: flex
60
-
61
- .svg__augment
62
- position: absolute
63
- top: 0
64
- left: 0
65
-
66
- .svg__augment--led
67
- fill: url(#augmentLED)
68
-
69
- #augmentLED
70
- stop:first-child
71
- stop-color: $pure-white
72
- stop-opacity: 1
73
-
74
- stop:last-child
75
- stop-color: $led
76
- stop-opacity: 1
77
-
78
- .svg__augment--pulse
79
- fill: $led
80
- animation: pulse-ring 2s cubic-bezier(.1,.74,.53,.91) infinite
81
-
82
- .strapline
83
- text-align: center
84
-
85
- .pwp--strap
86
- color: $env-secondary
87
- background-color: $opd-blue-trust
88
- padding: 5rem 1rem
89
- & > h2
90
- padding: 1rem 0
29
+ bottom: 4.5vh
91
30
 
92
- .segment-wrap
31
+ .segment__wrap
93
32
  display: flex
94
33
  flex-direction: column-reverse
95
34
  width: 100vw
96
35
 
97
- .augment--gaurentee
98
- width: 100%
99
- height: 100%
100
-
101
36
  .segment__gaurentee
102
- display: flex
37
+ @include logo-color($white)
103
38
  align-items: center
104
- justify-content: center
105
- flex-direction: column
106
- width: 100%
107
39
  background-color: $env-primary
108
40
  color: $white
41
+ display: flex
42
+ flex-direction: column
43
+ justify-content: center
109
44
  padding: 4rem 0
45
+ width: 100%
46
+
110
47
  .site__logo
111
- width: 60%
112
- .site__logo--curve,
113
- .site__logo--legvert,
114
- .site__logo--leg45,
115
- .site__logo--g,
116
- .site__logo--a,
117
- .site__logo__i,
118
- .site__logo--t,
119
- .site__logo--Q
120
- fill: $white
48
+ margin: 0 5vw
49
+ text-align: center
50
+ width: 100px
51
+
52
+ .segment__keywords
53
+ height: 50%
121
54
 
122
55
  .image--guarantee
123
- filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
56
+ @include image-filter-rotate
124
57
 
125
- .pwp--guarantee
58
+ .strap__guarantee
126
59
  border-top: solid 1px $soft-white
127
- width: 80%
128
60
  margin: 3rem 0
61
+ width: 80%
62
+
63
+ .strap--env-primary
64
+ background-color: $env-primary
65
+ color: $white
129
66
 
130
67
  .segment__keywords
131
68
  display: flex
132
69
  flex-direction: row
133
70
  flex-wrap: wrap
134
- background-color: $opd-blue-trust
135
- color: $env-secondary
136
71
  & > *
137
72
  padding: 3rem 0
138
73
  width: 50%
139
-
140
- .svg__labels
141
-
142
- & > *
143
- fill: $white
144
-
145
- & > .svg--elem
146
- transition: .4s ease-in-out
147
-
148
- & > .svg--circle
149
- stroke: rgba($pure-black, .2)
150
- stroke-width: 1
151
-
152
- & > .svg--line
153
- stroke: $white
154
- stroke-width: 1
155
-
156
- & > .svg--text
157
- font-size: $font-size * .8
158
-
159
- .svg__labels.hidden
160
-
161
- & > .svg--circle
162
- opacity: 0
163
-
164
- & > .svg--text
165
- opacity: 0
166
-
167
- .svg__labels.not-hidden
168
-
169
- & > .svg--circle
170
- opacity: 1
171
-
172
- & > .svg--text
173
- transform: translateX(0)
174
- opacity: 1
175
-
176
- & > .svg--line
177
- stroke-dashoffset: 0!important
178
-
179
-
180
- & > .trans-left
181
- animation: trans-in-left .6s ease-in-out
182
-
183
- & > .trans-right
184
- animation: trans-in-right .6s ease-in-out
185
-
186
- $svg-text-offset: 60px
187
-
188
- @keyframes trans-in-left
189
- 0%
190
- transform: translateX(-$svg-text-offset)
191
-
192
- 100%
193
- transform: translateX(0)
194
-
195
- @keyframes trans-in-right
196
- 0%
197
- transform: translateX($svg-text-offset)
198
-
199
- 100%
200
- transform: translateX(0)
201
-
202
- @keyframes pulse-ring
203
- 0%
204
- opacity: 1
205
- r: .1
206
-
207
- 50%
208
- opacity: .1
209
-
210
- 100%
211
- opacity: 0
212
- r: 3
data/_sass/footer_full.sass CHANGED
@@ -1,71 +1,83 @@
1
- .ft-wrapper
2
- background-color: $opd-blue-confidence
3
- background-image: url('/assets/img/content/footer-bg.svg')
4
- background-position: center
5
- background-size: cover
1
+ .ft__wrapper
2
+ @include footer-bg($opd-blue-confidence)
3
+ border-top: solid 1px $white
6
4
  color: $white
7
5
  display: flex
8
6
  flex-wrap: wrap
9
- margin-top: 10vh
10
- padding: 0
7
+ padding: 5vh 5vw
11
8
 
12
9
  .ft__head
13
10
  display: flex
14
- height: 10vh
15
- min-height: 10vh
16
- min-width: 100%
11
+ margin: 5vh 5vw
17
12
  width: 100%
18
13
 
19
14
  .ft__body
20
15
  display: flex
16
+ flex-direction: column-reverse
21
17
  flex-wrap: wrap
22
- margin: 0 2rem
23
- width: 100%
18
+ margin: 5vh 0
19
+ width: 90vw
24
20
 
25
- .ft__sitemap, .ft__contact
26
- min-width: 100%
27
- width: 100%
21
+ .ft__col
22
+ //border-left: solid 1px rgba($opd-blue-trust, .05)
23
+ box-sizing: border-box
24
+ padding: 0 5vw
25
+ width: 90vw
26
+
27
+ .ft__contact--list
28
+ display: block
29
+ font-size: $font-size * .8
30
+ list-style: none
31
+ padding: 0
32
+ text-decoration: none
33
+ li
34
+ line-height: 5rem
35
+ .address
36
+ line-height: 2.5rem
37
+
38
+ .ft__contact
39
+ .site__logo
40
+ @include logo-color($opd-blue-trust)
41
+ width: 40vw
42
+
43
+ .ft__sitemap
44
+ .ft__sitemap--env-header
45
+ font-size: $font-size * 1
46
+ font-weight: 600
47
+ .ft__sitemap--submenu
48
+ font-size: $font-size * .8
28
49
 
29
50
  .ft__base
30
- min-width: 100%
31
- width: 100%
51
+ align-items: center
52
+ border-top: solid 1px $opd-blue-trust
32
53
  display: flex
33
54
  flex-wrap: nowrap
34
55
  justify-content: space-between
35
- align-items: center
36
- border-top: solid 1px $opd-grey-neutral
37
-
38
- a, p
39
- padding-top: 0
56
+ min-width: 100%
57
+ width: 100%
58
+ a,
59
+ p
60
+ color: inherit
61
+ font-size: $font-size * .7
40
62
  margin: 0
41
- font-size: 1.2rem
63
+ padding: .5rem .1rem
42
64
  text-decoration: none
43
- color: inherit
44
65
 
45
- div
46
- a
47
- &::after
48
- content: " |"
49
-
50
- &:last-child
51
- &::after
52
- content: ""
53
-
54
- .ft__sitemap--menu
55
- position: relative
56
- float: left
57
- background: transparent
58
- margin: 0 1% 0 1%
66
+ .legal-links
67
+ display: flex
68
+ flex-direction: column
69
+ justify-content: space-between
59
70
 
60
71
  .ft__sitemap--header
61
- border-bottom: 1px solid $opd-grey-neutral
72
+ border-bottom: 1px solid $opd-blue-trust
62
73
  color: $pure-white
74
+ font-size: 2rem
75
+ font-weight: 600
76
+ margin-bottom: 3rem
77
+ width: 100%
63
78
 
64
- &:not(:first-child)
65
- &::before
66
- content: 'GaitQ '
67
-
68
- .ft__sitemap--menu, .ft__sitemap--submenu
79
+ .ft__sitemap--menu,
80
+ .ft__sitemap--submenu
69
81
  padding: 0
70
82
  width: 100%
71
83
 
@@ -73,10 +85,89 @@
73
85
  padding-bottom: 2rem
74
86
  li
75
87
  display: block
88
+ line-height: 3rem
76
89
  list-style: none
77
- padding: .8rem 1.2rem
78
- text-decoration: none
79
90
 
80
91
  .ft__sitemap--submenu li a
81
- color: $white
82
- text-decoration: none
92
+ color: $pure-white
93
+
94
+ .ft__sitemap--env-wrap
95
+ display: flex
96
+ flex-direction: column
97
+ flex-wrap: wrap
98
+
99
+ .ft__sitemap--env
100
+ width: 100%
101
+
102
+ @media screen and ( min-width: 768px )
103
+
104
+ .ft__wrapper
105
+ border: none
106
+
107
+ .ft__body
108
+ flex-direction: row
109
+
110
+ .ft__col
111
+ width: 30vw
112
+
113
+ .ft__col.ft__sitemap
114
+ width: 60vw
115
+
116
+ .ft__contact--list
117
+ font-size: $font-size * .7
118
+ li
119
+ line-height: 4rem
120
+ .address
121
+ line-height: 2rem
122
+
123
+ .ft__contact
124
+ .site__logo
125
+ width: 10vw
126
+
127
+ .ft__sitemap
128
+ .ft__sitemap--env-header
129
+ font-size: $font-size * .8
130
+ .ft__sitemap--submenu
131
+ font-size: $font-size * .7
132
+
133
+ .ft__base
134
+ a,
135
+ p
136
+ font-size: $font-size * .6
137
+
138
+ .legal-links
139
+ flex-direction: row
140
+ a
141
+ &::after
142
+ content: " |"
143
+
144
+ &:last-child
145
+ &::after
146
+ content: ""
147
+
148
+ .copyright
149
+ &::after
150
+ content: ' Limited'
151
+
152
+ .ft__sitemap--header
153
+ font-size: 1.8rem
154
+
155
+ .ft__sitemap--submenu li a
156
+ text-decoration: none
157
+
158
+ .ft__sitemap--submenu
159
+ li
160
+ transition: .2s ease-in-out
161
+
162
+ &:hover > li
163
+ opacity: .5
164
+
165
+ li
166
+ &:hover
167
+ opacity: 1
168
+
169
+ .ft__sitemap--env-wrap
170
+ flex-direction: row
171
+
172
+ .ft__sitemap--env
173
+ width: 50%