slow-steps 0.1.12 → 0.3.1

data/_layouts/careers.html

@@ -8,7 +8,7 @@ layout: default
 <div class="hero hero-65 collage">
 
 {% for collage in page.collage  %}
-  <div class="collage__image__wrap collage__image__wrap-{{ forloop.index }}" style="animation-delay: {{ forloop.index0 | times: 110 }}ms">
+  <div class="collage__image__wrap collage__image__wrap-{{ forloop.index }}">
     <h3 class="image__header">{{ collage.reasons }}</h3>
       {% picture {{ collage.image | prepend: 'content/' }}
         --img class="collage__image collage__image-{{ forloop.index }}"

data/_layouts/contact.html

@@ -8,7 +8,7 @@ layout: default
 <div class="hero hero-65">
 
   <div class="hero__overlay h-100">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image hero__image--fixed hero-65"
       --alt {{ page.hero.alt }} %}</div>
 

data/_layouts/env/clinician.html

@@ -23,7 +23,7 @@ Last full read through 27/12/2020
 <div class="hero hero-65">
 
   <div class="hero__overlay">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image image__filter--mix"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -39,7 +39,7 @@ Last full read through 27/12/2020
 
 <div class="augmented-image">
 
-  {% picture {{ page.subhero.image | prepend: 'content/' }}
+  {% picture {{ page.subhero.file | prepend: 'content/' }}
     --img class="hero__image"
     --alt {{ page.subhero.alt }} %}
 
@@ -51,7 +51,15 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+
+        <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
+        -->
+        <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/>
+
+        <animate attributeName="fill-opacity" attributeType="CSS" begin="0s" dur="2s" repeatCount="indefinite" from="1" to="0" fill="freeze" />
+
+      </circle>
       <circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
 
     </svg>
@@ -89,31 +97,6 @@ Last full read through 27/12/2020
 
   <div class="segment__right augmented-image" >
 
-    {% picture {{ page.guarantee.image | prepend: 'content/' }}
-      --img class="hero__image image--guarantee h-100"
-      --alt {{ page.guarantee.alt }} %}
-
-      <svg class="svg__augment " width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-
-        {% include functions/calc-svg-coord.html image_handle="guarantee" %}
-
-        {% for item in page.guarantee.augment.labels %}
-
-        <svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
-
-          <circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />
-
-          <line class="svg--elem svg--line" x1="0"  y1="0" y2="0" />
-
-          <text class="svg--elem svg--text trans-{% if item.reverse %}right{% else %}left{% endif %}" >{{ item.text }}</text>
-
-        </svg>
-
-        {% endfor %}
-
-      </svg>
-
-
-  </div>
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
 
 </div>

data/_layouts/env/landing.html

@@ -34,8 +34,8 @@ Last full read through 27/12/2020
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.pwp }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url }}">Sign up</a>
-        <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url }}">More Info</a>
+        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">Sign up</a>
+        <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url | relative_url }}">More Info</a>
         </div>
       </div>
 
@@ -68,8 +68,8 @@ Last full read through 27/12/2020
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.clinician }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url }}">Register interest</a>
-        <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url }}">More Info</a>
+        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">Register interest</a>
+        <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url | relative_url }}">More Info</a>
         </div>
       </div>
 

data/_layouts/env/pwp.html

@@ -24,7 +24,7 @@ Last full read through 27/12/2020
 <div class="hero hero-90">
 
   <div class="hero__overlay">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image image__filter--mix h-100"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -51,7 +51,7 @@ Last full read through 27/12/2020
 
 <div class="augmented-image">
 
