slow-steps 0.1.1 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd34733d1843e4e27502c6013bdfcc2f1a8550681d93567f6d107276f2a5b1d8
-  data.tar.gz: d7fbf1db79bdbcf602526b92160a7286f3a56f4a64164f0dce65b7437382cd22
+  metadata.gz: ea0adad81a3cdbea1a8db232f1da78ab42069e6e86e52bef7ce62f17860b9867
+  data.tar.gz: 2dd0710e2683aaba83cc677066fb7d55bbb581372d044977c879c0e1e887eea2
 SHA512:
-  metadata.gz: 731535f31508600501b23c473a9e2edfab5e536e5afbeb66edc4884d1737d001e4bffff0731e6ae9342392ff5325b3e27e9bb5d7f4653d08bf30fc4b296613c4
-  data.tar.gz: 4e10a526240dfd3afc7bb8ee3ec067c01f41735cf0963581b37a6c8d00b718968077e3d4712e3f9511486f362cb36a7bc7ddb1fa2dddcc6efd323f33762432d4
+  metadata.gz: 37704673dbcb40560041f0ad82b94842ce2b11edeb21dcf49bb5850b9b5cb5969cce20f82f7ff5fd233bb0113745904f44821460a0f2578010a4bd9c38ecb5d7
+  data.tar.gz: b75c4f3e0db8825fbd23f3475bc1e2329c360edb50f9cc44f8ee3c4e2540418796f18583c6505b8372582c08f2c9869aa8c32ce4bc53f88685a65350e3047826

data/_includes/footer/footer_full.html

@@ -1,43 +1,67 @@
 <!-- footer -->
-<footer class="ft-wrapper">
+<footer class="ft__wrapper">
 
   <div class="ft__head">
-    <a href="{{ site.baseurl }}/">
-      {% include /branding/site-logo.svg %}</a>
+
   </div>
   <div class="ft__body">
 
-    <section class="ft__sitemap">
+    <div class="ft__contact ft__col">
+
+      <a href="{{ site.baseurl }}/">
+        {% include /branding/site-logo.svg %}
+      </a>
+      <div class="ft__contact__add">
+        <ul class="ft__contact--list">
+          {% for item in site.postal_add %}
+          <li class="address">{{ item[1] }}</li>
+          {% endfor %}
+          <li>{{ site.phone }}</li>
+          <li>{{ site.email }}</li>
+        </ul>
+
+      </div>
+    </div>
+
+    <div class="ft__sitemap ft__col">
       <div class="ft__sitemap--menu">
+        <h3 class="ft__sitemap--header">INFORMATION FOR</h3>
+
+        <div class="ft__sitemap--env-wrap">
         {% for item in site.data.menu.navigation %}
-        <h2 class="ft__sitemap--header">{{ item.name }}</h2>
-        <ul class="ft__sitemap--submenu">
+
+        <div class="ft__sitemap--env">
+
+          <h4 class="ft__sitemap--env-header">{{ item.name }}</h4>
+          <ul class="ft__sitemap--submenu">
           {% for sub in item.submenu %}
-          <li><a href="{{ sub.url }}">{{ sub.name }}</a></li>
+          <li><a href="{{ sub.url }}">{{ sub.alt }}</a></li>
           {% endfor %}
-        </ul>
+          </ul>
+        </div>
+
         {% endfor %}
-      </div>
-    </section>
 
-    <!-- quick contact form -->
+      </div>
+      </div>
+    </div>
 
-    <section class="ft__contact">
-      {% include /forms/mc-register.html %}
-    </section>
   </div>
   <!-- footer base and copyright -->
 
   <div class="ft__base">
-    <a href="{{ site.author.url }}" class="slogan">made slowly</a>
+
+    <p class="copyright">&copy; <script>
+        document.write(new Date().getFullYear())
+      </script> {{ site.title }}</p>
+
+
     <div class="legal-links">
       {% for item in site.data.menu.legals %}
       <a href="{{ item.url }}">{{ item.name }}</a>
       {% endfor %}
     </div>
-    <p class="copyright">&copy; <script>
-        document.write(new Date().getFullYear())
-      </script> {{ site.title }} Limited</p>
+    <a href="{{ site.author.url }}" class="slogan">made slowly</a>
   </div>
 
 </footer>

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

