slow-steps 0.4.0 → 0.4.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbad31b2a8aaea8349d5af8c79aa8b6fb3678e131c2b0fda6bb7daa68b331d51
-  data.tar.gz: 9e1b70d5ee7bc2e102e4e1fa30cedd1f6b7ecadf23816438a15b6d885a40ed34
+  metadata.gz: 1972222c57d570c8014e1163d8b5f065b84dbe48fe95a90946a010cfb041ede3
+  data.tar.gz: 13d87cbd90ba7b01b72ea99057b8bafc7a36eb740de1d217ddd480e4226dbae5
 SHA512:
-  metadata.gz: 5e3164e6bf919b747ca3f25f96cced25aee3fbabb934d0d3176b063f2aa3a31f40b2317d5b4a0acf32fe838df1eb27f2c74247cc48939d45f2f7c39d60034e9c
-  data.tar.gz: 5ab6d9779c3ffc803772a8e2c64327442910d353d2c008e293bbf9101d29f8ef61f9467a77633bb58b9e2c4c416c47999e74a58b64802e78c7d9f03d95057b94
+  metadata.gz: d0e914258f26ed1ca32d0009bbac49a6511a135d628c9ee0a8925a21f909e0f48afe8a52f5a36c95953d25c78c592e85f367e2283b1df91ae598218fa4fb5acb
+  data.tar.gz: 577c834778b637c35c2bc3b4505db510070504a07f3a1185c1a9ac98cf8f93ac100d8f7f685145af446081f41cdbec5a534a85c874524c7fa31abb0e777f5fd6

data/_includes/cookie-consent.html

@@ -0,0 +1,21 @@
+<!--
+This is where we put scripts for managing cookie consent
+This is placed before /body along with _include/scripts.html
+-->
+
+<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
+
+<script>
+window.cookieconsent.initialise({
+
+  "theme": "block",
+  "position": "top",
+  "content": {
+    "message": "{{ site.cookieconsent.message }}",
+    "dismiss": "{{ site.cookieconsent.button }}",
+    "link": "Tell me more.",
+    "href": "/privacy-policy/#cookies",
+    "target": "_self"
+  }
+});
+</script>

data/_includes/footer/footer_redesign.html

@@ -11,53 +11,85 @@
           <li class="ft__company__logo">
             {% include /branding/site-logo.svg %}
           </li>
-          <li class="ft__company__no">Registered in England and Wales, company number 12281171.</li>
+
+          <li class="ft__company__no">{{ site.company.registration }} {{ site.company.number }}.</li>
+          <!--
           <li class="address"><h4>Registered office</h4></li>
           {% for item in site.postal_add %}
           <li class="address">{{ item[1] }}</li>
           {% endfor %}
-
-<!--
-          <ul class="social-media">
-
-          {% for social in site.socials %}
-          <li class="social-media-item">
-          <a href="{{ social.url }}">
-          <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
-          </li>
-          {% endfor %}
-
-          </ul>
--->
+          -->
         </ul>
 
       </div>
     </div>
 
+
+
     <div class="ft__sitemap">
       <div class="ft__sitemap--menu">
+
+        {% if page.url != "/" %}
+
+        <h2 class="ft__sitemap--header">COMPANY INFORMATION</h2>
+
+        <div class="ft__sitemap--env-wrap">
+
+          {% for item in site.data.menu.navigation %}
+
+          {% if item.env == page.env %}
+
+          <div class="ft__sitemap--env">
+
+            <ul class="ft__sitemap--submenu ft__sitemap--company">
+
+              {% for sub in item.submenu %}
+              {% if sub.id == 'footer' %}
+
+              <li><a class="ft__sitemap--link " href="{{ sub.url | relative_url }}">{{ sub.alt }}</a></li>
+
+              {% endif %}
+              {% endfor %}
+
+            </ul>
+          </div>
+          {% endif %}
+
+          {% endfor %}
+
+        </div>
+
+        {% endif %}
+
+
+
         <h2 class="ft__sitemap--header">INFORMATION FOR</h2>
 
         <div class="ft__sitemap--env-wrap">
