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/colors/_variables.sass CHANGED
@@ -1,15 +1,25 @@
1
- // Colour variables, accessible within _sass/
1
+ /*
2
+ *
3
+ *##############################################
4
+ *# Global colors /_sass/colors/_varibales.sass
5
+ *##############################################
6
+ *
7
+ */
2
8
 
3
9
  // Oxford Product Design
4
10
 
5
- $opd-blue-confidence: rgba(62, 86, 112, 1)
11
+ // #46627d
12
+ $opd-blue-confidence: rgba(70, 98, 125, 1)
6
13
 
7
- $opd-orange-confidence: rgba(210, 84, 75, 1)
14
+ // #da5e51
15
+ $opd-orange-confidence: rgba(218, 94, 81, 1)
8
16
 
9
- $opd-blue-trust: rgba(179, 201, 226, 1)
17
+ // #9CBBD2
18
+ $opd-blue-trust: rgba(174, 201, 229, 1)
10
19
 
11
20
  $opd-grey-neutral: rgba(178, 178, 178, 1)
12
21
 
22
+
13
23
  // Socials
14
24
 
15
25
  $twitter-primary: rgb(56, 161, 243)
@@ -20,6 +30,7 @@ $linkedin-primary: rgb(14, 118, 168)
20
30
 
21
31
  $instagram-primary: rgb(64, 93, 230)
22
32
 
33
+
23
34
  // General
24
35
 
25
36
  $pure-white: rgb(255, 255, 255)
@@ -38,6 +49,16 @@ $light-grey: rgb(220, 220, 220)
38
49
 
39
50
  $grey: rgb(130, 130, 130)
40
51
 
41
- $box-shadow-shade: rgba(0, 0, 0, .2)
52
+ $led: rgb(255, 70, 0)
53
+
54
+
55
+ // Object colors
56
+
57
+ $secondary-navbar-color: rgba(255, 255, 255, .8)
58
+
59
+
60
+ // Color set mixins
42
61
 
43
- $secondary_navbar_color: rgba(255, 255, 255, .3)
62
+ @mixin opd-blue-trust
63
+ background-color: $opd-blue-trust
64
+ color: $opd-blue-confidence
data/_sass/colors/breakpoints/{768.sass → 1024.sass} RENAMED
@@ -4,13 +4,13 @@
4
4
  // in assets/css/gaitq_env.sass we import this AFTER
5
5
  // @import 'colors/env/env.sass'
6
6
 
7
- @media screen and ( min-width: 768px )
7
+ @media screen and ( min-width: 1024px )
8
8
 
9
9
  .navbar
10
10
  background-color: $env-primary
11
11
 
12
12
  .nav-group-content
13
- background-color: $secondary_navbar_color
13
+ background-color: $secondary-navbar-color
14
14
 
15
15
  > *
16
16
  color: $env_primary
data/_sass/colors/env/_clinician.sass CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- // Colouring theme for pwp env
2
+ // Colouring theme for clinician env
3
3
 
4
4
  $env-primary: $opd-blue-confidence
5
5
 
data/_sass/colors/global.sass ADDED
@@ -0,0 +1,2 @@
1
+ .white
2
+ color: $white
data/_sass/env/breakpoints/768.sass CHANGED
@@ -1,79 +1,52 @@
1
1
 
2
2
  @media screen and ( min-width: 768px )
3
3
 
4
- .pwp__grid-wrap
4
+ .segment__wrap
5
5
  display: flex
6
6
  flex-wrap: no-wrap
7
7
  flex-direction: row
8
8
  width: 100vw
9
9
  max-height: 100vh
10
10
 
11
- .pwp__grid-col-l, .pwp__grid-col-r
11
+ .segment__left, .segment__right
12
12
  height: 100vh
13
13
  display: flex
14
14
  flex-direction: column
15
15
 
16
- .pwp__grid-col-l
16
+ .segment__left
17
17
  width: 60vw
18
18
 
19
- .pwp__grid-col-r
19
+ .segment__right
20
20
  width: 40vw
21
- svg
22
- display: none
23
- position: absolute
24
- //transform: translateY(-100%)
25
- //-height: 100vh
26
21
 
