slow-steps 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5905d151caa2a511bd3cb4491d190377d5a4d9e71d03aaaaf9e500c98bcddc8e
-  data.tar.gz: 9f76b1b790b12641fbf9b5b839191da6d4047476be880eeaca2be80caac1c13f
+  metadata.gz: bddbe7e9f546b517ece2c9b205ba6ec42dcd5f2230ce469b6a94f0d7fcba8ef0
+  data.tar.gz: e96335042acf12c5418a97bdbe7e75fab5147b5b61f68593cc8cea7ade90550c
 SHA512:
-  metadata.gz: 94b2276d3b3d073bcc8fb185c032c32653f6a8888fbad54bd355b21dc17c34d181e718e8a1521a25a55813dc74f59db3bbf4b0e7ab259a6270f76ebc021fdf30
-  data.tar.gz: a20c622efeda2a92d25eb7bd985bbaed063a5938f626f23190a4bb0a327266bfed526ddca0608474b821166234a0cf9d5b0613896886f03b0bd98c17e8947acd
+  metadata.gz: 77b937e5f6f7b96742b3ec16dece80c228b7818778fbab1738617580ff888b7aec5da645595fec0143b37dabaeab1c17ea55d6186473225219c638866b4775f2
+  data.tar.gz: 3f90b61d92705d3f75bfd0800a4d7244e591583d135209ad68ded0f7f3ba092eb67e601d9df1260e5509f30257e1bdcafd6b1a43d2d2169a6d2d8ea77bf147a2

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/_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,19 +52,22 @@ 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 }}
@@ -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/default.html

@@ -8,7 +8,7 @@ layout: compress
 
 {{ content }}
 
-{% if page.layout == "env/landing" or page.layout == "error-page" %}
+{% if page.layout == "error-page" %}
 
 {% else %}
 

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/_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,26 @@
  *
  */
 
-// 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
+
+// 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 +58,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 +89,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

data/_sass/about.sass

@@ -1,20 +1,17 @@
+/*  Last full read through 29/12/2020
+ *
+ *##############################################
+ *# about                      /_sass/about.sass
+ *##############################################
+ *
+ */
 
-.about__head
-  align-items: center
-  backdrop-filter: blur(8px)
-  background-color: rgba($env-primary, .5)
-  color: $white
-  display: flex
-  height: $mobile-navbar-height * 4
-  justify-content: center
-  padding-top: $mobile-navbar-height
-  text-align: center
-  span
-    animation-duration: .1s
-    animation-fill-mode: forwards
-    animation-iteration-count: 1
-    animation-name: fadeInOpacity
-    opacity: 0
+
+.hero
+  overflow: hidden
+
+.hero__image--fixed
+  position: fixed
 
 @keyframes fadeInOpacity
   0%
@@ -24,20 +21,8 @@
     opacity: 1
 
 
-.about__head__bg
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  filter: contrast(3) brightness(.6)
-  background-position: center
-  background-repeat: no-repeat
-  background-size: cover
-  height: $mobile-navbar-height * 5
-  position: fixed
-  width: 100vw
-  z-index: -1
-
 .about__copy
   align-items: center
-  background-color: $env-primary
   color: $white
   display: flex
   flex-direction: column
@@ -55,7 +40,6 @@
 
 .team__head
   align-items: flex-end
-  background-color: rgba($env-primary, .5)
   border-bottom: solid 1px $opd-blue-confidence
   display: flex
   height: 10rem

data/_sass/colors/_variables.sass

@@ -8,11 +8,14 @@
 
 // Oxford Product Design
 
-$opd-blue-confidence: rgba(62, 86, 112, 1)
+// #46627d
+$opd-blue-confidence: rgba(70, 98, 125, 1)
 
-$opd-orange-confidence: rgba(210, 84, 75, 1)
+// #da5e51
+$opd-orange-confidence: rgba(218, 94, 81, 1)
 
-$opd-blue-trust: rgba(179, 201, 226, 1)
+// #9CBBD2
+$opd-blue-trust: rgba(174, 201, 229, 1)
 
 $opd-grey-neutral: rgba(178, 178, 178, 1)
 

data/_sass/colors/env/_clinician.sass

@@ -1,5 +1,5 @@
 
-// Colouring theme for pwp env
+// Colouring theme for clinician env
 
 $env-primary: $opd-blue-confidence
 

data/_sass/colors/global.sass

@@ -0,0 +1,2 @@
+.white
+  color: $white

data/_sass/env/clinician.sass

@@ -6,19 +6,17 @@
  *
  */
 
