slow-steps 0.1.2 → 0.1.3

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.
@@ -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
@@ -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
@@ -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%