27
- .pwp__grid__text
28
- display: flex
29
- align-items: center
30
- justify-content: space-between
31
- text-align: left
22
+ .segment__gaurentee
32
23
  flex-direction: row
33
- width: 100%
34
24
  height: 50%
35
- background-color: $env-primary
36
- color: $white
25
+ justify-content: space-between
37
26
  padding: 0
27
+ text-align: left
38
28
 
39
29
  .site__logo
40
- display: flex
41
- justify-content: center
42
- align-items: center
43
- text-align: center
44
- width: 15vw
45
- margin: 0 5vw
46
- //padding: 8rem
30
+ width: 140px
47
31
 
48
- .pwp--guarantee
32
+ .strap__guarantee
49
33
  border: none
50
34
  border-left: solid 2px $pure-white
51
35
  width: 35vw
52
36
  margin: 0
53
37
  padding: 0 3rem
54
38
 
55
- .pwp__grid_img
39
+ .segment__keywords
56
40
  width: 100%
57
- min-height: 100vh
58
- right: 0
59
- background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
60
- background-size: cover
61
- background-position: center
62
- background-repeat: no-repeat
63
- padding: 0
64
- //padding-top: 100%
65
-
66
-
67
- .pwp__grid_keywords
68
- width: 100%
69
- height: 50%
70
41
  flex-direction: column
71
42
  align-items: center
72
43
  justify-content: center
73
44
 
74
- & > *
75
- padding: 2rem 0
76
-
77
45
  .clinician__strap
78
46
  h1
79
47
  display: block
48
+
49
+ .svg__labels
50
+
51
+ & > .svg--text
52
+ font-size: $font-size
data/_sass/env/clinician.sass CHANGED
@@ -1,150 +1,52 @@
1
-
2
-
3
- .clinician__hero
4
- align-items: center
5
- display: flex
6
- flex-direction: column
7
- height: 65vh
8
- height: calc(var(--vh, 1vh) * 65)
9
- justify-content: center
10
-
11
- .clinician__bg
12
- background-image: url($baseurl + 'assets/img/landing__clinician-mobile.jpg')
13
- background-size: cover
14
- filter: grayscale(1) contrast(.2) brightness(1.6)
15
- height: 100%
16
- opacity: .7
17
- position: relative
18
- width: 100%
19
-
20
- .clinician__overlay
1
+ /* Last full read through 28/12/2020
2
+ *
3
+ *##############################################
4
+ *# clinician landing /_sass/env/clinician.sass
5
+ *##############################################
6
+ *
7
+ */
8
+
9
+ .image__filter--blur
10
+ @include image-filter--blur
11
+
12
+ .hero__overlay
21
13
  background-color: $env-primary
22
- height: 70%
23
- position: relative
24
- width: 100%
25
14
 
26
- .clinician__strap
15
+ .bg--env-100
27
16
  background-color: $env-primary
28
- color: $white
29
- display: flex
30
- flex-direction: column
31
- height: 30%
32
- justify-content: space-around
33
- padding-bottom: 3vh
34
- text-align: center
35
- width: 100%
36
17
 
37
- h1
38
- // Hide on mobile
39
- display: none
18
+ .bg--env-50
19
+ background-color: rgba($env-primary, .5)
40
20
 
41
- .clinician__strap-start
42
- color: $env-primary
43
-
44
- .clinician__follow
45
- display: flex
46
- position: absolute
47
- top: 59.5vh
48
- width: 30px
49
- height: 11vh
21
+ .hero__follow
50
22
  background-color: $env-primary
51
- z-index: 2
52
- border-radius: 30px
53
- color: $white
54
- align-items: center
55
- justify-content: center
56
- &::after
57
- content: "\2193"
58
- font-size: 20px
59
- transform: scaleY(2)
60
-
61
-
62
- .clinician__hero__2
63
- display: block
64
- object-fit: cover
65
- height: 50vh
66
- width: 100vw
67
-
68
- .clinician__device--group
69
- background-image: url($baseurl + 'assets/img/pwp_device_group.png')
70
- svg
71
- position: absolute
72
- transform: translateY(-100%)
73
- //-height: 100vh
74
-
75
- .clinician__straps
76
- text-align: center
77
- //padding: 5rem 2rem
78
- background-position: center
79
- color: $env-secondary
80
- & > h2
81
- //padding: 2rem 0
82
-
83
- .clinician__device--strap
84
- background-color: $opd-blue-trust
85
- padding: 5rem 2rem
86
- & > h2
87
- padding: 2rem 0
23
+ top: 59.5vh
88
24
 
