slow-steps 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/footer/footer_full.html +42 -18
  3. data/_layouts/default.html +1 -1
  4. data/_layouts/env/clinician.html +96 -25
  5. data/_layouts/env/landing.html +35 -18
  6. data/_layouts/env/pwp.html +26 -14
  7. data/_layouts/feed.html +1 -1
  8. data/_sass/_mixins.sass +57 -9
  9. data/_sass/_variables.sass +2 -0
  10. data/_sass/about.sass +1 -0
  11. data/_sass/colors/_variables.sass +19 -3
  12. data/_sass/colors/breakpoints/768.sass +1 -1
  13. data/_sass/env/breakpoints/768.sass +5 -46
  14. data/_sass/env/clinician.sass +70 -133
  15. data/_sass/env/landing.sass +32 -33
  16. data/_sass/env/pwp.sass +31 -175
  17. data/_sass/footer_full.sass +77 -33
  18. data/_sass/global.sass +166 -0
  19. data/_sass/navigation/env/landing.sass +1 -10
  20. data/_sass/navigation/env/pwp.sass +1 -14
  21. data/assets/css/gaitq_global.sass +3 -3
  22. data/assets/js/svg_aos.js +3 -3
  23. data/assets/js/svg_text_width.js +9 -1
  24. metadata +2 -3
  25. 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
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,68 @@
1
-
2
-
3
- .hero-image
4
- display: flex
5
- justify-content: center
6
- align-items: center
7
-
8
- .hero__pwp
1
+ /* Last full read through 27/12/2020
2
+ *
3
+ *##############################################
4
+ *# pwp landing sass /_sass/env/pwp.sass
5
+ *##############################################
6
+ *
7
+ */
8
+
9
+ .hero
9
10
  height: 90vh
10
11
  height: calc(var(--vh, 1vh) * 90)
11
12
 
12
13
  .hero__overlay
13
- width: 100%
14
- height: 100%
15
- z-index: -1
16
-
17
- .hero__overlay--pwp
18
- background-color: $opd-orange-confidence
19
-
20
- .hero__image
21
- height: 100%
22
- width: 100%
23
- object-fit: cover
24
- object-position: center
25
-
26
- .hero__image--pwp
27
- opacity: .7
28
- filter: grayscale(.2) contrast(.2) brightness(1.6)
14
+ background-color: $env-primary
29
15
 
30
16
  .hero__strap
31
- position: absolute
32
17
  color: $env-secondary
33
- text-align: center
34
- padding-top: $navbar-height
35
18
 
36
19
  .hero__strap--start
37
20
  color: $env-primary
38
21
 
39
- .pwp__follow
40
- display: flex
41
- position: absolute
42
- bottom: 4.5vh
43
- width: 30px
44
- height: 11vh
22
+ .hero__follow
45
23
  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
24
+ bottom: 4.5vh
91
25
 
92
- .segment-wrap
26
+ .segment__wrap
93
27
  display: flex
94
28
  flex-direction: column-reverse
95
29
  width: 100vw
96
30
 
97
- .augment--gaurentee
98
- width: 100%
99
- height: 100%
100
-
101
31
  .segment__gaurentee
102
- display: flex
32
+ @include logo-color($white)
103
33
  align-items: center
104
- justify-content: center
105
- flex-direction: column
106
- width: 100%
107
34
  background-color: $env-primary
108
35
  color: $white
36
+ display: flex
37
+ flex-direction: column
38
+ justify-content: center
109
39
  padding: 4rem 0
40
+ width: 100%
41
+
110
42
  .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
43
+ margin: 0 5vw
44
+ text-align: center
45
+ width: 100px
46
+
47
+ .segment__keywords
48
+ height: 50%
121
49
 
122
50
  .image--guarantee
123
51
  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
124
52
 
125
- .pwp--guarantee
53
+ .strap__guarantee
126
54
  border-top: solid 1px $soft-white
127
- width: 80%
128
55
  margin: 3rem 0
56
+ width: 80%
57
+
58
+ .strap--env-primary
59
+ background-color: $env-primary
60
+ color: $white
129
61
 
130
62
  .segment__keywords
131
63
  display: flex
132
64
  flex-direction: row
133
65
  flex-wrap: wrap
134
- background-color: $opd-blue-trust
135
- color: $env-secondary
136
66
  & > *
137
67
  padding: 3rem 0
138
68
  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,4 +1,4 @@
