slow-steps 0.4.1 → 0.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4a1d4bde8448a9b326115676b5b1ff9d15522b3ccff4c67861c3081d5ad7db5
-  data.tar.gz: f78cfe5499f41c77606a9b08c37ad01a38f60a6cce554eb43bf38769be26e0a2
+  metadata.gz: 76fa1b7db89e11f4a8a61545e8776a63bdbba3ea8ad4251994e0029d021076d9
+  data.tar.gz: 237de51a201f48a073da012bc55e5b270997fbf01322928ecda1fd70e6b8a33f
 SHA512:
-  metadata.gz: 1ac85811ac4949da04d07b7d2de9f56617d4d87edfb7c75de70b808198eaff716228bc62582e80991c136d49e214bfe109825d8afa45935bf978965be08f874d
-  data.tar.gz: a162ddf4369a1cd0aad3ca6ca728b77a961c4105eeb98437cecd25e480fa254efbee90af6e9302e86b3787a3d3df38bb0debdf7781fd1c9704736744c11c2b77
+  metadata.gz: 60cc19edc62e64866c5df9dfb3e35bea03ea3ff0fd050deb8017b7d4197ab102eb808206a992dab25c721d178ef04013801f4f7c80a9153553a2337a0fc67d7f
+  data.tar.gz: 72bfac426bbe78dca2f4f27c5d8dab09e632614403f81174094a730d12157015524e00b709888971928b440861b7b88b5e0e1b2ca624a2d8066eb39811d78928

data/_config.yml

@@ -53,3 +53,4 @@ autoprefixer:
 picture:
   source:                  'assets/images'
   output:                  'assets/images'
+  strip_metadata:          true

data/_includes/footer/footer_redesign.html

@@ -29,15 +29,22 @@
     <div class="ft__sitemap">
       <div class="ft__sitemap--menu">
 
-        {% if page.url != "/" %}
+        {% if page.url == "/" %}
+        {% assign env = "clinician" %}
 
-        <h2 class="ft__sitemap--header">COMAPNY INFORMATION</h2>
+        {% else %}
+
+        {% assign env = page.env %}
+
+        {% endif %}
+
+        <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 %}
+          {% if item.env == env %}
 
           <div class="ft__sitemap--env">
 
@@ -59,10 +66,11 @@
 
         </div>
 
-        {% endif %}
 
 
 
+        <!--
+        Remove Site map for now
         <h2 class="ft__sitemap--header">INFORMATION FOR</h2>
 
         <div class="ft__sitemap--env-wrap">
@@ -85,6 +93,7 @@
           {% endfor %}
 
         </div>
+        -->
 
       </div>
     </div>
@@ -97,7 +106,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/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

@@ -24,8 +24,16 @@
 
       <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">
+          <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>

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

@@ -51,7 +51,7 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+      <circle class="svg__augment--pulse" cx="33%" cy="2%" >
 
         <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
         -->
@@ -60,13 +60,13 @@ Last full read through 27/12/2020
         <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" />
+      <circle class="svg__augment--led" cx="33%" cy="2%" r=".5" />
 
     </svg>
 
 </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/pwp.html

@@ -63,7 +63,7 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+      <circle class="svg__augment--pulse" cx="33%" cy="2%" >
 
         <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
         -->
@@ -72,13 +72,13 @@ Last full read through 27/12/2020
         <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" />
+      <circle class="svg__augment--led" cx="33%" cy="2%" r=".5" />
 
     </svg>
 
 </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/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
@@ -429,3 +430,12 @@ $svg-text-offset: 60px
 
   &:hover
     color: $opd-coral
+
+
+.skip-link
+  margin: 0
+  position: absolute
+  padding: 0
+  width: 1px
+  height: 1px
+  overflow: hidden

data/_sass/navigation/breakpoints/1024.sass

@@ -77,23 +77,32 @@
     overflow: hidden
     position: relative
 
+
   .sub-link,
   .subsub-link
     color: $env-primary
 
+    span
+      padding: 1rem 0
+      border-bottom: solid 1px rgba($pure-white, 0)
+
   .nav-cta
     @include default-trans
     color: $pure-white
     background-color: $env-primary
-    padding: 2rem 2rem!important
+    //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
@@ -111,6 +120,11 @@
     &:after
       left: 3px
 
+  .current--env
+    span
+      border-bottom: solid 1px $pure-white
+
+
   .nav-group-content
     @include default-trans
     @include navbar-color
@@ -169,7 +183,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

@@ -23,7 +23,7 @@
   background-color: $env-primary
   color: $white
   left: 5vw
-  max-width: 50vw
+  max-width: 90vw
   text-transform: uppercase
   //bottom: -10px
   border: solid 1px $white
@@ -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.1
+  version: 0.4.6
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-04 00:00:00.000000000 Z
+date: 2021-03-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -221,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
@@ -258,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