slow-steps 0.2.1 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/_config.yml +3 -3
  4. data/_includes/contact-form.html +1 -1
  5. data/_includes/footer/footer.html +64 -7
  6. data/_includes/footer/footer_redesign.html +107 -0
  7. data/_includes/forms/mc-register.html +124 -110
  8. data/_includes/functions/calc-svg-coord.html +2 -0
  9. data/_includes/functions/reposition-svg-labels.html +44 -0
  10. data/_includes/head/descriptors/og-meta.html +0 -1
  11. data/_includes/head/descriptors/structured-data.html +3 -3
  12. data/_includes/head/descriptors/twitter-meta.html +1 -1
  13. data/_includes/{google-analytics.html → head/google-analytics.html} +9 -2
  14. data/_includes/head/head.html +13 -32
  15. data/_includes/head/stylesheets.html +20 -0
  16. data/_includes/image-post.html +1 -1
  17. data/_includes/navigation/global.html +56 -57
  18. data/_includes/scripts.html +10 -9
  19. data/_includes/vimeoPlayer.html +1 -2
  20. data/_layouts/about.html +6 -1
  21. data/_layouts/default.html +1 -1
  22. data/_layouts/env/clinician.html +6 -6
  23. data/_layouts/env/landing.html +4 -4
  24. data/_layouts/env/pwp.html +3 -3
  25. data/_layouts/faq.html +3 -0
  26. data/_layouts/feed.html +1 -1
  27. data/_layouts/post.html +1 -1
  28. data/_sass/_colors/README.md +27 -0
  29. data/_sass/_colors/_clinician.sass +7 -0
  30. data/_sass/_colors/_mixins.sass +14 -0
  31. data/_sass/_colors/_pwp.sass +6 -0
  32. data/_sass/{colors → _colors}/_variables.sass +9 -16
  33. data/_sass/_colors/collection.sass +3 -0
  34. data/_sass/_functions.sass +9 -0
  35. data/_sass/_mixins.sass +20 -8
  36. data/_sass/about.sass +9 -6
  37. data/_sass/breakpoints/about.sass +15 -6
  38. data/_sass/collage.sass +2 -1
  39. data/_sass/contact.sass +10 -41
  40. data/_sass/env/breakpoints/768.sass +16 -11
  41. data/_sass/env/clinician.sass +12 -7
  42. data/_sass/env/landing.sass +25 -10
  43. data/_sass/env/pwp.sass +11 -2
  44. data/_sass/faq.sass +11 -3
  45. data/_sass/feed.sass +4 -3
  46. data/_sass/footer.sass +174 -14
  47. data/_sass/footer_redesign.sass +349 -0
  48. data/_sass/forms/mc-forms.sass +12 -3
  49. data/_sass/global.sass +68 -28
  50. data/_sass/navigation/README.md +35 -0
  51. data/_sass/navigation/_variables.sass +8 -9
  52. data/_sass/navigation/{global.sass → base.sass} +34 -24
  53. data/_sass/navigation/breakpoints/1024.sass +48 -21
  54. data/_sass/navigation/burger.sass +9 -3
  55. data/_sass/navigation/clinician.sass +31 -0
  56. data/_sass/navigation/collection.sass +9 -0
  57. data/_sass/navigation/colors.sass +8 -0
  58. data/_sass/navigation/no-nav.sass +32 -0
  59. data/_sass/navigation/{env/pwp.sass → pwp.sass} +12 -16
  60. data/_sass/post.sass +1 -1
  61. data/_sass/typography/_variables.sass +5 -1
  62. data/_sass/typography/resets.sass +2 -2
  63. data/assets/css/env/gaitq_clinician.sass +24 -8
  64. data/assets/css/env/gaitq_landing.sass +21 -3
  65. data/assets/css/env/gaitq_pwp.sass +28 -8
  66. data/assets/css/gaitq_errors.sass +21 -3
  67. data/assets/css/gaitq_post.sass +5 -5
  68. data/assets/js/mobile-nav-slider.js +1 -1
  69. data/assets/js/svg_text_width.js +4 -4
  70. metadata +20 -31
  71. data/_includes/footer/footer_full.html +0 -79
  72. data/_includes/functions/pull_page_args.html +0 -31
  73. data/_includes/head/env/conditional.html +0 -2
  74. data/_sass/colors/breakpoints/1024.sass +0 -20
  75. data/_sass/colors/burger.sass +0 -22
  76. data/_sass/colors/env/_clinician.sass +0 -16
  77. data/_sass/colors/env/_pwp.sass +0 -16
  78. data/_sass/colors/global.sass +0 -2
  79. data/_sass/colors/navigation.sass +0 -13
  80. data/_sass/footer_full.sass +0 -173
  81. data/_sass/navigation/env/clinician.sass +0 -38
  82. data/_sass/navigation/env/landing.sass +0 -19
  83. data/assets/css/gaitq_about.sass +0 -22
  84. data/assets/css/gaitq_feed.sass +0 -12
  85. data/assets/css/gaitq_global.sass +0 -34
  86. data/assets/fonts/.DS_Store +0 -0
  87. data/assets/fonts/Quicksand/OFL.txt +0 -93
  88. data/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf +0 -0
  89. data/assets/fonts/Quicksand/README.txt +0 -67
  90. data/assets/fonts/Quicksand/static/Quicksand-Bold.ttf +0 -0
  91. data/assets/fonts/Quicksand/static/Quicksand-Light.ttf +0 -0
  92. data/assets/fonts/Quicksand/static/Quicksand-Medium.ttf +0 -0
  93. data/assets/fonts/Quicksand/static/Quicksand-Regular.ttf +0 -0
  94. data/assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf +0 -0
  95. data/assets/fonts/fontawesome-free-5.11.2-web/.DS_Store +0 -0
