slow-steps 0.1.13 → 0.3.2
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.
- checksums.yaml +4 -4
- data/_config.yml +1 -1
- data/_includes/footer/footer_full.html +1 -1
- data/_includes/functions/calc-svg-coord.html +18 -23
- data/_includes/functions/pull_page_args.html +3 -3
- data/_includes/head/head.html +9 -30
- data/_includes/head/stylesheets.html +20 -0
- data/_includes/image-post.html +12 -0
- data/_includes/image.html +50 -5
- data/_includes/navigation/global.html +56 -57
- data/_includes/scripts.html +9 -8
- data/_includes/vimeoPlayer.html +1 -2
- data/_layouts/about.html +7 -2
- data/_layouts/contact.html +1 -1
- data/_layouts/env/clinician.html +12 -29
- data/_layouts/env/landing.html +4 -4
- data/_layouts/env/pwp.html +13 -54
- data/_layouts/faq.html +1 -1
- data/_layouts/feed.html +1 -2
- data/_layouts/full-width.html +25 -2
- data/_sass/_colors/README.md +27 -0
- data/_sass/_colors/_clinician.sass +7 -0
- data/_sass/_colors/_mixins.sass +14 -0
- data/_sass/_colors/_pwp.sass +6 -0
- data/_sass/{colors → _colors}/_variables.sass +8 -17
- data/_sass/_colors/collection.sass +3 -0
- data/_sass/_mixins.sass +14 -5
- data/_sass/about.sass +7 -6
- data/_sass/breakpoints/about.sass +4 -4
- data/_sass/collage.sass +1 -0
- data/_sass/contact.sass +8 -39
- data/_sass/env/clinician.sass +1 -0
- data/_sass/env/landing.sass +7 -7
- data/_sass/env/pwp.sass +1 -0
- data/_sass/faq.sass +2 -2
- data/_sass/feed.sass +17 -5
- data/_sass/footer.sass +1 -1
- data/_sass/footer_full.sass +18 -8
- data/_sass/forms/mc-forms.sass +3 -3
- data/_sass/global.sass +37 -35
- data/_sass/navigation/README.md +35 -0
- data/_sass/navigation/_variables.sass +5 -6
- data/_sass/navigation/{global.sass → base.sass} +20 -20
- data/_sass/navigation/breakpoints/1024.sass +32 -15
- data/_sass/navigation/burger.sass +9 -3
- data/_sass/navigation/clinician.sass +31 -0
- data/_sass/navigation/collection.sass +9 -0
- data/_sass/navigation/colors.sass +8 -0
- data/_sass/navigation/no-nav.sass +32 -0
- data/_sass/navigation/{env/pwp.sass → pwp.sass} +12 -16
- data/_sass/post.sass +2 -7
- data/_sass/typography/_variables.sass +4 -0
- data/assets/css/env/gaitq_clinician.sass +24 -8
- data/assets/css/env/gaitq_landing.sass +21 -3
- data/assets/css/env/gaitq_pwp.sass +28 -8
- data/assets/css/gaitq_errors.sass +21 -3
- data/assets/css/gaitq_post.sass +5 -5
- data/assets/images/augmented_image.png +0 -0
- metadata +20 -29
- data/_includes/head/env/conditional.html +0 -2
- data/_sass/colors/breakpoints/1024.sass +0 -20
- data/_sass/colors/burger.sass +0 -22
- data/_sass/colors/env/_clinician.sass +0 -16
- data/_sass/colors/env/_pwp.sass +0 -16
- data/_sass/colors/global.sass +0 -2
- data/_sass/colors/navigation.sass +0 -13
- data/_sass/navigation/env/clinician.sass +0 -38
- data/_sass/navigation/env/landing.sass +0 -19
- data/assets/css/gaitq_about.sass +0 -22
- data/assets/css/gaitq_feed.sass +0 -12
- data/assets/css/gaitq_global.sass +0 -34
- data/assets/fonts/.DS_Store +0 -0
- data/assets/fonts/Quicksand/OFL.txt +0 -93
- data/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf +0 -0
- data/assets/fonts/Quicksand/README.txt +0 -67
- data/assets/fonts/Quicksand/static/Quicksand-Bold.ttf +0 -0
- data/assets/fonts/Quicksand/static/Quicksand-Light.ttf +0 -0
- data/assets/fonts/Quicksand/static/Quicksand-Medium.ttf +0 -0
- data/assets/fonts/Quicksand/static/Quicksand-Regular.ttf +0 -0
- data/assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf +0 -0
- data/assets/fonts/fontawesome-free-5.11.2-web/.DS_Store +0 -0
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
.team__head
|
|
27
27
|
border-bottom: none
|
|
28
|
-
border-right: solid 1px $opd-blue
|
|
28
|
+
border-right: solid 1px $opd-blue
|
|
29
29
|
display: block
|
|
30
30
|
height: auto
|
|
31
31
|
width: auto
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
padding: 2rem 4rem 2rem 2rem
|
|
50
50
|
transform: rotate(0)
|
|
51
51
|
white-space: nowrap
|
|
52
|
-
color: $opd-blue
|
|
52
|
+
color: $opd-blue
|
|
53
53
|
border: solid 1px rgba($env-primary, 0)
|
|
54
54
|
margin: 2rem 0
|
|
55
55
|
&:not(.team__title--active)
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
|
|
72
72
|
.team__members
|
|
73
73
|
//padding: 10rem
|
|
74
|
-
color: $opd-blue
|
|
74
|
+
color: $opd-blue
|
|
75
75
|
background-color: $white
|
|
76
76
|
|
|
77
77
|
.team__title--active
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
padding-right: 1rem !important
|
|
81
81
|
color: $env-primary !important
|
|
82
82
|
background-color: $white
|
|
83
|
-
border: solid 1px $opd-blue
|
|
83
|
+
border: solid 1px $opd-blue
|
|
84
84
|
border-right: solid 1px $white
|
|
85
85
|
transform: translateX(1px)
|
|
86
86
|
text-align: right
|
data/_sass/collage.sass
CHANGED
data/_sass/contact.sass
CHANGED
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
padding: 0 1rem
|
|
18
18
|
|
|
19
19
|
.form-instruction
|
|
20
|
-
padding-bottom:
|
|
20
|
+
padding-bottom: $font-size
|
|
21
|
+
padding-top: $lg-font-size
|
|
22
|
+
color: $env-primary
|
|
21
23
|
|
|
22
24
|
.contact-form
|
|
23
25
|
width: 100%
|
|
@@ -30,7 +32,7 @@
|
|
|
30
32
|
padding: 2rem
|
|
31
33
|
label
|
|
32
34
|
font-size: $font-size * .8
|
|
33
|
-
color: $
|
|
35
|
+
color: $env-secondary
|
|
34
36
|
|
|
35
37
|
.google-map
|
|
36
38
|
width: 100%
|
|
@@ -52,13 +54,15 @@
|
|
|
52
54
|
.fas
|
|
53
55
|
color: $env-primary
|
|
54
56
|
a
|
|
55
|
-
color: $
|
|
57
|
+
color: $env-secondary
|
|
56
58
|
transition: all .2s ease-in-out
|
|
57
59
|
//text-decoration: none
|
|
58
60
|
&:hover
|
|
59
61
|
color: $env-primary
|
|
60
62
|
.social-media-link
|
|
61
|
-
font-size: $font-size
|
|
63
|
+
font-size: $lg-font-size
|
|
64
|
+
color: $env-secondary
|
|
65
|
+
padding-right: $lg-font-size
|
|
62
66
|
|
|
63
67
|
.form-element
|
|
64
68
|
width: 100%
|
|
@@ -87,22 +91,6 @@
|
|
|
87
91
|
width: auto
|
|
88
92
|
position: relative
|
|
89
93
|
|
|
90
|
-
.social-media
|
|
91
|
-
display: flex
|
|
92
|
-
justify-content: center
|
|
93
|
-
padding: 0
|
|
94
|
-
margin: 0
|
|
95
|
-
z-index: 9999
|
|
96
|
-
|
|
97
|
-
.social-media-item
|
|
98
|
-
list-style: none
|
|
99
|
-
padding-right: 2rem
|
|
100
|
-
|
|
101
|
-
.social-media-link
|
|
102
|
-
color: $grey
|
|
103
|
-
transition: all .3s ease-in-out
|
|
104
|
-
|
|
105
|
-
|
|
106
94
|
|
|
107
95
|
@media screen and ( min-width: 1024px )
|
|
108
96
|
|
|
@@ -120,9 +108,6 @@
|
|
|
120
108
|
width: 60%
|
|
121
109
|
padding: 0 5rem
|
|
122
110
|
|
|
123
|
-
.form-instruction
|
|
124
|
-
padding-bottom: 2rem
|
|
125
|
-
|
|
126
111
|
.contact-form
|
|
127
112
|
width: 100%
|
|
128
113
|
display: block
|
|
@@ -155,7 +140,6 @@
|
|
|
155
140
|
.fas
|
|
156
141
|
color: $env-primary
|
|
157
142
|
a
|
|
158
|
-
color: $black
|
|
159
143
|
transition: all .2s ease-in-out
|
|
160
144
|
text-decoration: none
|
|
161
145
|
&:hover
|
|
@@ -210,18 +194,3 @@
|
|
|
210
194
|
&::after
|
|
211
195
|
opacity: 1
|
|
212
196
|
transition: all 0.3s
|
|
213
|
-
|
|
214
|
-
.social-media
|
|
215
|
-
display: flex
|
|
216
|
-
justify-content: flex-start
|
|
217
|
-
padding: 0
|
|
218
|
-
margin: 0
|
|
219
|
-
z-index: 9999
|
|
220
|
-
|
|
221
|
-
.social-media-item
|
|
222
|
-
list-style: none
|
|
223
|
-
padding-right: 2rem
|
|
224
|
-
|
|
225
|
-
.social-media-link
|
|
226
|
-
color: $grey
|
|
227
|
-
transition: all .3s ease-in-out
|
data/_sass/env/clinician.sass
CHANGED
data/_sass/env/landing.sass
CHANGED
|
@@ -48,10 +48,10 @@ $landing-height: 100vh
|
|
|
48
48
|
@include image-filter--mix
|
|
49
49
|
|
|
50
50
|
.env--pwp
|
|
51
|
-
background-color: $opd-
|
|
51
|
+
background-color: $opd-coral
|
|
52
52
|
|
|
53
53
|
.env--clinician
|
|
54
|
-
background-color: $opd-blue
|
|
54
|
+
background-color: $opd-blue
|
|
55
55
|
|
|
56
56
|
@media screen and ( min-width: 768px )
|
|
57
57
|
|
|
@@ -101,12 +101,12 @@ $landing-height: 100vh
|
|
|
101
101
|
width: 40%
|
|
102
102
|
|
|
103
103
|
.primary__cta
|
|
104
|
-
background-color: $opd-blue
|
|
105
|
-
border: solid 1px $opd-blue
|
|
106
|
-
color: $opd-blue
|
|
104
|
+
background-color: $opd-light-blue
|
|
105
|
+
border: solid 1px $opd-light-blue
|
|
106
|
+
color: $opd-blue
|
|
107
107
|
&:hover
|
|
108
108
|
background-color: transparent
|
|
109
|
-
color: $opd-blue
|
|
109
|
+
color: $opd-light-blue
|
|
110
110
|
|
|
111
111
|
.secondary__cta
|
|
112
112
|
background-color: transparent
|
|
@@ -114,7 +114,7 @@ $landing-height: 100vh
|
|
|
114
114
|
color: $white
|
|
115
115
|
&:hover
|
|
116
116
|
background-color: $white
|
|
117
|
-
color: $opd-blue
|
|
117
|
+
color: $opd-blue
|
|
118
118
|
|
|
119
119
|
.primary__cta, .secondary__cta
|
|
120
120
|
&:hover
|
data/_sass/env/pwp.sass
CHANGED
data/_sass/faq.sass
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
justify-content: space-between
|
|
16
16
|
width: 100%
|
|
17
17
|
padding: 1rem 0
|
|
18
|
-
background-color: rgba($opd-blue
|
|
18
|
+
background-color: rgba($opd-light-blue, .2)
|
|
19
19
|
border-radius: 4px
|
|
20
20
|
cursor: pointer
|
|
21
21
|
transition: .2s ease-in-out
|
|
22
22
|
|
|
23
23
|
&:hover
|
|
24
|
-
background-color: rgba($opd-blue
|
|
24
|
+
background-color: rgba($opd-light-blue, 1)
|
|
25
25
|
|
|
26
26
|
& > .faq__question--title
|
|
27
27
|
padding-left: 1rem
|
data/_sass/feed.sass
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
width: 80vw
|
|
7
7
|
max-width: 1200px
|
|
8
8
|
margin: auto
|
|
9
|
-
|
|
9
|
+
color: $env-primary
|
|
10
|
+
|
|
10
11
|
|
|
11
12
|
.post__feed
|
|
12
13
|
display: flex
|
|
@@ -19,10 +20,10 @@
|
|
|
19
20
|
.feed__card
|
|
20
21
|
display: flex
|
|
21
22
|
flex-direction: column
|
|
22
|
-
width: 200px
|
|
23
|
+
//width: 200px
|
|
23
24
|
max-width: 360px
|
|
24
25
|
//height: 220px
|
|
25
|
-
margin: 20px
|
|
26
|
+
//margin: 20px
|
|
26
27
|
overflow: hidden
|
|
27
28
|
border-radius: 0
|
|
28
29
|
//box-shadow: 0 0 6px rgba($env-primary,.8)
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
|
|
55
56
|
.feed__card--text
|
|
56
57
|
padding: 2rem 0
|
|
57
|
-
color: $opd-blue
|
|
58
|
+
color: $opd-blue
|
|
58
59
|
font-size: $font-size
|
|
59
60
|
|
|
60
61
|
.feed__card--link
|
|
@@ -68,7 +69,7 @@
|
|
|
68
69
|
|
|
69
70
|
.feed__card--meta
|
|
70
71
|
font-size: $font-size * .5
|
|
71
|
-
padding:
|
|
72
|
+
padding: 0
|
|
72
73
|
& > span
|
|
73
74
|
font-weight: 600
|
|
74
75
|
|
|
@@ -76,3 +77,14 @@
|
|
|
76
77
|
|
|
77
78
|
.feed__card--meta
|
|
78
79
|
font-size: $font-size * .7
|
|
80
|
+
|
|
81
|
+
.feed__card
|
|
82
|
+
display: flex
|
|
83
|
+
flex-direction: column
|
|
84
|
+
width: 200px
|
|
85
|
+
max-width: 360px
|
|
86
|
+
//height: 220px
|
|
87
|
+
margin: 20px
|
|
88
|
+
overflow: hidden
|
|
89
|
+
border-radius: 0
|
|
90
|
+
//box-shadow: 0 0 6px rgba($env-primary,.8)
|
data/_sass/footer.sass
CHANGED
data/_sass/footer_full.sass
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
1
3
|
.ft__wrapper
|
|
2
|
-
@include footer-bg($opd-blue
|
|
4
|
+
@include footer-bg($opd-blue)
|
|
3
5
|
border-top: solid 1px $white
|
|
4
6
|
color: $white
|
|
5
7
|
display: flex
|
|
6
8
|
flex-wrap: wrap
|
|
7
9
|
padding: 5vh 5vw
|
|
8
10
|
|
|
11
|
+
.social-media-link
|
|
12
|
+
font-size: $font-size
|
|
13
|
+
padding-right: $sm-font-size
|
|
14
|
+
//color: $white
|
|
15
|
+
|
|
16
|
+
|
|
9
17
|
.ft__head
|
|
10
18
|
display: flex
|
|
11
19
|
margin: 5vh 5vw
|
|
@@ -19,7 +27,7 @@
|
|
|
19
27
|
width: 90vw
|
|
20
28
|
|
|
21
29
|
.ft__col
|
|
22
|
-
//border-left: solid 1px rgba($opd-blue
|
|
30
|
+
//border-left: solid 1px rgba($opd-light-blue, .05)
|
|
23
31
|
box-sizing: border-box
|
|
24
32
|
padding: 0 5vw
|
|
25
33
|
width: 90vw
|
|
@@ -37,7 +45,7 @@
|
|
|
37
45
|
|
|
38
46
|
.ft__contact
|
|
39
47
|
.site__logo
|
|
40
|
-
@include logo-color($
|
|
48
|
+
@include logo-color($white)
|
|
41
49
|
width: 40vw
|
|
42
50
|
|
|
43
51
|
.ft__sitemap
|
|
@@ -49,10 +57,11 @@
|
|
|
49
57
|
|
|
50
58
|
.ft__base
|
|
51
59
|
align-items: center
|
|
52
|
-
border-top: solid 1px $opd-blue
|
|
60
|
+
border-top: solid 1px $opd-light-blue
|
|
53
61
|
display: flex
|
|
54
|
-
flex-wrap:
|
|
55
|
-
|
|
62
|
+
flex-wrap: wrap
|
|
63
|
+
|
|
64
|
+
justify-content: space-around
|
|
56
65
|
min-width: 100%
|
|
57
66
|
width: 100%
|
|
58
67
|
a,
|
|
@@ -69,7 +78,7 @@
|
|
|
69
78
|
justify-content: space-between
|
|
70
79
|
|
|
71
80
|
.ft__sitemap--header
|
|
72
|
-
border-bottom: 1px solid $opd-blue
|
|
81
|
+
border-bottom: 1px solid $opd-light-blue
|
|
73
82
|
color: $pure-white
|
|
74
83
|
font-size: 2rem
|
|
75
84
|
font-weight: 600
|
|
@@ -131,6 +140,7 @@
|
|
|
131
140
|
font-size: $font-size * .8
|
|
132
141
|
|
|
133
142
|
.ft__base
|
|
143
|
+
justify-content: space-between
|
|
134
144
|
a,
|
|
135
145
|
p
|
|
136
146
|
font-size: $font-size * .7
|
|
@@ -147,7 +157,7 @@
|
|
|
147
157
|
|
|
148
158
|
.copyright
|
|
149
159
|
&::after
|
|
150
|
-
content: '
|
|
160
|
+
content: ' Ltd.'
|
|
151
161
|
|
|
152
162
|
.ft__sitemap--header
|
|
153
163
|
font-size: 1.8rem
|
data/_sass/forms/mc-forms.sass
CHANGED
|
@@ -77,7 +77,7 @@ input.switch
|
|
|
77
77
|
input.switch
|
|
78
78
|
&:checked
|
|
79
79
|
+ .icon
|
|
80
|
-
background: $opd-blue
|
|
80
|
+
background: $opd-light-blue
|
|
81
81
|
|
|
82
82
|
~
|
|
83
83
|
.yes
|
|
@@ -126,13 +126,13 @@ input.switch
|
|
|
126
126
|
background: $env-primary
|
|
127
127
|
|
|
128
128
|
.styled-checkbox:checked
|
|
129
|
-
background: $opd-
|
|
129
|
+
background: $opd-coral
|
|
130
130
|
|
|
131
131
|
+ .icon span
|
|
132
132
|
left: calc(100% - 25.732px)
|
|
133
133
|
|
|
134
134
|
&:before
|
|
135
|
-
background: $opd-blue
|
|
135
|
+
background: $opd-light-blue
|
|
136
136
|
|
|
137
137
|
.content__gdpr
|
|
138
138
|
display: flex
|
data/_sass/global.sass
CHANGED
|
@@ -22,11 +22,14 @@ body
|
|
|
22
22
|
background-color: $white
|
|
23
23
|
|
|
24
24
|
.fullwidth__wrap
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
background-color: $white
|
|
26
|
+
width: 100vw
|
|
27
|
+
padding-top: $navbar-height + $secondary-navbar-height + 5vh
|
|
28
|
+
& > *
|
|
29
|
+
margin: auto
|
|
30
|
+
max-width: 800px
|
|
29
31
|
& > p
|
|
32
|
+
|
|
30
33
|
padding: 3rem 0
|
|
31
34
|
& > ol li, ul li
|
|
32
35
|
padding: 1rem 0
|
|
@@ -135,9 +138,15 @@ body
|
|
|
135
138
|
transform: scaleY(2)
|
|
136
139
|
|
|
137
140
|
|
|
141
|
+
.image--caption
|
|
142
|
+
font-size: $font-size * .7
|
|
143
|
+
color: $grey
|
|
144
|
+
padding: 1rem 0
|
|
145
|
+
text-align: center
|
|
146
|
+
|
|
138
147
|
// Block colors and sizes
|
|
139
148
|
.strap--opd-trust
|
|
140
|
-
@include opd-blue
|
|
149
|
+
@include opd-light-blue
|
|
141
150
|
|
|
142
151
|
|
|
143
152
|
.strap__100
|
|
@@ -243,32 +252,28 @@ $svg-text-offset: 60px
|
|
|
243
252
|
stop-opacity: 1
|
|
244
253
|
|
|
245
254
|
.svg__augment--pulse
|
|
246
|
-
animation: pulse-ring 2s $bezier-pulse infinite
|
|
247
255
|
fill: $led
|
|
248
256
|
|
|
249
|
-
@keyframes pulse-ring
|
|
250
|
-
0%
|
|
251
|
-
opacity: .5
|
|
252
|
-
r: .1
|
|
253
257
|
|
|
254
|
-
|
|
255
|
-
opacity: .2
|
|
258
|
+
// Social icons wraped in <a's
|
|
256
259
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
+
.social-media
|
|
261
|
+
display: flex
|
|
262
|
+
padding: 0
|
|
263
|
+
margin: 0
|
|
260
264
|
|
|
265
|
+
.social-media-item
|
|
266
|
+
list-style: none
|
|
261
267
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
color: $
|
|
265
|
-
text-decoration: none
|
|
268
|
+
.social-media-link
|
|
269
|
+
@include default-trans
|
|
270
|
+
color: $white
|
|
266
271
|
|
|
267
272
|
.yaml--link
|
|
268
273
|
color: inherit
|
|
269
274
|
text-decoration: none
|
|
270
275
|
&:hover
|
|
271
|
-
color: $opd-blue
|
|
276
|
+
color: $opd-light-blue
|
|
272
277
|
|
|
273
278
|
|
|
274
279
|
@media screen and ( min-width: 768px )
|
|
@@ -288,26 +293,23 @@ $svg-text-offset: 60px
|
|
|
288
293
|
max-width: 600px
|
|
289
294
|
margin: 0 auto
|
|
290
295
|
|
|
291
|
-
.social
|
|
296
|
+
.social-media-item
|
|
292
297
|
&:hover
|
|
293
|
-
|
|
298
|
+
.social--Facebook
|
|
299
|
+
color: $facebook-primary
|
|
294
300
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
color: $twitter-primary
|
|
301
|
+
.social--Twitter
|
|
302
|
+
color: $twitter-primary
|
|
298
303
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
color: $linkedin-primary
|
|
304
|
+
.social--LinkedIn
|
|
305
|
+
color: $linkedin-primary
|
|
302
306
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
color: $instagram-primary
|
|
307
|
+
.social--Instagram
|
|
308
|
+
color: $instagram-primary
|
|
306
309
|
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
color: $opd-blue-trust
|
|
310
|
+
.social--Website,
|
|
311
|
+
.social--Email
|
|
312
|
+
color: $opd-light-blue
|
|
311
313
|
|
|
312
314
|
|
|
313
315
|
// This is basically a button and should to be centralised
|