-.hero
-  height: 65vh
-  height: calc(var(--vh, 1vh) * 65)
+.image__filter--blur
+  @include image-filter--blur
 
 .hero__overlay
   background-color: $env-primary
 
-.hero__strap
-  align-self: flex-end
+.bg--env-100
   background-color: $env-primary
-  color: $white
-  padding-bottom: 5.5vh
-  width: 100vw
+
+.bg--env-50
+  background-color: rgba($env-primary, .5)
 
 .hero__follow
   background-color: $env-primary
@@ -35,53 +33,18 @@
     padding: 5rem 0
     width: 50%
 
-// This is basically a button and should to be centralised
+
 .action__call
-  bottom: 0
-  font-size: $font-size * .8
-  margin: -100px auto
-  padding: 2rem
-  position: relative
-  text-decoration: none
-  transition: .2s ease
 
   &:before
     background-color: rgba($env-secondary, .2)
-    border-radius: 3rem
-    content: ''
-    display: block
-    height: 6rem
-    left: 0
-    position: absolute
-    top: 0
-    transition: .2s ease
-    width: 6rem
 
   span
     color: $env-primary
-    font-weight: 900
-    position: relative
 
   svg
-    fill: none
-    margin-left: 10px
-    position: relative
     stroke: $env-primary
-    stroke-linecap: round
-    stroke-linejoin: round
-    stroke-width: 2
-    top: 0
-    transform: translateX(-10px)
-    transition: .2s ease
 
   &:hover
     &::before
       background-color: rgba($env-secondary, 1)
-      width: 100%
-
-    svg
-      stroke: $white
-      transform: translateX(0)
-
-    span
-      color: $white

data/_sass/env/landing.sass

@@ -45,7 +45,7 @@ $landing-height: 100vh
   position: absolute
 
 .hero__filter
-  @include image-filter
+  @include image-filter--mix
 
 .env--pwp
   background-color: $opd-orange-confidence

data/_sass/env/pwp.sass

@@ -6,14 +6,19 @@
  *
  */
 
-.hero
-  height: 90vh
-  height: calc(var(--vh, 1vh) * 90)
+.image__filter--blur
+  @include image-filter--blur
 
 .hero__overlay
   background-color: $env-primary
 
-.hero__strap
+.bg--env-100
+  background-color: $env-primary
+
+.bg--env-50
+  background-color: rgba($env-primary, .5)
+
+.hero__strap--env
   color: $env-secondary
 
 .hero__strap--start

data/_sass/footer_full.sass

@@ -1,105 +1,83 @@
 .ft__wrapper
-  background-color: $opd-blue-confidence
-  background-image: url('/assets/img/content/footer-bg.svg')
-  background-position: center
-  background-size: cover
+  @include footer-bg($opd-blue-confidence)
+  border-top: solid 1px $white
   color: $white
   display: flex
   flex-wrap: wrap
-  //margin-top: 10vh
   padding: 5vh 5vw
 
 .ft__head
   display: flex
-  //height: 10vh
-  //min-height: 10vh
-  //min-width: 100%
-  width: 100%
   margin: 5vh 5vw
+  width: 100%
 
 .ft__body
   display: flex
+  flex-direction: column-reverse
   flex-wrap: wrap
   margin: 5vh 0
   width: 90vw
 
-.ft__col-3
-  width: 30vw
-  padding: 0 5vw
+.ft__col
   border-left: solid 1px rgba($opd-blue-trust, .05)
   box-sizing: border-box
-
-.ft__col-3.ft__sitemap
-  width: 60vw
+  padding: 0 5vw
+  width: 90vw
 
 .ft__contact--list
-
   display: block
+  font-size: $font-size * .8
   list-style: none
   padding: 0
   text-decoration: none
-  font-size: $font-size * .7
   li
-    line-height: 4rem
+    line-height: 5rem
   .address
-    line-height: 2rem
+    line-height: 2.5rem
 
 .ft__contact
-
   .site__logo
-    width: 10vw
     @include logo-color($opd-blue-trust)
+    width: 40vw
 
 .ft__sitemap
-  //min-width: 100%
   .ft__sitemap--env-header
-    font-size: $font-size * .8
+    font-size: $font-size * 1
     font-weight: 600
   .ft__sitemap--submenu
-    font-size: $font-size * .6
+    font-size: $font-size * .8
 
 .ft__base
-  min-width: 100%
-  width: 100%
+  align-items: center
+  border-top: solid 1px $opd-blue-trust
   display: flex
   flex-wrap: nowrap
   justify-content: space-between
