slow-steps 0.1.8 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 332f670401ff9b865530c6eb7c0feba92d41d5ff6ddaae6261becd8993c6a413
-  data.tar.gz: b26f9e29f7509b7b5b5a8552c8374417bc27047b4a88a5611b3f076c24b21a74
+  metadata.gz: 6cbd613cb2698f8b14ddec71ea31af9f93863331204dec4e6ee3e188736bad82
+  data.tar.gz: 95587738b544403e67b69c33e22edcad508f4c91ea115dede5e4cc4bae6fd634
 SHA512:
-  metadata.gz: dcd734f318740df554def7c646ae56c0bc5ff6b27dcb138cd4d486fe9b0a2973221f3f147cc2acb14a9dfd0d94d0a753770929ed4936bdebf48fb95e4c335ecf
-  data.tar.gz: b841ebdd6f68eb65e8dfbcaa060855287ab7bcdd92b5dcdb6af689aaf5e92381926ebbad2ad04806d0b162257383260f1fab3f9a1e4a935bdab4f70e4b3919e4
+  metadata.gz: 96ec670bbc9d10e86879c34a9d662c5b5860bbef00bbf41467492ccaa1be6a59a99a94acab6ea5e3e03ed2925a75fbb4dfd8f76c4c88399539434f8213ba5a25
+  data.tar.gz: d9f8f6106c4d4192087e320bbe4536507f157fa90b3e4a77a2754f8f69f96719cf7de8dd149898dd4f33f57844526f9453928c9c403c01ddfd04df436e423fe0

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/gmap.html

@@ -1,5 +1,5 @@
 <div class="google-map">
-<h4 class="form-instruction">Where to find us</h4>
+  <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>
+  <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/google-analytics.html

@@ -0,0 +1,15 @@
+<!-- This goes before </head> closing tag -->
+
+<!-- Google site verification -->
+<meta name="google-site-verification" content="{{ site.google.verification }}" />
+
+<!-- Google Analytics -->
+
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google.analytics }}"></script>
+
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{ site.google.analytics }}');
+</script>

data/_includes/head/head.html

@@ -70,7 +70,9 @@
 
   <link rel="shortcut icon" type="image/x-icon" href="{{ site.baseurl }}{{ site.fallback_path }}{{ site.favicon }}">
 
-
+  {% if jekyll.environment == "production" %}
+  {% include google-analytics.html %}
+  {% endif %}
 
 </head>
 

data/_includes/navigation/global.html

@@ -33,6 +33,7 @@
 
         <div class="nav-group-content {{ item.env }}-group">
           {% for sub in item.submenu %}
+          <div class="nav-group-container">
           <a
             class="
               nav-link
@@ -42,9 +43,20 @@
               {% 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 %}
-        </div>
 
+        </div>
       </li>
       {% endfor %}
 

data/_includes/scripts.html

@@ -1,6 +1,7 @@
 
 {% assign scripts = page.scripts | split: ', '%}
 {% if scripts contains 'svg-aos' %}
+
   <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>
@@ -18,6 +19,10 @@
 
 <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>
 
 <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

@@ -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 }}"
@@ -63,7 +72,7 @@ Last full read through 29/12/2020
     {% endfor %}
   </div>
 
-  <div class="team__members">
+  <div class="team__members" id="gaitq-team">
 
     {% for member in site.data.team.members %}
 

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/default.html

@@ -8,10 +8,6 @@ layout: compress
 
 {{ content }}
 
-{% if page.layout != "error-page" %}
-
-  {% include footer/footer_full.html %}
-
-{% endif %}
+{% include footer/footer_full.html %}
 
 {% include scripts.html %}

data/_layouts/faq.html