data/_sass/env/breakpoints/768.sass CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  .segment__wrap
5
5
  display: flex
6
- flex-wrap: no-wrap
6
+ flex-wrap: nowrap
7
7
  flex-direction: row
8
8
  width: 100vw
9
9
  max-height: 100vh
@@ -12,35 +12,40 @@
12
12
  height: 100vh
13
13
  display: flex
14
14
  flex-direction: column
15
+ justify-content: center
15
16
 
16
17
  .segment__left
17
- width: 60vw
18
+ width: 40vw
18
19
 
19
20
  .segment__right
20
- width: 40vw
21
+ width: 60vw
21
22
 
22
23
  .segment__gaurentee
23
- flex-direction: row
24
+ //flex-direction: row
24
25
  height: 50%
25
- justify-content: space-between
26
- padding: 0
27
- text-align: left
26
+ justify-content: space-around
27
+ //padding: 0
28
+ //text-align: left
28
29
 
29
30
  .site__logo
30
- width: 140px
31
+ height: 10vh
31
32
 
32
33
  .strap__guarantee
33
34
  border: none
34
- border-left: solid 2px $pure-white
35
+ //border-left: solid 2px $pure-white
35
36
  width: 35vw
36
37
  margin: 0
37
38
  padding: 0 3rem
38
39
 
39
40
  .segment__keywords
40
41
  width: 100%
42
+ height: 60%
43
+ max-height: 800px
41
44
  flex-direction: column
42
- align-items: center
43
- justify-content: center
45
+ flex-wrap: nowrap
46
+ padding: 10rem 0
47
+ & > *
48
+ padding: 0
44
49
 
45
50
  .clinician__strap
46
51
  h1
data/_sass/env/clinician.sass CHANGED
@@ -5,6 +5,7 @@
5
5
  *##############################################
6
6
  *
7
7
  */
8
+ $hero-follow-bottom: 59.5vh
8
9
 
9
10
  .image__filter--blur
10
11
  @include image-filter--blur
@@ -20,21 +21,21 @@
20
21
 
21
22
  .hero__follow
22
23
  background-color: $env-primary