@@ -0,0 +1,40 @@
+<!-- Take inputs from page front matter and calculate the coordinates of the svg elements -->
+{% assign image_handle = include.image_handle %}
+
+{% if page[image_handle].augment %}
+
+  <!-- get image dimensions -->
+  {%- assign imageX = page[image_handle].augment.image | split: ', ' | first -%}
+  {%- assign imageY = page[image_handle].augment.image | split: ', ' | last -%}
+
+  <!-- pre-assign arrays for circle centers and line ends -->
+  {% assign cX = '' | split: ',' %}
+  {% assign cY = '' | split: ',' %}
+
+  <!-- loop over all the requested labels -->
+  {% for item in page[image_handle].augment.labels %}
+
+    <!-- x(i) and y(i) -->
+    {% assign ix = item.coord | split: ', ' | first %}
+    {% assign iy = item.coord | split: ', ' | last %}
+
+    <!-- calculate circle centers as percentage of image size -->
+    {% assign cx = ix | times: 100 | divided_by: imageX | append: ', ' %}
+    {% assign cy = iy | times: 100 | divided_by: imageY | append: ', ' %}
+    <!-- push into arrays -->
+    {% assign cX = cX | push: cx %}
+    {% assign cY = cY | push: cy %}
+
+  {% endfor %}
+
+{% endif %}
+
+<!--
+in:   [imageX, imageY] pixels
+      [x, y] pixels
+
+out:  cX = [cx_1, cx_2, ... , cx_n]
+      cY = [cy_1, cy_2, ... , cy_n]
+
+      X1 = [x1_1, x1_2, ... , x1_n]
+-->

data/_includes/functions/pull_page_args.html

