slow-steps 0.2.1 → 0.4.0

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 }}">{{ cta.name }}</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 }}">{{ cta.name }}</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

@@ -87,7 +87,7 @@ Last full read through 27/12/2020
 
   <div class="segment__left">
   <div class="segment__gaurentee center-text">
-    <div data-aos="fade-right">
+    <div data-aos="zoom-in">
       {% include branding/site-logo.svg %}</div>
     <p data-aos="fade-in" class="strap__guarantee">
       {{ description }}</p></div>
@@ -100,9 +100,9 @@ Last full read through 27/12/2020
 
   </div>
 
-  <div class="segment__right augmented-image" >
+  <div class="segment__right augmented-image svg__labels--red augment-not-fullwidth" >
 
-    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee"%}
 
 
 </div>

data/_layouts/faq.html

@@ -27,6 +27,8 @@ layout: default
 
 <div class="faq__wrapper">
 {% for faq in site.data.faq %}
+
+{% if faq.display == 'all' or faq.display == page.env %}
 <div class="faq__panel">
   <div class="faq__question">
     <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
@@ -36,6 +38,7 @@ layout: default
     <p>{{ faq.answer }}</p>
   </div>
 </div>
+{% endif %}
 {% endfor %}
 </div>
 

data/_layouts/feed.html

@@ -18,7 +18,7 @@ layout: default
 
   {% for post in site.posts %}
 
