slow-steps 0.3.3 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 131fd96f7e7f0b993964278f1fcbc9f078a73110f885915a025ddce8f6f42694
-  data.tar.gz: 1f9e861f673cb2c100fa4c1839bfcb900181f99b1e219f6ca7356191b99db974
+  metadata.gz: f139255a97d5ba774425bd881d404f69326bb2372cef233eefea1242deeba391
+  data.tar.gz: f22d8b51ddfb3f79fe11c1aaaa1a1b8a577f028213dc8e8e8667714a567016fc
 SHA512:
-  metadata.gz: e43ca0f024fd548f70a6fe83c1a65a5af1e6c37521fcf7f166fb3e21e7c291e0f70095a24ccbde98a2754c97c7fbc3f98c9805ccae70babc6049c8bf83693c1c
-  data.tar.gz: a8c32a0136eace866ef6a6316ac7890f3bf66e61ec7c7501d42b3ce358bf84b66fa7c556f3032aac750daad4f1861291ed5b4908c97a80377584dd7a40b71011
+  metadata.gz: e243fb03a274f344870367f793b22e5343c3d04337e7c6f945b201a5d5371d4fc273e020f3ad529cc08426add20ac3afb871abc6e70177cbeffe7e076b179fcf
+  data.tar.gz: 683f14a06a9918a18025b1b70faad3901b90d3c85f013b244904171b918623d8682c098d42f1ca4f54ae881b689a4dae73788da31c3263727b47fea59f4f9c7b

data/_includes/contact-form.html

@@ -3,7 +3,7 @@
 
   <form  action="https://formspree.io/f/{{ site.formspree }}" method="post" >
 
-    <label for="name">Enter your name</label>
+    <label for="name">Enter your full name</label>
     <input type="text" class="form-element" name="name" id="name" placeholder="Your Name" required>
 
     <label for="email">Enter your email</label>

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

@@ -11,7 +11,7 @@
       <div class="form__elem {{ item.type }}__elem mc--{{ item.width }} mc-field-group
         {% if item.type == 'select' OR item.type == 'radio' %}input-group{% endif %}">
 
-        <label class="form--label {{ item.type }}-label" for="{{ item.mce-id }}">
+        <label class="form--label {{ item.type }}-label" for="{{ item.id }}">
           {{ item.label }}
           {% if item.required %}
             <span class="mc-asterisk">*</span>
@@ -22,8 +22,8 @@
           {% for option in item.opts %}
             <li>
               <input type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}"
-                id="{{ item.mce-id }}-{{ option.mce-id }}" {{ item.autofocus }}>
-              <label for="{{ item.mce-id }}-{{ option.mce-id }}">
+                id="{{ item.id }}-{{ option.id }}" {{ item.autofocus }}>
+              <label for="{{ item.id }}-{{ option.id }}">
                 {{ option.name }}
               </label>
             </li>
@@ -32,10 +32,9 @@
         {% endif %}
 
         {% if item.type == 'select' %}
-        <select name="{{ item.name }}" class="form--select form--elem {% if item.required %}required {% endif %}" id="{{ item.mce-id }}" {{ item.autofocus }}>
+        <select name="{{ item.name }}" class="form--select form--elem {% if item.required %}required {% endif %}" id="{{ item.id }}" {{ item.autofocus }}>
           {% for option in item.opts %}
-          <option type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}"
-            id="{{ item.mce-id }}-{{ option.mce-id }}">
+          <option type="{{ item.type }}" value="{{ option.value }}" name="{{ item.name }}">
             {{ option.name }}
           </option>
           {% endfor %}
@@ -43,15 +42,17 @@
         {% endif %}
 
         {% if item.type == 'textarea' %}
-        <textarea rows="4" name="{{ item.name }}" id="item.mce-id"
+        <textarea rows="4" name="{{ item.name }}" id="{{ item.id }}"
           class="form--textarea form--elem" {{ item.autofocus }}></textarea>
         {% endif %}
 
         {% if item.type == 'checkbox' %}
-        <label class="form--label {{ item.type }}-label--mod" for="{{ item.mce-id }}">
+        <label class="form--label {{ item.type }}-label--mod" for="{{ item.id }}">
           <p>{{ item.label }}</p>
           <span class="styled-checkbox__block">
-    	      <input type="checkbox" class="styled-checkbox switch" id="{{ item.mce-id }}" {{ item.autofocus }}>
+
+    	      <input type="checkbox" class="styled-checkbox switch" id="{{ item.id }}" name="{{ item.name }}" {{ item.autofocus }} value="{{ item.value }}">
+
           	<span class="icon"><span class="icon--elem"></span></span>
             <span class="no">NO</span>
           	<span class="yes">YES</span>