-  {% picture {{ page.subhero.image | prepend: 'content/' }}
+  {% picture {{ page.subhero.file | prepend: 'content/' }}
     --img class="hero__image"
     --alt {{ page.subhero.alt }} %}
 
@@ -63,7 +63,15 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+
+        <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
+        -->
+        <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/>
+
+        <animate attributeName="fill-opacity" attributeType="CSS" begin="0s" dur="2s" repeatCount="indefinite" from="1" to="0" fill="freeze" />
+
+      </circle>
       <circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
 
     </svg>
@@ -94,60 +102,11 @@ Last full read through 27/12/2020
 
   <div class="segment__right augmented-image" >
 
-    {% picture {{ page.guarantee.image | prepend: 'content/' }}
-      --img class="hero__image image--guarantee h-100"
-      --alt {{ page.guarantee.alt }} %}
-
-      <svg class="svg__augment " width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-
-        {% include functions/calc-svg-coord.html image_handle="guarantee" %}
-
-        {% for item in page.guarantee.augment.labels %}
-
-        <svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
-
-          <circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
 
-          <line class="svg--elem svg--line" x1="0"  y1="0" y2="0" />
-
-          <text class="svg--elem svg--text trans-{% if item.reverse %}right{% else %}left{% endif %}" >{{ item.text }}</text>
-
-        </svg>
-
-        {% endfor %}
-
-      </svg>
-
-
-  </div>
 
 </div>
 
 <div class="augmented-image" >
 
-  {% picture {{ page.device.image | prepend: 'content/' }}
-    --img class="hero__image"
-    --alt {{ page.device.alt }} %}
-
-      {% include functions/calc-svg-coord.html image_handle="device" %}
-
-    <svg class="svg__augment" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-
-      {% for item in page.device.augment.labels %}
-
-      <svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
-
-        <circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />
-
-        <line class="svg--elem svg--line" x1="0"  y1="0" y2="0" />
-
-        <text class="svg--elem svg--text trans-{% if item.reverse %}right{% else %}left{% endif %}" >{{ item.text }}</text>
-
-      </svg>
-
-      {% endfor %}
-
-
-    </svg>
-
-</div>
+{% include image.html image="device" alt="Describe the image" class="hero__image" %}

data/_layouts/faq.html

@@ -8,7 +8,7 @@ layout: default
 <div class="hero hero-65">
 
   <div class="hero__overlay h-100">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image hero__image--fixed hero-65"
       --alt {{ page.hero.alt }} %}</div>
 

data/_layouts/feed.html

