slow-steps 0.1.2 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f99778250d8255d09c4feb5232eca79d4a8e9aaf2c7819a6cec2d050a09fc61c
-  data.tar.gz: e722072946f3eee1b5a47a14ebc2d6570a020cbcd1cb8b36a3c51f63b2881cd5
+  metadata.gz: a9d08362eb798582d3b515c95e1aa22ff5b67ed74b430bc7381f2dccd38ff2bd
+  data.tar.gz: 722e64963e49d0935b9e203f93fd0072f084d0983f9bc1ae99d44c50312eef2a
 SHA512:
-  metadata.gz: 87d1517e7f8e857e70260acdc241b5ff6de4f8bb79dab6f50b73a366e677a90bcfc80ea6d59c16cca351c3da9c15a911862fbfd1c56ad2acca1a125886bab78a
-  data.tar.gz: eb9d967005c27d31fa48dc25a8b6f93aac4b24b3f6264aa73a8392dc8373bb673429b78994354ad93b5bd3b1a4bfecfef71b86096dcdfe0872949087feac8666
+  metadata.gz: fe6226e3fe6111d6012f02475c78b63364cda441211edef74a005e46a217bc4a61293026a5e6c53b7c2c0ca14a2969b7836969759fcf00c6b263386f543f47ae
+  data.tar.gz: 37d00e20b8b27a8d65f371e6cb0ce84d7f0c0eb1e473fb90cf411e353ab23f4e3550872503f7165bb54f87ea19dc11f62a27a53c80f6b1da3a328dea8acfcd4b

data/_includes/contact-details.html

@@ -0,0 +1,25 @@
+<div class="contact-details">
+
+  <h4 class="form-instruction">Contact us directly</h4>
+
+  <p><i class="fas fa-envelope"></i>
+  <a href="mailto:{{ site.email }}">{{ site.email }}</a></p>
+
+  {% if site.phone %}
+  <p><i class="fas fa-phone-square"></i>
+  <a href="tel:{{ site.phone }}‬" ‬>{{ site.phone }}‬</a></p>
+  {% endif %}
+
+  <h4 class="form-instruction">Connect with us socially</h4>
+
+  <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>

data/_includes/contact-form.html

@@ -0,0 +1,18 @@
+<div class="contact-form">
+  <h4 class="form-instruction">Get in touch using the form below</h4>
+
+  <form  action="https://formspree.io/f/{{ site.formspree }}" method="post" >
+
+    <label for="name">Enter your name</label>
+    <input type="text" class="form-element" name="name" id="name" placeholder="Your Name" required>
+
+    <label for="email">Enter your email</label>
+    <input type="text" class="form-element" name="email" id="email" placeholder="Your email" required>
+
+    <label for="message">Enter your message</label>
+    <textarea class="form-element" rows="5" name="message" id="message" placeholder="Your Message" required></textarea>
+
+    <button class="btn btn-pop btn-outline btn-contact" type="submit">SEND</button>
+
+  </form>
+</div>

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/gmap.html

@@ -0,0 +1,5 @@
+<div class="google-map">
+<h4 class="form-instruction">Where to find us</h4>
+
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2469.4696265600305!2d-1.2640352834469863!3d51.76102127967778!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876c6a77fce02c7%3A0x1d053d3e05342acd!2s46%20Woodstock%20Rd%2C%20Oxford%20OX2%206HT!5e0!3m2!1sen!2suk!4v1610722975887!5m2!1sen!2suk"  frameborder="1" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
+</div>

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/navigation/global.html

@@ -9,6 +9,17 @@
     </a>
   </div>
 
+  <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>
+
   {% if page.layout == "env/landing" or page.layout == "error-page" %}
   </nav>
   {% else %}

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/contact.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+
+{% assign strap = page.title %}
+
+
+<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: 40 | plus: 200 }}ms;">{{ strap | slice: char }}</span>
+      {%- endfor -%}</h1>
+
+  </header>
+
+</div>
+
+<div class="contact__wrapper">
+
+  <div class="contact--left">
+    {% include contact-form.html %}
+  </div>
+
+  <div class="contact--right">
+    {% include gmap.html %}
+
+    {% include contact-details.html %}
+  </div>
+</div>

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>