slow-steps 0.1.10 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9a95b4b4dd8828879fc02993396b89d73f860150fc517f6eb107e0ec53d8bf4
-  data.tar.gz: b31c9f0c5bb63b9786917d63cc6b905c0e5d34ed3b93d86b204f1ee10eeb74a9
+  metadata.gz: ca83251dc806a7947a8b9de6c211911db6044e79b04cca7126824c08c1624ddb
+  data.tar.gz: 9fe0a9bc5eec32ead952396d1117b62ccfb7475d6d69f83e321b1318a60e06ec
 SHA512:
-  metadata.gz: 4d221bdd2f95a1e850aebcfbbca361e801eeb5b633488647875ffb1ed35b55a7fa8ad7485fe66a450a3f7b330ba64b1dd5597947abab1dc2ea23765f4f709d6c
-  data.tar.gz: 7b95604276b53832b699b118e20aef8265ca9680e559e81da82772573c8505be1513c4d7e23d67de5d8c88b83a8ac7618e41ff19b86e28c2d968fa3a7191d48c
+  metadata.gz: ad38fcc40813564bf185bfcd509e62070b1c232bd07a1364fe14bc180f5feab215e8d1b04adc163117b5ffd8bd691e28ee5d7007d3aeeb2a5fd7926d712383bd
+  data.tar.gz: 8759eaec96fbe2a60440e72f96ce6c36167cc11de10d7e9cd995f530cb00bd32feaf2c82fb804124d3aed501de79f4d28261824ff570723d68cb267923794349

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Made Slowly and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -1,55 +1,53 @@
 ---
 ---
-# Slow Steps, a Jekyll theme
+# [Slow Steps, a Jekyll theme](https://www.gaitq.madeslowly.xyz/clinician/about/)
 
