slow-steps 0.1.11 → 0.3.0

data/_includes/navigation/global.html

@@ -9,63 +9,57 @@
     </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 %}
+  {% if page.env != "landing" OR page.env != "error-page" %}
 
+  <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 %}
-    <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>
-
-              {% endfor %}
-            </div>
-            {% endif %}
-
-</div>
-          {% endfor %}
+  <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>
+
+            {% endfor %}
+          </div>
+          {% endif %}
 
         </div>
-      </li>
-      {% endfor %}
-
-    </ul>
+        {% endfor %}
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
 
-    <div class="burger">
-      <div class="burger-line-1"></div>
-      <div class="burger-line-2"></div>
-      <div class="burger-line-3"></div>
-    </div>
-  {% endif %}
+  <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 %}

data/_includes/scripts.html

@@ -4,26 +4,27 @@
 
   <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="{{ '/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>
+  <script type="text/javascript" src="{{ '/assets/js/svg_aos.js' | relative_url }}" async></script>
 
   {% include functions/pull_page_args.html %}
 
 {% endif %}
 
+<script type="text/javascript" src="{{ '/assets/js/animate_after_load.js' | relative_url }}" async></script>
 
-<script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/animate_after_load.js" | relative_url }}" async></script>
+<script type="text/javascript" src="{{ '/assets/js/calc-mobile-viewport.js' | relative_url}}" async></script>
 
-<script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/mobile-nav-slider.js" | relative_url }}" async></script>
+{% if page.url != '/' %}
 
-<script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/calc-mobile-viewport.js" | relative_url }}" async></script>
+<script type="text/javascript" src="{{ '/assets/js/nav-scroll.js' | relative_url }}" async></script>
+
+<script type="text/javascript" src="{{ '/assets/js/mobile-nav-slider.js' | relative_url }}" async></script>
 
-{% if page.url != '/' %}
-<script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/nav-scroll.js" | relative_url }}" async></script>
 {% endif %}
 
-<script type="text/javascript" src="{{ site.baseurl }}/assets/vendor/aos/aos.js" ></script>
+<script type="text/javascript" src="{{ '/assets/vendor/aos/aos.js' | relative_url }}" ></script>
 
 <script>
   AOS.init({

data/_includes/vimeoPlayer.html

@@ -1,12 +1,11 @@
 
-<div class="embed-container">
-  <iframe
-      src="https://player.vimeo.com/video/{{ include.id }}"
-      width="500"
-      height="281"
-      frameborder="0"
-      webkitallowfullscreen
-      mozallowfullscreen
-      allowfullscreen>
-  </iframe>
+<div class="video__container">
+<iframe
+    src="https://player.vimeo.com/video/{{ include.id }}?title=0&byline=0&portrait=0"
+    frameborder="0"
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen>
+</iframe>
 </div>
+<script src="https://player.vimeo.com/api/player.js"></script>

data/_layouts/about.html

@@ -21,7 +21,7 @@ Last full read through 29/12/2020
 <div class="hero hero-65">
 
   <div class="hero__overlay h-100">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image hero__image--fixed hero-65"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -50,9 +50,18 @@ Last full read through 29/12/2020
 </div>
 {% endif %}
 
-<div class="about__team">
+<div class="embedded__video about--video">
+  <!--
+  <h2>Watch our company video</h2>
+  -->
+  {% include vimeoPlayer.html id="493777125" %}
+
+</div>
 
+<div class="about__team">
+  <h2 class="bg--env-50 about__team--title">Meet the team</h2>
   <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 }}"
@@ -74,7 +83,12 @@ Last full read through 29/12/2020
       {% endfor %} ">
 
         <div class="single__member__image">
-          <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 }}" />
+          <img class="member--image" src="
+          {%- if member.image -%}
+            {{ member.image | prepend: '/assets/images/content/people/' | relative_url }}
+          {%- else -%}
+            {{ 'team-placeholder.jpg' | prepend: '/assets/images/defaults/' | relative_url }}
+          {%- endif -%}" alt="{{ member.name }} is the {{ member.position }}" />
         </div>
 
         <div class="single__member__text">