@@ -63,13 +64,14 @@
         <input type="{{ item.type }}" value=""
           {% if item.type == 'tel' %}
           placeholder="Landline or mobile"
-          pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
+          pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
           {% endif %}
           name="{{ item.name }}"
           class="{% if item.required %}required{% endif %} form--input form--elem"
-          id="{{ item.mce-id }}"
+          id="{{ item.id }}"
           {{ item.autofocus }}>
         {% endif %}
+
       </div>
 
       {% endfor %}
@@ -81,10 +83,10 @@
 
           <fieldset class="mc_fieldset gdprRequired mc-field-group" name="interestgroup_field">
             {% for item in site.data.forms[page.env].gdpr %}
-            <label class="mc--{{ item.width }} form--label {{ item.type }}-label--mod checkbox subfield" for="gdpr_{{ item.mce-id }}">
+            <label class="mc--{{ item.width }} form--label {{ item.type }}-label--mod checkbox subfield" for="{{ item.id }}">
               <p>{{ item.label }}</p>
               <span class="styled-checkbox__block">
-                <input type="checkbox" class="styled-checkbox switch av-checkbox gdpr" id="gdpr_{{ item.mce-id }}" value="Y" name="{{ item.name }}">
+                <input type="checkbox" class="styled-checkbox switch av-checkbox gdpr" id="{{ item.id }}" value="Y" name="{{ item.name }}">
                 <span class="icon"><span class="icon--elem"></span></span>
                 <span class="no">NO</span>
                 <span class="yes">YES</span>
@@ -118,20 +120,14 @@
         <input type="text" name="{{ site.data.forms.pwp.botspot-name }}" tabindex="-1" value="">
       </div>
 
-      <div class="mc-field-group" style="position: absolute; left: -5000px;" aria-hidden="true">
-				<select name="USERTYPE" class="required" id="mce-USERTYPE">
-					<option value="PWP" {% if page.env == 'pwp' %}selected="selected"{% endif %}>PWP</option>
-					<option value="CLINICIAN" {% if page.env == 'clinician' %}selected="selected"{% endif %}>CLINICIAN</option>
-
-				</select>
-			</div>
-
       <div class="mc-field-group input-group" style="position: absolute; left: -5000px;" aria-hidden="true">
-        {% if page.env == 'pwp' %}
-        <input type="checkbox" value="4" name="group[30861][4]" id="mce-group[30861]-30861-0" checked>
-        {% else %}
-        <input type="checkbox" value="8" name="group[30861][8]" id="mce-group[30861]-30861-1" checked>
-        {% endif %}
+        <select name="USERTYPE" class="required" id="mce-USERTYPE" >
+          {% if page.env == 'pwp' %}
+          <option value="PwP" selected></option>
+          {% else %}
+          <option value="Clinician" selected></option>
+          {% endif %}
+        </select>
       </div>
 
     </div>

data/_includes/functions/calc-svg-coord.html

@@ -1,3 +1,5 @@
+<!-- Liquid function -->
+
 <!-- Take inputs from page front matter and calculate the coordinates of the svg elements -->
 {% assign image_handle = include.image_handle %}
 

data/_includes/functions/reposition-svg-labels.html

@@ -0,0 +1,44 @@
+<!-- JS function to reposition SVG labels on images !fullwidth -->
+<!-- We use Front Matter to determine if this script should be included, hence here and not in assets -->
+
+<script type="text/javascript">
+
+  function reposition_svg_labels(){
+
+    /* get svg labels */
+    var svg = document.querySelectorAll('.augment-not-fullwidth .svg__labels');
+
+    /* rendered image in pixels */
+    var x_i_px = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
+    var y_i_px = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
+    var r_i = x_i_px / y_i_px ;
+
+    /* original image in pixels */
+    var x_0_px = {{ page.images.guarantee.size | split: ', ' | first }} ;
+    var y_0_px = {{ page.images.guarantee.size | split: ', ' | last }} ;
+    var r_0 = x_0_px / y_0_px ;
+
+    for (let i = 0; i < svg.length; i++) {
+
+      /* Reversing the calculation we did in Liquid on build */
+      var dx_0_px = parseInt( svg[i].getAttribute('x'), 10 ) / 100 * x_0_px ;
+      var dy_0_px = parseInt( svg[i].getAttribute('y'), 10 ) / 100 * y_0_px ;
+
+      if (r_i > r_0 ) { /* x_i / y_i > r_0 so x_i is 100% */
+        /* rendered image magnification */
+        var scale = x_i_px / x_0_px ;
+        var dy_i_px = dy_0_px * scale - ( (y_0_px * scale - y_i_px ) / 2 ) ;
+        svg[i].setAttribute("y", ( dy_i_px * 100 / y_i_px + '%') ) ;
+
+      }
+      if (r_i < r_0 ) { /* x_i/y_i < r_0 so y_i is 100% */
+        /* rendered image magnification */
+        var scale = y_i_px / y_0_px ;
+        var dx_i_px = dx_0_px * scale - ( (x_0_px * scale - x_i_px ) / 2 ) ;
+        svg[i].setAttribute("x", ( dx_i_px * 100 / x_i_px + '%') ) ;
+      }
+    };
+  }
+  reposition_svg_labels()
+
+</script>

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