-        {% for item in site.data.menu.navigation %}
+          {% for item in site.data.menu.navigation %}
 
           <div class="ft__sitemap--env">
 
             <h3 class="ft__sitemap--env-header">{{ item.name }}</h3>
             <ul class="ft__sitemap--submenu">
-            {% for sub in item.submenu %}
-              {% if sub.id != 'contact' %}
+              {% for sub in item.submenu %}
+              {% if sub.id == 'nav' %}
+
               <li><a class="ft__sitemap--link" href="{{ sub.url | relative_url }}">{{ sub.alt }}</a></li>
+
               {% endif %}
-            {% endfor %}
+              {% endfor %}
             </ul>
           </div>
 
-        {% endfor %}
+          {% endfor %}
+
+        </div>
 
-      </div>
       </div>
     </div>
+
+
     <div class="ft__contact">
 
       <h2 class="ft__contact--header">Connect with us</h2>
@@ -65,7 +97,7 @@
       <ul>
         <li class="ft__contact--link"><a href="mailto:{{ site.email }}"><i class="fas fa-envelope"></i>{{ site.email }}</a></li>
 
-        <li class="ft__contact--link"><a href="tel:{{ site.phone }}"><i class="fas fa-phone-square"></i>{{ site.phone }}</a></li>
+       <!--- <li class="ft__contact--link"><a href="tel:{{ site.phone }}"><i class="fas fa-phone-square"></i>{{ site.phone }}</a></li> -->
 
       </ul>
 

data/_includes/forms/mc-register.html

@@ -123,9 +123,9 @@
       <div class="mc-field-group input-group" style="position: absolute; left: -5000px;" aria-hidden="true">
         <select name="USERTYPE" class="required" id="mce-USERTYPE" >
           {% if page.env == 'pwp' %}
-          <option value="PWP" selected></option>
+          <option value="PwP" selected></option>
           {% else %}
-          <option value="CLINICIAN" selected></option>
+          <option value="Clinician" selected></option>
           {% endif %}
         </select>
       </div>

data/_includes/head/descriptors/og-meta.html

@@ -1,6 +1,11 @@
 
 <!-- *** OG *** https://ogp.me/ -->
-<meta property="og:title" content="{% if page.url == "/" %} {{ site.title }} {% else %} {{ page.title }} | {{ site.title }} {% endif %}" />
+<meta property="og:title" content="
+{% if page.url == '/' %}
+{{ site.title }} | {{ site.subtitle }}
+{% else %}
+{{ page.title }} | {{ site.title }}
+{% endif %}" />
 
 <!-- Adds article properties for posts -->
 
@@ -37,7 +42,7 @@
 <!-- use local image if it exist but only for posts -->
 
 {% if page.id %}
-{% assign image = '/posts/' | append: page.image %}
+{% assign image = '/posts/' | append: page.hero %}
 {% else %}
 {% assign image = site.fallback_path | append: site.brand %}
 {% endif %}
@@ -52,7 +57,12 @@
 
 <!-- to implement this properly we need some kind of db recording the descriptors of our thumbs -->
 
-<meta property="og:image:alt" content="{{ site.subtitle }}" />
+<meta property="og:image:alt" content="
+{%- if page.id -%}
+  {{ page.hero_alt }}
+{%- else -%}
+  {{ site.subtitle }}
+{%- endif -%} "" />
 
 <meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
 

data/_includes/head/descriptors/twitter-meta.html

@@ -10,8 +10,16 @@
   {% else %} {{ page.description }} {% endif %}" />
 
   <meta name="twitter:image" content="
-  {%- if page.image -%}{{ site.url }}{{ site.baseurl }}{{ site.default_path }}
-  {%- if page.id -%}{{ page.image | prepend: 'posts/' }}{%- else -%}{{ page.image }}{%- endif -%}{%- else -%}{{ site.url }}{{ site.baseurl }}{{ site.fallback_path }}{{ site.brand }}{%- endif -%}" />
+  {%- if page.id -%}
+    {{ site.url }}{{ site.baseurl }}{{ site.default_path }}{{ page.hero | prepend: 'posts/' }}
+  {%- else -%}
+    {{ site.url }}{{ site.baseurl }}{{ site.fallback_path }}{{ site.brand }}
+  {%- endif -%} "/>
   <!-- to implement this we need some kind of db recording the descriptors of our thumbs -->