-  //align-items: center
-  border-top: solid 1px $opd-blue-trust
-
-  a, p
-    padding: 1rem .1rem
+  min-width: 100%
+  width: 100%
+  a,
+  p
+    color: inherit
+    font-size: $font-size * .7
     margin: 0
-    font-size: $font-size *.6
+    padding: .5rem .1rem
     text-decoration: none
-    color: inherit
 
 .legal-links
   display: flex
-  flex-direction: row
+  flex-direction: column
   justify-content: space-between
-  a
-    &::after
-      content: " |"
-
-    &:last-child
-      &::after
-        content: ""
-
 
 .ft__sitemap--header
-  font-size: 1.8rem
-  font-weight: 600
   border-bottom: 1px solid $opd-blue-trust
-  margin-bottom: 3rem
   color: $pure-white
+  font-size: 2rem
+  font-weight: 600
+  margin-bottom: 3rem
   width: 100%
 
-.ft__sitemap--menu
-  //display: flex
-  //flex-direction: row
-
-.ft__sitemap--menu, .ft__sitemap--submenu
+.ft__sitemap--menu,
+.ft__sitemap--submenu
   padding: 0
   width: 100%
 
@@ -107,20 +85,90 @@
   padding-bottom: 2rem
   li
     display: block
-    list-style: none
     line-height: 3rem
-    //padding: .8rem 1.2rem
-    text-decoration: none
+    list-style: none
 
 .ft__sitemap--submenu li a
   color: $pure-white
-  text-decoration: none
 
 .ft__sitemap--env-wrap
   display: flex
+  flex-direction: column
   flex-wrap: wrap
-  flex-direction: row
 
 .ft__sitemap--env
+  width: 100%
+
+
+@media screen and ( min-width: 768px )
+
+  .ft__wrapper
+    border: none
+
+  .ft__body
+    flex-direction: row
+
+  .ft__col
+    width: 30vw
+
+  .ft__col.ft__sitemap
+    width: 60vw
+
+  .ft__contact--list
+    font-size: $font-size * .7
+    li
+      line-height: 4rem
+    .address
+      line-height: 2rem
+
+  .ft__contact
+    .site__logo
+      width: 10vw
+
+  .ft__sitemap
+    .ft__sitemap--env-header
+      font-size: $font-size * .8
+    .ft__sitemap--submenu
+      font-size: $font-size * .7
+
+  .ft__base
+    a,
+    p
+      font-size: $font-size * .6
+
+  .legal-links
+    flex-direction: row
+    a
+      &::after
+        content: " |"
+
+      &:last-child
+        &::after
+          content: ""
+
+  .copyright
+    &::after
+      content: ' Limited'
+
+  .ft__sitemap--header
+    font-size: 1.8rem
+
+  .ft__sitemap--submenu li a
+    text-decoration: none
+
+  .ft__sitemap--submenu
+    li
+      transition: .2s ease-in-out
+
+    &:hover > li
+      opacity: .5
+
+    li
+      &:hover
+        opacity: 1
+
+  .ft__sitemap--env-wrap
+    flex-direction: row
 
-  width: 50%
+  .ft__sitemap--env
+    width: 50%

data/_sass/global.sass

@@ -1,3 +1,11 @@
+/*  Last full read through 30/12/2020
+ *
+ *##############################################
+ *# Global                    /_sass/global.sass
+ *##############################################
+ *
+ */
+
 // Global CSS that doesnt fall into any of the categories set out by the _sass dir structure
 
 // Stop any CSS animations on load. We remove this class from the body tag after load, using assets/js/animate_after_load.js
@@ -10,15 +18,15 @@
 .fullwidth__wrap
   width: 100vw
 
+.h-100
+  height: 100%
+
 .d-none
   display: none
 
 .d-block
   display: block
 
-.bg--dark
-  background-color: $opd-grey-neutral
-
 .bg--light
   background-color: $white
 
@@ -31,24 +39,56 @@
   display: flex
   justify-content: center
 
+.hero-65
+  height: 65vh
+  height: calc(var(--vh, 1vh) * 65)
+
+.hero-90
+  height: 90vh
+  height: calc(var(--vh, 1vh) * 90)
+
 .hero__overlay
   width: 100%
   height: 100%
   z-index: -1
 
 .hero__image
-  height: 100%
   object-fit: cover
   object-position: center
   width: 100%
 
-.hero__filter
-  @include image-filter
+.image__filter--mix
+  @include image-filter--mix
 
 .hero__strap