@@ -0,0 +1,72 @@
+---
+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="faq__wrapper">
+{% for faq in site.data.faq %}
+<div class="faq__panel">
+  <div class="faq__question">
+    <h4 class="faq__question--title">{{ faq.question }}</h4><i class="fas fa-chevron-down"></i>
+  </div>
+
+  <div class="faq__answer faq__answer--reveal">
+    <p>{{ faq.answer }}</p>
+  </div>
+</div>
+{% endfor %}
+</div>
+
+
+<script>
+  /*
+  On load we hide all the answers.
+  */
+
+  const title = document.querySelectorAll(".faq__answer--reveal");
+  for(var i = 0; i < title.length; i++)
+    title[i].classList.remove('faq__answer--reveal');
+
+</script>
+
+<script>
+/* 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>

data/_sass/_mixins.sass

@@ -38,6 +38,9 @@
 @mixin build-in($name)
   animation: .8s $bezier-snap 0s 1 $name
 
+@mixin default-trans
+  transition: all .4s ease-in-out
+
 // Keyframes
 @mixin slide-from-left
   @keyframes slide-from-left

data/_sass/about.sass

@@ -33,10 +33,43 @@
 .about--copy
   padding: 3rem 0
 
+.about--video
+  width: 100vw
+  background-color: $opd-grey-neutral
+  display: flex
+  flex-direction: column
+  padding: 5rem 0
+  padding: 0
+  justify-content: space-between
+  & > h2
+    color: $env-primary
+    text-align: center
+    padding: 1rem
+.video__container
+  display: block
+  position: relative
+  width: 100%
+  padding-top: 56.25%
+  iframe
+    position: absolute
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
+    width: 100%
+    height: 100%
+
+
 .about__team
   display: flex
   flex-direction: column
   background-color: $pure-white
+  border-top: solid 1px $opd-blue-confidence
+
+.about__team--title
+  padding-top: 3rem
+  text-align: center
+  color: $pure-white
 
 .team__head
   align-items: flex-end
@@ -68,6 +101,14 @@
 .title__title--text
   display: none
 
+.team__title--active
+  .title__title--text
+    display: block
+    position: absolute
+    margin-top: 4rem
+    left: 2rem
+
+
 .team__members
   background-color: $white
   color: $opd-blue-confidence

data/_sass/breakpoints/about.sass

@@ -7,6 +7,22 @@
   .about__team
     flex-direction: row
 
+  .about__team--title
+    display: none
+
+  .about--video
+    flex-direction: row
+    padding: 12rem 0
+    padding: 0
+
+    & > h2
+      padding-left: 5rem
+      text-align: left
+
+  .video__container
+    padding-top: 56.25%
+    //margin-right: 5rem
+
   .team__head
     border-bottom: none
     border-right: solid 1px $opd-blue-confidence
@@ -19,6 +35,14 @@
   .title__title--text
     display: block
 
+  .team__title--active
+    .title__title--text
+      display: block
+      position: relative
+      margin-top: 0
+      left: auto
+
+
   .team__title
     display: flex
     border-radius: 6px 0 0 6px

data/_sass/collage.sass

@@ -0,0 +1,129 @@
+.spacefiller
+  width: 100vw
+  height: $navbar-height + $secondary-navbar-height + 5vh
+
+.collage
+  display: flex
+  flex-flow: wrap
+  background-color: $env-primary
+  justify-content: flex-start
+  align-items: flex-start
+  position: relative
+  border: solid 10px $pure-white
+
+  & > *
+    border: solid 10px $pure-white
+
+.image__header
+  text-align: center
+  color: $pure-white
+  padding: 0 2rem
+
+.collage__image__wrap
+  display: flex
+  justify-content: center
+  align-items: center
+  width: 19%
+  height: 49%
+  position: absolute
+  opacity: 0
+  animation: .4s ease-in-out aniCollage forwards
+  perspective: 1000px
+  &:after
+    position: absolute
+    content: ''
+    width: 100%
+    height: 100%
+    box-shadow: inset 0 0 40px 12px rgba($env-primary, .2)
+    z-index: 99
+  &:hover
+    .collage__image
+      transform: rotateX(90deg)
+      opacity: 0
+
+.collage__image
+  display: block
+  position: absolute
+  object-fit: cover
+  object-position: center
+  width: 100%
+  height: 100%
+  transition: .4s ease-in-out
+  transform-style: preserve-3d
+
+.collage__image__wrap-1
+  height: 65%
+  top: 0
+  width: 30%
+  left: 0
+  animation-delay: 700ms
+
+.collage__image__wrap-2
+  height: 50%
+  width: 40%
+  left: 30%
+  animation-delay: 100ms
+
+.collage__image__wrap-3
+  height: 50%
+  width: 30%
+  left: 70%
+  top: 0
+  animation-delay: 500ms
+
+.collage__image__wrap-4
+  height: 35%
+  width: 40%
+  left: 0
+  top: 65%
+  animation-delay: 300ms
+
+.collage__image__wrap-5
+  width: 60%
+  height: 50%
+  left: 40%
+  top: 50%
+  animation-delay: 900ms
+
+@keyframes aniCollage
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+
+p.job__deadline
+  padding: 1rem 0
+  font-size: $font-size * .8
+
+p.job__description
+  padding: 2rem 0
+  //padding-bottom: 3rem
+
+p.job__links
+  padding: 0
+  padding-bottom: 2rem
+  margin-bottom: 4rem
+  & > a
+    text-decoration: none
+    color: $env-primary
+    &:hover
+      color: $pure-black
+  & > a:first-child
+    text-decoration: none
+    color: $pure-white
+    background-color: $env-primary
+    padding: 1rem 2.5rem
+    border-radius: 8px
+    font-weight: 600
+    margin-right: 3rem
+    @include default-trans
+    &:hover
+      background-color: lighten($env-primary, 10)
+      box-shadow: 1px 1px 5px $light-grey
+
+.fullwidth__wrap > .job__links
+  border-bottom: solid 1px rgba($env-primary, .4)
+  &:last-child
+    border-bottom: none
+    margin-bottom: 10rem

data/_sass/contact.sass

@@ -3,7 +3,7 @@
 .contact__wrapper
   display: flex
   width: 100%
-  background-color: $white
+  background-color: $pure-white
   padding: 5rem 0
   flex-direction: column
 
@@ -24,6 +24,7 @@
   display: block
 
   form
+    background-color: $white
     border: solid 1px rgba($env-primary, .2)
     border-radius: 4px
     padding: 2rem
@@ -32,12 +33,12 @@
     color: $black
 
 .google-map
-  //grid-area: googleMap
   width: 100%
 
   //padding: 0 5rem
   //filter: sepia(.3)
   iframe
+    border-radius: 4px
     width: 100%
     height: 40vh
     border: solid 1px rgba($env-primary, .2)
@@ -109,7 +110,6 @@
     display: flex
     flex-direction: row
     width: 100%
-    background-color: $white
     padding: 5rem 0
 
   .contact--left

data/_sass/faq.sass

@@ -0,0 +1,62 @@
+.faq__wrapper
+  display: flex
+  flex-direction: column
+  background-color: $pure-white
+  padding: 10vh 0
+
+.faq__panel
+  border: solid 1px rgba($env-primary, .4)
+  margin: 2rem auto
+  border-radius: 4px
+  width: 60%
+
+.faq__question
+  display: flex
+  justify-content: space-between
+  width: 100%
+  padding: 1rem 0
+  background-color: rgba($opd-blue-trust, .2)
+  border-radius: 4px
+  cursor: pointer
+  transition: .2s ease-in-out
+
+  &:hover
+    background-color: rgba($opd-blue-trust, 1)
+
+  & > .faq__question--title
+    padding-left: 1rem
+
+  & > .fas
+    padding-right: 1rem
+    transition: .4s ease-in-out
+
+.faq__answer
+  max-height: 0
+  overflow: hidden
+  transition: .4s ease-in-out
+
+  & > *
+    padding: 1rem
+
+.faq__answer--reveal
+  max-height: 1000px
+  transition: .6s ease-in-out
+
+.faq__question--reveal
+  & > .fas
+    transform: rotateX(180deg) translateY(.5rem)
+
+.faq__contact
+  width: 100vw
+  background-color: lighten($env-primary, 0%)
+  padding: 4rem 0
+
+  .contact-form
+    width: 95%
+    margin: auto
+    max-width: 600px
+
+.faq__contact--strap
+  text-align: center
+  padding: 4rem 0
+  color: $white

data/_sass/footer_full.sass

@@ -88,7 +88,7 @@
     line-height: 3rem
     list-style: none
 
-.ft__sitemap--submenu li a
+.ft--link
   color: $pure-white
 
 .ft__sitemap--env-wrap
@@ -114,7 +114,7 @@
     width: 60vw
 
   .ft__contact--list
-    font-size: $font-size * .7
+    font-size: $font-size * .8
     li
       line-height: 4rem
     .address
@@ -126,14 +126,14 @@
 
   .ft__sitemap
     .ft__sitemap--env-header
-      font-size: $font-size * .8
+      font-size: $font-size * .9
     .ft__sitemap--submenu
-      font-size: $font-size * .7
+      font-size: $font-size * .8
 
   .ft__base
     a,
     p
-      font-size: $font-size * .6
+      font-size: $font-size * .7
 
   .legal-links
     flex-direction: row

data/_sass/global.sass

@@ -15,6 +15,9 @@
   -ms-transition: none !important
   -o-transition: none !important
 
+*
+  box-sizing: border-box
+
 body
   background-color: $white
 

data/_sass/navigation/breakpoints/1024.sass

@@ -10,17 +10,29 @@ $brand-height: 55%
 @media screen and ( min-width: 1024px )
 
   .navbar
+    @include default-trans
     height: $navbar-height
     align-items: center
 
+  .nav-scrolled
+    @include default-trans
+    top: -$navbar-height
+    .nav-group-content
+      @include default-trans
+      height: 10vh
+    .nav-brand
+      @include default-trans
+      height: 8vh
+      top: 6vh
+
   .nav-brand
+    @include default-trans
     display: flex
     position: absolute
     max-width: 160px
     height: 10vh
     z-index: 999
     top: 7.5vh
-    //align-items: center
 
     .site__logo
       position: absolute
@@ -49,6 +61,7 @@ $brand-height: 55%
     opacity: 1
     margin: 0
     overflow: hidden
+    position: relative
 
   // Surround current link with lines
 
@@ -70,6 +83,7 @@ $brand-height: 55%
       margin-right: -10%
 
   .nav-group-content
+    @include default-trans
     align-items: center
     justify-content: flex-end
     position: absolute
@@ -78,6 +92,7 @@ $brand-height: 55%
     width: 100vw
     padding: 0
     height: $secondary-navbar-height
+    //max-height: 100px
     backdrop-filter: blur(20px)
 
   .nav-group-content .nav-link
@@ -85,3 +100,44 @@ $brand-height: 55%
 
   .burger
     display: none
+
+  .nav-subsub-content
+    background-color: $pure-white
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
+    visibility: hidden
+    opacity: 0
+    border-radius: 6px
+    z-index: 1
+    position: absolute
+    padding: 1rem 0
+    margin-left: 3rem
+    transform: translateY(10px)
+    .subsub-link
+      &:hover
+        background: $white
+
+    &:before
+      background: inherit
+      content: ""
+      display: block
+      height: 16px
+      width: 16px
+      left: 5px
+      position: absolute
+      bottom: 100%
+      border-radius: 2px
+      transform: rotate(-45deg) translateY(14px)
+      z-index: -1
+
+  .nav-group-container:hover > .nav-subsub-content
+    visibility: visible
+    opacity: 1
+    transform: translateY(0px)
+    transition: opacity .1s ease-in, transform .2s ease-in
+
+  .nav-subsub-content .sub-link
+    transition: background-color .1s ease-in
+
+  .nav-subsub-content .sub-link:hover
+    background-color: $white
+    transition: background-color .1s ease-in

data/_sass/navigation/env/clinician.sass

@@ -25,12 +25,14 @@
     left: 0
     flex-direction: row
 
-  .nav-group-content
+  .nav-group-container
+
 
     .nav-link
       font-weight: 400
       color: $env-primary
       text-transform: uppercase
-      padding: 0 3rem
-      &:hover
-        text-decoration: underline
+      padding: 1rem 3rem
+      &:not(.current--url)
+        &:hover
+          text-decoration: underline

data/_sass/navigation/env/pwp.sass

@@ -21,13 +21,14 @@
     left: 0
     flex-direction: row
 
-  .nav-group-content
+  .nav-group-container
 
 
     .nav-link
       font-weight: 400
+      color: $env-primary
       text-transform: uppercase
-      padding: 0 3rem
+      padding: 1rem 3rem
       &:not(.current--url)
         &:hover
           text-decoration: underline

data/_sass/navigation/global.sass

@@ -18,13 +18,16 @@
   width: 100%
   z-index: 99
 
+  .social-media
+    padding-left: 4rem
   .social-media-link
     color: $white
-    transform: translateX(20px)
     font-size: $font-size * .8
+    transform: translateY(0)
     &:hover
       text-shadow: 3px 3px 6px rgba($black, .2)
-      font-size: $font-size * 1.2
+      //font-size: $font-size * 1
+      transform: translateY(-2px)
 
 
 .nav-brand
@@ -51,6 +54,7 @@
   transform: translateX(100%)
   transition: $nav-slider-transition
   width: 100vw
+  box-sizing: content-box
 
 .nav-link
   margin: 6vh 15vw

data/assets/css/env/gaitq_clinician.sass

@@ -34,3 +34,7 @@ $baseurl: '{{ site.baseurl }}/'
 @import 'forms/mc-forms'
 
 @import 'contact'
+
+@import 'faq'
+
+@import 'collage'

data/assets/css/env/gaitq_pwp.sass

@@ -34,3 +34,5 @@ $baseurl: '{{ site.baseurl }}/'
 @import 'forms/mc-forms'
 
 @import 'contact'
+
+@import 'faq'

data/assets/js/nav-scroll.js

@@ -0,0 +1,16 @@
+navbar = document.querySelector('nav');
+
+function navBarScroll() {
+  var currentScrollPos = window.pageYOffset;
+  if (window.pageYOffset != 0) {
+    navbar.classList.add('nav-scrolled');
+  } else {
+    navbar.classList.remove('nav-scrolled');
+  }
+};
+
+/* load nav color if reloading and pageYOffset != 0 */
+/* moved to scripts to avoid conflicts with other onloads */
+/*window.onload = function() { navBarScroll() };*/
+
+window.onscroll = function() { navBarScroll() };

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.1.13
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-01-15 00:00:00.000000000 Z
+date: 2021-01-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -177,10 +177,11 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- LICENSE
 - README.md
 - _config.yml
