slow-steps 0.1.3 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5905d151caa2a511bd3cb4491d190377d5a4d9e71d03aaaaf9e500c98bcddc8e
-  data.tar.gz: 9f76b1b790b12641fbf9b5b839191da6d4047476be880eeaca2be80caac1c13f
+  metadata.gz: 332f670401ff9b865530c6eb7c0feba92d41d5ff6ddaae6261becd8993c6a413
+  data.tar.gz: b26f9e29f7509b7b5b5a8552c8374417bc27047b4a88a5611b3f076c24b21a74
 SHA512:
-  metadata.gz: 94b2276d3b3d073bcc8fb185c032c32653f6a8888fbad54bd355b21dc17c34d181e718e8a1521a25a55813dc74f59db3bbf4b0e7ab259a6270f76ebc021fdf30
-  data.tar.gz: a20c622efeda2a92d25eb7bd985bbaed063a5938f626f23190a4bb0a327266bfed526ddca0608474b821166234a0cf9d5b0613896886f03b0bd98c17e8947acd
+  metadata.gz: dcd734f318740df554def7c646ae56c0bc5ff6b27dcb138cd4d486fe9b0a2973221f3f147cc2acb14a9dfd0d94d0a753770929ed4936bdebf48fb95e4c335ecf
+  data.tar.gz: b841ebdd6f68eb65e8dfbcaa060855287ab7bcdd92b5dcdb6af689aaf5e92381926ebbad2ad04806d0b162257383260f1fab3f9a1e4a935bdab4f70e4b3919e4

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

@@ -6,7 +6,7 @@
   </div>
   <div class="ft__body">
 
-    <div class="ft__contact ft__col-3">
+    <div class="ft__contact ft__col">
 
       <a href="{{ site.baseurl }}/">
         {% include /branding/site-logo.svg %}
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="ft__sitemap ft__col-3">
+    <div class="ft__sitemap ft__col">
       <div class="ft__sitemap--menu">
         <h3 class="ft__sitemap--header">INFORMATION FOR</h3>
 
@@ -53,7 +53,7 @@
 
     <p class="copyright">&copy; <script>
         document.write(new Date().getFullYear())
-      </script> {{ site.title }} Limited</p>
+      </script> {{ site.title }}</p>
 
 
     <div class="legal-links">

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,9 +8,7 @@ layout: compress
 
 {{ content }}
 
-{% if page.layout == "env/landing" or page.layout == "error-page" %}
-
-{% else %}
+{% if page.layout != "error-page" %}
 
   {% include footer/footer_full.html %}
 

data/_layouts/env/clinician.html

@@ -20,14 +20,14 @@ Last full read through 27/12/2020
 {% assign description = site.description %}
 {% endif %}
 
-<div class="hero">
+<div class="hero hero-65">
 
   <div class="hero__overlay">
     {% picture {{ page.hero.image | prepend: 'content/' }}
-      --img class="hero__image hero__filter"
+      --img class="hero__image image__filter--mix"
       --alt {{ page.hero.alt }} %}</div>
 
-  <div class="hero__strap">
+  <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>
@@ -90,7 +90,7 @@ 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 "
+      --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">

data/_layouts/env/landing.html

@@ -43,7 +43,7 @@ Last full read through 27/12/2020
 
     <div class="hero__overlay env--pwp">
       {%- picture {{ page.pwp.image | prepend: 'content/' }}
-        --img class="hero__image hero__filter pwp__hero"
+        --img class="hero__image hero__filter pwp__hero h-100"
         --alt {{ page.pwp.alt }} -%}</div>
 
   </div>
@@ -77,7 +77,7 @@ Last full read through 27/12/2020
 
     <div class="hero__overlay env--clinician">
       {%- picture {{ page.clinician.image | prepend: 'content/' }}
-        --img class="hero__image hero__filter clinician__hero"
+        --img class="hero__image hero__filter clinician__hero h-100"
         --alt {{ page.clinician.alt }} -%}</div>
 
   </div>

data/_layouts/env/pwp.html

@@ -2,7 +2,6 @@
 layout: default
 ---
 
-
 <!--
 
 Last full read through 27/12/2020
@@ -22,14 +21,14 @@ Last full read through 27/12/2020
 {% assign description = site.description %}
 {% endif %}
 
-<div class="hero">
+<div class="hero hero-90">
 
   <div class="hero__overlay">
     {% picture {{ page.hero.image | prepend: 'content/' }}
-      --img class="hero__image hero__filter"
+      --img class="hero__image image__filter--mix h-100"
       --alt {{ page.hero.alt }} %}</div>
 
-  <div class="hero__strap">
+  <div class="hero__strap hero__strap--center hero__strap--env">
     <h1>
       <span class="hero__strap--start">
         {% assign header = site.data.copy.landing.pwp %}
@@ -96,7 +95,7 @@ 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 "
+      --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">

data/_layouts/full-width.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<section class="fullwidth__wrap">
+
+
+  {{ content }}
+
+
+</section>

data/_sass/_functions.sass

@@ -0,0 +1,2 @@
+@function url-friendly-colour($colour)
+  @return '%23' + str-slice('#{$colour}', 2, -1)

data/_sass/_mixins.sass

@@ -6,7 +6,29 @@
  *
  */
 
-// Landing page animations, hover and focus
+@import '_functions'
+
+// ##############################################
+
+// Image filters
+
+// Applied to the actual image with background-color: $env-primary
+@mixin image-filter--mix
+  filter: grayscale(1) contrast(.2) brightness(1.8)
+  opacity: .6
+
+@mixin image-filter-rotate
+  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+
+// Applied to an overlaying div
+@mixin image-filter--blur
+  backdrop-filter: blur(8px)
+  background-color: rgba($env-primary, .5)
+
+
+// ##############################################
+
+// Landing page animations - hover and focus
 
 @mixin reveal-landing-strap
   height: 30vh
@@ -39,13 +61,6 @@
       transform: translateX(0)
 
 
-
-// Global image filter for most hero images
-@mixin image-filter
-  filter: grayscale(.2) contrast(.2) brightness(1.6)
-  opacity: .7
-
-
 // Logo using the OPD primary colors
 @mixin logo-primary-colors
   .site__logo--group
@@ -77,3 +92,9 @@
     .site__logo--t,
     .site__logo--Q
       fill: $color
+
+
+@mixin footer-bg($footer-bg-color)
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='1278' height='600' %3E%3Cpath d='M1019,600 C1019,600 1019,600 1019,600 C1019,600 1279,600 1279,600 C1279,600 1279,0 1279,0 C1279,0 413,0 413,0 C413,0 413,0 413,0' fill= '#{url-friendly-colour($footer-bg-color)}' fill-opacity='0.99'/%3E%3Cpath d='M1220,600 C1220,600 0,600 0,600 C0,600 0,0 0,0 C0,0 414,0 414,0 C414,0 1020,600 1020,600' fill= '#{url-friendly-colour($footer-bg-color)}' /%3E%3C/svg%3E")
+  background-position: center
+  background-size: cover