@@ -0,0 +1,31 @@
+
+<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 ;
+  /* ge scg labels */
+  var svg = document.querySelectorAll('.svg__augment > .augment--guarantee');
+
+  /* origanal image width in pixels */
+  var x_0 = {{ page.guarantee.augment.image | split: ', ' | first }} ;
+  var y_0 = {{ page.guarantee.augment.image | 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>

data/_includes/head/head.html

@@ -56,9 +56,8 @@
   <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_feed.css" media="screen" />
   {% endif %}
 
-  {% if page.id %} <!-- it's a post -->
   <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_post.css" media="screen" />
-  {% endif %}
+
 
   {% if page.env %}
     {% include /head/env/conditional.html %}

data/_includes/scripts.html

@@ -1,4 +1,16 @@
 
+{% assign scripts = page.scripts | split: ', '%}
+{% if scripts contains 'svg-aos' %}
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" ></script>
+
+  <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/svg_text_width.js" | relative_url }}" async></script>
+
+  <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/svg_aos.js" | relative_url }}" async></script>
+
+  {% include functions/pull_page_args.html %}
+
+{% endif %}
+
 
 <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/animate_after_load.js" | relative_url }}" async></script>
 

data/_includes/vimeoPlayer.html

@@ -0,0 +1,12 @@
+
+<div class="embed-container">
+  <iframe
+      src="https://player.vimeo.com/video/{{ include.id }}"
+      width="500"
+      height="281"
+      frameborder="0"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen>
+  </iframe>
+</div>

data/_layouts/about.html

@@ -2,26 +2,46 @@
 layout: default
 ---
 
-<div class="about__head__bg"></div>
+<!--
 
-<div class="about__head">
-    <!-- exclude if no title is provided -->
-    {% if site.data.copy.about[page.env].title %}
-    {% assign strap = site.data.copy.about[page.env].title %}
+Last full read through 29/12/2020
 
-      <h1>
+##############################################
+# About Layout            /_layouts/about.html
+##############################################
+
+-->
+
+{% if site.data.copy.about[page.env].title %}
+{% assign strap = site.data.copy.about[page.env].title %}
+{% else %}
+{% assign strap = site.description %}
+{% endif %}
+
+<div class="hero hero-65">
+
+  <div class="hero__overlay h-100">
+    {% picture {{ page.hero.image | prepend: 'content/' }}
+      --img class="hero__image hero__image--fixed hero-65"
+      --alt {{ page.hero.alt }} %}</div>
+
+  <header class="hero__strap hero__strap--center image__filter--blur hero-65" aria-label="{{ strap }}">
+
+      <h1 aria-hidden="true" >
       {% assign n = strap.size | minus: 1 %}
       {%- for char in (0..n ) -%}
 
-      <span style="animation-delay: {{ char | times: 60 | plus: 800 }}ms;">{{ strap | slice: char }}</span>
+      <span style="animation-delay: {{ char | times: 40 | plus: 200 }}ms;">{{ strap | slice: char }}</span>
       {%- endfor -%}</h1>
 
-    {% endif %}
+  </header>
 
 </div>
+
+
 <!-- exclude if no text is provided -->
 {% if site.data.copy.about[page.env].text %}
-<div class="about__copy" data-aos="fade-in">
+<div class="about__copy bg--env-100" >
 
   {% for item in site.data.copy.about[page.env].text %}
   <p class="about--copy" data-aos="fade-in">
@@ -32,26 +52,29 @@ layout: default
 
 <div class="about__team">
 
-  <div class="team__head">
+  <div class="team__head bg--env-50">
     {% for menu in site.data.team.menu %}
-    <h3 class="team__title team--js-script-{{ menu.script }}" id="team{{ menu.script }}" onclick="team{{ menu.script }}()">
+    <h3 class="team__title team--js-script-{{ menu.script }}"
+        id="team{{ menu.script }}"
+        onclick="team{{ menu.script }}()">
+
       <i class="{{ menu.icon }}"></i>
       <span class="title__title--text">{{ menu.name }}</span></h3>
     {% endfor %}
   </div>
 
-  <div class="team__members" onload="display_core()">
+  <div class="team__members">
 
     {% for member in site.data.team.members %}
 
-    <div class=" single__member
+    <div class=" single__member single__member--active
       {% assign ships = member.membership | split: ', ' %}
       {% for item in ships %}
         team--{{ item }}
       {% endfor %} ">
 
         <div class="single__member__image">
-          <img class="member--image"src="{{ member.image | prepend: '/assets/images/content/people/' }}" alt="{{ member.name }} is the {{ member.position }}" />
+          <img class="member--image" src="{% if member.image %}{{ member.image | prepend: '/assets/images/content/people/' }}{% else %}{{ 'team-placeholder.jpg' | prepend: '/assets/images/defaults/' }}{% endif %}" alt="{{ member.name }} is the {{ member.position }}" />
         </div>
 
         <div class="single__member__text">
@@ -86,20 +109,29 @@ layout: default
   </div>
 </div>
 
-<!-- By default, .single__member is display:none, so in the event of JS disabled we see everyone -->
+<!--
+
+-->
 <script>
-  /* get core .team__title and style */
+  /*
+  On load we hide some members.
+  '.single__member.single__member--active' is applied to all members, such that all members are 'display: flex' so in the event of no JS we see everyone. Removing '.single__member--active' defaults display to 'display: none'.
+  */
+
+  /* get core .team__title and apply style */
   const title = document.querySelectorAll(".team__title.team--js-script-core");
   for(var i = 0; i < title.length; i++)
     title[i].classList.add('team__title--active');
 
-  /* get core .single__member and style */
-  const members = document.querySelectorAll(".single__member.team--core");
+  /* get members that do not belong to '.team--core' and remove '.single__member--active' */
+  const members = document.querySelectorAll(".single__member:not(.team--core)");
   for(var i = 0; i < members.length; i++)
-    members[i].classList.add('single__member--active');
-
+    members[i].classList.remove('single__member--active');
 </script>
 
+<!--
+  For each team we need a script to handle click events on the team menu.
+-->
 {% for menu in site.data.team.menu %}
 
 <script>
@@ -131,7 +163,7 @@ layout: default
 
 
 <script>
-
+/* Watch for clicks on more info and reveal text */
 document.querySelectorAll('.info__conceal').forEach(function(el){
   el.addEventListener('click', function() {
     this.classList.toggle('info__reveal');

data/_layouts/default.html

@@ -8,11 +8,9 @@ layout: compress
 
 {{ content }}
 
-{% if page.layout == "env/landing" or page.layout == "error-page" %}
+{% if page.layout != "error-page" %}
 
-{% else %}
-
-  {% include footer/footer.html %}
+  {% include footer/footer_full.html %}
 
 {% endif %}
 

data/_layouts/env/clinician.html

@@ -2,47 +2,118 @@
 layout: default
 ---
 
-<div class="clinician__hero">
+<!--
 
-  <div class="clinician__overlay">
-    <div class="clinician__bg">
-    </div>
-  </div>
+Last full read through 27/12/2020
+
+##############################################
+# Clinician Layout/_layouts/env/clinician.html
+##############################################
+
+-->
+
+<!-- assign description with site decsription as fallback -->
 
-  <div class="clinician__strap">
-    <h1>{{ site.data.copy.about.clinician.title }}</h1>
-    <p data-aos="fade-up">{{ site.data.copy.about.clinician.description }}</p>
+{% if site.data.copy.landing.clinician.description %}
+{% assign description = site.data.copy.landing.clinician.description %}
+{% else %}
+{% assign description = site.description %}
+{% endif %}
+
+<div class="hero hero-65">
+
+  <div class="hero__overlay">
+    {% picture {{ page.hero.image | prepend: 'content/' }}
+      --img class="hero__image image__filter--mix"
+      --alt {{ page.hero.alt }} %}</div>
+
+  <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>
   </div>
 
-  <div class="clinician__follow"></div>
+  <div class="hero__follow"></div>
 
 </div>
 
 
-{% picture
-  {{ page.image | prepend: 'content/' }}
-  --img class="clinician__hero__2"
-  --alt {{ page.image_alt }} %}
+<div class="augmented-image">
 
+  {% picture {{ page.subhero.image | prepend: 'content/' }}
+    --img class="hero__image"
+    --alt {{ page.subhero.alt }} %}
 
+    <svg class="svg__augment" viewBox="-50 -50 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="augmentLED" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+        <stop offset="0%" />
+        <stop offset="100%" />
+        </radialGradient>
+      </defs>
+
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--led" cx="32%" cy="2%" r=".5" />
+
+    </svg>
+
+</div>
+
+<div class="segment__wrap">
+
+  <div class="segment__left">
+
+
+  <div class="center-text segment__keywords strap--opd-trust">
+    {% assign keyword = site.data.copy.landing.clinician.keywords | split: ", " %}
+    {% for word in (1..keyword.size) %}
+    <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
+    {% endfor %}</div>
+
+    <!-- setup liquid variables -->
+    {%- assign env = site.data.menu.navigation | where: 'env', 'clinician' -%}
+    {%- assign env = env[0] -%}
+
+    {%- assign cta = env.submenu | where: 'id', 'cta' -%}
+    {%- assign cta = cta[0] -%}
+
+    <a class="action__call" aria-label="{{ cta.aria }}" href="{{ cta.url }}">
+      <span>{{ cta.alt }}</span>
+      <!-- svg arrow -->
+      <svg width="13px" height="10px" viewBox="0 0 13 10">
+      <path d="M1,5 L11,5"></path>
+      <polyline points="8 1 12 5 8 9"></polyline></svg>
+    </a>
 
-<div class="clinician__grid-wrap">
 
-  <div class="clinician__grid-col-l">
-    <div class="clinician__straps clinician__grid_img"></div>
-  </div>
-  <div class="clinician__grid-col-r">
-    <div class="clinician__straps "></div>
   </div>
 
-  <div class="clinician__grid__text">
+  <div class="segment__right augmented-image" >
+
+    {% picture {{ page.guarantee.image | prepend: 'content/' }}
+      --img class="hero__image image--guarantee h-100"
+      --alt {{ page.guarantee.alt }} %}
+
+      <svg class="svg__augment " width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+
+        {% include functions/calc-svg-coord.html image_handle="guarantee" %}
+
+        {% for item in page.guarantee.augment.labels %}
+
+        <svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
+
+          <circle class="svg--elem svg--circle" cx="0%" cy="0%" r="6" />
+
+          <line class="svg--elem svg--line" x1="0"  y1="0" y2="0" />
+
+          <text class="svg--elem svg--text trans-{% if item.reverse %}right{% else %}left{% endif %}" >{{ item.text }}</text>
+
+        </svg>
+
+        {% endfor %}
+
+      </svg>
 
-      {% assign keyword = site.data.copy.about.clinician.keywords | split: ", " %}
-      {% for word in (1..keyword.size) %}
-      <p class="clinician__grid--keywords" data-aos="fade-in" data-aos-anchor-placement="top-bottom">{{ keyword[forloop.index0] }}</p>
-      {% endfor %}
 
-      <div class="action__call"></div>
   </div>
 
 </div>