data/_layouts/careers.html

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+
+
+<div class="spacefiller"></div>
+<div class="hero hero-65 collage">
+
+{% for collage in page.collage  %}
+  <div class="collage__image__wrap collage__image__wrap-{{ forloop.index }}">
+    <h3 class="image__header">{{ collage.reasons }}</h3>
+      {% picture {{ collage.image | prepend: 'content/' }}
+        --img class="collage__image collage__image-{{ forloop.index }}"
+        --alt {{ collage.reasons }} %}
+  </div>
+{% endfor %}
+</div>
+
+<div class="fullwidth__wrap">
+{{ content }}
+</div>

data/_layouts/contact.html

@@ -8,7 +8,7 @@ layout: default
 <div class="hero hero-65">
 
   <div class="hero__overlay h-100">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image hero__image--fixed hero-65"
       --alt {{ page.hero.alt }} %}</div>
 

data/_layouts/env/clinician.html

@@ -23,7 +23,7 @@ Last full read through 27/12/2020
 <div class="hero hero-65">
 
   <div class="hero__overlay">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image image__filter--mix"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -39,7 +39,7 @@ Last full read through 27/12/2020
 
 <div class="augmented-image">
 
-  {% picture {{ page.subhero.image | prepend: 'content/' }}
+  {% picture {{ page.subhero.file | prepend: 'content/' }}
     --img class="hero__image"
     --alt {{ page.subhero.alt }} %}
 
@@ -51,7 +51,15 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+
+        <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
+        -->
+        <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/>
+
+        <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" />
 
     </svg>
@@ -89,31 +97,6 @@ Last full read through 27/12/2020
 
   <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>
-
-
-  </div>
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
 
 </div>

data/_layouts/env/pwp.html

@@ -24,7 +24,7 @@ Last full read through 27/12/2020
 <div class="hero hero-90">
 
   <div class="hero__overlay">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image image__filter--mix h-100"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -51,7 +51,7 @@ Last full read through 27/12/2020
 
 <div class="augmented-image">
 
-  {% picture {{ page.subhero.image | prepend: 'content/' }}
+  {% picture {{ page.subhero.file | prepend: 'content/' }}
     --img class="hero__image"
     --alt {{ page.subhero.alt }} %}
 
@@ -63,7 +63,15 @@ Last full read through 27/12/2020
         </radialGradient>
       </defs>
 
-      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" >
+
+        <!-- Can't animate with CSS, see https://stackoverflow.com/questions/32409101/resizing-svg-circle-radius-using-css-animation
+        -->
+        <animate attributeName="r" begin="0s" dur="2s" repeatCount="indefinite" from=".1" to="2"/>
+
+        <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" />
 
     </svg>
@@ -94,60 +102,11 @@ Last full read through 27/12/2020
 
   <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" />
+    {% include image.html image="guarantee" alt="Describe the image" class="hero__image image--guarantee h-100"%}
 
-          <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>
-
-
-  </div>
 
 </div>
 
 <div class="augmented-image" >
 
-  {% picture {{ page.device.image | prepend: 'content/' }}
-    --img class="hero__image"
-    --alt {{ page.device.alt }} %}
-
-      {% include functions/calc-svg-coord.html image_handle="device" %}
-
-    <svg class="svg__augment" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
-
-      {% for item in page.device.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>
-
-</div>
+{% include image.html image="device" alt="Describe the image" class="hero__image" %}

data/_layouts/faq.html

@@ -8,7 +8,7 @@ layout: default
 <div class="hero hero-65">
 
   <div class="hero__overlay h-100">
-    {% picture {{ page.hero.image | prepend: 'content/' }}
+    {% picture {{ page.hero.file | prepend: 'content/' }}
       --img class="hero__image hero__image--fixed hero-65"
       --alt {{ page.hero.alt }} %}</div>
 
@@ -29,7 +29,7 @@ layout: default
 {% for faq in site.data.faq %}
 <div class="faq__panel">
   <div class="faq__question">
-    <h4>{{ faq.question }}</h4>
+    <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
   </div>
 
   <div class="faq__answer faq__answer--reveal">
@@ -52,12 +52,21 @@ layout: default
 </script>
 
 <script>
-/* Watch for clicks on more info and reveal text */
+/* Watch for clicks and reveal text */
 document.querySelectorAll('.faq__question').forEach(function(el){
   el.addEventListener('click', function() {
+    this.classList.toggle('faq__question--reveal');
     const n = this.nextElementSibling;
     n.classList.toggle('faq__answer--reveal');
   });
 });
 
 </script>
+
+
+
+<div class="faq__contact">
+    <h2 class="faq__contact--strap">Not found the answer?</h2>
+    {% include contact-form.html %}
+
+</div>