slow-steps 0.1.1 → 0.1.6

data/_layouts/env/landing.html

@@ -2,66 +2,83 @@
 layout: default
 ---
 
+<!--
+
+Last full read through 27/12/2020
+
+##############################################
+# Landing Layout /_layouts/env/landing.html
+##############################################
+
+-->
+
 <div class="landing__page">
-  {% assign env = site.data.menu.navigation | where: 'env', 'pwp' %}{% assign env = env[0] %}
+  <!-- setup liquid variables -->
+  {%- assign env = site.data.menu.navigation | where: 'env', 'pwp' -%}
+  {%- assign env = env[0] -%}
 
-  {% assign cta = env.submenu | where: 'id', 'cta' %}{% assign cta = cta[0] %}
+  {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+  {%- assign cta = cta[0] -%}
 
-  {% assign cta_2 = env.submenu | where: 'id', 'landing' %}{% assign cta_2 = cta_2[0] %}
+  {%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
+  {%- assign cta_2 = cta_2[0] -%}
 
   <div class="page__half">
 
     <div class="env__text env--pwp">
 
-      <a class="landing__link" aria-label="Read more about how our products help people with Parkinson's" href="{{ env.url | relative_url }}">
+      <a class="landing__link" aria-label="{{ env.aria }}" href="{{ env.url | relative_url }}">
 
         <h3 class="landing__title">{{ env.name | upcase }}</h3></a>
 
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.pwp }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" aria-label="Register for clinical trails of our device" href="{{ cta.url }}">Sign up</a>
-        <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>
+        <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>
         </div>
       </div>
 
     </div>
 
     <div class="hero__overlay env--pwp">
-      {% picture {{ page.pwp.image | prepend: 'content/' }}
-        --img class="hero__image pwp__hero"
-        --alt {{ page.pwp.alt }} %}</div>
+      {%- picture {{ page.pwp.image | prepend: 'content/' }}
+        --img class="hero__image hero__filter pwp__hero h-100"
+        --alt {{ page.pwp.alt }} -%}</div>
 
   </div>
 
-  {% assign env = site.data.menu.navigation | where: 'env', 'clinician' %}{% assign env = env[0] %}
+  {%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
+  {%- assign env = env[0] -%}
 
-  {% assign cta = env.submenu | where: 'id', 'cta' %}{% assign cta = cta[0] %}
+  {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+  {%- assign cta = cta[0] -%}
 
-  {% assign cta_2 = env.submenu | where: 'id', 'landing' %}{% assign cta_2 = cta_2[0] %}
+  {%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
+  {%- assign cta_2 = cta_2[0] -%}
 
   <div class="page__half">
 
     <div class="env__text env--clinician">
 
-      <a class="landing__link" href="{{ env.url | relative_url }}">
+      <a class="landing__link" aria-label="{{ env.aria }}" href="{{ env.url | relative_url }}">
 
         <h3 class="landing__title">{{ env.name | upcase }}</h3></a>
 
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.clinician }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" href="{{ cta.url }}">Register interest</a>
-        <a class="secondary__cta" href="{{ cta_2.url }}">More Info</a>
+        <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>
         </div>
       </div>
 
     </div>
 
     <div class="hero__overlay env--clinician">
-      {% picture {{ page.clinician.image | prepend: 'content/' }}
-        --img class="hero__image clinician__hero"
-        --alt {{ page.clinician.alt }} %}</div>
+      {%- picture {{ page.clinician.image | prepend: 'content/' }}
+        --img class="hero__image hero__filter clinician__hero h-100"
+        --alt {{ page.clinician.alt }} -%}</div>
 
   </div>
 

data/_layouts/env/pwp.html

@@ -1,22 +1,36 @@
 ---
 layout: default
 ---
+
+<!--
+
+Last full read through 27/12/2020
+
+##############################################
+# PWP Layout            /_layouts/env/pwp.html
+##############################################
+
+-->
+
+
+<!-- assign description with site decsription as fallback -->
+
 {% if site.data.copy.landing.pwp.description %}
 {% assign description = site.data.copy.landing.pwp.description %}
 {% else %}
 {% assign description = site.description %}
 {% endif %}
 
-<div class="pwp__mast">
+<div class="hero hero-90">
 
-  <div class="pwp__overlay">
-    <div class="pwp__bg">
-    </div>
-  </div>
+  <div class="hero__overlay">
+    {% picture {{ page.hero.image | prepend: 'content/' }}
+      --img class="hero__image image__filter--mix h-100"
+      --alt {{ page.hero.alt }} %}</div>
 
-  <div class="pwp--strap">
+  <div class="hero__strap hero__strap--center hero__strap--env">
     <h1>
-      <span class="pwp--strap-start">
+      <span class="hero__strap--start">
         {% assign header = site.data.copy.landing.pwp %}
         {% assign title = header.title | split: " " %}
         {% assign n = header.split %}
@@ -31,29 +45,46 @@ layout: default
     </h1>
   </div>
 
-  <div class="pwp__follow"></div>
+  <div class="hero__follow"></div>
 
 </div>
 
-<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--docked">
+<div class="augmented-image">
+
+  {% picture {{ page.subhero.image | prepend: 'content/' }}
+    --img class="hero__image"
+    --alt {{ page.subhero.alt }} %}
 
-<div class="pulsating-circle"></div></div>
+    <svg class="svg__augment" viewBox="-50 -50 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="augmentLED" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+        <stop offset="0%" />
+        <stop offset="100%" />
+        </radialGradient>
+      </defs>
 
-<div class="pwp__straps pwp__device--strap">
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
+
+    </svg>
+
+</div>
+
+<div class="center-text strap__100 strap--opd-trust">
   <h2>{{ site.data.copy.landing.pwp.subtitle }}</h2>
   <p data-aos="fade-in">{{ site.data.copy.landing.pwp.strap }}</p>
 </div>
 
-<div class="pwp__grid-wrap">
+<div class="segment__wrap">
 
-  <div class="pwp__grid-col-l">
-  <div class="pwp__grid__text pwp__straps">
+  <div class="segment__left">
+  <div class="segment__gaurentee center-text">
     <div data-aos="fade-right">
       {% include branding/site-logo.svg %}</div>
-    <p data-aos="fade-in" class="pwp--guarantee">
+    <p data-aos="fade-in" class="strap__guarantee">
       {{ description }}</p></div>
 
-  <div class="pwp__straps pwp__grid_keywords">
+  <div class="center-text segment__keywords strap--opd-trust">
     {% assign keyword = site.data.copy.landing.pwp.keywords | split: ", " %}
     {% for word in (1..keyword.size) %}
     <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
@@ -61,23 +92,62 @@ layout: default
 
   </div>
 
-  <div class="pwp__grid-col-r">
-    <div class="pwp__straps pwp__grid_img"></div>
+  <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>
+
 
-    <svg  viewBox="-50 -50 100 100" width="40vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="-28%" cy="20%" r="1" fill="white"/>
-    </svg>
   </div>
 
 </div>
 
-<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--group">
+<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  width="100vw" height="100%" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20%" cy="30%" r="6" fill="white"/>
-<line x1="10%" y1="30%" x2="20%" y2="30%" style='stroke:white;stroke-width:2' />
-<style>
-    .text { fill: white; }
-  </style>
-<text data-aos="fade-in" data-aos-anchor-placement="top-center" x="2%" y="31%" class="text" >Controller</text>
-</svg></div>
+      <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>

data/_layouts/feed.html

@@ -20,13 +20,17 @@ layout: default
 
   <div class="feed__card">
 
-    {% picture {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
-
+    <div class="feed__card__image">
+    {% picture thumb {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
+    </div>
     <div class="feed__card--text">
 
       <a class="feed__card--link" href="{{ site.baseurl }}{{ post.url }}">
 
-      <p class="feed__card--title">{{ post.title }}</p></a>
+      <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

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<section class="fullwidth__wrap">
+
+
+  {{ content }}
+
+
+</section>

data/_sass/_functions.sass

@@ -0,0 +1,2 @@
+@function url-friendly-colour($colour)
+  @return '%23' + str-slice('#{$colour}', 2, -1)

data/_sass/_mixins.sass

@@ -0,0 +1,100 @@
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# Global mixins            /_sass/_mixins.sass
+ *##############################################
+ *
+ */
+
+@import '_functions'
+
+// ##############################################
+
+// Image filters
+
+// Applied to the actual image with background-color: $env-primary
+@mixin image-filter--mix
+  filter: grayscale(1) contrast(.2) brightness(1.8)
+  opacity: .6
+
+@mixin image-filter-rotate
+  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+
+// Applied to an overlaying div
+@mixin image-filter--blur
+  backdrop-filter: blur(8px)
+  background-color: rgba($env-primary, .5)
+
+
+// ##############################################
+
+// Landing page animations - hover and focus
+
+@mixin reveal-landing-strap
+  height: 30vh
+  padding: 0 3rem
+
+// Snappy build function, see /_sass/_variables.sass for $bezier-snap
+@mixin build-in($name)
+  animation: .8s $bezier-snap 0s 1 $name
+
+// Keyframes
+@mixin slide-from-left
+  @keyframes slide-from-left
+    0%
+      opacity: 0
+      transform: translateX(-50vw)
+
+    100%
+      opacity: 1
+      transform: translateX(0)
+
+
+@mixin slide-from-right
+  @keyframes slide-from-right
+    0%
+      opacity: 0
+      transform: translateX(50vw)
+
+    100%
+      opacity: 1
+      transform: translateX(0)
+
+
+// Logo using the OPD primary colors
+@mixin logo-primary-colors
+  .site__logo--group
+    .site__logo--curve
+      fill: $opd-orange-confidence
+    .site__logo--legvert
+      fill: $opd-blue-confidence
+    .site__logo--leg45
+      fill: $opd-blue-trust
+    .site__logo--g,
+    .site__logo--a,
+    .site__logo__i,
+    .site__logo--t
+      fill: $opd-blue-confidence
+    .site__logo--Q
+      fill: $opd-orange-confidence
+
+
+
+// Logo single color function
+@mixin logo-color($color)
+  .site__logo--group,
+    .site__logo--curve,
+    .site__logo--legvert,
+    .site__logo--leg45,
+    .site__logo--g,
+    .site__logo--a,
+    .site__logo__i,
+    .site__logo--t,
+    .site__logo--Q
+      fill: $color
+
+
+@mixin footer-bg($footer-bg-color)
+  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

data/_sass/_variables.sass

@@ -0,0 +1,5 @@
+// Gllobal variables != color or typography
+
+$bezier-snap: cubic-bezier(.75, .86, .88, .62)
+
+$bezier-pulse: cubic-bezier(.1, .74, .53, .91)

data/_sass/about.sass

@@ -1,20 +1,17 @@
+/*  Last full read through 29/12/2020
+ *
+ *##############################################
+ *# about                      /_sass/about.sass
+ *##############################################
+ *
+ */
 
-.about__head
-  align-items: center
-  backdrop-filter: blur(8px)
-  background-color: rgba($env-primary, .5)
-  color: $white
-  display: flex
-  height: $mobile-navbar-height * 4
-  justify-content: center
-  padding-top: $mobile-navbar-height
-  text-align: center
-  span
-    animation-duration: .1s
-    animation-fill-mode: forwards
-    animation-iteration-count: 1
-    animation-name: fadeInOpacity
-    opacity: 0
+
+.hero
+  overflow: hidden
+
+.hero__image--fixed
+  position: fixed
 
 @keyframes fadeInOpacity
   0%
@@ -24,20 +21,8 @@
     opacity: 1
 
 
-.about__head__bg
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  filter: contrast(3) brightness(.6)
-  background-position: center
-  background-repeat: no-repeat
-  background-size: cover
-  height: $mobile-navbar-height * 5
-  position: fixed
-  width: 100vw
-  z-index: -1
-
 .about__copy
   align-items: center
-  background-color: $env-primary
   color: $white
   display: flex
   flex-direction: column
@@ -55,7 +40,6 @@
 
 .team__head
   align-items: flex-end
-  background-color: rgba($env-primary, .5)
   border-bottom: solid 1px $opd-blue-confidence
   display: flex
   height: 10rem
@@ -66,6 +50,7 @@
   color: $opd-blue-confidence
   padding-bottom: 2rem
   transition: .4s ease-out
+  cursor: pointer
   i
     font-size: $font-size * 1.2
     transition: .4s ease-out
@@ -149,7 +134,8 @@
 
 .info__conceal
   align-items: flex-end
-  background-image: linear-gradient(rgba(0,0,0,0), $white, $white)
+  // NOTE: when linear-gradient(rgba(0,0,0,0) ...) we get a shadow on safari
+  background-image: linear-gradient(rgba($pure-white,0), $white, $white)
   color: $black
   cursor: pointer
   display: flex