-A jekyll theme built for GaitQ
+[![Ruby gem](https://badge.fury.io/rb/slow-steps.svg)](https://badge.fury.io/rb/slow-steps)
+
+[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/madeslowly/slow-steps/blob/master/LICENSE)
+
+[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.7-blue.svg)](https://jekyllrb.com/)
+
+A bold jekyll theme built for gaitQ. Designed to have two distinct styling, depending on current URL.
 
 ## Jekyll Theme Scaffolding
 
-How this repo is organised and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder. The compiled Jekyll site outputs to `_site/`, which is never pushed to this repo, see https://www.gaitq.madeslowly.xyz/. General flow starts with a `.md` file in our root. With Front Matter, we declare our layout which points to a structural `.html` file in `_layouts`. From here, the layout file can call in data from our `_config.yml` with `{{ site.variable }}` and from any of our `YAML` files in `_data/file.yml` with `{{ site.data.file.variable }}`. The layout can also pull in other structural html snippets from `_includes` with `{% raw %}{% include relative/path/file.html %}{% endraw %}`.
+How this repo is organised and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped  under the root folder. The compiled Jekyll site outputs to `_site/`, which is never pushed to this repo, see https://www.gaitq.madeslowly.xyz/. General flow starts with a `.md` file in our root. With Front Matter, we declare our layout which points to a structural `.html` file in `_layouts`. From here, the layout file can call in data from our `_config.yml` with `{{ site.variable }}` and from any of our `YAML` files in `_data/file.yml` with `{{ site.data.file.variable }}`. The layout can also pull in other structural html snippets from `_includes` with `{% raw %}{% include relative/path/file.html %}{% endraw %}`.
 
 It is worth noting that _include files can also perform the tasks just described. So, for example, when the `deafult.html` layout is executed (the penultimate step for *all* `.md` files), the `head.html` snippet is called, which in turn calls `og-meta.html`. Based on our sites settings and any relevant Front Matter belonging to the calling file, `og-meta.html` compiles all our `og:meta` tags and passes them to `head.html` which after adding further code, passes on to our default layout where it is placed at the top of our webpages `html`.
 
 ```
 https://github.com/madeslowly/slow-steps/
 |
-├─ _config.yml/                   # Jekyll build settings and data, site.variable
+├─ _config.yml/                   # Website settings
 |
-├─ _data/                         # Site wide data, site.data.variable
+├─ _data/                         # Site data
 |  |  |
-|  |  ├─ forms/                   # inputs for MailChimp forms, picked up by _includes/forms/
+|  |  ├─ forms/                   # Inputs for MailChimp forms
 |  |
-|  ├─ copy.yml                    # Website copy picked up with {{ site.data.copy.copy.variable }}
+|  ├─ copy.yml                    # Website copy
 |  |
-|  ├─ menu.yml                    # Menu structure for GaitQ.com
+|  ├─ menu.yml                    # Menu structure
 |
 ├─ _includes/                     # HTML and Liquid templating
 |  |
 |  ├─ branding/                   # Site branding SVGs
 |  |  |
-|  |  ├─ site__logo.svg           # Site wide logo with CSS classes, see front matter comments for class details.
-|  |
-|  ├─ errors/                     # Error page SVGs
-|  |  |
-|  |  ├─ robot-403.svg            # 403 - Forbidden
-|  |  |
-|  |  ├─ robot-404.svg            # 404 - Not Found
-|  |  |
-|  |  ├─ robot-405.svg            # 405 - Method Not Allowed
+|  |  ├─ site__logo.svg           # Site wide logo
 |  |
 |  ├─ footer/                     # Site wide footers
 |  |  |
-|  |  ├─ footer_full.html         # Multi div footer with sitemaps and contact etc
+|  |  ├─ footer_full.html         # Multi col footer
 |  |  |
-|  |  ├─ footer.html              # Simple single div footer with legal links and copyright
+|  |  ├─ footer.html              # Simple footer
 |  |
-|  ├─ forms/                      # MailChimp scaffolding, pulls data from _data/forms/
+|  ├─ forms/                      # Form scaffolding
 |  |  |
-|  |  ├─ mc-register.html         # Registration form, data from _data/forms/register
+|  |  ├─ mc-register.html         # MailChimp registration form
 |  |
-|  ├─ head/                       # Header partials, everything inside our <html> tags comes from here.
+|  ├─ head/                       # Header partials
 |  |  |
-|  |  ├─ descriptor/              # Site wide descriptors, basically this is where much of our SEO occurs.
+|  |  ├─ descriptor/              # Site wide descriptors
 |  |  |  |
 |  |  |  ├─ og-meta.html
 |  |  |  ├─ structured-data.html
@@ -59,7 +57,7 @@ https://github.com/madeslowly/slow-steps/
 |  |  |  |
 |  |  |  ├─ conditional.html      # Page env: condition --> gaitq_env.css
 |  |  |
-|  |  ├─ head.html                # Routine to collect header partials, page.env and page.layout dependencies. We also open <body> here.
+|  |  ├─ head.html                # Routine to collate header partials
 |  |
 |  ├─ navigation/                 # HTML and Liquid templating
 |  |  |
@@ -69,7 +67,7 @@ https://github.com/madeslowly/slow-steps/
 |
 ├─ _layouts/                      # HTML and Liquid templating
 |  |
-|  ├─ env/                        # Environmental specific layouts, passed onto default.html after processing
+|  ├─ env/                        # Environmental specific layouts
 |  |  |
 |  |  ├─ clinician.html           # Professionals and press
 |  |  ├─ pwp.html                 # Patients and carers
@@ -77,9 +75,9 @@ https://github.com/madeslowly/slow-steps/
 |  |
 |  ├─ compress.html               # Final step for all pages. Strips html comments, carriage returns and white space.
 |  |
-|  ├─ default.html                # Wraps page content with header, nav and scripts. For all pages, also this is where Jekyll looks if no front matter defined. Passed onto compress.html after processing.
+|  ├─ default.html                # Wraps page content with header, nav, scripts and footer.
 |  |
-|  ├─ error-page.html             # Landing page. Passed onto default.html after processing.
+|  ├─ error-page.html             # HTTP error pages
 |
 ├─ _plugins/                      # Custom Ruby plugins
 |  |
@@ -135,17 +133,17 @@ https://github.com/madeslowly/slow-steps/
 
 `_config.yml` is where most variables are set.
 
-#### title:
+#### `title:`
 
 The global title of the website.
 
-#### subtitle:
+#### `subtitle:`
 
 The global subtitle of the website.
 
 #### Page Titling
 
-Pages are given titles according to,
+Each pages is given a title according to,
 
 ```Liquid
 {% if page.title %}
@@ -155,11 +153,11 @@ Pages are given titles according to,
 {% endif %}
 ```
 
-#### description:
+#### `description:`
 
 Site wide description, used in head description, og:description, twitter:description and structured data. Overwritten by page front matter, `description:`
 
-#### url:
+#### `url:`
 
 Used to generate absolute URLs for sitemaps, feeds and for generating canonical URLs in a page's `<head>`. When developing locally either comment this out or use something like `http://localhost:4000` so all assets load properly. *Don't include a trailing `/`*.
 
@@ -172,23 +170,23 @@ url: "http://www.gaitq.com"
 url: ""
 ```
 
-#### baseurl:
+#### `baseurl:`
 
 Used when we are developing a partial.
 
-#### author:
+#### `author:`
 
 Author of this Jekyll project. Content authors can be added to _data/authors.yml and assigned in a pages front matter.
 
-#### postal_add:
+#### `postal_add:`
 
 Postal address of GaitQ Ltd. Used in structured data.
 
-#### opening_hours:
+#### `opening_hours:`
 
 Used in structured data. This lets google know when we are open.
 
-#### logo
+#### `logo:`
 
 Site wide logo, used as a default image for Twitter and Facebook. Can be over written by a pages front matter: `image:`.
 

data/_includes/footer/footer_full.html

@@ -16,8 +16,20 @@
           {% for item in site.postal_add %}
           <li class="address">{{ item[1] }}</li>
           {% endfor %}
+          <li><a class="ft--link" href="mailto:{{ site.email }}">{{ site.email }}</a></li>
           <li>{{ site.phone }}</li>
-          <li>{{ site.email }}</li>
+
+          <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>
 
       </div>
@@ -35,7 +47,7 @@
           <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.alt }}</a></li>
+          <li><a class="ft--link" href="{{ sub.url }}">{{ sub.alt }}</a></li>
           {% endfor %}
           </ul>
         </div>
@@ -61,7 +73,7 @@
       <a href="{{ item.url }}">{{ item.name }}</a>
       {% endfor %}
     </div>
-    <a href="{{ site.author.url }}" class="slogan">made slowly</a>
+    <a href="{{ site.author.url }}" class="slogan">Jekyll theme Slow Steps</a>
   </div>
 
 </footer>

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

@@ -1,33 +1,30 @@
 <!-- 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.images[image_handle].size | split: ', ' | first -%}
+{%- assign imageY = page.images[image_handle].size | split: ', ' | last -%}
 
-  <!-- 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: ',' %}
 
-  <!-- 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.images[image_handle].labels %}
 
-  <!-- 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 %}
 
-    <!-- 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 %}
 
-    <!-- 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 %}
 
-  {% endfor %}
-
-{% endif %}
 
 <!--
 in:   [imageX, imageY] pixels
@@ -35,6 +32,4 @@ in:   [imageX, imageY] 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/image-post.html

@@ -0,0 +1,12 @@
+<!--
+  insert an image located in assets/images/posts/ and wrap with .post__image div.
+-->
+<div class="post__image">
+
+  {% picture {{ include.link | prepend: 'posts/' }} --alt {{include.alt}} --img class="post__content--image" %}
+
+  {% if include.caption %}
+  <p class="image--caption">{{ include.caption }}</p>
+  {% endif %}
+
+</div>

data/_includes/image.html

@@ -1,10 +1,55 @@
-<!-- include for post images to simplify the ux -->
+<!--
+  insert an augmented image located in assets/images/content/
 
-<div class="post__image">
+  Usage:
 
-{% picture {{ include.link | prepend: 'posts/' }} --alt include.alt --img class="post__content--image" %}
+  <div class="wrapping-class" >
+  {% comment %}
+  {%  include image.html
+      image="handle"
+      alt="Description"
+      class="image-class"
+      caption="Optional caption"
+      %}
+  {% endcomment %}
 
-{% if include.caption %}
-<p class="post__image--caption">{{ include.caption }}</p>
+  We close the wrapping div before the caption.
+
+-->
+
+
+{% capture path %}
+{{ page.images[include.image].file | prepend: 'content/'  }}
+{% endcapture %}
+
+{% picture {{ path }}
+  --img class="{{ include.class }}"
+  --alt {{ include.alt }} %}
+
+{% if page.images[include.image].labels %}
+
+{% include functions/calc-svg-coord.html image_handle=include.image %}
+
+<svg class="svg__augment" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+
+  {% for item in page.images[include.image].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>
 {% endif %}
+
+<!-- closing warpping div -->
 </div>
+
+{% if include.caption %}
+<p class="image--caption">{{ include.caption }}</p>
+{% endif %}

data/_includes/scripts.html

@@ -19,7 +19,9 @@
 
 <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/calc-mobile-viewport.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>
 

data/_includes/vimeoPlayer.html

@@ -1,12 +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 class="video__container">
+<iframe
+    src="https://player.vimeo.com/video/{{ include.id }}?autoplay=1&title=0&byline=0&portrait=0"
+    frameborder="0"
+    allow="autoplay"
+    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 }}"

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>