-  <meta name="twitter:image:alt" content="" />
+  <meta name="twitter:image:alt" content="
+  {%- if page.id -%}
+    {{ page.hero_alt }}
+  {%- else -%}
+    {{ site.subtitle }}
+  {%- endif -%} " />
 <!-- *** END TWITTER:CARD *** -->

data/_includes/head/head.html

@@ -31,7 +31,13 @@
   {% assign date = 'now' | date: "%Y" %}
   <meta name="copyright" content="Copyright {{ site.title | append: ' Limited ' | append: date }}" />
 
+  <!-- if production, get bots to follow us -->
+  {% if jekyll.environment == "production" %}
   <meta name="robots" content="follow" />
+  <!-- else, stop the site from beinf indexed -->
+  {% else %}
+  <meta name="robots" content="noindex">
+  {% endif %}
 
   <link rel="canonical" href="{{ page.url | absolute_url }}" />
 
@@ -53,8 +59,6 @@
   {% include head/google-analytics.html %}
   {% endif %}
 
-
-
 </head>
 
 <body class="preload" onload="animate_after_load()">

data/_includes/head/stylesheets.html

@@ -1,3 +1,6 @@
+
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" media="none" onload="if(media!='all')media='all'" />
+
 <!-- Animate on scroll, js is in footer -->
 <link rel="stylesheet" type="text/css" href="{{ '/assets/vendor/aos/aos.css' | relative_url }}" media="none" onload="if(media!='all')media='all'" />
 

data/_includes/image-post.html

@@ -1,9 +1,11 @@
+
+
 <!--
   insert an image located in assets/images/posts/ and wrap with .post__image div.
 -->
 <div class="post__image">
 
-  {% picture post {{ include.link | prepend: 'posts/' }} --alt {{include.alt}} --img class="post__content--image" %}
+  {% picture post {{ include.link | prepend: 'posts/' }} --alt {{include.alt}} --img class="post__content--image image--{{ include.focus }}" %}
 
   {% if include.caption %}
   <p class="image--caption">{{ include.caption }}</p>

data/_includes/image.html

@@ -47,7 +47,7 @@
 </svg>
 {% endif %}
 
-<!-- closing warpping div -->
+<!-- closing wrapping div -->
 </div>
 
 {% if include.caption %}

data/_includes/navigation/global.html

@@ -10,9 +10,9 @@
   </div>
 
     {% if page.url != "/" %}
-
+    <!-- exclude on home -->
       {% if page.url != "/error-pages/404" %}
-
+      <!-- exclude on error pages -->
       <ul class="social-media">
         {% for social in site.socials %}
         <li class="social-media-item">
@@ -24,11 +24,23 @@
 
       <ul class="nav-list">
         {% for item in site.data.menu.navigation %}
+        
         <li class="nav-group">
-          <a href="{{ item.url | relative_url }}" class="nav-group-link nav-link {{ item.env }}-group-link">
-            <span>{{ item.name }}</span></a>
+          <a href="{{ item.url | relative_url }}" class="nav-group-link nav-link
+          {% assign url = page.env | append: '/' | prepend: '/' %}
+
+          {% if item.url == url %}
+          current--env
+          {% endif %}
+
+          {{ item.env }}-group-link">
+
+            <span>{{ item.name }}</span>
+          </a>
+
           <div class="nav-group-content {{ item.env }}-group">
             {% for sub in item.submenu %}
+            {% if sub.id == 'nav' %}
             <div class="nav-group-container">
             <a
               class="
@@ -36,6 +48,9 @@
                 sub-link
                 {% if page.url == sub.url %}
                 current--url
