slow-steps 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca83251dc806a7947a8b9de6c211911db6044e79b04cca7126824c08c1624ddb
-  data.tar.gz: 9fe0a9bc5eec32ead952396d1117b62ccfb7475d6d69f83e321b1318a60e06ec
+  metadata.gz: d9d1c88ec0b493bea3723570d98ef400e5d009e0e3b410909808c6b35e17e845
+  data.tar.gz: 978803f523fdbc4efc9b2acbd6e6f3f8f0e9922fc2968aa2284ec701496a71b0
 SHA512:
-  metadata.gz: ad38fcc40813564bf185bfcd509e62070b1c232bd07a1364fe14bc180f5feab215e8d1b04adc163117b5ffd8bd691e28ee5d7007d3aeeb2a5fd7926d712383bd
-  data.tar.gz: 8759eaec96fbe2a60440e72f96ce6c36167cc11de10d7e9cd995f530cb00bd32feaf2c82fb804124d3aed501de79f4d28261824ff570723d68cb267923794349
+  metadata.gz: '028f491628453ae0c41ae8d4edc2a9657c0dc84adac901d32ef3868ff40d7df593cf5fd65d5dc1137b32964eae1f208962b49cd0fc0e6c58cfed934b9b1f554b'
+  data.tar.gz: b4a15f9e3cc37c5a52522460f95098b6edf54858184113a3c1dcffd1c81fa42643a909094a8bb08e544acb827975b5daba41ab7c3d917a463dbed7f56776e5fa

data/_config.yml

@@ -42,7 +42,7 @@ sass:
 
 compress_html:
   ignore:
-    envs: [local]
+    envs: all
   comments:                all
 
 autoprefixer:

data/_includes/functions/pull_page_args.html

@@ -5,12 +5,12 @@ 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 */
+  /* get svg 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 }} ;
+  var x_0 = {{ page.images.guarantee.size | split: ', ' | first }} ;
+  var y_0 = {{ page.images.guarantee.size | split: ', ' | last }} ;
 
   for (let i = 0; i < svg.length; i++) {
   /* origanal x position in pixels */

data/_includes/head/head.html

@@ -15,9 +15,7 @@
     {% endif %}
   </title>
 
-  {% include head/descriptors/structured-data.html %}
-
-  <!-- use local page descriptions if it exist -->
+  <!-- use page descriptions if it exist -->
   <meta name="description"
     content="
       {% if page.description %}
@@ -30,45 +28,26 @@
 
   <meta name="author" content="{{ site.author.name }}" />
 
-  <meta name="copyright"
-    content="
-      Copyright {{ site.title }} {{ 'now' | date: "%Y" }}" />
+  {% assign date = 'now' | date: "%Y" %}
+  <meta name="copyright" content="Copyright {{ site.title | append: ' Ltd. ' | append: date }}" />
 
   <meta name="robots" content="follow" />
 
-  {% include /head/descriptors/twitter-meta.html %}
-
-  {% include /head/descriptors/og-meta.html %}
-
-  <link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+  <link rel="canonical" href="{{ page.url | absolute_url }}" />
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
 
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_global.css" media="screen" />
-
-  {% if page.layout == 'error-page' %}
-  <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_errors.css" media="screen" />
-  {% endif %}
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.fallback_path | append: site.favicon | relative_url }}">
 
-  {% if page.layout == 'feed' %}
-  <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_feed.css" media="screen" />
-  {% endif %}
-
-  <link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ site.baseurl }}/assets/css/gaitq_post.css" media="screen" />
-
-
-  {% if page.env %}
-    {% include /head/env/conditional.html %}
-  {% endif %}
+  {% include head/descriptors/structured-data.html %}
 
-  <!-- Animate on scroll lib, js is in footer -->
-  <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/vendor/aos/aos.css" media="none" onload="if(media!='all')media='all'" />
+  {% include /head/descriptors/twitter-meta.html %}
 
-  <link rel="stylesheet" href="{{ site.baseurl }}/assets/fonts/fontawesome-free-5.11.2-web/css/all.min.css" media="none" onload="if(media!='all')media='all'" / >
+  {% include /head/descriptors/og-meta.html %}
 
-  <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}{{ site.fallback_path }}{{ site.favicon }}">
+  {% include /head/stylesheets.html %}
 
   {% if jekyll.environment == "production" %}
   {% include google-analytics.html %}

data/_includes/head/stylesheets.html

@@ -0,0 +1,20 @@
+<!-- Animate on scroll, js is in footer -->
+<link rel="stylesheet" type="text/css" href="{{ '/assets/vendor/aos/aos.css' | relative_url }}" media="none" onload="if(media!='all')media='all'" />
+
+<!-- Font Awesome v5 -->
+<link rel="stylesheet" href="{{ '/assets/fonts/fontawesome-free-5.11.2-web/css/all.min.css' | relative_url }}" media="none" onload="if(media!='all')media='all'" / >
+
+<!-- Slow Steps error pages -->
+{% if page.layout == 'error-page' %}
+<link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ '/assets/css/gaitq_errors.css' | relative_url }}" media="screen" />
+{% endif %}
+
+<!-- Slow Steps post pages -->
+<link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ '/assets/css/gaitq_post.css' | relative_url }}" media="screen" />
+
+{% if page.env %}
+<link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ '/assets/css/env/gaitq_' | append: page.env | append: '.css' | relative_url }}" media="screen" />
+{% endif %}
+
+<!-- Slow Steps custom css -->
+<link rel="stylesheet" type="text/css" title="made slowly has all the style" href="{{ '/assets/css/gaitq_custom.css' | relative_url }}" media="screen" />

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

data/_layouts/about.html