1
- .ft-wrapper
1
+ .ft__wrapper
2
2
  background-color: $opd-blue-confidence
3
3
  background-image: url('/assets/img/content/footer-bg.svg')
4
4
  background-position: center
@@ -6,25 +6,57 @@
6
6
  color: $white
7
7
  display: flex
8
8
  flex-wrap: wrap
9
- margin-top: 10vh
10
- padding: 0
9
+ //margin-top: 10vh
10
+ padding: 5vh 5vw
11
11
 
12
12
  .ft__head
13
13
  display: flex
14
- height: 10vh
15
- min-height: 10vh
16
- min-width: 100%
14
+ //height: 10vh
15
+ //min-height: 10vh
16
+ //min-width: 100%
17
17
  width: 100%
18
+ margin: 5vh 5vw
18
19
 
19
20
  .ft__body
20
21
  display: flex
21
22
  flex-wrap: wrap
22
- margin: 0 2rem
23
- width: 100%
23
+ margin: 5vh 0
24
+ width: 90vw
24
25
 
25
- .ft__sitemap, .ft__contact
26
- min-width: 100%
27
- width: 100%
26
+ .ft__col-3
27
+ width: 30vw
28
+ padding: 0 5vw
29
+ border-left: solid 1px rgba($opd-blue-trust, .05)
30
+ box-sizing: border-box
31
+
32
+ .ft__col-3.ft__sitemap
33
+ width: 60vw
34
+
35
+ .ft__contact--list
36
+
37
+ display: block
38
+ list-style: none
39
+ padding: 0
40
+ text-decoration: none
41
+ font-size: $font-size * .7
42
+ li
43
+ line-height: 4rem
44
+ .address
45
+ line-height: 2rem
46
+
47
+ .ft__contact
48
+
49
+ .site__logo
50
+ width: 10vw
51
+ @include logo-color($opd-blue-trust)
52
+
53
+ .ft__sitemap
54
+ //min-width: 100%
55
+ .ft__sitemap--env-header
56
+ font-size: $font-size * .8
57
+ font-weight: 600
58
+ .ft__sitemap--submenu
59
+ font-size: $font-size * .6
28
60
 
29
61
  .ft__base
30
62
  min-width: 100%
@@ -32,38 +64,40 @@
32
64
  display: flex
33
65
  flex-wrap: nowrap
34
66
  justify-content: space-between
35
- align-items: center
36
- border-top: solid 1px $opd-grey-neutral
67
+ //align-items: center
68
+ border-top: solid 1px $opd-blue-trust
37
69
 
38
70
  a, p
39
- padding-top: 0
71
+ padding: 1rem .1rem
40
72
  margin: 0
41
- font-size: 1.2rem
73
+ font-size: $font-size *.6
42
74
  text-decoration: none
43
75
  color: inherit
44
76
 
45
- div
46
- a
77
+ .legal-links
78
+ display: flex
79
+ flex-direction: row
80
+ justify-content: space-between
81
+ a
82
+ &::after
83
+ content: " |"
84
+
85
+ &:last-child
47
86
  &::after
48
- content: " |"
87
+ content: ""
49
88
 
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%
59
89
 
60
90
  .ft__sitemap--header
61
- border-bottom: 1px solid $opd-grey-neutral
91
+ font-size: 1.8rem
92
+ font-weight: 600
93
+ border-bottom: 1px solid $opd-blue-trust
94
+ margin-bottom: 3rem
62
95
  color: $pure-white
96
+ width: 100%
63
97
 
64
- &:not(:first-child)
65
- &::before
66
- content: 'GaitQ '
98
+ .ft__sitemap--menu
99
+ //display: flex
100
+ //flex-direction: row
67
101
 
68
102
  .ft__sitemap--menu, .ft__sitemap--submenu
69
103
  padding: 0
@@ -74,9 +108,19 @@
74
108
  li
75
109
  display: block
76
110
  list-style: none
77
- padding: .8rem 1.2rem
111
+ line-height: 3rem
112
+ //padding: .8rem 1.2rem
78
113
  text-decoration: none
79
114
 
80
115
  .ft__sitemap--submenu li a
81
- color: $white
116
+ color: $pure-white
82
117
  text-decoration: none
118
+
119
+ .ft__sitemap--env-wrap
120
+ display: flex
121
+ flex-wrap: wrap
122
+ flex-direction: row
123
+
124
+ .ft__sitemap--env
125
+
126
+ width: 50%