+                {% endif %}
+                {% if sub.cta == true %}
+                nav-cta
                 {% endif %}" href="{{ sub.url | relative_url }}">
               <span>{{ sub.name }}</span></a>
 
@@ -50,6 +65,7 @@
               {% endif %}
 
             </div>
+            {% endif %}
             {% endfor %}
           </div>
         </li>

data/_includes/scripts.html

@@ -26,6 +26,8 @@
 
 <script type="text/javascript" src="{{ '/assets/vendor/aos/aos.js' | relative_url }}" ></script>
 
+{% include cookie-consent.html %}
+
 <script>
   AOS.init({
     disable: false,

data/_layouts/about.html

@@ -41,7 +41,7 @@ Last full read through 29/12/2020
 
 <!-- exclude if no text is provided -->
 {% if site.data.copy.about[page.env].text %}
-<div class="about__copy bg--env-100" >
+<div class="about__copy bg--env-100" id="content">
 
   {% for item in site.data.copy.about[page.env].text %}
   <p class="about--copy" data-aos="fade-in">

data/_layouts/careers.html

@@ -17,6 +17,6 @@ layout: default
 {% endfor %}
 </div>
 
-<div class="fullwidth__wrap">
+<div class="fullwidth__wrap" id="content">
 {{ content }}
 </div>

data/_layouts/contact.html

@@ -25,7 +25,7 @@ layout: default
 
 </div>
 
-<div class="contact__wrapper">
+<div class="contact__wrapper" id="content">
 
   <div class="contact--left">
     {% include contact-form.html %}

data/_layouts/default.html

@@ -4,10 +4,13 @@ layout: compress
 
 {% include head/head.html %}
 
+<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
+
 {% include navigation/global.html %}
 
 {{ content }}
 
+
 {% include footer/footer_redesign.html %}
 
 {% include scripts.html %}

data/_layouts/env/clinician.html

@@ -66,7 +66,7 @@ Last full read through 27/12/2020
 
 </div>
 
-<div class="segment__wrap">
+<div class="segment__wrap" id="content">
 
   <div class="segment__left strap--opd-trust">
 
@@ -81,7 +81,7 @@ Last full read through 27/12/2020
     {%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
     {%- assign env = env[0] -%}
 
-    {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+    {%- assign cta = env.submenu | where: 'cta', 'true' -%}
     {%- assign cta = cta[0] -%}
 
     <a class="action__call" aria-label="{{ cta.aria }}" href="{{ cta.url }}">

data/_layouts/env/landing.html

@@ -17,10 +17,10 @@ Last full read through 27/12/2020
   {%- assign env = site.data.menu.navigation | where: 'env', 'pwp' -%}
   {%- assign env = env[0] -%}
 
-  {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+  {%- assign cta = env.submenu | where: 'cta', 'true' -%}
   {%- assign cta = cta[0] -%}
 
-  {%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
+  {%- assign cta_2 = env.submenu | where: 'cta', 'landing' -%}
   {%- assign cta_2 = cta_2[0] -%}
 
   <div class="page__half">
@@ -51,10 +51,10 @@ Last full read through 27/12/2020
   {%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
   {%- assign env = env[0] -%}
 
-  {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+  {%- assign cta = env.submenu | where: 'cta', 'true' -%}
   {%- assign cta = cta[0] -%}
 
-  {%- assign cta_2 = env.submenu | where: 'id', 'landing' -%}
+  {%- assign cta_2 = env.submenu | where: 'cta', 'landing' -%}
   {%- assign cta_2 = cta_2[0] -%}
 
   <div class="page__half">

data/_layouts/env/pwp.html

@@ -78,7 +78,7 @@ Last full read through 27/12/2020
 
 </div>
 
-<div class="center-text strap__100 strap--opd-trust">
+<div class="center-text strap__100 strap--opd-trust" id="content">
   <h2>{{ site.data.copy.landing.pwp.subtitle }}</h2>
   <p data-aos="fade-in">{{ site.data.copy.landing.pwp.strap }}</p>
 </div>

data/_layouts/error-page.html

@@ -3,7 +3,7 @@ layout: default
 ---
 
 
-<section class="error-page">
+<section class="error-page" id="content">
 
 {{ content }}
 

data/_layouts/faq.html

@@ -25,7 +25,7 @@ layout: default
 
 </div>
 
-<div class="faq__wrapper">
+<div class="faq__wrapper" id="content">
 {% for faq in site.data.faq %}
 
 {% if faq.display == 'all' or faq.display == page.env %}

data/_layouts/feed.html

@@ -14,14 +14,14 @@ layout: default
 
 </section>
 
-<div class="post__feed">
+<div class="post__feed" id="content">
 
   {% for post in site.posts %}
 
   <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" %}
+    {% picture thumb {{ post.hero | prepend: 'posts/' }} --alt {{ post.hero_alt }} --img class="feed__card--image image--{{ page.hero_focus }}" %}
     </div>
     <div class="feed__card--text">
       <p class="feed__card--meta">Published <span>{{ post.date | date: "%b %d, %Y" }}</span></p>

data/_layouts/full-width.html

@@ -27,7 +27,7 @@ layout: default
 
 {% endif %}
 
-<section class="fullwidth__wrap">
+<section class="fullwidth__wrap" id="content">
 
   {{ content }}
 

data/_layouts/post.html

@@ -4,7 +4,7 @@ layout: default
 
 <section class="post_head">
 
-{% picture {{ page.image | prepend: 'posts/' }} --alt {{ page.image_alt }} --img class="post__hero" %}
+{% picture {{ page.hero | prepend: 'posts/' }} --alt {{ page.hero_alt }} --img class="post__hero image--{{ page.hero_focus }}" %}
 
 <div class="post__title">
 <h1 >{{ page.title }}</h1>
@@ -13,7 +13,7 @@ layout: default
 </section>
 
 
-<section class="post__content">
+<section class="post__content" id="content">
 
 <h2 class="post__subtitle">{{ page.subtitle }}</h2>
 

data/_layouts/product.html

@@ -0,0 +1,62 @@
+---
+layout: default
+---
+
+{% if page.hero %}
+<header class="product__strap "  aria-label="{{ strap }}">
+  <h1>
+    {{ page.title }}
+  </h1>
+</header>
+
+<div class="product__hero">
+  {% picture {{ page.hero.file | prepend: 'content/' }}
+    --img class=""
+    --alt {{ page.hero.alt }} %}
+</div>
+{% endif %}
+
+<div class="product__info">
+
+  <h1 class="product__title" data-aos="fade-down">
+    {{ site.data.copy.product[page.env].title }}
+  </h1>
+
+  {% for para in site.data.copy.product[page.env].overview %}
+  <p data-aos="fade-up">
+    {{ para.para }}
+  </p>
+  {% endfor %}
+</div>
+
+
+<div class="product__wrap">
+  <div class="product__image" data-aos="zoom-in-right" data-aos-anchor-placement="top-center">
+
+    {% include image.html image="device_1" alt="Describe the image" class="product--image" %}
+
+  <div class="product__description">
+    <p data-aos="fade-left">
+      <span class="product__start">
+        {{ site.data.copy.product[page.env].device[0].para | split: '\' | first }}
+      </span> {{ site.data.copy.product[page.env].device[0].para | split: '\' | last }}
+    </p>
+  </div>
+</div>
+
+
+<div class="product__wrap">
+  <div class="product__description txt-right">
+
+    <p data-aos="fade-right">
+      <span class="product__start">
+        {{ site.data.copy.product[page.env].device[1].para | split: '\' | first }}
+      </span> {{ site.data.copy.product[page.env].device[1].para | split: '\' | last }}
+      </p>
+
+  </div>
+
+  <div class="product__image" data-aos="zoom-in-left" data-aos-anchor-placement="top-center">
+    {% include image.html image="device_2" alt="Describe the image" class="product--image" %}
+
+</div>

data/_layouts/register.html

@@ -4,7 +4,7 @@ layout: default
 
 <div class="fullwidth__wrap bg--light">
   <div class="narrow__wrap no-touch__wrap">
-    <div class="form__wrap">
+    <div class="form__wrap" id="content">
     {% include /forms/mc-register.html %}
   </div></div>
 </div>

data/_sass/_mixins.sass

@@ -19,7 +19,7 @@
 
 @mixin image-filter-rotate
   mix-blend-mode: screen
-  filter: grayscale(1)
+  filter: grayscale(1) brightness(1.3)
   //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)
 
 // Applied to an overlaying div

data/_sass/footer_redesign.sass

@@ -73,6 +73,7 @@
   li
     //line-height: 2rem
     list-style: none
+
     &:last-child
       @include default-trans
       margin: auto
@@ -88,6 +89,7 @@
       a
         text-decoration: none
 
+
   .ft__sitemap--link
     //text-decoration: none
     color: inherit
@@ -220,7 +222,7 @@
     width: 40vw
 
   .ft__sitemap, .ft__contact
-    margin-top: 9.5rem
+    margin-top: 0
 
 
     .ft__sitemap--submenu
@@ -250,9 +252,11 @@
       list-style: none
 
       &:last-child
-        margin-top: 5rem
+        //margin-top: 5rem
+        margin-bottom: 8rem
         width: auto
         border: solid 1px $opd-coral
+
         .ft__sitemap--link
           @include default-trans
           text-align: center

data/_sass/global.sass

@@ -239,8 +239,9 @@ body
 // This is digusting! We need to tweak the actual html so we can readilly access these elements.
 .svg__labels--red
   & > svg > * > *
-    fill: $opd-coral
-    stroke: $opd-coral!important
+    fill: darken($opd-coral, 10)
+  & > svg > * > line
+    stroke: darken($opd-coral,10)!important
 
 
 $svg-text-offset: 60px
@@ -392,3 +393,49 @@ $svg-text-offset: 60px
 
     span
       color: $white
+
+
+.cc-window
+  background-color: $opd-blue
+  display: flex
+  align-items: center
+  position: fixed
+
+.cc-message
+  width: 80vw
+  padding: 3rem 2rem
+  color: $pure-white
+
+.cc-compliance
+  width: 20vw
+  border-style: none
+  height: 100%
+
+
+
+.cc-dismiss
+  display: flex
+  flex-wrap: nowrap
+  background-color: $opd-coral
+  border-style: none
+  color: $pure-white
+  border-radius: 6px
+
+  &:hover
+    background-color: lighten($opd-coral, 10)
+
+.cc-link
+  text-decoration: none
+  color: lighten($opd-coral, 10)
+
+  &:hover
+    color: $opd-coral
+
+
+.skip-link
+  margin: 0
+  position: absolute
+  padding: 0
+  width: 1px
+  height: 1px
+  overflow: hidden

data/_sass/navigation/breakpoints/1024.sass

@@ -63,6 +63,8 @@
 
   .nav-group-content
     //text-indent: 2rem
+    &:last-child
+      margin-right: 10rem
     .nav-link
       margin: 0
 
@@ -75,10 +77,31 @@
     overflow: hidden
     position: relative
 
+
   .sub-link,
   .subsub-link
     color: $env-primary
+    border-bottom: solid 1px $pure-white
+    span
+      padding: 1rem 0
+
+  .nav-cta
+    @include default-trans
+    color: $pure-white
+    background-color: $env-primary
+    //padding: 2rem 2rem!important
+    margin-right: 8rem!important
+    border-radius: 6px
 
+    span
+      padding: 0
+
+    &:before, &:after
+      display: none!important
+
+    &:hover
+      background-color: darken($env-primary,10)
+      border-bottom: none
 
   // Surround current link with ticks
   .current--url
@@ -96,6 +119,11 @@
     &:after
       left: 3px
 
+  .current--env
+    span
+      border-bottom: solid 1px $pure-white
+
+
   .nav-group-content
     @include default-trans
     @include navbar-color
@@ -154,7 +182,8 @@
       padding: 1rem 3rem
       &:not(.current--url)
         &:hover
-          text-decoration: underline
+          span
+            border-bottom: solid 1px $env-primary
 
   .nav-group-container:hover > .nav-subsub-content
     visibility: visible

data/_sass/post.sass

@@ -53,10 +53,16 @@
 .post__content--image
   display: block
   object-fit: cover
-  object-position: top
+  object-position: center
   width: 100%
   height: 50vh
 
+.image--north
+  object-position: top
+
+.image--south
+  object-position: bottom
+  
 .post__link
   color: $opd-blue
   text-decoration: none

data/_sass/product.sass

@@ -0,0 +1,93 @@
+
+
+@media screen and ( min-width: 768px )
+
+  .product__hero
+    animation: slide-hero 1.2s
+    animation-delay: .6s
+    animation-fill-mode: forwards
+    //object-fit: cover
+    //overflow: hidden
+
+
+    img
+      display: block
+      //height: 100vh
+      //height: calc(var(--vh, 1vh) * 100)
+      //z-index: 2
+      object-fit: cover
+
+
+  @keyframes slide-hero
+
+    0%
+      transform: translateX(0)
+
+    100%
+      transform: translateY(35vh)
+
+  .product__strap
+    text-align: center
+    animation: slide-strap 1s
+    animation-delay: 1s
+    animation-fill-mode: forwards
+    color: $env-primary
+    overflow: hidden
+    font-size: $lg-font-size
+    //overflow-y: visible
+
+  @keyframes slide-strap
+
+    0%
+      transform: scale(0) translateY(25vh)
+
+    100%
+      transform: scale(1) translateY(25vh)
+
+
+  .product__info
+    //height: 100vh
+    background-color: $pure-white
+    text-align: center
+    margin-top: 35vh
+
+    p
+      width: 80vw
+      max-width: 800px
+      margin: auto
+
+  .product__title
+    padding: 10rem 0 5rem 0
+
+  .product__wrap
+    display: flex
+    flex-direction: row
+    width: 100%
+    background-color: $pure-white
+    padding: 20vh 0 0
+    margin: auto
+    justify-content: center
+    overflow: hidden
+
+  .product__image,
+  .product__description
+    display: flex
+    align-content: center
+    align-self: center
+    justify-content: center
+    width: 40vw
+    max-width: 600px
+    overflow: hidden
+
+  .product__start
+    color: $env-primary
+    font-weight: $heavy-font
+
+  .product--image
+    display: block
+    width: 100%
+    max-width: 300px
+    object-fit: cover
+
+  .txt-right
+    text-align: right

data/assets/css/env/gaitq_clinician.sass

@@ -39,6 +39,8 @@ $baseurl: '{{ site.baseurl }}/'
 
 @import 'breakpoints/about'
 
+@import 'product'
+
 @import 'forms/mc-forms'
 
 @import 'contact'

data/assets/css/env/gaitq_pwp.sass

@@ -41,6 +41,8 @@ $baseurl: '{{ site.baseurl }}/'
 
 @import 'breakpoints/about'
 
+@import 'product'
+
 @import 'forms/mc-forms'
 
 @import 'contact'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.5
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-03 00:00:00.000000000 Z
+date: 2021-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -184,6 +184,7 @@ files:
 - _includes/build-version.html
 - _includes/contact-details.html
 - _includes/contact-form.html
+- _includes/cookie-consent.html
 - _includes/env_filter.html
 - _includes/errors/robot-403.svg
 - _includes/errors/robot-404.svg
@@ -220,6 +221,7 @@ files:
 - _layouts/feed.html
 - _layouts/full-width.html
 - _layouts/post.html
+- _layouts/product.html
 - _layouts/register.html
 - _sass/_colors/README.md
 - _sass/_colors/_clinician.sass
@@ -257,6 +259,7 @@ files:
 - _sass/navigation/no-nav.sass
 - _sass/navigation/pwp.sass
 - _sass/post.sass
+- _sass/product.sass
 - _sass/typography/_variables.sass
 - _sass/typography/branding.sass
 - _sass/typography/resets.sass