@@ -1,6 +1,6 @@
 
 <!-- *** 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 }} {% else %} {{ page.title }} | {{ site.title }} {% endif %}" />
 
 <!-- Adds article properties for posts -->
 
@@ -37,7 +37,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 %}

data/_includes/{google-analytics.html → head/google-analytics.html}

@@ -1,10 +1,15 @@
 <!-- This goes before </head> closing tag -->
 
-<!-- Google site verification -->
+{% if site.google.verification %}
+
+<!-- Google verification -->
 <meta name="google-site-verification" content="{{ site.google.verification }}" />
 
-<!-- Google Analytics -->
+{% endif %}
+
+{% if site.google.analytics %}
 
+<!-- Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google.analytics }}"></script>
 
 <script>
@@ -13,3 +18,5 @@
   gtag('js', new Date());
   gtag('config', '{{ site.google.analytics }}');
 </script>
+
+{% endif %}

data/_includes/head/head.html

@@ -50,9 +50,11 @@
   {% include /head/stylesheets.html %}
 
   {% if jekyll.environment == "production" %}
-  {% include google-analytics.html %}
+  {% 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

@@ -8,7 +8,7 @@
 
   <script type="text/javascript" src="{{ '/assets/js/svg_aos.js' | relative_url }}" async></script>
 
-  {% include functions/pull_page_args.html %}
+  {% include functions/reposition-svg-labels.html %}
 
 {% endif %}
 
@@ -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,12 +66,12 @@ Last full read through 27/12/2020
 
 </div>
 
-<div class="segment__wrap">
+<div class="segment__wrap" id="content">
 
-  <div class="segment__left">
+  <div class="segment__left strap--opd-trust">
 
 
-  <div class="center-text segment__keywords strap--opd-trust">
+  <div class="center-text segment__keywords ">
     {% assign keyword = site.data.copy.landing.clinician.keywords | split: ", " %}
     {% for word in (1..keyword.size) %}
     <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
@@ -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 }}">
@@ -95,8 +95,8 @@ Last full read through 27/12/2020
 
   </div>
 
-  <div class="segment__right augmented-image" >
+  <div class="segment__right augmented-image svg__labels--red" >
 
-    {% 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/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>
@@ -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/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/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/_colors/_variables.sass

@@ -53,3 +53,5 @@ $light-grey: rgb(220, 220, 220)
 $grey: rgb(130, 130, 130)
 
 $led: rgb(255, 70, 0)
+
+$image-blend: rgb(73, 100, 122)

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) brightness(1.3)
+  //contrast(.5) brightness(1.3) sepia(.6) hue-rotate(180deg) opacity(.5)
 
 // Applied to an overlaying div
 @mixin image-filter--blur

data/_sass/env/breakpoints/768.sass

@@ -3,7 +3,7 @@
 
   .segment__wrap
     display: flex
-    flex-wrap: no-wrap
+    flex-wrap: nowrap
     flex-direction: row
     width: 100vw
     max-height: 100vh
@@ -12,35 +12,40 @@
     height: 100vh
     display: flex
     flex-direction: column
+    justify-content: center
 
   .segment__left
-    width: 60vw
+    width: 40vw
 
   .segment__right
-    width: 40vw
+    width: 60vw
 
   .segment__gaurentee
-    flex-direction: row
+    //flex-direction: row
     height: 50%
-    justify-content: space-between
-    padding: 0
-    text-align: left
+    justify-content: space-around
+    //padding: 0
+    //text-align: left
 
     .site__logo
-      width: 140px
+      height: 10vh
 
   .strap__guarantee
     border: none