89
- .clinician__grid-wrap
25
+ .segment__keywords
26
+ align-items: center
90
27
  display: flex
91
- flex-direction: row
92
- flex-wrap: wrap
93
-
94
- width: 100vw
95
-
96
- .clinician__grid-col-l, .clinician__grid-col-r
28
+ flex-direction: column
97
29
  height: 100%
98
- width: 50%
30
+ justify-content: center
99
31
 
100
- .clinician__grid__text
101
- display: flex
102
- align-items: center
103
- justify-content: space-between
104
- flex-direction: column
105
- width: 100%
106
- background-color: $env-primary
107
- color: $white
108
- //height: 10rem
109
- padding: 5rem 0
32
+ & > *
33
+ padding: 5rem 0
34
+ width: 50%
110
35
 
111
- .clinician__grid--keywords
112
- padding: 1rem 0
36
+ .image--guarantee
37
+ @include image-filter-rotate
113
38
 
114
39
  .action__call
115
- width: 140px
116
- height: 40px
117
- background-color: $opd-blue-trust
118
- margin: 4rem 0 0
119
- border-radius: 20px
120
- font-size: 12px
121
- font-weight: 500
122
- display: flex
123
- align-items: center
124
- justify-content: center
125
- color: $black
126
- &::after
127
- content: "Get Involved"
128
40
 
41
+ &:before
42
+ background-color: rgba($env-secondary, .2)
129
43
 
44
+ span
45
+ color: $env-primary
130
46
 
131
- .clinician__grid_img
132
- background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
133
- background-size: cover
134
- background-repeat: no-repeat
135
- padding-top: 150%
136
- filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
137
-
138
- .clinician--guarantee
139
- border-top: solid 1px $soft-white
140
- width: 80%
141
- margin: 3rem 0
47
+ svg
48
+ stroke: $env-primary
142
49
 
143
- .clinician__grid_keywords
144
- display: flex
145
- flex-direction: row
146
- flex-wrap: wrap
147
- background-color: $opd-blue-trust
148
- & > *
149
- padding: 3rem 0
150
- width: 50%
50
+ &:hover
51
+ &::before
52
+ background-color: rgba($env-secondary, 1)
data/_sass/env/landing.sass CHANGED
@@ -1,12 +1,10 @@
1
- // Landing page with 768 breakpoint
2
-
3
- // Structurally we have one div, .landing-wrapper, wrapping 2 others, .landing__clinician and .landing__pwp
4
-
5
- @mixin reveal-landing-strap
6
- height: 30vh
7
- padding: 0 3rem
8
-
9
- // 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
+ */
10
8
 
11
9
  // Fallback for browsers that do not support Custom Properties
12
10
  $landing-height: 100vh
@@ -18,41 +16,36 @@ $landing-height: 100vh
18
16
  height: calc(var(--vh, 1vh) * 100)
19
17
 
20
18
  .page__half
21
- display: flex
22
19
  align-items: flex-end
20
+ display: flex
23
21
  height: 50vh
24
22
  width: 100vw
25
23
 
26
24
  .env__text
25
+ color: $white
27
26
  display: flex
28
27
  flex-direction: column
29
- color: $white
30
28
 
31
29
  .landing__strap
32
30
  display: none
33
31
 
34
32
  .landing__link
35
- text-decoration: none
36
33
  color: $white
34
+ text-decoration: none
37
35
 
38
36
  .landing__title
39
37
  font-size: $font-size
38
+ padding: 2rem 0
40
39
  text-align: center
41
40
  width: 100vw
42
- padding: 2rem 0
43
41
 
44
42
  .hero__overlay
