slow-steps 0.3.1 → 0.4.2

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

@@ -8,7 +8,6 @@
   {% if page.id %}
   {%- assign facebook = site.socials | where: 'name', 'Facebook' -%}
 
-
     article" />
     <meta
     property=article:publisher

data/_includes/head/descriptors/structured-data.html

@@ -23,7 +23,7 @@
       /* Person */
       "@type": "Person",
       "@context": "http://schema.org",
-      "name": "{{ site.title }}",
+      "name": "{{ site.data.authors.default.name }}",
       "description": "{{ site.description }}",
       "image": "{{ site.url }}{{ site.baseurl }}{{ site.fallback_path }}{{ site.brand }}"} ]
      } , {
@@ -72,12 +72,12 @@
     "author": {
       "@type": "Person",
       "name":
-      "{%- if page.author -%}{{ site.data.authors[page.author].name }}{%- else -%}{{ site.title }}{% endif %}"
+      "{%- if page.author -%}{{ site.data.authors[page.author].name }}{%- else -%}{{ site.data.authors.default.name }}{% endif %}"
     },
     "creator": {
       "@type": "Person",
       "name":
-      "{%- if page.author -%}{{ site.data.authors[page.author].name }}{%- else -%}{{ site.title }}{% endif %}"
+      "{%- if page.author -%}{{ site.data.authors[page.author].name }}{%- else -%}{{ site.data.authors.default.name }}{% endif %}"
     },
     "publisher": {
       "@type": "Organization",

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

@@ -3,7 +3,7 @@
   <meta name="twitter:card" content="summary_large_image" />
 
   <meta name="twitter:site" content="@{{ site.data.socials.twitter.username }}" />
-  <meta name="twitter:creator" content="@{{ site.author.twitter }}">
+  <meta name="twitter:creator" content="@{{ site.data.authors.default.twitter }}">
   <meta name="twitter:title" content="{% if page.url == "/" %} {{ site.title }} | {{ site.subtitle }} {% else %} {{ page.title }} | {{ site.title }}{% endif %}" />
 
   <meta name="twitter:description" content="{% if page.description == null %} {{ site.description }}

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

@@ -26,10 +26,10 @@
 
   <meta name="keywords" content="{{ site.keywords }}" />
 
-  <meta name="author" content="{{ site.author.name }}" />
+  <meta name="author" content="{{ site.data.authors.default.name }}" />
 
   {% assign date = 'now' | date: "%Y" %}
-  <meta name="copyright" content="Copyright {{ site.title | append: ' Ltd. ' | append: date }}" />
+  <meta name="copyright" content="Copyright {{ site.title | append: ' Limited ' | append: date }}" />
 
   <meta name="robots" content="follow" />
 
@@ -37,7 +37,7 @@
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
 
-  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap" rel="stylesheet">
 
   <link rel="shortcut icon" type="image/x-icon" href="{{ site.fallback_path | append: site.favicon | relative_url }}">
 
@@ -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

@@ -3,7 +3,7 @@
 -->
 <div class="post__image">
 
-  {% picture {{ 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" %}
 
   {% if include.caption %}
   <p class="image--caption">{{ include.caption }}</p>

data/_includes/navigation/global.html

@@ -9,57 +9,78 @@
     </a>
   </div>
 
-  {% if page.env != "landing" OR page.env != "error-page" %}
+    {% 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">
+        <a href="{{ social.url }}">
+        <i class="fab fa-{{ social.icon }} social--{{ social.name }} social-media-link"></i></a>
+        </li>
+        {% endfor %}
+      </ul>
+
+      <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
+          {% assign url = page.env | append: '/' | prepend: '/' %}
+
+          {% if item.url == url %}
+          current--env
+          {% endif %}
+
+          {{ item.env }}-group-link">
+
+            <span>{{ item.name }}</span>
+          </a>
 
-  <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>
+          <div class="nav-group-content {{ item.env }}-group">
+            {% for sub in item.submenu %}
+            {% if sub.id == 'nav' %}
+            <div class="nav-group-container">
+            <a
+              class="
+                nav-link
+                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>
 
-  <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>
-      <div class="nav-group-content {{ item.env }}-group">
-        {% for sub in item.submenu %}
-        <div class="nav-group-container">
-        <a
-          class="
-            nav-link
-            sub-link
-            {% if page.url == sub.url %}
-            current--url
-            {% endif %}" href="{{ sub.url | relative_url }}">
-          <span>{{ sub.name }}</span></a>
+              {% if sub.subsubmenu %}
+              <div class="nav-subsub-content ">
+                {% for subsub in sub.subsubmenu %}
+                <a class="nav-link subsub-link" href="{{ subsub.url | relative_url }}">
+                  <span>{{ subsub.name }}</span></a>
 
-          {% if sub.subsubmenu %}
-          <div class="nav-subsub-content ">
-            {% for subsub in sub.subsubmenu %}
-            <a class="nav-link subsub-link" href="{{ subsub.url | relative_url }}">
-              <span>{{ subsub.name }}</span></a>
+                {% endfor %}
+              </div>
+              {% endif %}
 
+            </div>
+            {% endif %}
             {% endfor %}
           </div>
-          {% endif %}
-
-        </div>
+        </li>
         {% endfor %}
-      </div>
-    </li>
-    {% endfor %}
-  </ul>
+      </ul>
 
-  <div class="burger">
-    <div class="burger-line-1"></div>
-    <div class="burger-line-2"></div>
-    <div class="burger-line-3"></div>
-  </div>
-</nav>
+      <div class="burger">
+        <div class="burger-line-1"></div>
+        <div class="burger-line-2"></div>
+        <div class="burger-line-3"></div>
+      </div>
+    </nav>
+  {% else %}
+    </nav>
+  {% endif %}
 {% else %}
-</nav>
+  </nav>
 {% endif %}

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_full.html %}
+
+{% include footer/footer_redesign.html %}
 
 {% include scripts.html %}

data/_layouts/env/clinician.html

@@ -12,7 +12,7 @@ Last full read through 27/12/2020
 
 -->
 
-<!-- assign description with site decsription as fallback -->
+<!-- assign description with site.decsription fallback -->
 
 {% if site.data.copy.landing.clinician.description %}
 {% assign description = site.data.copy.landing.clinician.description %}
@@ -29,7 +29,7 @@ Last full read through 27/12/2020
 
   <div class="hero__strap hero__strap--baseline bg--env-100">
     <h2>{{ site.data.copy.landing.clinician.title }}</h2>
-    <p data-aos="fade-up">{{ site.data.copy.landing.clinician.description }}</p>
+    <p>{{ site.data.copy.landing.clinician.description }}</p>
   </div>
 
   <div class="hero__follow"></div>
@@ -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">
@@ -34,7 +34,7 @@ Last full read through 27/12/2020
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.pwp }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">Sign up</a>
+        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">{{ cta.name }}</a>
         <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url | relative_url }}">More Info</a>
         </div>
       </div>
@@ -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">
@@ -68,7 +68,7 @@ Last full read through 27/12/2020
       <div class="landing__strap">
         <p>{{ site.data.copy.landing.landing.clinician }}</p>
         <div class="landing__cta">
-        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">Register interest</a>
+        <a class="primary__cta" aria-label="{{ cta.aria }}" href="{{ cta.url | relative_url }}">{{ cta.name }}</a>
         <a class="secondary__cta" aria-label="{{ cta_2.aria }}" href="{{ cta_2.url | relative_url }}">More Info</a>
         </div>
       </div>