-    border-left: solid 2px $pure-white
+    //border-left: solid 2px $pure-white
     width: 35vw
     margin: 0
     padding: 0 3rem
 
   .segment__keywords
     width: 100%
+    height: 60%
+    max-height: 800px
     flex-direction: column
-    align-items: center
-    justify-content: center
+    flex-wrap: nowrap
+    padding: 10rem 0
+    & > *
+      padding: 0
 
   .clinician__strap
     h1

data/_sass/env/clinician.sass

@@ -25,18 +25,17 @@ $hero-follow-bottom: 59.5vh
   top: calc(var(--vh, 1vh) * #{strip-unit($hero-follow-bottom)})
 
 .segment__keywords
-  align-items: center
   display: flex
   flex-direction: column
-  height: 100%
-  justify-content: center
-
+  align-items: center
+  justify-content: space-around
+  padding: 3rem 2rem
   & > *
-    padding: 5rem 0
-    width: 50%
+    padding: 2rem 0
 
 .image--guarantee
   @include image-filter-rotate
+  height: 100vh
 
 .action__call
 
@@ -46,9 +45,13 @@ $hero-follow-bottom: 59.5vh
   span
     color: $env-primary
 
+
   svg
     stroke: $env-primary
 
   &:hover
     &::before
       background-color: rgba($env-secondary, 1)
+
+.segment__right
+  background-color: $image-blend

data/_sass/env/pwp.sass

@@ -50,13 +50,14 @@ $hero-follow-top: 4.5vh
   .site__logo
     margin: 0 5vw
     text-align: center
-    width: 100px
+    height: 10vh
 
 .segment__keywords
   height: 50%
 
 .image--guarantee
   @include image-filter-rotate
+  height: 100vh
 
 .strap__guarantee
   border-top: solid 1px $soft-white
@@ -71,6 +72,11 @@ $hero-follow-top: 4.5vh
   display: flex
   flex-direction: row
   flex-wrap: wrap
+  justify-content: space-around
+  align-items: center
   & > *
     padding: 3rem 0
     width: 50%
+
+.segment__right
+  background-color: $image-blend

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,22 +252,22 @@
       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
-          background-color: $opd-coral
-          border: solid 1px $opd-coral
-
           text-align: center
           padding: 2rem 3rem
           width: auto
           border-radius: 6px
           cursor: pointer
           text-transform: uppercase
-          &:hover
-            background-color: rgba($opd-coral,.3)
-            border: solid 1px $pure-white
+        &:hover
+          background-color: rgba($opd-coral,.3)
+          border: solid 1px $pure-white
 
     .ft__sitemap--link
       text-decoration: none

data/_sass/forms/mc-forms.sass

@@ -191,3 +191,12 @@ input.switch
     padding: 5rem
     background-color: $pure-white
     border-radius: 20px
+
+
+.response
+  padding: 2rem 0
+
+.mce_inline_error
+  padding: 1rem 0
+  font-size: $sm-font-size
+  color: $led

data/_sass/global.sass

@@ -87,6 +87,7 @@ body
   object-fit: cover
   object-position: center
   width: 100%
+  display: inherit
 
 .image__filter--mix
   @include image-filter--mix
@@ -206,7 +207,8 @@ body
     stroke-width: 1
 
   & > .svg--text
-    font-size: $font-size * .8
+    font-size: $lg-font-size
+    font-weight: $heavy-font
 
 .svg__labels.hidden
 
@@ -234,6 +236,13 @@ body
   & > .trans-right
     animation: trans-in-right .6s ease-in-out
 
+// This is digusting! We need to tweak the actual html so we can readilly access these elements.
+.svg__labels--red
+  & > svg > * > *
+    fill: darken($opd-coral, 10)
+  & > svg > * > line
+    stroke: darken($opd-coral,10)!important
+
 
 $svg-text-offset: 60px
 
@@ -341,9 +350,8 @@ $svg-text-offset: 60px
 
 // This is basically a button and should to be centralised
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
+  font-size: $font-size
+  margin: 0 auto
   padding: 2rem
   position: relative
   text-decoration: none
@@ -354,9 +362,9 @@ $svg-text-offset: 60px
     content: ''
     display: block
     height: 6rem
-    left: 0
+    left: -1rem
     position: absolute
-    top: 0
+    top: .5rem
     transition: .2s ease
     width: 6rem
 
@@ -385,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

@@ -21,7 +21,8 @@
     .nav-brand
       @include default-trans
       height: 8vh
-      max-height: 100px
+      //max-height: 100px
+      // max-height breaks vertical centering
 
   .nav-scrolled
     background-color: $env-primary
@@ -31,9 +32,11 @@
     @include default-trans
     display: flex
     position: absolute
-    max-width: 160px
+    //max-height: 100px
+    // max-height breaks vertical centering
     height: 10vh
     top: 7.5vh
+    margin-top: 0
 
     .site__logo
       position: absolute
@@ -60,6 +63,8 @@
 
   .nav-group-content
     //text-indent: 2rem
+    &:last-child
+      margin-right: 10rem
     .nav-link
       margin: 0
 
@@ -72,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
@@ -93,6 +119,11 @@
     &:after
       left: 3px
 
+  .current--env
+    span
+      border-bottom: solid 1px $pure-white
+
+
   .nav-group-content
     @include default-trans
     @include navbar-color
@@ -151,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/typography/_variables.sass

@@ -22,4 +22,4 @@ $light-font: 200
 
 $medium-font: 400
 
-$heavy-font: 500
+$heavy-font: 600

data/assets/js/svg_text_width.js

@@ -22,21 +22,21 @@ function svg_text_width() {
     if(view_width > 768 ){
       var lineLength = 100 ; // length in pixels of the drawn line
       var x_offset = 10 + width ; // offset the text label s.t. last character sits 10 px from end of line
-      var y_offset = .5 ;
+      var y_offset = 5 ;
     } else {
       var lineLength = 70 ;
       var x_offset = 0 ; // offset the text label s.t. first character sits inline with end of line
-      var y_offset = -1.5 ;}
+      var y_offset = -8 ;}
       lines[i].setAttribute("stroke-dashoffset", lineLength + 'px')
       lines[i].setAttribute("stroke-dasharray", lineLength + 'px')
     if( text[i].classList.contains('trans-left')){
       lines[i].setAttribute("x2", -lineLength + 'px')
       text[i].setAttribute("x", - lineLength - x_offset + 'px');
-      text[i].setAttribute("y", y_offset + 'rem');
+      text[i].setAttribute("y", y_offset + 'px');
     } else {
       lines[i].setAttribute("x2", lineLength + 'px')
       text[i].setAttribute("x", lineLength + x_offset - width + 'px');
-      text[i].setAttribute("y", y_offset + 'rem');
+      text[i].setAttribute("y", y_offset + 'px');
     };
   };
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.4.4
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-30 00:00:00.000000000 Z
+date: 2021-02-10 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
@@ -192,13 +193,13 @@ files:
 - _includes/footer/footer_redesign.html
 - _includes/forms/mc-register.html
 - _includes/functions/calc-svg-coord.html
