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.
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/_mixins.sass CHANGED
@@ -1,31 +1,79 @@
1
+ /* Last full read through 27/12/2020
2
+ *
3
+ *##############################################
4
+ *# Global mixins /_sass/_mixins.sass
5
+ *##############################################
6
+ *
7
+ */
1
8
 
2
-
3
- // Landing page animations
4
-
5
- // hover and focus animation action
9
+ // Landing page animations, hover and focus
6
10
 
7
11
  @mixin reveal-landing-strap
8
12
  height: 30vh
9
13
  padding: 0 3rem
10
14
 
11
- // build in's
15
+ // Snappy build function, see /_sass/_variables.sass for $bezier-snap
12
16
  @mixin build-in($name)
13
17
  animation: .8s $bezier-snap 0s 1 $name
14
18
 
19
+ // Keyframes
15
20
  @mixin slide-from-left
16
21
  @keyframes slide-from-left
17
22
  0%
18
- transform: translateX(-50vw)
19
23
  opacity: 0
24
+ transform: translateX(-50vw)
25
+
20
26
  100%
21
- transform: translateX(0)
22
27
  opacity: 1
28
+ transform: translateX(0)
29
+
23
30
 
24
31
  @mixin slide-from-right
25
32
  @keyframes slide-from-right
26
33
  0%
27
- transform: translateX(50vw)
28
34
  opacity: 0
35
+ transform: translateX(50vw)
36
+
29
37
  100%
30
- transform: translateX(0)
31
38
  opacity: 1
39
+ transform: translateX(0)
40
+
41
+
42
+
43
+ // Global image filter for most hero images
44
+ @mixin image-filter
45
+ filter: grayscale(.2) contrast(.2) brightness(1.6)
46
+ opacity: .7
47
+
48
+
49
+ // Logo using the OPD primary colors
50
+ @mixin logo-primary-colors
51
+ .site__logo--group
52
+ .site__logo--curve
53
+ fill: $opd-orange-confidence
54
+ .site__logo--legvert
55
+ fill: $opd-blue-confidence
56
+ .site__logo--leg45
57
+ fill: $opd-blue-trust
58
+ .site__logo--g,
59
+ .site__logo--a,
60
+ .site__logo__i,
61
+ .site__logo--t
62
+ fill: $opd-blue-confidence
63
+ .site__logo--Q
64
+ fill: $opd-orange-confidence
65
+
66
+
67
+
68
+ // Logo single color function
69
+ @mixin logo-color($color)
70
+ .site__logo--group,
71
+ .site__logo--curve,
72
+ .site__logo--legvert,
73
+ .site__logo--leg45,
74
+ .site__logo--g,
75
+ .site__logo--a,
76
+ .site__logo__i,
77
+ .site__logo--t,
78
+ .site__logo--Q
79
+ fill: $color
data/_sass/_variables.sass CHANGED
@@ -1,3 +1,5 @@
1
1
  // Gllobal variables != color or typography
2
2
 
3
3
  $bezier-snap: cubic-bezier(.75, .86, .88, .62)
4
+
5
+ $bezier-pulse: cubic-bezier(.1, .74, .53, .91)
data/_sass/about.sass CHANGED
@@ -66,6 +66,7 @@
66
66
  color: $opd-blue-confidence
67
67
  padding-bottom: 2rem
68
68
  transition: .4s ease-out
69
+ cursor: pointer
69
70
  i
70
71
  font-size: $font-size * 1.2
71
72
  transition: .4s ease-out
data/_sass/colors/_variables.sass CHANGED
@@ -1,4 +1,10 @@
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
 
@@ -10,6 +16,7 @@ $opd-blue-trust: rgba(179, 201, 226, 1)
10
16
 
11
17
  $opd-grey-neutral: rgba(178, 178, 178, 1)
12
18
 
19
+
13
20
  // Socials
14
21
 
15
22
  $twitter-primary: rgb(56, 161, 243)
@@ -20,6 +27,7 @@ $linkedin-primary: rgb(14, 118, 168)
20
27
 
21
28
  $instagram-primary: rgb(64, 93, 230)
22
29
 
30
+
23
31
  // General
24
32
 
25
33
  $pure-white: rgb(255, 255, 255)
@@ -40,6 +48,14 @@ $grey: rgb(130, 130, 130)
40
48
 
41
49
  $led: rgb(255, 70, 0)
42
50
 
43
- $box-shadow-shade: rgba(0, 0, 0, .2)
44
51
 
45
- $secondary_navbar_color: rgba(255, 255, 255, .3)
52
+ // Object colors
53
+
54
+ $secondary-navbar-color: rgba(255, 255, 255, .3)
55
+
56
+
57
+ // Color set mixins
58
+
59
+ @mixin opd-blue-trust
60
+ background-color: $opd-blue-trust
61
+ color: $opd-blue-confidence
data/_sass/colors/breakpoints/768.sass CHANGED
@@ -10,7 +10,7 @@
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/env/breakpoints/768.sass CHANGED
@@ -1,17 +1,7 @@
1
1
 
2
2
  @media screen and ( min-width: 768px )
3
3
 
4
- .pwp--strap
5
- color: $env-secondary
6
- background-color: $opd-blue-trust
7
- padding: 10rem 5rem
8
- & > h2
9
- padding-bottom: 5rem
10
- & > p
11
- max-width: 800px
12
- margin: 0 auto
13
-
14
- .segment-wrap
4
+ .segment__wrap
15
5
  display: flex