@@ -83,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/_sass/_colors/README.md

@@ -0,0 +1,27 @@
+# Color definitions
+
+Everything here should be rgb(a) color definitions using sass variables,
+
+```sass
+$var-name: rgba(r, g, b, a)
+```
+
+## _variables.sass
+
+Site wide color definitions, avoid changing these variables. If we want to change the color of an element then either using a pre-existing sass variable, or creating a new one, change the actual element css to the new sass color variable.
+
+## _mixins.sass
+
+Color combination mixins.
+
+## collection.sass
+
+Collection of the above definitions.
+
+## _clinician.sass
+
+Theme colouring for clinician environments. We import collection.sass and define `$env-primary` and `$env-secondary`.
+
+## _pwp.sass
+
+Theme colouring for pwp environments. We import collection.sass and define `$env-primary` and `$env-secondary`.

data/_sass/_colors/_clinician.sass

@@ -0,0 +1,7 @@
+@import 'collection'
+
+// Colouring theme for clinician env
+
+$env-primary: $opd-blue
+
+$env-secondary: $opd-coral

data/_sass/_colors/_mixins.sass

@@ -0,0 +1,14 @@
+// Color set mixins
+
+@mixin opd-light-blue
+  background-color: $opd-light-blue
+  color: $opd-blue
+
+
+@mixin opd-blue
+  background-color: $opd-blue
+  color: $white
+
+@mixin opd-coral
+  background-color: $opd-coral
+  color: $white

data/_sass/_colors/_pwp.sass

@@ -0,0 +1,6 @@
+@import 'collection'
+// Colouring theme for pwp env
+
+$env-primary: $opd-coral
+
+$env-secondary: $opd-blue

data/_sass/{colors → _colors}/_variables.sass

@@ -6,18 +6,21 @@
  *
  */
 
+// $var-name: rgba(r, g, b, a) only
+
 // Oxford Product Design
 
 // #46627d
-$opd-blue-confidence: rgba(70, 98, 125, 1)
+$opd-blue: rgba(70, 98, 125, 1)
 
 // #da5e51
-$opd-orange-confidence: rgba(218, 94, 81, 1)
+$opd-coral: rgba(218, 94, 81, 1)
 
-// #9CBBD2
-$opd-blue-trust: rgba(174, 201, 229, 1)
+// #a3dbf5
+$opd-light-blue: rgba(174, 201, 229, 1)
 
-$opd-grey-neutral: rgba(178, 178, 178, 1)
+// #b3b2b2
+$opd-grey: rgba(179, 178, 178, 1)
 
 
 // Socials
@@ -50,15 +53,3 @@ $light-grey: rgb(220, 220, 220)
 $grey: rgb(130, 130, 130)
 
 $led: rgb(255, 70, 0)
-
-
-// Object colors
-
-$secondary-navbar-color: rgba(255, 255, 255, .8)
-
-
-// Color set mixins
-
-@mixin opd-blue-trust
-  background-color: $opd-blue-trust
-  color: $opd-blue-confidence

data/_sass/_colors/collection.sass

@@ -0,0 +1,3 @@
+@import '_variables'
+
+@import '_mixins'

data/_sass/_mixins.sass

@@ -68,18 +68,18 @@
 @mixin logo-primary-colors
   .site__logo--group
     .site__logo--curve
-      fill: $opd-orange-confidence
+      fill: $opd-coral
     .site__logo--legvert
-      fill: $opd-blue-confidence
+      fill: $opd-blue
     .site__logo--leg45
-      fill: $opd-blue-trust
+      fill: $opd-light-blue
     .site__logo--g,
     .site__logo--a,
     .site__logo__i,
     .site__logo--t
-      fill: $opd-blue-confidence
+      fill: $opd-blue
     .site__logo--Q
-      fill: $opd-orange-confidence
+      fill: $opd-coral
 
 
 
@@ -101,3 +101,12 @@
   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
+
+
+@mixin text-shadow
+  text-shadow: 3px 3px 6px rgba($pure-black, .2)
+
+
+@mixin navbar-color
+  backdrop-filter: blur(20px)
+  background-color: $secondary-navbar-color

data/_sass/about.sass

@@ -35,7 +35,7 @@
 
 .about--video
   width: 100vw
-  background-color: $opd-grey-neutral
+  background-color: $opd-grey
   display: flex
   flex-direction: column
   padding: 5rem 0
@@ -64,7 +64,7 @@
   display: flex
   flex-direction: column
   background-color: $pure-white
-  border-top: solid 1px $opd-blue-confidence
+  border-top: solid 1px $opd-blue
 
 .about__team--title
   padding-top: 3rem
@@ -73,14 +73,14 @@
 
 .team__head
   align-items: flex-end
-  border-bottom: solid 1px $opd-blue-confidence
+  border-bottom: solid 1px $opd-blue
   display: flex
   height: 10rem
   justify-content: space-around
   width: 100vw
 
 .team__title
-  color: $opd-blue-confidence
+  color: $opd-blue
   padding-bottom: 2rem
   transition: .4s ease-out
   cursor: pointer
@@ -92,7 +92,7 @@
   color: $env-primary
   padding-bottom: 2.3rem
   i
-    text-shadow: 0px 12px 10px rgba($pure-black, .3)
+    @include text-shadow
     font-size: $font-size * 1.5
 
 .team__title.team__title--active
@@ -111,7 +111,7 @@
 
 .team__members
   background-color: $white
-  color: $opd-blue-confidence
+  color: $opd-blue
   padding-top: 10rem
 
 .single__member
@@ -149,6 +149,7 @@
   display: flex
   align-items: center
   color: $grey
+  font-size: $font-size
 
 .member__socials
   align-items: center