slow-steps 0.1.10 → 0.2.1

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/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>
 
@@ -29,7 +29,7 @@ layout: default
 {% for faq in site.data.faq %}
 <div class="faq__panel">
   <div class="faq__question">
-    <h4>{{ faq.question }}</h4>
+    <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
   </div>
 
   <div class="faq__answer faq__answer--reveal">
@@ -52,12 +52,21 @@ layout: default
 </script>
 
 <script>
-/* Watch for clicks on more info and reveal text */
+/* Watch for clicks and reveal text */
 document.querySelectorAll('.faq__question').forEach(function(el){
   el.addEventListener('click', function() {
+    this.classList.toggle('faq__question--reveal');
     const n = this.nextElementSibling;
     n.classList.toggle('faq__answer--reveal');
   });
 });
 
 </script>
+
+
+
+<div class="faq__contact">
+    <h2 class="faq__contact--strap">Not found the answer?</h2>
+    {% include contact-form.html %}
+
+</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/about.sass

@@ -33,10 +33,43 @@
 .about--copy
   padding: 3rem 0
 
+.about--video
+  width: 100vw
+  background-color: $opd-grey-neutral
+  display: flex
+  flex-direction: column
+  padding: 5rem 0
+  padding: 0
+  justify-content: space-between
+  & > h2
+    color: $env-primary
+    text-align: center
+    padding: 1rem
+.video__container
+  display: block
+  position: relative
+  width: 100%
+  padding-top: 56.25%
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    width: 100%
+    height: 100%
+
+
 .about__team
   display: flex
   flex-direction: column
   background-color: $pure-white
+  border-top: solid 1px $opd-blue-confidence
+
+.about__team--title
+  padding-top: 3rem
+  text-align: center
+  color: $pure-white
 
 .team__head
   align-items: flex-end
@@ -68,6 +101,14 @@
 .title__title--text
   display: none
 
+.team__title--active
+  .title__title--text
+    display: block
+    position: absolute
+    margin-top: 4rem
+    left: 2rem
+
+
 .team__members
   background-color: $white
   color: $opd-blue-confidence

data/_sass/breakpoints/about.sass

@@ -7,6 +7,22 @@
   .about__team
     flex-direction: row
 
+  .about__team--title
+    display: none
+
+  .about--video
+    flex-direction: row
+    padding: 12rem 0
+    padding: 0
+
+    & > h2
+      padding-left: 5rem
+      text-align: left
+
+  .video__container
+    padding-top: 56.25%
+    //margin-right: 5rem
+
   .team__head
     border-bottom: none
     border-right: solid 1px $opd-blue-confidence
@@ -19,6 +35,14 @@
   .title__title--text
     display: block
 
+  .team__title--active
+    .title__title--text
+      display: block
+      position: relative
+      margin-top: 0
+      left: auto
+
+
   .team__title
     display: flex
     border-radius: 6px 0 0 6px

data/_sass/collage.sass

@@ -0,0 +1,129 @@
+.spacefiller
+  width: 100vw
+  height: $navbar-height + $secondary-navbar-height + 5vh
+
+.collage
+  display: flex
+  flex-flow: wrap
+  background-color: $env-primary
+  justify-content: flex-start
+  align-items: flex-start
+  position: relative
+  border: solid 10px $pure-white
+
+  & > *
+    border: solid 10px $pure-white
+
+.image__header
+  text-align: center
+  color: $pure-white
+  padding: 0 2rem
+
+.collage__image__wrap
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 19%
+  height: 49%
+  position: absolute
+  opacity: 0
+  animation: .4s ease-in-out aniCollage forwards
+  perspective: 1000px
+  &:after
+    position: absolute
+    content: ''
+    width: 100%
+    height: 100%
+    box-shadow: inset 0 0 40px 12px rgba($env-primary, .2)
+    z-index: 99
+  &:hover
+    .collage__image
+      transform: rotateX(90deg)
+      opacity: 0
+
+.collage__image
+  display: block
+  position: absolute
+  object-fit: cover
+  object-position: center
+  width: 100%
+  height: 100%
+  transition: .4s ease-in-out
+  transform-style: preserve-3d
+
+.collage__image__wrap-1
+  height: 65%
+  top: 0
+  width: 30%
+  left: 0
+  animation-delay: 700ms
+
+.collage__image__wrap-2
+  height: 50%
+  width: 40%
+  left: 30%
+  animation-delay: 100ms
+
+.collage__image__wrap-3
+  height: 50%
+  width: 30%
+  left: 70%
+  top: 0
+  animation-delay: 500ms
+
+.collage__image__wrap-4
+  height: 35%
+  width: 40%
+  left: 0
+  top: 65%
+  animation-delay: 300ms
+
+.collage__image__wrap-5
+  width: 60%
+  height: 50%
+  left: 40%
+  top: 50%
+  animation-delay: 900ms
+
+@keyframes aniCollage
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+
+p.job__deadline
+  padding: 1rem 0
+  font-size: $font-size * .8
+
+p.job__description
+  padding: 2rem 0
+  //padding-bottom: 3rem
+
+p.job__links
+  padding: 0
+  padding-bottom: 2rem
+  margin-bottom: 4rem
+  & > a
+    text-decoration: none
+    color: $env-primary
+    &:hover
+      color: $pure-black
+  & > a:first-child
+    text-decoration: none
+    color: $pure-white
+    background-color: $env-primary
+    padding: 1rem 2.5rem
+    border-radius: 8px
+    font-weight: 600
+    margin-right: 3rem
+    @include default-trans
+    &:hover
+      background-color: lighten($env-primary, 10)
+      box-shadow: 1px 1px 5px $light-grey
+
+.fullwidth__wrap > .job__links
+  border-bottom: solid 1px rgba($env-primary, .4)
+  &:last-child
+    border-bottom: none
+    margin-bottom: 10rem