slow-steps 0.1.2 → 0.1.7

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,21 +1,34 @@
 ---
 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="hero-image hero__pwp">
+<div class="hero hero-90">
 
-  <div class="hero__overlay hero__overlay--pwp">
+  <div class="hero__overlay">
     {% picture {{ page.hero.image | prepend: 'content/' }}
-      --img class="hero__image hero__image--pwp"
+      --img class="hero__image image__filter--mix h-100"
       --alt {{ page.hero.alt }} %}</div>
 
-  <div class="hero__strap">
+  <div class="hero__strap hero__strap--center hero__strap--env">
     <h1>
       <span class="hero__strap--start">
         {% assign header = site.data.copy.landing.pwp %}
@@ -32,7 +45,7 @@ layout: default
     </h1>
   </div>
 
-  <div class="pwp__follow"></div>
+  <div class="hero__follow"></div>
 
 </div>
 
@@ -51,29 +64,27 @@ layout: default
       </defs>
 
       <circle class="svg__augment--pulse" cx="32%" cy="2%" />
-      <circle class="svg__augment--led" cx="32%" cy="2%" r=".8" />
+      <circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
 
     </svg>
 
 </div>
 
-<div class="strapline pwp--strap">
+<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="segment-wrap">
+<div class="segment__wrap">
 
   <div class="segment__left">
-  <div class="segment__gaurentee strapline pwp--strap">
+  <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="strapline segment__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>
@@ -84,7 +95,7 @@ layout: default
   <div class="segment__right augmented-image" >
 
     {% picture {{ page.guarantee.image | prepend: 'content/' }}
-      --img class="hero__image image--guarantee "
+      --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">
@@ -93,7 +104,7 @@ layout: default
 
         {% for item in page.guarantee.augment.labels %}
 
-        <svg class="svg__labels augment--guarantee hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
+        <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" />
 

data/_layouts/feed.html

@@ -21,7 +21,7 @@ layout: default
   <div class="feed__card">
 
     <div class="feed__card__image">
-    {% picture {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
+    {% picture thumb {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
     </div>
     <div class="feed__card--text">
 

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

@@ -1,31 +1,100 @@
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# Global mixins            /_sass/_mixins.sass
+ *##############################################
+ *
+ */
 
+@import '_functions'
 
-// Landing page animations
+// ##############################################
 
-// hover and focus animation action
+// 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
 
-// build in's
+// 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%
-      transform: translateX(-50vw)
       opacity: 0
+      transform: translateX(-50vw)
+
     100%
-      transform: translateX(0)
       opacity: 1
+      transform: translateX(0)
+
 
 @mixin slide-from-right
   @keyframes slide-from-right
     0%
-      transform: translateX(50vw)
       opacity: 0
+      transform: translateX(50vw)
+
     100%
-      transform: translateX(0)
       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

@@ -1,3 +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

data/_sass/colors/_variables.sass

@@ -1,15 +1,25 @@
-// Colour variables, accessible within _sass/
+/*
+ *
+ *##############################################
+ *# Global colors  /_sass/colors/_varibales.sass
+ *##############################################
+ *
+ */
 
 // Oxford Product Design
 
-$opd-blue-confidence: rgba(62, 86, 112, 1)
+// #46627d
+$opd-blue-confidence: rgba(70, 98, 125, 1)
 
-$opd-orange-confidence: rgba(210, 84, 75, 1)
+// #da5e51
+$opd-orange-confidence: rgba(218, 94, 81, 1)
 
-$opd-blue-trust: rgba(179, 201, 226, 1)
+// #9CBBD2
+$opd-blue-trust: rgba(174, 201, 229, 1)
 
 $opd-grey-neutral: rgba(178, 178, 178, 1)
 
+
 // Socials
 
 $twitter-primary: rgb(56, 161, 243)
@@ -20,6 +30,7 @@ $linkedin-primary: rgb(14, 118, 168)
 
 $instagram-primary: rgb(64, 93, 230)
 
+
 // General
 
 $pure-white: rgb(255, 255, 255)
@@ -40,6 +51,14 @@ $grey: rgb(130, 130, 130)
 
 $led: rgb(255, 70, 0)
 
-$box-shadow-shade: rgba(0, 0, 0, .2)
 
-$secondary_navbar_color: rgba(255, 255, 255, .3)
+// 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