-- _includes/functions/pull_page_args.html
+- _includes/functions/reposition-svg-labels.html
 - _includes/gmap.html
-- _includes/google-analytics.html
 - _includes/head/README.md
 - _includes/head/descriptors/og-meta.html
 - _includes/head/descriptors/structured-data.html
 - _includes/head/descriptors/twitter-meta.html
+- _includes/head/google-analytics.html
 - _includes/head/head.html
 - _includes/head/stylesheets.html
 - _includes/image-post.html

data/_includes/functions/pull_page_args.html

@@ -1,31 +0,0 @@
-
-<script type="text/javascript">
-
-function svg_aug_contained_image(){
-
-  var x_i = document.getElementsByClassName("image--guarantee")[0].offsetWidth ;
-  var y_i = document.getElementsByClassName("image--guarantee")[0].offsetHeight ;
-  /* get svg labels */
-  var svg = document.querySelectorAll('.svg__augment > .augment--guarantee');
-
-  /* origanal image width in pixels */
-  var x_0 = {{ page.images.guarantee.size | split: ', ' | first }} ;
-  var y_0 = {{ page.images.guarantee.size | split: ', ' | last }} ;
-
-  for (let i = 0; i < svg.length; i++) {
-  /* origanal x position in pixels */
-  var dx_0 = parseInt( svg[i].getAttribute('x'), 10 ) / 100 ;
-  var dy_0 = parseInt( svg[i].getAttribute('y'), 10 ) / 100 ;
-
-  var dx_0Pixel = dx_0 * x_0 ;
-  var dy_0Pixel = dy_0 * y_0 ;
-
-  svg[i].setAttribute("x", (dx_0Pixel - ( x_0 / 2) + (x_i / 2) ) / x_i * 100 + '%');
-  svg[i].setAttribute("y", (dy_0Pixel - ( y_0 / 2) + (y_i / 2) ) / y_i * 100 + '%');
- };
-
-}
-
-//window.setInterval(svg_aug_contained_image, 200 )
-
-</script>