slow-steps 0.1.2 → 0.1.7
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/_includes/contact-details.html +25 -0
- data/_includes/contact-form.html +18 -0
- data/_includes/footer/footer_full.html +42 -18
- data/_includes/gmap.html +5 -0
- data/_includes/head/head.html +1 -2
- data/_includes/navigation/global.html +11 -0
- data/_layouts/about.html +53 -21
- data/_layouts/contact.html +39 -0
- data/_layouts/default.html +2 -4
- data/_layouts/env/clinician.html +96 -25
- data/_layouts/env/landing.html +35 -18
- data/_layouts/env/pwp.html +27 -16
- data/_layouts/feed.html +1 -1
- data/_layouts/full-width.html +11 -0
- data/_sass/_functions.sass +2 -0
- data/_sass/_mixins.sass +76 -7
- data/_sass/_variables.sass +2 -0
- data/_sass/about.sass +14 -29
- data/_sass/colors/_variables.sass +25 -6
- data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
- data/_sass/colors/env/_clinician.sass +1 -1
- data/_sass/colors/global.sass +2 -0
- data/_sass/contact.sass +227 -0
- data/_sass/env/breakpoints/768.sass +5 -46
- data/_sass/env/clinician.sass +35 -133
- data/_sass/env/landing.sass +32 -33
- data/_sass/env/pwp.sass +37 -176
- data/_sass/footer_full.sass +139 -48
- data/_sass/global.sass +304 -4
- data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
- data/_sass/navigation/env/clinician.sass +1 -10
- data/_sass/navigation/env/landing.sass +6 -9
- data/_sass/navigation/env/pwp.sass +1 -14
- data/_sass/navigation/global.sass +9 -0
- data/assets/css/env/gaitq_clinician.sass +6 -4
- data/assets/css/env/gaitq_pwp.sass +6 -4
- data/assets/css/gaitq_about.sass +22 -0
- data/assets/css/gaitq_global.sass +4 -4
- data/assets/js/svg_aos.js +3 -3
- data/assets/js/svg_text_width.js +9 -1
- metadata +13 -5
- data/assets/css/img_handler.sass +0 -5
data/_layouts/env/landing.html
CHANGED
@@ -2,66 +2,83 @@
|
|
2
2
|
layout: default
|
3
3
|
---
|
4
4
|
|
5
|
+
<!--
|
6
|
+
|
7
|
+
Last full read through 27/12/2020
|
8
|
+
|
9
|
+
##############################################
|
10
|
+
# Landing Layout /_layouts/env/landing.html
|
11
|
+
##############################################
|
12
|
+
|
13
|
+
-->
|
14
|
+
|
5
15
|
<div class="landing__page">
|
6
|
-
|
16
|
+
<!-- setup liquid variables -->
|
17
|
+
{%- assign env = site.data.menu.navigation | where: 'env', 'pwp' -%}
|
18
|
+
{%- assign env = env[0] -%}
|
7
19
|
|
8
|
-
{
|
20
|
+
{%- assign cta = env.submenu | where: 'id', 'cta' -%}
|
21
|
+
{%- assign cta = cta[0] -%}
|
9
22
|
|
10
|
-
{
|
23
|
+
{%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
|
24
|
+
{%- assign cta_2 = cta_2[0] -%}
|
11
25
|
|
12
26
|
<div class="page__half">
|
13
27
|
|
14
28
|
<div class="env__text env--pwp">
|
15
29
|
|
16
|
-
<a class="landing__link" aria-label="
|
30
|
+
<a class="landing__link" aria-label="{{ env.aria }}" href="{{ env.url | relative_url }}">
|
17
31
|
|
18
32
|
<h3 class="landing__title">{{ env.name | upcase }}</h3></a>
|
19
33
|
|
20
34
|
<div class="landing__strap">
|
21
35
|
<p>{{ site.data.copy.landing.landing.pwp }}</p>
|
22
36
|
<div class="landing__cta">
|
23
|
-
<a class="primary__cta" aria-label="
|
24
|
-
<a class="secondary__cta" aria-label="
|
37
|
+
<a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url }}">Sign up</a>
|
38
|
+
<a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url }}">More Info</a>
|
25
39
|
</div>
|
26
40
|
</div>
|
27
41
|
|
28
42
|
</div>
|
29
43
|
|
30
44
|
<div class="hero__overlay env--pwp">
|
31
|
-
{
|
32
|
-
--img class="hero__image pwp__hero"
|
33
|
-
--alt {{ page.pwp.alt }}
|
45
|
+
{%- picture {{ page.pwp.image | prepend: 'content/' }}
|
46
|
+
--img class="hero__image hero__filter pwp__hero h-100"
|
47
|
+
--alt {{ page.pwp.alt }} -%}</div>
|
34
48
|
|
35
49
|
</div>
|
36
50
|
|
37
|
-
{
|
51
|
+
{%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
|
52
|
+
{%- assign env = env[0] -%}
|
38
53
|
|
39
|
-
{
|
54
|
+
{%- assign cta = env.submenu | where: 'id', 'cta' -%}
|
55
|
+
{%- assign cta = cta[0] -%}
|
40
56
|
|
41
|
-
{
|
57
|
+
{%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
|
58
|
+
{%- assign cta_2 = cta_2[0] -%}
|
42
59
|
|
43
60
|
<div class="page__half">
|
44
61
|
|
45
62
|
<div class="env__text env--clinician">
|
46
63
|
|
47
|
-
<a class="landing__link" href="{{ env.url | relative_url }}">
|
64
|
+
<a class="landing__link" aria-label="{{ env.aria }}" href="{{ env.url | relative_url }}">
|
48
65
|
|
49
66
|
<h3 class="landing__title">{{ env.name | upcase }}</h3></a>
|
50
67
|
|
51
68
|
<div class="landing__strap">
|
52
69
|
<p>{{ site.data.copy.landing.landing.clinician }}</p>
|
53
70
|
<div class="landing__cta">
|
54
|
-
<a class="primary__cta" href="{{ cta.url }}">Register interest</a>
|
55
|
-
<a class="secondary__cta" href="{{ cta_2.url }}">More Info</a>
|
71
|
+
<a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url }}">Register interest</a>
|
72
|
+
<a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url }}">More Info</a>
|
56
73
|
</div>
|
57
74
|
</div>
|
58
75
|
|
59
76
|
</div>
|
60
77
|
|
61
78
|
<div class="hero__overlay env--clinician">
|
62
|
-
{
|
63
|
-
--img class="hero__image clinician__hero"
|
64
|
-
--alt {{ page.clinician.alt }}
|
79
|
+
{%- picture {{ page.clinician.image | prepend: 'content/' }}
|
80
|
+
--img class="hero__image hero__filter clinician__hero h-100"
|
81
|
+
--alt {{ page.clinician.alt }} -%}</div>
|
65
82
|
|
66
83
|
</div>
|
67
84
|
|
data/_layouts/env/pwp.html
CHANGED
@@ -1,21 +1,34 @@
|
|
1
1
|
---
|
2
2
|
layout: default
|
3
|
-
|
4
3
|
---
|
4
|
+
|
5
|
+
<!--
|
6
|
+
|
7
|
+
Last full read through 27/12/2020
|
8
|
+
|
9
|
+
##############################################
|
10
|
+
# PWP Layout /_layouts/env/pwp.html
|
11
|
+
##############################################
|
12
|
+
|
13
|
+
-->
|
14
|
+
|
15
|
+
|
16
|
+
<!-- assign description with site decsription as fallback -->
|
17
|
+
|
5
18
|
{% if site.data.copy.landing.pwp.description %}
|
6
19
|
{% assign description = site.data.copy.landing.pwp.description %}
|
7
20
|
{% else %}
|
8
21
|
{% assign description = site.description %}
|
9
22
|
{% endif %}
|
10
23
|
|
11
|
-
<div class="hero-
|
24
|
+
<div class="hero hero-90">
|
12
25
|
|
13
|
-
<div class="hero__overlay
|
26
|
+
<div class="hero__overlay">
|
14
27
|
{% picture {{ page.hero.image | prepend: 'content/' }}
|
15
|
-
--img class="hero__image
|
28
|
+
--img class="hero__image image__filter--mix h-100"
|
16
29
|
--alt {{ page.hero.alt }} %}</div>
|
17
30
|
|
18
|
-
<div class="hero__strap">
|
31
|
+
<div class="hero__strap hero__strap--center hero__strap--env">
|
19
32
|
<h1>
|
20
33
|
<span class="hero__strap--start">
|
21
34
|
{% assign header = site.data.copy.landing.pwp %}
|
@@ -32,7 +45,7 @@ layout: default
|
|
32
45
|
</h1>
|
33
46
|
</div>
|
34
47
|
|
35
|
-
<div class="
|
48
|
+
<div class="hero__follow"></div>
|
36
49
|
|
37
50
|
</div>
|
38
51
|
|
@@ -51,29 +64,27 @@ layout: default
|
|
51
64
|
</defs>
|
52
65
|
|
53
66
|
<circle class="svg__augment--pulse" cx="32%" cy="2%" />
|
54
|
-
<circle class="svg__augment--led" cx="32%" cy="2%" r=".
|
67
|
+
<circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
|
55
68
|
|
56
69
|
</svg>
|
57
70
|
|
58
71
|
</div>
|
59
72
|
|
60
|
-
<div class="
|
73
|
+
<div class="center-text strap__100 strap--opd-trust">
|
61
74
|
<h2>{{ site.data.copy.landing.pwp.subtitle }}</h2>
|
62
75
|
<p data-aos="fade-in">{{ site.data.copy.landing.pwp.strap }}</p>
|
63
76
|
</div>
|
64
77
|
|
65
|
-
|
66
|
-
|
67
|
-
<div class="segment-wrap">
|
78
|
+
<div class="segment__wrap">
|
68
79
|
|
69
80
|
<div class="segment__left">
|
70
|
-
<div class="segment__gaurentee
|
81
|
+
<div class="segment__gaurentee center-text">
|
71
82
|
<div data-aos="fade-right">
|
72
83
|
{% include branding/site-logo.svg %}</div>
|
73
|
-
<p data-aos="fade-in" class="
|
84
|
+
<p data-aos="fade-in" class="strap__guarantee">
|
74
85
|
{{ description }}</p></div>
|
75
86
|
|
76
|
-
<div class="
|
87
|
+
<div class="center-text segment__keywords strap--opd-trust">
|
77
88
|
{% assign keyword = site.data.copy.landing.pwp.keywords | split: ", " %}
|
78
89
|
{% for word in (1..keyword.size) %}
|
79
90
|
<h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
|
@@ -84,7 +95,7 @@ layout: default
|
|
84
95
|
<div class="segment__right augmented-image" >
|
85
96
|
|
86
97
|
{% picture {{ page.guarantee.image | prepend: 'content/' }}
|
87
|
-
--img class="hero__image image--guarantee "
|
98
|
+
--img class="hero__image image--guarantee h-100"
|
88
99
|
--alt {{ page.guarantee.alt }} %}
|
89
100
|
|
90
101
|
<svg class="svg__augment " width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
@@ -93,7 +104,7 @@ layout: default
|
|
93
104
|
|
94
105
|
{% for item in page.guarantee.augment.labels %}
|
95
106
|
|
96
|
-
<svg class="svg__labels
|
107
|
+
<svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
|
97
108
|
|
98
109
|
<circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />
|
99
110
|
|
data/_layouts/feed.html
CHANGED
@@ -21,7 +21,7 @@ layout: default
|
|
21
21
|
<div class="feed__card">
|
22
22
|
|
23
23
|
<div class="feed__card__image">
|
24
|
-
{% picture {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
|
24
|
+
{% picture thumb {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
|
25
25
|
</div>
|
26
26
|
<div class="feed__card--text">
|
27
27
|
|
data/_sass/_mixins.sass
CHANGED
@@ -1,31 +1,100 @@
|
|
1
|
+
/* Last full read through 27/12/2020
|
2
|
+
*
|
3
|
+
*##############################################
|
4
|
+
*# Global mixins /_sass/_mixins.sass
|
5
|
+
*##############################################
|
6
|
+
*
|
7
|
+
*/
|
1
8
|
|
9
|
+
@import '_functions'
|
2
10
|
|
3
|
-
//
|
11
|
+
// ##############################################
|
4
12
|
|
5
|
-
//
|
13
|
+
// Image filters
|
14
|
+
|
15
|
+
// Applied to the actual image with background-color: $env-primary
|
16
|
+
@mixin image-filter--mix
|
17
|
+
filter: grayscale(1) contrast(.2) brightness(1.8)
|
18
|
+
opacity: .6
|
19
|
+
|
20
|
+
@mixin image-filter-rotate
|
21
|
+
filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
|
22
|
+
|
23
|
+
// Applied to an overlaying div
|
24
|
+
@mixin image-filter--blur
|
25
|
+
backdrop-filter: blur(8px)
|
26
|
+
background-color: rgba($env-primary, .5)
|
27
|
+
|
28
|
+
|
29
|
+
// ##############################################
|
30
|
+
|
31
|
+
// Landing page animations - hover and focus
|
6
32
|
|
7
33
|
@mixin reveal-landing-strap
|
8
34
|
height: 30vh
|
9
35
|
padding: 0 3rem
|
10
36
|
|
11
|
-
// build
|
37
|
+
// Snappy build function, see /_sass/_variables.sass for $bezier-snap
|
12
38
|
@mixin build-in($name)
|
13
39
|
animation: .8s $bezier-snap 0s 1 $name
|
14
40
|
|
41
|
+
// Keyframes
|
15
42
|
@mixin slide-from-left
|
16
43
|
@keyframes slide-from-left
|
17
44
|
0%
|
18
|
-
transform: translateX(-50vw)
|
19
45
|
opacity: 0
|
46
|
+
transform: translateX(-50vw)
|
47
|
+
|
20
48
|
100%
|
21
|
-
transform: translateX(0)
|
22
49
|
opacity: 1
|
50
|
+
transform: translateX(0)
|
51
|
+
|
23
52
|
|
24
53
|
@mixin slide-from-right
|
25
54
|
@keyframes slide-from-right
|
26
55
|
0%
|
27
|
-
transform: translateX(50vw)
|
28
56
|
opacity: 0
|
57
|
+
transform: translateX(50vw)
|
58
|
+
|
29
59
|
100%
|
30
|
-
transform: translateX(0)
|
31
60
|
opacity: 1
|
61
|
+
transform: translateX(0)
|
62
|
+
|
63
|
+
|
64
|
+
// Logo using the OPD primary colors
|
65
|
+
@mixin logo-primary-colors
|
66
|
+
.site__logo--group
|
67
|
+
.site__logo--curve
|
68
|
+
fill: $opd-orange-confidence
|
69
|
+
.site__logo--legvert
|
70
|
+
fill: $opd-blue-confidence
|
71
|
+
.site__logo--leg45
|
72
|
+
fill: $opd-blue-trust
|
73
|
+
.site__logo--g,
|
74
|
+
.site__logo--a,
|
75
|
+
.site__logo__i,
|
76
|
+
.site__logo--t
|
77
|
+
fill: $opd-blue-confidence
|
78
|
+
.site__logo--Q
|
79
|
+
fill: $opd-orange-confidence
|
80
|
+
|
81
|
+
|
82
|
+
|
83
|
+
// Logo single color function
|
84
|
+
@mixin logo-color($color)
|
85
|
+
.site__logo--group,
|
86
|
+
.site__logo--curve,
|
87
|
+
.site__logo--legvert,
|
88
|
+
.site__logo--leg45,
|
89
|
+
.site__logo--g,
|
90
|
+
.site__logo--a,
|
91
|
+
.site__logo__i,
|
92
|
+
.site__logo--t,
|
93
|
+
.site__logo--Q
|
94
|
+
fill: $color
|
95
|
+
|
96
|
+
|
97
|
+
@mixin footer-bg($footer-bg-color)
|
98
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='1278' height='600' %3E%3Cpath d='M1019,600 C1019,600 1019,600 1019,600 C1019,600 1279,600 1279,600 C1279,600 1279,0 1279,0 C1279,0 413,0 413,0 C413,0 413,0 413,0' fill= '#{url-friendly-colour($footer-bg-color)}' fill-opacity='0.99'/%3E%3Cpath d='M1220,600 C1220,600 0,600 0,600 C0,600 0,0 0,0 C0,0 414,0 414,0 C414,0 1020,600 1020,600' fill= '#{url-friendly-colour($footer-bg-color)}' /%3E%3C/svg%3E")
|
99
|
+
background-position: center
|
100
|
+
background-size: cover
|
data/_sass/_variables.sass
CHANGED
data/_sass/about.sass
CHANGED
@@ -1,20 +1,17 @@
|
|
1
|
+
/* Last full read through 29/12/2020
|
2
|
+
*
|
3
|
+
*##############################################
|
4
|
+
*# about /_sass/about.sass
|
5
|
+
*##############################################
|
6
|
+
*
|
7
|
+
*/
|
1
8
|
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
height: $mobile-navbar-height * 4
|
9
|
-
justify-content: center
|
10
|
-
padding-top: $mobile-navbar-height
|
11
|
-
text-align: center
|
12
|
-
span
|
13
|
-
animation-duration: .1s
|
14
|
-
animation-fill-mode: forwards
|
15
|
-
animation-iteration-count: 1
|
16
|
-
animation-name: fadeInOpacity
|
17
|
-
opacity: 0
|
9
|
+
|
10
|
+
.hero
|
11
|
+
overflow: hidden
|
12
|
+
|
13
|
+
.hero__image--fixed
|
14
|
+
position: fixed
|
18
15
|
|
19
16
|
@keyframes fadeInOpacity
|
20
17
|
0%
|
@@ -24,20 +21,8 @@
|
|
24
21
|
opacity: 1
|
25
22
|
|
26
23
|
|
27
|
-
.about__head__bg
|
28
|
-
background-image: url($baseurl + 'assets/img/pwp_device_group.png')
|
29
|
-
filter: contrast(3) brightness(.6)
|
30
|
-
background-position: center
|
31
|
-
background-repeat: no-repeat
|
32
|
-
background-size: cover
|
33
|
-
height: $mobile-navbar-height * 5
|
34
|
-
position: fixed
|
35
|
-
width: 100vw
|
36
|
-
z-index: -1
|
37
|
-
|
38
24
|
.about__copy
|
39
25
|
align-items: center
|
40
|
-
background-color: $env-primary
|
41
26
|
color: $white
|
42
27
|
display: flex
|
43
28
|
flex-direction: column
|
@@ -55,7 +40,6 @@
|
|
55
40
|
|
56
41
|
.team__head
|
57
42
|
align-items: flex-end
|
58
|
-
background-color: rgba($env-primary, .5)
|
59
43
|
border-bottom: solid 1px $opd-blue-confidence
|
60
44
|
display: flex
|
61
45
|
height: 10rem
|
@@ -66,6 +50,7 @@
|
|
66
50
|
color: $opd-blue-confidence
|
67
51
|
padding-bottom: 2rem
|
68
52
|
transition: .4s ease-out
|
53
|
+
cursor: pointer
|
69
54
|
i
|
70
55
|
font-size: $font-size * 1.2
|
71
56
|
transition: .4s ease-out
|
@@ -1,15 +1,25 @@
|
|
1
|
-
|
1
|
+
/*
|
2
|
+
*
|
3
|
+
*##############################################
|
4
|
+
*# Global colors /_sass/colors/_varibales.sass
|
5
|
+
*##############################################
|
6
|
+
*
|
7
|
+
*/
|
2
8
|
|
3
9
|
// Oxford Product Design
|
4
10
|
|
5
|
-
|
11
|
+
// #46627d
|
12
|
+
$opd-blue-confidence: rgba(70, 98, 125, 1)
|
6
13
|
|
7
|
-
|
14
|
+
// #da5e51
|
15
|
+
$opd-orange-confidence: rgba(218, 94, 81, 1)
|
8
16
|
|
9
|
-
|
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)
|
@@ -40,6 +51,14 @@ $grey: rgb(130, 130, 130)
|
|
40
51
|
|
41
52
|
$led: rgb(255, 70, 0)
|
42
53
|
|
43
|
-
$box-shadow-shade: rgba(0, 0, 0, .2)
|
44
54
|
|
45
|
-
|
55
|
+
// Object colors
|
56
|
+
|
57
|
+
$secondary-navbar-color: rgba(255, 255, 255, .8)
|
58
|
+
|
59
|
+
|
60
|
+
// Color set mixins
|
61
|
+
|
62
|
+
@mixin opd-blue-trust
|
63
|
+
background-color: $opd-blue-trust
|
64
|
+
color: $opd-blue-confidence
|