23
- top: 59.5vh
24
+ top: $hero-follow-bottom
25
+ top: calc(var(--vh, 1vh) * #{strip-unit($hero-follow-bottom)})
24
26
 
25
27
  .segment__keywords
26
- align-items: center
27
28
  display: flex
28
29
  flex-direction: column
29
- height: 100%
30
- justify-content: center
31
-
30
+ align-items: center
31
+ justify-content: space-around
32
+ padding: 3rem 2rem
32
33
  & > *
33
- padding: 5rem 0
34
- width: 50%
34
+ padding: 2rem 0
35
35
 
36
36
  .image--guarantee
37
37
  @include image-filter-rotate
38
+ height: 100vh
38
39
 
39
40
  .action__call
40
41
 
@@ -44,9 +45,13 @@
44
45
  span
45
46
  color: $env-primary
46
47
 
48
+
47
49
  svg
48
50
  stroke: $env-primary
49
51
 
50
52
  &:hover
51
53
  &::before
52
54
  background-color: rgba($env-secondary, 1)
55
+
56
+ .segment__right
57
+ background-color: $image-blend
data/_sass/env/landing.sass CHANGED
@@ -9,11 +9,23 @@
9
9
  // Fallback for browsers that do not support Custom Properties
10
10
  $landing-height: 100vh
11
11
 
12
+ body
13
+ animation: fadeInAnimation ease 1s
14
+ animation-iteration-count: 1
15
+ animation-fill-mode: forwards
16
+
17
+ @keyframes fadeInAnimation
18
+ 0%
19
+ opacity: 0
20
+
21
+ 100%
22
+ opacity: 1
23
+
12
24
  .landing__page
13
25
  display: flex
14
26
  flex-direction: column
15
27
  height: $landing-height
16
- height: calc(var(--vh, 1vh) * 100)
28
+ height: calc(var(--vh, 1vh) * #{strip-unit($landing-height)})
17
29
 
18
30
  .page__half
19
31
  align-items: flex-end
@@ -48,10 +60,10 @@ $landing-height: 100vh
48
60
  @include image-filter--mix
49
61
 
50
62
  .env--pwp
51
- background-color: $opd-orange-confidence
63
+ background-color: $opd-coral
52
64
 
53
65
  .env--clinician
54
- background-color: $opd-blue-confidence
66
+ background-color: $opd-blue
55
67
 
56
68
  @media screen and ( min-width: 768px )
57
69
 
@@ -76,19 +88,22 @@ $landing-height: 100vh
76
88
  @include reveal-landing-strap
77
89
 
78
90
  .landing__strap
91
+ @include default-trans
79
92
  display: flex
80
93
  flex-direction: column
81
- height: 0
94
+ max-height: 0
82
95
  justify-content: space-around
83
96
  max-width: 400px
84
97
  overflow: hidden
85
- transition: .2s ease-in-out
86
98
  width: 40vw
99
+ padding: 0 3rem
87
100
 
88
101
  .landing__cta
102
+ font-size: $sm-font-size
89
103
  display: flex
90
104
  flex-direction: row
91
105
  justify-content: space-between
106
+ padding: $font-size 0
92
107
 
93
108
  > a
94
109
  align-self: center
@@ -101,12 +116,12 @@ $landing-height: 100vh
101
116
  width: 40%
102
117
 
103
118
  .primary__cta
104
- background-color: $opd-blue-trust
105
- border: solid 1px $opd-blue-trust
106
- color: $opd-blue-confidence
119
+ background-color: $opd-light-blue
120
+ border: solid 1px $opd-light-blue
121
+ color: $opd-blue
107
122
  &:hover
108
123
  background-color: transparent
109
- color: $opd-blue-trust
124
+ color: $opd-light-blue
110
125
 
111
126
  .secondary__cta
112
127
  background-color: transparent
@@ -114,7 +129,7 @@ $landing-height: 100vh
114
129
  color: $white
115
130
  &:hover
116
131
  background-color: $white
117
- color: $opd-blue-confidence
132
+ color: $opd-blue
118
133
 
119
134
  .primary__cta, .secondary__cta
120
135
  &:hover
data/_sass/env/pwp.sass CHANGED
@@ -6,6 +6,8 @@
6
6
  *
7
7
  */
8
8
 
9
+ $hero-follow-top: 4.5vh
10
+
9
11
  .image__filter--blur
10
12
  @include image-filter--blur
11
13
 
@@ -26,7 +28,8 @@
26
28
 
27
29
  .hero__follow
28
30
  background-color: $env-primary
29
- bottom: 4.5vh
31
+ bottom: $hero-follow-top
32
+ bottom: calc(var(--vh, 1vh) * #{strip-unit($hero-follow-top)})
30
33
 
31
34
  .segment__wrap
32
35
  display: flex
@@ -47,13 +50,14 @@
47
50
  .site__logo
48
51
  margin: 0 5vw
49
52
  text-align: center
50
- width: 100px
53
+ height: 10vh
51
54
 
52
55
  .segment__keywords
53
56
  height: 50%
54
57
 
55
58
  .image--guarantee
56
59
  @include image-filter-rotate
60
+ height: 100vh
57
61
 
58
62
  .strap__guarantee
59
63
  border-top: solid 1px $soft-white
@@ -68,6 +72,11 @@
68
72
  display: flex
69
73
  flex-direction: row
70
74
  flex-wrap: wrap
75
+ justify-content: space-around
76
+ align-items: center
71
77
  & > *
72
78
  padding: 3rem 0
73
79
  width: 50%
80
+
81
+ .segment__right
82
+ background-color: $image-blend
data/_sass/faq.sass CHANGED
@@ -8,20 +8,21 @@
8
8
  border: solid 1px rgba($env-primary, .4)
9
9
  margin: 2rem auto
10
10
  border-radius: 4px
11
- width: 60%
11
+ width: 90%
12
+ z-index: 9997
12
13
 
13
14
  .faq__question
14
15
  display: flex
15
16
  justify-content: space-between
16
17
  width: 100%
17
18
  padding: 1rem 0
18
- background-color: rgba($opd-blue-trust, .2)
19
+ background-color: rgba($opd-light-blue, .2)
19
20
  border-radius: 4px
20
21
  cursor: pointer
21
22
  transition: .2s ease-in-out
22
23
 
23
24
  &:hover
24
- background-color: rgba($opd-blue-trust, 1)
25
+ background-color: rgba($opd-light-blue, 1)
25
26
 
26
27
  & > .faq__question--title
27
28
  padding-left: 1rem
@@ -31,6 +32,7 @@
31
32
  transition: .4s ease-in-out
32
33
 
33
34
  .faq__answer
35
+ height: 0
34
36
  max-height: 0
35
37
  overflow: hidden
36
38
  transition: .4s ease-in-out
@@ -39,6 +41,7 @@
39
41
  padding: 1rem
40
42
 
41
43
  .faq__answer--reveal
44
+ height: 100%
42
45
  max-height: 1000px
43
46
  transition: .6s ease-in-out
44
47
 
@@ -60,3 +63,8 @@
60
63
  text-align: center
61
64
  padding: 4rem 0
62
65
  color: $white
66
+
67
+ @media screen and ( min-width: 1024px )
68
+ .faq__panel
69
+ width: 60%
70
+ max-width: 800px
data/_sass/feed.sass CHANGED
@@ -6,6 +6,7 @@
6
6
  width: 80vw
7
7
  max-width: 1200px
8
8
  margin: auto
9
+ color: $env-primary
9
10
 
10
11
 
11
12
  .post__feed
@@ -54,7 +55,7 @@
54
55
 
55
56
  .feed__card--text
56
57
  padding: 2rem 0
57
- color: $opd-blue-confidence
58
+ color: $opd-blue
58
59
  font-size: $font-size
59
60
 
60
61
  .feed__card--link
@@ -64,13 +65,13 @@
64
65
 
65
66
  .feed__card--title
66
67
  transition: .2s ease-in-out
67
- font-weight: 600
68
+ font-weight: $heavy-font
68
69
 
69
70
  .feed__card--meta
70
71
  font-size: $font-size * .5
71
72
  padding: 0
72
73
  & > span
73
- font-weight: 600
74
+ font-weight: $heavy-font
74
75
 
75
76
  @media screen and ( min-width: 768px )
76
77
 
data/_sass/footer.sass CHANGED
@@ -1,23 +1,183 @@
1
- .ft__wrap
2
- max-width: 100vw
3
- background-color: $opd-grey-neutral
4
- padding: 3rem 2rem
1
+
2
+
3
+ .ft__wrapper
4
+ @include footer-bg($opd-blue)
5
+ border-top: solid 1px $white
6
+ color: $white
7
+ display: flex
8
+ flex-wrap: wrap
9
+ padding: 5vh 5vw
10
+
11
+ .social-media-link
12
+ font-size: $font-size
13
+ padding-right: $sm-font-size
14
+ //color: $white
15
+
16
+
17
+ .ft__head
18
+ display: flex
19
+ margin: 5vh 5vw
20
+ width: 100%
21
+
22
+ .ft__body
23
+ display: flex
24
+ flex-direction: column-reverse
25
+ flex-wrap: wrap
26
+ margin: 5vh 0
27
+ width: 90vw
28
+
29
+ .ft__col
30
+ //border-left: solid 1px rgba($opd-light-blue, .05)
31
+ box-sizing: border-box
32
+ padding: 0 5vw
33
+ width: 90vw
34
+
35
+ .ft__contact--list
36
+ display: block
37
+ font-size: $font-size * .8
38
+ list-style: none
39
+ padding: 0
40
+ text-decoration: none
41
+ li
42
+ line-height: 5rem
43
+ .address
44
+ line-height: 2.5rem
45
+
46
+ .ft__contact
47
+ .site__logo
48
+ @include logo-color($white)
49
+ width: 40vw
50
+
51
+ .ft__sitemap
52
+ .ft__sitemap--env-header
53
+ font-size: $font-size * 1
54
+ font-weight: $heavy-font
55
+ .ft__sitemap--submenu
56
+ font-size: $font-size * .8
5
57
 
6
58
  .ft__base
7
- font-size: 1rem
59
+ align-items: center
60
+ border-top: solid 1px $opd-light-blue
8
61
  display: flex
9
- flex-direction: row
10
- justify-content: space-between
62
+ flex-wrap: wrap
11
63
 
12
- .legal-links, .owner-links
64
+ justify-content: space-around
65
+ min-width: 100%
66
+ width: 100%
67
+ a,
68
+ p
69
+ color: inherit
70
+ font-size: $font-size * .7
71
+ margin: 0
72
+ padding: .5rem .1rem
73
+ text-decoration: none
74
+
75
+ .legal-links
13
76
  display: flex
14
77
  flex-direction: column
15
78
  justify-content: space-between
16
- a
79
+
80
+ .ft__sitemap--header
81
+ border-bottom: 1px solid $opd-light-blue
82
+ color: $pure-white
83
+ font-size: 2rem
84
+ font-weight: $heavy-font
85
+ margin-bottom: 3rem
86
+ width: 100%
87
+
88
+ .ft__sitemap--menu,
89
+ .ft__sitemap--submenu
90
+ padding: 0
91
+ width: 100%
92
+
93
+ .ft__sitemap--submenu
94
+ padding-bottom: 2rem
95
+ li
96
+ display: block
97
+ line-height: 3rem
98
+ list-style: none
99
+
100
+ .ft--link
101
+ color: $pure-white
102
+
103
+ .ft__sitemap--env-wrap
104
+ display: flex
105
+ flex-direction: column
106
+ flex-wrap: wrap
107
+
108
+ .ft__sitemap--env
109
+ width: 100%
110
+
111
+ @media screen and ( min-width: 768px )
112
+
113
+ .ft__wrapper
114
+ border: none
115
+
116
+ .ft__body
117
+ flex-direction: row
118
+
119
+ .ft__col
120
+ width: 20vw
121
+
122
+ .ft__col.ft__sitemap
123
+ width: 60vw
124
+
125
+ .ft__contact--list
126
+ font-size: $font-size * .8
127
+ li
128
+ line-height: 4rem
129
+ .address
130
+ line-height: 2rem
131
+
132
+ .ft__contact
133
+ .site__logo
134
+ width: 10vw
135
+
136
+ .ft__sitemap
137
+ .ft__sitemap--env-header
138
+ font-size: $font-size * .9
139
+ .ft__sitemap--submenu
140
+ font-size: $font-size * .8
141
+
142
+ .ft__base
143
+ justify-content: space-between
144
+ a,
145
+ p
146
+ font-size: $font-size * .7
147
+
148
+ .legal-links
149
+ flex-direction: row
150
+ a
151
+ &::after
152
+ content: " |"
153
+
154
+ &:last-child
155
+ &::after
156
+ content: ""
157
+
158
+ .copyright
159
+ &::after
160
+ content: ' Ltd.'
161
+
162
+ .ft__sitemap--header
163
+ font-size: 1.8rem
164
+
165
+ .ft__sitemap--submenu li a
17
166
  text-decoration: none
18
- color: $black
19
- a, p
20
- padding: .4rem 0
21
167
 
22
- .legal-links
23
- text-align: right
168
+ .ft__sitemap--submenu
169
+ li
170
+ transition: .2s ease-in-out
171
+
172
+ &:hover > li
173
+ opacity: .5
174
+
175
+ li
176
+ &:hover
177
+ opacity: 1
178
+
179
+ .ft__sitemap--env-wrap
180
+ flex-direction: row
181
+
182
+ .ft__sitemap--env
183
+ width: 50%