-  padding-top: $navbar-height
+  align-items: center
+  color: $white
+  display: flex
+  justify-content: center
+  margin: 0
   position: absolute
   text-align: center
+  width: 100vw
+
+  & > *
+    padding-top: 12px
+
+
+.hero__strap--center
+  padding-top: $navbar-height
+
+  span
+    animation-duration: .1s
+    animation-fill-mode: forwards
+    animation-iteration-count: 1
+    animation-name: fadeInOpacity
+    opacity: 0
+
+.hero__strap--baseline
+  align-self: flex-end
+  flex-direction: column
+  padding-bottom: 5.5vh
+  padding-top: 2rem
 
 .hero__follow
   align-items: center
@@ -189,13 +229,20 @@ $svg-text-offset: 60px
   100%
     opacity: 0
     r: 2
-    
+
 
 // Social icons wraped in <a's
 .social
   color: $grey
   text-decoration: none
 
+.yaml--link
+  color: inherit
+  text-decoration: none
+  &:hover
+    color: $opd-blue-trust
+
+
 @media screen and ( min-width: 768px )
 
   .narrow__wrap
@@ -219,3 +266,51 @@ $svg-text-offset: 60px
   .social--Email
     &:hover
       color: $opd-blue-trust
+
+
+// This is basically a button and should to be centralised
+.action__call
+  bottom: 0
+  font-size: $font-size * .8
+  margin: -100px auto
+  padding: 2rem
+  position: relative
+  text-decoration: none
+  transition: .2s ease
+
+  &:before
+    border-radius: 3rem
+    content: ''
+    display: block
+    height: 6rem
+    left: 0
+    position: absolute
+    top: 0
+    transition: .2s ease
+    width: 6rem
+
+  span
+    font-weight: 900
+    position: relative
+
+  svg
+    fill: none
+    margin-left: 10px
+    position: relative
+    stroke-linecap: round
+    stroke-linejoin: round
+    stroke-width: 2
+    top: 0
+    transform: translateX(-10px)
+    transition: .2s ease
+
+  &:hover
+    &::before
+      width: 100%
+
+    svg
+      stroke: $white
+      transform: translateX(0)
+
+    span
+      color: $white

data/assets/css/env/gaitq_clinician.sass

@@ -23,12 +23,12 @@ $baseurl: '{{ site.baseurl }}/'
 
 @import 'env/clinician'
 
-@import 'about'
-
-@import 'breakpoints/about'
-
 @import 'env/breakpoints/768'
 
 @import 'colors/breakpoints/768'
 
-@import "forms/mc-forms"
+@import 'about'
+
+@import 'breakpoints/about'
+
+@import 'forms/mc-forms'

data/assets/css/env/gaitq_pwp.sass

@@ -23,12 +23,12 @@ $baseurl: '{{ site.baseurl }}/'
 
 @import 'env/pwp'
 
-@import 'about'
-
-@import 'breakpoints/about'
-
 @import 'env/breakpoints/768'
 
 @import 'colors/breakpoints/768'
 
+@import 'about'
+
+@import 'breakpoints/about'
+
 @import 'forms/mc-forms'

data/assets/css/gaitq_about.sass

@@ -0,0 +1,22 @@
+---
+---
+
+$baseurl: '{{ site.baseurl }}/'
+
+@import '_variables'
+
+@import '_mixins'
+
+@import 'colors/_variables'
+
+@import 'navigation/_variables'
+
+@import 'colors/env/_pwp'
+
+@import 'typography/_variables'
+
+@import 'env/pwp'
+
+@import 'about'
+
+@import 'breakpoints/about'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-29 00:00:00.000000000 Z
+date: 2021-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -212,6 +212,7 @@ files:
 - _layouts/feed.html
 - _layouts/post.html
 - _layouts/register.html
+- _sass/_functions.sass
 - _sass/_mixins.sass
 - _sass/_variables.sass
 - _sass/about.sass
@@ -222,6 +223,7 @@ files:
 - _sass/colors/burger.sass
 - _sass/colors/env/_clinician.sass
 - _sass/colors/env/_pwp.sass
+- _sass/colors/global.sass
 - _sass/colors/navigation.sass
 - _sass/env/breakpoints/768.sass
 - _sass/env/clinician.sass
@@ -247,6 +249,7 @@ files:
 - assets/css/env/gaitq_clinician.sass
 - assets/css/env/gaitq_landing.sass
 - assets/css/env/gaitq_pwp.sass
+- assets/css/gaitq_about.sass
 - assets/css/gaitq_errors.sass
 - assets/css/gaitq_feed.sass
 - assets/css/gaitq_global.sass