-- _includes/.DS_Store
 - _includes/branding/site-logo.svg
+- _includes/build-version.html
 - _includes/contact-details.html
 - _includes/contact-form.html
 - _includes/env_filter.html
@@ -193,7 +194,7 @@ files:
 - _includes/functions/calc-svg-coord.html
 - _includes/functions/pull_page_args.html
 - _includes/gmap.html
-- _includes/head/.DS_Store
+- _includes/google-analytics.html
 - _includes/head/README.md
 - _includes/head/descriptors/og-meta.html
 - _includes/head/descriptors/structured-data.html
@@ -206,6 +207,7 @@ files:
 - _includes/scripts.html
 - _includes/vimeoPlayer.html
 - _layouts/about.html
+- _layouts/careers.html
 - _layouts/compress.html
 - _layouts/contact.html
 - _layouts/default.html
@@ -213,6 +215,7 @@ files:
 - _layouts/env/landing.html
 - _layouts/env/pwp.html
 - _layouts/error-page.html
+- _layouts/faq.html
 - _layouts/feed.html
 - _layouts/full-width.html
 - _layouts/post.html
@@ -223,6 +226,7 @@ files:
 - _sass/about.sass
 - _sass/aos-overrides.sass
 - _sass/breakpoints/about.sass
+- _sass/collage.sass
 - _sass/colors/_variables.sass
 - _sass/colors/breakpoints/1024.sass
 - _sass/colors/burger.sass
@@ -236,6 +240,7 @@ files:
 - _sass/env/landing.sass
 - _sass/env/pwp.sass
 - _sass/error-page.sass
+- _sass/faq.sass
 - _sass/feed.sass
 - _sass/footer.sass
 - _sass/footer_full.sass
@@ -290,6 +295,7 @@ files:
 - assets/js/animate_after_load.js
 - assets/js/calc-mobile-viewport.js
 - assets/js/mobile-nav-slider.js
+- assets/js/nav-scroll.js
 - assets/js/svg_aos.js
 - assets/js/svg_text_width.js
 - assets/vendor/aos/aos.css