-  <div class="feed__card">
+  <div class="feed__card" data-aos="fade-up">
 
     <div class="feed__card__image">
     {% picture thumb {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}

data/_layouts/post.html

@@ -8,7 +8,7 @@ layout: default
 
 <div class="post__title">
 <h1 >{{ page.title }}</h1>
-<p class="post__meta">{{ site.data.authors[page.author].name }} | {{ site.data.authors[page.author].email }} | {{ page.date | date: "%d-%m-%y" }}</p>
+<p class="post__meta">{%- if page.author -%}{{ site.data.authors[page.author].name }} | {{ site.data.authors[page.author].email }}{%- else -%}{{ site.data.authors.default.name }} | {{ site.data.authors.default.email }}{% endif %} | {{ page.date | date: "%d-%m-%y" }}</p>
 </div>
 </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
@@ -51,14 +54,4 @@ $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
+$image-blend: rgb(73, 100, 122)

data/_sass/_colors/collection.sass

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

data/_sass/_functions.sass

@@ -1,2 +1,11 @@
 @function url-friendly-colour($colour)
   @return '%23' + str-slice('#{$colour}', 2, -1)
+
+
+// Remove the unit of a length
+// https://css-tricks.com/snippets/sass/strip-unit-function/
+@function strip-unit($number)
+  @if type-of($number) == 'number' and not unitless($number)
+    @return $number / ($number * 0 + 1)
+
+  @return $number

data/_sass/_mixins.sass

@@ -18,7 +18,9 @@
   opacity: .6
 
 @mixin image-filter-rotate
-  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+  mix-blend-mode: screen
+  filter: grayscale(1)
+  //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)
 
 // Applied to an overlaying div
 @mixin image-filter--blur
@@ -31,8 +33,9 @@
 // Landing page animations - hover and focus
 
 @mixin reveal-landing-strap
-  height: 30vh
-  padding: 0 3rem
+  height: auto
+  max-height: 400px
+
 
 // Snappy build function, see /_sass/_variables.sass for $bezier-snap
 @mixin build-in($name)
@@ -68,18 +71,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 +104,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
@@ -45,6 +45,7 @@
     color: $env-primary
     text-align: center
     padding: 1rem
+
 .video__container
   display: block
   position: relative
@@ -64,7 +65,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 +74,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 +93,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 +112,7 @@
 
 .team__members
   background-color: $white
-  color: $opd-blue-confidence
+  color: $opd-blue
   padding-top: 10rem
 
 .single__member
@@ -149,6 +150,7 @@
   display: flex
   align-items: center
   color: $grey
+  font-size: $font-size
 
 .member__socials
   align-items: center
@@ -193,6 +195,7 @@
     font-size: $font-size * .6
 
 .info__reveal
+  align-items: baseline
   height: $font-size * 1
   padding-bottom: $font-size * 2
   transform: translateY(0)

data/_sass/breakpoints/about.sass

@@ -1,5 +1,5 @@
 
-@media screen and ( min-width: 768px )
+@media screen and ( min-width: 1024px )
 
   .about--copy
     max-width: 800px
@@ -20,12 +20,21 @@
       text-align: left
 
   .video__container
+    display: block
+    position: relative
+    width: 100%
     padding-top: 56.25%
-    //margin-right: 5rem
+    background-color: $env-primary
+    iframe
+      position: absolute
+      margin: auto
+      width: 75%
+      height: 100%
+
 
   .team__head
     border-bottom: none
-    border-right: solid 1px $opd-blue-confidence
+    border-right: solid 1px $opd-blue
     display: block
     height: auto
     width: auto
@@ -49,7 +58,7 @@
     padding: 2rem 4rem 2rem 2rem
     transform: rotate(0)
     white-space: nowrap
-    color: $opd-blue-confidence
+    color: $opd-blue
     border: solid 1px rgba($env-primary, 0)
     margin: 2rem 0
     &:not(.team__title--active)
@@ -71,7 +80,7 @@
 
   .team__members
     //padding: 10rem
-    color: $opd-blue-confidence
+    color: $opd-blue
     background-color: $white
 
   .team__title--active
@@ -80,7 +89,7 @@
     padding-right: 1rem !important
     color: $env-primary !important
     background-color: $white
-    border: solid 1px $opd-blue-confidence
+    border: solid 1px $opd-blue
     border-right: solid 1px $white
     transform: translateX(1px)
     text-align: right

data/_sass/collage.sass

@@ -60,6 +60,7 @@
 
 .collage__image__wrap-2
   height: 50%
+  top: 0
   width: 40%
   left: 30%
   animation-delay: 100ms
@@ -115,7 +116,7 @@ p.job__links
     background-color: $env-primary
     padding: 1rem 2.5rem
     border-radius: 8px
-    font-weight: 600
+    font-weight: $heavy-font
     margin-right: 3rem
     @include default-trans
     &:hover

data/_sass/contact.sass

@@ -17,7 +17,9 @@
   padding: 0 1rem
 
 .form-instruction
-  padding-bottom: 2rem
+  padding-bottom: $font-size
+  padding-top: $lg-font-size
+  color: $env-primary
 
 .contact-form
   width: 100%
@@ -30,7 +32,7 @@
     padding: 2rem
   label
     font-size: $font-size * .8
-    color: $black
+    color: $env-secondary
 
 .google-map
   width: 100%
@@ -52,20 +54,22 @@
   .fas
     color: $env-primary
   a
-    color: $black
+    color: $env-secondary
     transition: all .2s ease-in-out
     //text-decoration: none
     &:hover
       color: $env-primary
   .social-media-link
-    font-size: $font-size * 1.4
+    font-size: $lg-font-size
+    color: $env-secondary
+    padding-right: $lg-font-size
 
 .form-element
   width: 100%
   height: 40px
   border-radius: 4px
   //font-size: 1rem
-  font-weight: 100
+  font-weight: $medium-font
   margin: 2vh 0
   border: none
   background-color: $pure-white
@@ -87,22 +91,6 @@
   width: auto
   position: relative
 
-.social-media
-  display: flex
-  justify-content: center
-  padding: 0
-  margin: 0
-  z-index: 9999
-
-.social-media-item
-  list-style: none
-  padding-right: 2rem
-
-.social-media-link
-  color: $grey
-  transition: all .3s ease-in-out
-
-
 
 @media screen and ( min-width: 1024px )
 
@@ -120,9 +108,6 @@
     width: 60%
     padding: 0 5rem
 
-  .form-instruction
-    padding-bottom: 2rem
-
   .contact-form
     width: 100%
     display: block
@@ -155,7 +140,6 @@
     .fas
       color: $env-primary
     a
-      color: $black
       transition: all .2s ease-in-out
       text-decoration: none
       &:hover
@@ -168,7 +152,7 @@
     height: 40px
     border-radius: 4px
     //font-size: 1rem
-    font-weight: 100
+    font-weight: $medium-font
     margin: 2vh 0
     border: none
     background-color: $pure-white
@@ -210,18 +194,3 @@
       &::after
         opacity: 1
         transition: all 0.3s
-
-  .social-media
-    display: flex
-    justify-content: flex-start
-    padding: 0
-    margin: 0
-    z-index: 9999
-
-  .social-media-item
-    list-style: none
-    padding-right: 2rem
-
-  .social-media-link
-    color: $grey
-    transition: all .3s ease-in-out