slow-steps 0.1.1 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
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
data/_sass/env/pwp.sass CHANGED
@@ -1,181 +1,73 @@
1
+ /* Last full read through 27/12/2020
2
+ *
3
+ *##############################################
4
+ *# pwp landing sass /_sass/env/pwp.sass
5
+ *##############################################
6
+ *
7
+ */
8
+
9
+ .image__filter--blur
10
+ @include image-filter--blur
11
+
12
+ .hero__overlay
13
+ background-color: $env-primary
1
14
 
2
-
3
- .pwp__mast
4
- display: flex
5
- justify-content: center
6
- align-items: center
7
- height: 90vh
8
- height: calc( var(--vh, 1vh) * 90 )
9
-
10
- .pwp__bg
11
- position: relative
12
- height: 100%
13
- width: 100%
14
- background-image: url($baseurl + 'assets/img/landing__pwp-mobile.jpg')
15
- background-size: cover
16
- opacity: .7
17
- filter: grayscale(1) contrast(.2) brightness(1.6)
18
-
19
- .pwp__overlay
20
- position: relative
21
- height: 100%
22
- width: 100%
15
+ .bg--env-100
23
16
  background-color: $env-primary
24
17
 
25
- .pwp--strap
26
- position: absolute
27
- color: $env-secondary
28
- text-align: center
29
- padding-top: $navbar-height
18
+ .bg--env-50
19
+ background-color: rgba($env-primary, .5)
30
20
 
21
+ .hero__strap--env
22
+ color: $env-secondary
31
23
 
32
- .pwp--strap-start
24
+ .hero__strap--start
33
25
  color: $env-primary
34
26
 
35
- .pwp__follow
36
- display: flex
37
- position: absolute
38
- bottom: 4.5vh
39
- width: 30px
40
- height: 11vh
27
+ .hero__follow
41
28
  background-color: $env-primary
42
- z-index: 2
43
- border-radius: 30px
44
- color: $white
45
- align-items: center
46
- justify-content: center
47
- &::after
48
- content: "\2193"
49
- font-size: 20px
50
- transform: scaleY(2)
51
-
52
- .pwp__device--img
53
- background-size: cover
54
- background-repeat: no-repeat
55
- width: 100%
56
- height: 0
57
- padding-top: 62.5%
58
- z-index: 99999
59
-
60
- .pwp__device--docked
61
- background-image: url($baseurl + 'assets/img/pwp_device_group_docked.png')
62
- svg
63
- position: absolute
64
- transform: translateY(-100%)
65
-
66
- .pwp__device--group
67
- background-image: url($baseurl + 'assets/img/pwp_device_group.png')
68
- svg
69
- position: absolute
70
- transform: translateY(-100%)
71
- //-height: 100vh
72
-
73
- .pwp__straps
74
- text-align: center
75
- //padding: 5rem 2rem
76
- background-position: center
77
- color: $env-secondary
78
-
79
- .pwp__device--strap
80
- background-color: $opd-blue-trust
81
- padding: 5rem 2rem
82
- & > h2
83
- padding: 2rem 0
29
+ bottom: 4.5vh
84
30
 
85
- .pwp__grid-wrap
31
+ .segment__wrap
86
32
  display: flex
87
33
  flex-direction: column-reverse
88
34
  width: 100vw
89
35
 
90
- .pwp__grid-col-r
91
- svg
92
- display: none
93
- position: absolute
94
-
95
- .pwp__grid__text
96
- display: flex
36
+ .segment__gaurentee
37
+ @include logo-color($white)
97
38
  align-items: center
98
- justify-content: center
99
- flex-direction: column
100
- width: 100%
101
39
  background-color: $env-primary
102
40
  color: $white
41
+ display: flex
42
+ flex-direction: column
43
+ justify-content: center
103
44
  padding: 4rem 0
45
+ width: 100%
46
+
104
47
  .site__logo
105
- width: 60%
106
- .site__logo--curve,
107
- .site__logo--legvert,
108
- .site__logo--leg45,
109
- .site__logo--g,
110
- .site__logo--a,
111
- .site__logo__i,
112
- .site__logo--t,
113
- .site__logo--Q
114
- fill: $white
48
+ margin: 0 5vw
49
+ text-align: center
50
+ width: 100px
51
+
52
+ .segment__keywords
53
+ height: 50%
115
54
 
116
- .pwp__grid_img
117
- background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
118
- background-size: cover
119
- background-repeat: no-repeat
120
- padding-top: 150%
121
- filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
55
+ .image--guarantee
56
+ @include image-filter-rotate
122
57
 
123
- .pwp--guarantee
58
+ .strap__guarantee
124
59
  border-top: solid 1px $soft-white
125
- width: 80%
126
60
  margin: 3rem 0
61
+ width: 80%
62
+
63
+ .strap--env-primary
64
+ background-color: $env-primary
65
+ color: $white
127
66
 
