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.
Files changed (43) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/contact-details.html +25 -0
  3. data/_includes/contact-form.html +18 -0
  4. data/_includes/footer/footer_full.html +42 -18
  5. data/_includes/gmap.html +5 -0
  6. data/_includes/head/head.html +1 -2
  7. data/_includes/navigation/global.html +11 -0
  8. data/_layouts/about.html +53 -21
  9. data/_layouts/contact.html +39 -0
  10. data/_layouts/default.html +2 -4
  11. data/_layouts/env/clinician.html +96 -25
  12. data/_layouts/env/landing.html +35 -18
  13. data/_layouts/env/pwp.html +27 -16
  14. data/_layouts/feed.html +1 -1
  15. data/_layouts/full-width.html +11 -0
  16. data/_sass/_functions.sass +2 -0
  17. data/_sass/_mixins.sass +76 -7
  18. data/_sass/_variables.sass +2 -0
  19. data/_sass/about.sass +14 -29
  20. data/_sass/colors/_variables.sass +25 -6
  21. data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
  22. data/_sass/colors/env/_clinician.sass +1 -1
  23. data/_sass/colors/global.sass +2 -0
  24. data/_sass/contact.sass +227 -0
  25. data/_sass/env/breakpoints/768.sass +5 -46
  26. data/_sass/env/clinician.sass +35 -133
  27. data/_sass/env/landing.sass +32 -33
  28. data/_sass/env/pwp.sass +37 -176
  29. data/_sass/footer_full.sass +139 -48
  30. data/_sass/global.sass +304 -4
  31. data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
  32. data/_sass/navigation/env/clinician.sass +1 -10
  33. data/_sass/navigation/env/landing.sass +6 -9
  34. data/_sass/navigation/env/pwp.sass +1 -14
  35. data/_sass/navigation/global.sass +9 -0
  36. data/assets/css/env/gaitq_clinician.sass +6 -4
  37. data/assets/css/env/gaitq_pwp.sass +6 -4
  38. data/assets/css/gaitq_about.sass +22 -0
  39. data/assets/css/gaitq_global.sass +4 -4
  40. data/assets/js/svg_aos.js +3 -3
  41. data/assets/js/svg_text_width.js +9 -1
  42. metadata +13 -5
  43. data/assets/css/img_handler.sass +0 -5
@@ -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
- {% assign env = site.data.menu.navigation | where: 'env', 'pwp' %}{% assign env = env[0] %}
16
+ <!-- setup liquid variables -->
17
+ {%- assign env = site.data.menu.navigation | where: 'env', 'pwp' -%}
18
+ {%- assign env = env[0] -%}
7
19
 
8
- {% assign cta = env.submenu | where: 'id', 'cta' %}{% assign cta = cta[0] %}
20
+ {%- assign cta = env.submenu | where: 'id', 'cta' -%}
21
+ {%- assign cta = cta[0] -%}
9
22
 
10
- {% assign cta_2 = env.submenu | where: 'id', 'landing' %}{% assign cta_2 = cta_2[0] %}
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="Read more about how our products help people with Parkinson's" href="{{ env.url | relative_url }}">
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="Register for clinical trails of our device" href="{{ cta.url }}">Sign up</a>
24
- <a class="secondary__cta" aria-label="More information on who we are and how we help people with Parkinson's" href="{{ cta_2.url }}">More Info</a>
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
- {% picture {{ page.pwp.image | prepend: 'content/' }}
32
- --img class="hero__image pwp__hero"
33
- --alt {{ page.pwp.alt }} %}</div>
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
- {% assign env = site.data.menu.navigation | where: 'env', 'clinician' %}{% assign env = env[0] %}
51
+ {%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
52
+ {%- assign env = env[0] -%}
38
53
 
39
- {% assign cta = env.submenu | where: 'id', 'cta' %}{% assign cta = cta[0] %}
54
+ {%- assign cta = env.submenu | where: 'id', 'cta' -%}
55
+ {%- assign cta = cta[0] -%}
40
56
 
41
- {% assign cta_2 = env.submenu | where: 'id', 'landing' %}{% assign cta_2 = cta_2[0] %}
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
- {% picture {{ page.clinician.image | prepend: 'content/' }}
63
- --img class="hero__image clinician__hero"
64
- --alt {{ page.clinician.alt }} %}</div>
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
 
@@ -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-image hero__pwp">
24
+ <div class="hero hero-90">
12
25
 
13
- <div class="hero__overlay hero__overlay--pwp">
26
+ <div class="hero__overlay">
14
27
  {% picture {{ page.hero.image | prepend: 'content/' }}
15
- --img class="hero__image hero__image--pwp"
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="pwp__follow"></div>
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=".8" />
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="strapline pwp--strap">
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 strapline pwp--strap">
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="pwp--guarantee">
84
+ <p data-aos="fade-in" class="strap__guarantee">
74
85
  {{ description }}</p></div>
75
86
 
76
- <div class="strapline segment__keywords">
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 augment--guarantee hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
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
 
@@ -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
 
@@ -0,0 +1,11 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+
5
+ <section class="fullwidth__wrap">
6
+
7
+
8
+ {{ content }}
9
+
10
+
11
+ </section>
@@ -0,0 +1,2 @@
1
+ @function url-friendly-colour($colour)
2
+ @return '%23' + str-slice('#{$colour}', 2, -1)
@@ -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
- // Landing page animations
11
+ // ##############################################
4
12
 
5
- // hover and focus animation action
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 in's
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
@@ -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)
@@ -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
- .about__head
3
- align-items: center
4
- backdrop-filter: blur(8px)
5
- background-color: rgba($env-primary, .5)
6
- color: $white
7
- display: flex
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
- // 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)
@@ -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
- $secondary_navbar_color: rgba(255, 255, 255, .3)
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