slow-steps 0.1.2 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
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