45
- position: absolute
46
- width: 100%
43
+ // additional css from glocal
47
44
  height: 50%
48
- z-index: -1
45
+ position: absolute
49
46
 
50
- .hero__image
51
- height: 100%
52
- width: 100%
53
- object-fit: cover
54
- opacity: .7
55
- filter: grayscale(.2) contrast(.2) brightness(1.6)
47
+ .hero__filter
48
+ @include image-filter--mix
56
49
 
57
50
  .env--pwp
58
51
  background-color: $opd-orange-confidence
@@ -60,7 +53,6 @@ $landing-height: 100vh
60
53
  .env--clinician
61
54
  background-color: $opd-blue-confidence
62
55
 
63
-
64
56
  @media screen and ( min-width: 768px )
65
57
 
66
58
  .landing__page
@@ -77,23 +69,21 @@ $landing-height: 100vh
77
69
  top: 50vh
78
70
  transition: .6s ease-in-out
79
71
 
80
-
81
72
  &:focus-within > .landing__strap
82
73
  @include reveal-landing-strap
83
74
 
84
75
  &:hover > .landing__strap
85
76
  @include reveal-landing-strap
86
77
 
87
-
88
78
  .landing__strap
89
79
  display: flex
90
80
  flex-direction: column
91
- justify-content: space-around
92
81
  height: 0
82
+ justify-content: space-around
83
+ max-width: 400px
93
84
  overflow: hidden
94
85
  transition: .2s ease-in-out
95
86
  width: 40vw
96
- max-width: 400px
97
87
 
98
88
  .landing__cta
99
89
  display: flex
@@ -101,48 +91,50 @@ $landing-height: 100vh
101
91
  justify-content: space-between
102
92
 
103
93
  > a
104
- transition: .3s ease-in-out
105
- width: 40%
106
- padding: 1rem 0
107
- border-radius: 6px
108
- text-decoration: none
109
- text-align: center
110
94
  align-self: center
95
+ border-radius: 6px
111
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%
112
102
 
113
103
  .primary__cta
114
104
  background-color: $opd-blue-trust
115
105
  border: solid 1px $opd-blue-trust
116
106
  color: $opd-blue-confidence
117
107
  &:hover
118
- color: $opd-blue-trust
119
108
  background-color: transparent
120
- box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
109
+ color: $opd-blue-trust
121
110
 
122
111
  .secondary__cta
123
- background-color: none
112
+ background-color: transparent
124
113
  border: solid 1px $white
125
114
  color: $white
126
115
  &:hover
127
- color: $opd-blue-confidence
128
116
  background-color: $white
117
+ color: $opd-blue-confidence
118
+
119
+ .primary__cta, .secondary__cta
120
+ &:hover
129
121
  box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
130
122
 
131
123
  .env__text.env--pwp
124
+ @include build-in(slide-from-left)
132
125
  border-radius: 6px 0 0 6px
133
126
  box-shadow: -12px 10px 10px -10px $grey
134
127
  right: 50%
135
128
  transform: translateX(0)
136
- animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-left
137
129
  &:hover
138
130
  box-shadow: -20px 20px 20px -10px $grey
139
131
 
140
132
  .env__text.env--clinician
133
+ @include build-in(slide-from-right)
141
134
  border-radius: 0 6px 6px 0
142
135
  box-shadow: 12px 10px 10px -10px $grey
143
136
  left: 50%
144
137
  transform: translateX(0)
145
- animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-right
146
138
  &:hover
147
139
  box-shadow: 20px 20px 20px -10px $grey
148
140
 
@@ -163,18 +155,8 @@ $landing-height: 100vh
163
155
  .landing__title
164
156
  text-align: left
165
157
 
166
- @keyframes slide-from-right
167
- 0%
168
- transform: translateX(50vw)
169
- opacity: 0
170
- 100%
171
- transform: translateX(0)
172
- opacity: 1
173
158
 
174
- @keyframes slide-from-left
175
- 0%
176
- transform: translateX(-50vw)
177
- opacity: 0
178
- 100%
179
- transform: translateX(0)
180
- opacity: 1
159
+
160
+ @include slide-from-right
161
+
162
+ @include slide-from-left