@@ -24,13 +24,12 @@ layout: default
     {% picture thumb {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
     </div>
     <div class="feed__card--text">
-
+      <p class="feed__card--meta">Published <span>{{ post.date | date: "%b %d, %Y" }}</span></p>
       <a class="feed__card--link" href="{{ site.baseurl }}{{ post.url }}">
 
       <h4 class="feed__card--title">{{ post.title }}</h4>
       <p class="post__subtitle">{{ post.subtitle }}</p>
       </a>
-      <p class="feed__card--meta">Published <span>{{ post.date | date: "%b %d, %Y" }}</span></p>
 
 
     </div>

data/_layouts/full-width.html

@@ -2,10 +2,33 @@
 layout: default
 ---
 
-<section class="fullwidth__wrap">
+{% if page.hero %}
 
+<div class="hero hero-65">
 
-  {{ content }}
+  <div class="hero__overlay h-100">
+    {% picture {{ page.hero.file | prepend: 'content/' }}
+      --img class="hero__image hero__image--fixed hero-65"
+      --alt {{ page.hero.alt }} %}</div>
+
+  {% if page.title %}
+  <header class="hero__strap hero__strap--center image__filter--blur hero-65" aria-label="{{ strap }}">
+
+      <h1 aria-hidden="true" >
+      {% assign n = page.title.size | minus: 1 %}
+      {%- for char in (0..n ) -%}
+
+      <span style="animation-delay: {{ char | times: 40 | plus: 200 }}ms;">{{ page.title | slice: char }}</span>
+      {%- endfor -%}</h1>
 
+  </header>
+  {% endif %}
+</div>
+
+{% endif %}
+
+<section class="fullwidth__wrap">
+
+  {{ content }}
 
 </section>

data/_sass/_colors/README.md

@@ -0,0 +1,27 @@
+# Color definitions
+
+Everything here should be rgb(a) color definitions using sass variables,
+
+```sass
+$var-name: rgba(r, g, b, a)
+```
+
+## _variables.sass
+
+Site wide color definitions, avoid changing these variables. If we want to change the color of an element then either using a pre-existing sass variable, or creating a new one, change the actual element css to the new sass color variable.
+
+## _mixins.sass
+
+Color combination mixins.
+
+## collection.sass
+
+Collection of the above definitions.
+
+## _clinician.sass
+
+Theme colouring for clinician environments. We import collection.sass and define `$env-primary` and `$env-secondary`.
+
+## _pwp.sass
+
+Theme colouring for pwp environments. We import collection.sass and define `$env-primary` and `$env-secondary`.

data/_sass/_colors/_clinician.sass

@@ -0,0 +1,7 @@
+@import 'collection'
+
+// Colouring theme for clinician env
+
+$env-primary: $opd-blue
+
+$env-secondary: $opd-coral

data/_sass/_colors/_mixins.sass

@@ -0,0 +1,14 @@
+// Color set mixins
+
+@mixin opd-light-blue
+  background-color: $opd-light-blue
+  color: $opd-blue
+
+
+@mixin opd-blue
+  background-color: $opd-blue
+  color: $white
+
+@mixin opd-coral
+  background-color: $opd-coral
+  color: $white

data/_sass/_colors/_pwp.sass

@@ -0,0 +1,6 @@
+@import 'collection'
+// Colouring theme for pwp env
+
+$env-primary: $opd-coral
+
+$env-secondary: $opd-blue

data/_sass/{colors → _colors}/_variables.sass

@@ -6,18 +6,21 @@
  *
  */
 
+// $var-name: rgba(r, g, b, a) only
+
 // Oxford Product Design
 
 // #46627d
-$opd-blue-confidence: rgba(70, 98, 125, 1)
+$opd-blue: rgba(70, 98, 125, 1)
 
 // #da5e51
-$opd-orange-confidence: rgba(218, 94, 81, 1)
+$opd-coral: rgba(218, 94, 81, 1)
 
-// #9CBBD2
-$opd-blue-trust: rgba(174, 201, 229, 1)
+// #a3dbf5
+$opd-light-blue: rgba(174, 201, 229, 1)
 
-$opd-grey-neutral: rgba(178, 178, 178, 1)
+// #b3b2b2
+$opd-grey: rgba(179, 178, 178, 1)
 
 
 // Socials
@@ -50,15 +53,3 @@ $light-grey: rgb(220, 220, 220)
 $grey: rgb(130, 130, 130)
 
 $led: rgb(255, 70, 0)
-
-
-// Object colors
-
-$secondary-navbar-color: rgba(255, 255, 255, .8)
-
-
-// Color set mixins
-
-@mixin opd-blue-trust
-  background-color: $opd-blue-trust
-  color: $opd-blue-confidence

data/_sass/_colors/collection.sass

@@ -0,0 +1,3 @@
+@import '_variables'
+
+@import '_mixins'

data/_sass/_mixins.sass

@@ -68,18 +68,18 @@
 @mixin logo-primary-colors
   .site__logo--group
     .site__logo--curve
-      fill: $opd-orange-confidence
+      fill: $opd-coral
     .site__logo--legvert
-      fill: $opd-blue-confidence
+      fill: $opd-blue
     .site__logo--leg45
-      fill: $opd-blue-trust
+      fill: $opd-light-blue
     .site__logo--g,
     .site__logo--a,
     .site__logo__i,
     .site__logo--t
-      fill: $opd-blue-confidence
+      fill: $opd-blue
     .site__logo--Q
-      fill: $opd-orange-confidence
+      fill: $opd-coral
 
 
 
@@ -101,3 +101,12 @@
   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")
   background-position: center
   background-size: cover
+
+
+@mixin text-shadow
+  text-shadow: 3px 3px 6px rgba($pure-black, .2)
+
+
+@mixin navbar-color
+  backdrop-filter: blur(20px)
+  background-color: $secondary-navbar-color

data/_sass/about.sass

@@ -35,7 +35,7 @@
 
 .about--video
   width: 100vw
-  background-color: $opd-grey-neutral
+  background-color: $opd-grey
   display: flex
   flex-direction: column
   padding: 5rem 0
@@ -64,7 +64,7 @@
   display: flex
   flex-direction: column
   background-color: $pure-white
-  border-top: solid 1px $opd-blue-confidence
+  border-top: solid 1px $opd-blue
 
 .about__team--title
   padding-top: 3rem
@@ -73,14 +73,14 @@
 
 .team__head
   align-items: flex-end
-  border-bottom: solid 1px $opd-blue-confidence
+  border-bottom: solid 1px $opd-blue
   display: flex
   height: 10rem
   justify-content: space-around
   width: 100vw
 
 .team__title
-  color: $opd-blue-confidence
+  color: $opd-blue
   padding-bottom: 2rem
   transition: .4s ease-out
   cursor: pointer
@@ -92,7 +92,7 @@
   color: $env-primary
   padding-bottom: 2.3rem
   i
-    text-shadow: 0px 12px 10px rgba($pure-black, .3)
+    @include text-shadow
     font-size: $font-size * 1.5
 
 .team__title.team__title--active
@@ -111,7 +111,7 @@
 
 .team__members
   background-color: $white
-  color: $opd-blue-confidence
+  color: $opd-blue
   padding-top: 10rem
 
 .single__member
@@ -149,6 +149,7 @@
   display: flex
   align-items: center
   color: $grey
+  font-size: $font-size
 
 .member__socials
   align-items: center