128
- .pwp__grid_keywords
67
+ .segment__keywords
129
68
  display: flex
130
69
  flex-direction: row
131
70
  flex-wrap: wrap
132
- background-color: $opd-blue-trust
133
71
  & > *
134
72
  padding: 3rem 0
135
73
  width: 50%
136
-
137
-
138
- .pulsating-circle
139
- position: absolute
140
- left: 75.5%
141
- top: 52.5%
142
- transform: translateX(-50%) translateY(-50%)
143
- width: 8px
144
- height: 8px
145
-
146
- &::before
147
- content: ''
148
- position: relative
149
- display: block
150
- width: 300%
151
- height: 300%
152
- box-sizing: border-box
153
- margin-left: -100%
154
- margin-top: -100%
155
- border-radius: 100px
156
- background-color: rgb(252, 133, 133)
157
- animation: pulse-ring 2s cubic-bezier(.01,.56,.2,.2) infinite
158
-
159
- &::after
160
- content: ''
161
- position: absolute
162
- left: 0
163
- top: 0
164
- display: block
165
- width: 100%
166
- height: 100%
167
- background: radial-gradient(rgb(255, 176, 176), rgb(255, 107, 107))
168
- border-radius: 100px
169
-
170
-
171
- @keyframes pulse-ring
172
- 0%
173
- opacity: 1
174
- transform: scale(.3)
175
-
176
- 80%
177
- opacity: 0
178
-
179
- 100%
180
- opacity: 0
181
- transform: scale(1)
data/_sass/feed.sass CHANGED
@@ -1,14 +1,17 @@
1
1
  .feed__head
2
- margin-top: ($navbar-height + $secondary-navbar-height)*1.5
2
+ margin-top: ($navbar-height + $secondary-navbar-height) * 1.5
3
3
  width: 100vw
4
4
 
5
5
  .feed__title
6
+ width: 80vw
7
+ max-width: 1200px
6
8
  margin: auto
7
- text-align: center
9
+
8
10
 
9
11
  .post__feed
10
12
  display: flex
11
- justify-content: space-between
13
+ justify-content: space-around
14
+ flex-wrap: wrap
12
15
  width: 80vw
13
16
  max-width: 1200px
14
17
  margin: 10vh auto
@@ -16,43 +19,60 @@
16
19
  .feed__card
17
20
  display: flex
18
21
  flex-direction: column
19
- width: 30vw
22
+ width: 200px
20
23
  max-width: 360px
21
- height: 220px
22
- margin-bottom: 10vh
24
+ //height: 220px
25
+ margin: 20px
23
26
  overflow: hidden
24
- border-radius: 12px
25
- box-shadow: 0 0 6px rgba($env-primary,.8)
26
- transition: .8s ease-in-out
27
+ border-radius: 0
28
+ //box-shadow: 0 0 6px rgba($env-primary,.8)
29
+
27
30
 
28
31
  &:hover
29
- box-shadow: 2px 2px 10px rgba($env-primary,1)
30
32
  .feed__card--image
31
- transform: scale(1.1)
33
+ transform: scale(1.2)
34
+ .feed__card__image
35
+ box-shadow: 0 10px 6px -5px rgba($env-primary,.6)
36
+ transition: 1s ease-in-out
32
37
  .feed__card--title
33
- font-weight: 400
34
- color: $pure-white
38
+ color: $pure-black
39
+ transition: .4s ease-in-out
40
+
41
+ .feed__card__image
42
+ width: 100%
43
+ height: 112.5px
44
+ overflow: hidden
45
+ box-shadow: 0 0 6px rgba($env-primary,.8)
46
+ transition: .6s ease-in-out
35
47
 
36
48
  .feed__card--image
37
- display: block
38
49
  object-fit: cover
39
50
  object-position: top
40
51
  width: 100%
41
52
  height: 100%
42
- overflow: hidden
43
- transition: .8s ease-in-out
53
+ transition: .6s ease-in-out
44
54
 
45
55
  .feed__card--text
46
- background-color: $env-primary
47
- padding: 2rem 1rem
48
- color: $white
49
- z-index: 1
50
- font-size: $font-size * .7
56
+ padding: 2rem 0
57
+ color: $opd-blue-confidence
58
+ font-size: $font-size
51
59
 
52
60
  .feed__card--link
53
61
  text-decoration: none
54
62
  color: inherit
55
- text-transform: uppercase
63
+
64
+
65
+ .feed__card--title
66
+ transition: .2s ease-in-out
67
+ font-weight: 600
56
68
 
57
69
  .feed__card--meta
58
- font-size: $font-size * .7
70
+ font-size: $font-size * .5
71
+ padding: 1rem 0
72
+ & > span
73
+ font-weight: 600
74
+
75
+ @media screen and ( min-width: 768px )
76
+
77
+ .feed__card--meta
78
+ font-size: $font-size * .7
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%