16
6
  flex-wrap: no-wrap
17
7
  flex-direction: row
@@ -29,60 +19,29 @@
29
19
  .segment__right
30
20
  width: 40vw
31
21
 
32
- .augment--gaurentee
33
- width: 40vw
34
- height: 100vh
35
-
36
22
  .segment__gaurentee
37
- display: flex
38
- align-items: center
39
- justify-content: space-between
40
- text-align: left
41
23
  flex-direction: row
42
- width: 100%
43
24
  height: 50%
44
- background-color: $env-primary
45
- color: $white
25
+ justify-content: space-between
46
26
  padding: 0
27
+ text-align: left
47
28
 
48
29
  .site__logo
49
- display: flex
50
- justify-content: center
51
- align-items: center
52
- text-align: center
53
- width: 15vw
54
- margin: 0 5vw
55
- //padding: 8rem
30
+ width: 140px
56
31
 
57
- .pwp--guarantee
32
+ .strap__guarantee
58
33
  border: none
59
34
  border-left: solid 2px $pure-white
60
35
  width: 35vw
61
36
  margin: 0
62
37
  padding: 0 3rem
63
38
 
64
- .pwp__grid_img
65
- width: 100%
66
- min-height: 100vh
67
- right: 0
68
- background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
69
- background-size: cover
70
- background-position: center
71
- background-repeat: no-repeat
72
- padding: 0
73
- //padding-top: 100%
74
-
75
-
76
39
  .segment__keywords
77
40
  width: 100%
78
- height: 50%
79
41
  flex-direction: column
80
42
  align-items: center
81
43
  justify-content: center
82
44
 
83
- & > *
84
- //padding: 2rem 0
85
-
86
45
  .clinician__strap
87
46
  h1
88
47
  display: block
data/_sass/env/clinician.sass CHANGED
@@ -1,150 +1,87 @@
1
-
2
-
3
- .clinician__hero
4
- align-items: center
5
- display: flex
6
- flex-direction: column
1
+ /* Last full read through 28/12/2020
2
+ *
3
+ *##############################################
4
+ *# clinician landing /_sass/env/clinician.sass
5
+ *##############################################
6
+ *
7
+ */
8
+
9
+ .hero
7
10
  height: 65vh
8
11
  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
12
 
20
- .clinician__overlay
13
+ .hero__overlay
21
14
  background-color: $env-primary
22
- height: 70%
23
- position: relative
24
- width: 100%
25
-
26
- .clinician__strap
27
- 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
-
37
- h1
38
- // Hide on mobile
39
- display: none
40
15
 
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
16
+ .hero__strap
17
+ align-self: flex-end
50
18
  background-color: $env-primary
51
- z-index: 2
52
- border-radius: 30px
53
19
  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
20
+ padding-bottom: 5.5vh
66
21
  width: 100vw
67
22
 
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
88
-
89
- .clinician__grid-wrap
90
- display: flex
91
- flex-direction: row
92
- flex-wrap: wrap
93
-
94
- width: 100vw
95
-
96
- .clinician__grid-col-l, .clinician__grid-col-r
97
- height: 100%
98
- width: 50%
99
-
100
- .clinician__grid__text
101
- display: flex
102
- align-items: center
103
- justify-content: space-between
104
- flex-direction: column
105
- width: 100%
23
+ .hero__follow
106
24
  background-color: $env-primary
107
- color: $white
108
- //height: 10rem
109
- padding: 5rem 0
110
-
111
- .clinician__grid--keywords
112
- padding: 1rem 0
25
+ top: 59.5vh
113
26
 
114
- .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
27
+ .segment__keywords
123
28
  align-items: center
29
+ display: flex
30
+ flex-direction: column
31
+ height: 100%
124
32
  justify-content: center
125
- color: $black
126
- &::after
127
- content: "Get Involved"
128
-
129
33
 
34
+ & > *
35
+ padding: 5rem 0
36
+ width: 50%
130
37
 
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)
38
+ // This is basically a button and should to be centralised
39
+ .action__call
40
+ bottom: 0
41
+ font-size: $font-size * .8
42
+ margin: -100px auto
43
+ padding: 2rem
44
+ position: relative
45
+ text-decoration: none
46
+ transition: .2s ease
47
+
48
+ &:before
49
+ background-color: rgba($env-secondary, .2)
50
+ border-radius: 3rem
51
+ content: ''
52
+ display: block
53
+ height: 6rem
54
+ left: 0
55
+ position: absolute
56
+ top: 0
57
+ transition: .2s ease
58
+ width: 6rem
137
59
 
138
- .clinician--guarantee
139
- border-top: solid 1px $soft-white
140
- width: 80%
141
- margin: 3rem 0
60
+ span
61
+ color: $env-primary
62
+ font-weight: 900
63
+ position: relative
142
64
 
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%
65
+ svg
66
+ fill: none
67
+ margin-left: 10px
68
+ position: relative
69
+ stroke: $env-primary
70
+ stroke-linecap: round
71
+ stroke-linejoin: round
72
+ stroke-width: 2
73
+ top: 0
74
+ transform: translateX(-10px)
75
+ transition: .2s ease
76
+
77
+ &:hover
78
+ &::before
79
+ background-color: rgba($env-secondary, 1)
80
+ width: 100%
81
+
82
+ svg
83
+ stroke: $white
84
+ transform: translateX(0)
85
+
86
+ span
87
+ color: $white