slow-steps 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd34733d1843e4e27502c6013bdfcc2f1a8550681d93567f6d107276f2a5b1d8
-  data.tar.gz: d7fbf1db79bdbcf602526b92160a7286f3a56f4a64164f0dce65b7437382cd22
+  metadata.gz: f99778250d8255d09c4feb5232eca79d4a8e9aaf2c7819a6cec2d050a09fc61c
+  data.tar.gz: e722072946f3eee1b5a47a14ebc2d6570a020cbcd1cb8b36a3c51f63b2881cd5
 SHA512:
-  metadata.gz: 731535f31508600501b23c473a9e2edfab5e536e5afbeb66edc4884d1737d001e4bffff0731e6ae9342392ff5325b3e27e9bb5d7f4653d08bf30fc4b296613c4
-  data.tar.gz: 4e10a526240dfd3afc7bb8ee3ec067c01f41735cf0963581b37a6c8d00b718968077e3d4712e3f9511486f362cb36a7bc7ddb1fa2dddcc6efd323f33762432d4
+  metadata.gz: 87d1517e7f8e857e70260acdc241b5ff6de4f8bb79dab6f50b73a366e677a90bcfc80ea6d59c16cca351c3da9c15a911862fbfd1c56ad2acca1a125886bab78a
+  data.tar.gz: eb9d967005c27d31fa48dc25a8b6f93aac4b24b3f6264aa73a8392dc8373bb673429b78994354ad93b5bd3b1a4bfecfef71b86096dcdfe0872949087feac8666

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

@@ -0,0 +1,40 @@
+<!-- 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[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: ',' %}
+
+  <!-- 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 %}
+
+    <!-- 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 %}
+
+{% endif %}
+
+<!--
+in:   [imageX, imageY] pixels
+      [x, y] 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/functions/pull_page_args.html

@@ -0,0 +1,31 @@
+
+<script type="text/javascript">
+
+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 */
+  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 }} ;
+
+  for (let i = 0; i < svg.length; i++) {
+  /* origanal x position in pixels */
+  var dx_0 = parseInt( svg[i].getAttribute('x'), 10 ) / 100 ;
+  var dy_0 = parseInt( svg[i].getAttribute('y'), 10 ) / 100 ;
+
+  var dx_0Pixel = dx_0 * x_0 ;
+  var dy_0Pixel = dy_0 * y_0 ;
+
+  svg[i].setAttribute("x", (dx_0Pixel - ( x_0 / 2) + (x_i / 2) ) / x_i * 100 + '%');
+  svg[i].setAttribute("y", (dy_0Pixel - ( y_0 / 2) + (y_i / 2) ) / y_i * 100 + '%');
+ };
+
+}
+
+//window.setInterval(svg_aug_contained_image, 200 )
+
+</script>

data/_includes/scripts.html

@@ -1,4 +1,16 @@
 
+{% 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>
+
+  <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/svg_aos.js" | relative_url }}" async></script>
+
+  {% include functions/pull_page_args.html %}
+
+{% endif %}
+
 
 <script type="text/javascript" src="{{ "{{ site.baseurl }}/assets/js/animate_after_load.js" | relative_url }}" async></script>
 

data/_includes/vimeoPlayer.html

@@ -0,0 +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>

data/_layouts/env/pwp.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+
 ---
 {% if site.data.copy.landing.pwp.description %}
 {% assign description = site.data.copy.landing.pwp.description %}
@@ -7,16 +8,16 @@ layout: default
 {% assign description = site.description %}
 {% endif %}
 
-<div class="pwp__mast">
+<div class="hero-image hero__pwp">
 
-  <div class="pwp__overlay">
-    <div class="pwp__bg">
-    </div>
-  </div>
+  <div class="hero__overlay hero__overlay--pwp">
+    {% picture {{ page.hero.image | prepend: 'content/' }}
+      --img class="hero__image hero__image--pwp"
+      --alt {{ page.hero.alt }} %}</div>
 
-  <div class="pwp--strap">
+  <div class="hero__strap">
     <h1>
-      <span class="pwp--strap-start">
+      <span class="hero__strap--start">
         {% assign header = site.data.copy.landing.pwp %}
         {% assign title = header.title | split: " " %}
         {% assign n = header.split %}
@@ -35,25 +36,44 @@ layout: default
 
 </div>
 
-<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--docked">
+<div class="augmented-image">
+
+  {% picture {{ page.subhero.image | prepend: 'content/' }}
+    --img class="hero__image"
+    --alt {{ page.subhero.alt }} %}
+
+    <svg class="svg__augment" viewBox="-50 -50 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="augmentLED" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+        <stop offset="0%" />
+        <stop offset="100%" />
+        </radialGradient>
+      </defs>
+
+      <circle class="svg__augment--pulse" cx="32%" cy="2%" />
+      <circle class="svg__augment--led" cx="32%" cy="2%" r=".8" />
 
-<div class="pulsating-circle"></div></div>
+    </svg>
+
+</div>
 
-<div class="pwp__straps pwp__device--strap">
+<div class="strapline pwp--strap">
   <h2>{{ site.data.copy.landing.pwp.subtitle }}</h2>
   <p data-aos="fade-in">{{ site.data.copy.landing.pwp.strap }}</p>
 </div>
 
-<div class="pwp__grid-wrap">
 
-  <div class="pwp__grid-col-l">
-  <div class="pwp__grid__text pwp__straps">
+
+<div class="segment-wrap">
+
+  <div class="segment__left">
+  <div class="segment__gaurentee strapline pwp--strap">
     <div data-aos="fade-right">
       {% include branding/site-logo.svg %}</div>
     <p data-aos="fade-in" class="pwp--guarantee">
       {{ description }}</p></div>
 
-  <div class="pwp__straps pwp__grid_keywords">
+  <div class="strapline segment__keywords">
     {% assign keyword = site.data.copy.landing.pwp.keywords | split: ", " %}
     {% for word in (1..keyword.size) %}
     <h3 data-aos="fade-in">{{ keyword[forloop.index0] }}</h3>
@@ -61,23 +81,62 @@ layout: default
 
   </div>
 
-  <div class="pwp__grid-col-r">
-    <div class="pwp__straps pwp__grid_img"></div>
+  <div class="segment__right augmented-image" >
+
+    {% picture {{ page.guarantee.image | prepend: 'content/' }}
+      --img class="hero__image image--guarantee "
+      --alt {{ page.guarantee.alt }} %}
+
+      <svg class="svg__augment " width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+
+        {% include functions/calc-svg-coord.html image_handle="guarantee" %}
+
+        {% for item in page.guarantee.augment.labels %}
+
+        <svg class="svg__labels augment--guarantee 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>
+
 
-    <svg  viewBox="-50 -50 100 100" width="40vw" height="100vh" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="-28%" cy="20%" r="1" fill="white"/>
-    </svg>
   </div>
 
 </div>
 
-<div data-aos="fade-in" data-aos-anchor-placement="top-bottom" class="pwp__device--img pwp__device--group">
+<div class="augmented-image" >
+
+  {% picture {{ page.device.image | prepend: 'content/' }}
+    --img class="hero__image"
+    --alt {{ page.device.alt }} %}
+
+      {% include functions/calc-svg-coord.html image_handle="device" %}
+
+    <svg class="svg__augment" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+
+      {% for item in page.device.augment.labels %}
+
+      <svg class="svg__labels hidden" x="{{ cX[forloop.index0] | remove: ", " }}%" y="{{ cY[forloop.index0] | remove: ", " }}%" style="overflow: visible">
 
-<svg  width="100vw" height="100%" xmlns="http://www.w3.org/2000/svg">
-<circle cx="20%" cy="30%" r="6" fill="white"/>
-<line x1="10%" y1="30%" x2="20%" y2="30%" style='stroke:white;stroke-width:2' />
-<style>
-    .text { fill: white; }
-  </style>
-<text data-aos="fade-in" data-aos-anchor-placement="top-center" x="2%" y="31%" class="text" >Controller</text>
-</svg></div>
+        <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>
+
+</div>

data/_layouts/feed.html

@@ -20,13 +20,17 @@ layout: default
 
   <div class="feed__card">
 
+    <div class="feed__card__image">
     {% picture {{ post.image | prepend: 'posts/' }} --alt {{ post.alt }} --img class="feed__card--image" %}
-
+    </div>
     <div class="feed__card--text">
 
       <a class="feed__card--link" href="{{ site.baseurl }}{{ post.url }}">
 
-      <p class="feed__card--title">{{ post.title }}</p></a>
+      <h4 class="feed__card--title">{{ post.title }}</h4>
+      <p class="post__subtitle">{{ post.subtitle }}</p>
+      </a>
+      <p class="feed__card--meta">Published <span>{{ post.date | date: "%b %d, %Y" }}</span></p>
 
 
     </div>

data/_sass/_mixins.sass

@@ -0,0 +1,31 @@
+
+
+// Landing page animations
+
+// hover and focus animation action
+
+@mixin reveal-landing-strap
+  height: 30vh
+  padding: 0 3rem
+
+// build in's
+@mixin build-in($name)
+  animation: .8s $bezier-snap 0s 1 $name
+
+@mixin slide-from-left
+  @keyframes slide-from-left
+    0%
+      transform: translateX(-50vw)
+      opacity: 0
+    100%
+      transform: translateX(0)
+      opacity: 1
+
+@mixin slide-from-right
+  @keyframes slide-from-right
+    0%
+      transform: translateX(50vw)
+      opacity: 0
+    100%
+      transform: translateX(0)
+      opacity: 1

data/_sass/_variables.sass

@@ -0,0 +1,3 @@
+// Gllobal variables != color or typography
+
+$bezier-snap: cubic-bezier(.75, .86, .88, .62)

data/_sass/about.sass

@@ -149,7 +149,8 @@
 
 .info__conceal
   align-items: flex-end
-  background-image: linear-gradient(rgba(0,0,0,0), $white, $white)
+  // NOTE: when linear-gradient(rgba(0,0,0,0) ...) we get a shadow on safari
+  background-image: linear-gradient(rgba($pure-white,0), $white, $white)
   color: $black
   cursor: pointer
   display: flex

data/_sass/colors/_variables.sass

@@ -38,6 +38,8 @@ $light-grey: rgb(220, 220, 220)
 
 $grey: rgb(130, 130, 130)
 
+$led: rgb(255, 70, 0)
+
 $box-shadow-shade: rgba(0, 0, 0, .2)
 
 $secondary_navbar_color: rgba(255, 255, 255, .3)

data/_sass/env/breakpoints/768.sass

@@ -1,30 +1,39 @@
 
 @media screen and ( min-width: 768px )
 
-  .pwp__grid-wrap
+  .pwp--strap
+    color: $env-secondary
+    background-color: $opd-blue-trust
+    padding: 10rem 5rem
+    & > h2
+      padding-bottom: 5rem
+    & > p
+      max-width: 800px
+      margin: 0 auto
+
+  .segment-wrap
     display: flex
     flex-wrap: no-wrap
     flex-direction: row
     width: 100vw
     max-height: 100vh
 
-  .pwp__grid-col-l, .pwp__grid-col-r
+  .segment__left, .segment__right
     height: 100vh
     display: flex
     flex-direction: column
 
-  .pwp__grid-col-l
+  .segment__left
     width: 60vw
 
-  .pwp__grid-col-r
+  .segment__right
+    width: 40vw
+
+  .augment--gaurentee
     width: 40vw
-    svg
-      display: none
-      position: absolute
-      //transform: translateY(-100%)
-      //-height: 100vh
+    height: 100vh
 
-  .pwp__grid__text
+  .segment__gaurentee
     display: flex
     align-items: center
     justify-content: space-between
@@ -64,7 +73,7 @@
     //padding-top: 100%
 
 
-  .pwp__grid_keywords
+  .segment__keywords
     width: 100%
     height: 50%
     flex-direction: column
@@ -72,8 +81,13 @@
     justify-content: center
 
     & > *
-      padding: 2rem 0
+      //padding: 2rem 0
 
   .clinician__strap
     h1
       display: block
+
+  .svg__labels
+
+    & > .svg--text
+      font-size: $font-size

data/_sass/env/landing.sass

@@ -1,11 +1,5 @@
 // Landing page with 768 breakpoint
 
-// Structurally we have one div, .landing-wrapper, wrapping 2 others, .landing__clinician and .landing__pwp
-
-@mixin reveal-landing-strap
-  height: 30vh
-  padding: 0 3rem
-
 // Using Custom Properties to scale properly inside mobile viewports
 
 // Fallback for browsers that do not support Custom Properties
@@ -133,7 +127,7 @@ $landing-height: 100vh
     box-shadow: -12px 10px 10px -10px $grey
     right: 50%
     transform: translateX(0)
-    animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-left
+    @include build-in(slide-from-left)
     &:hover
       box-shadow: -20px 20px 20px -10px $grey
 
@@ -142,7 +136,7 @@ $landing-height: 100vh
     box-shadow: 12px 10px 10px -10px $grey
     left: 50%
     transform: translateX(0)
-    animation: .8s cubic-bezier(.75,.86,.88,.62) 0s 1 slide-from-right
+    @include build-in(slide-from-right)
     &:hover
       box-shadow: 20px 20px 20px -10px $grey
 
@@ -163,18 +157,7 @@ $landing-height: 100vh
     .landing__title
       text-align: left
 
-@keyframes slide-from-right
-  0%
-    transform: translateX(50vw)
-    opacity: 0
-  100%
-    transform: translateX(0)
-    opacity: 1
 
-@keyframes slide-from-left
-  0%
-    transform: translateX(-50vw)
-    opacity: 0
-  100%
-    transform: translateX(0)
-    opacity: 1
+@include slide-from-right
+
+@include slide-from-left

data/_sass/env/pwp.sass

@@ -1,35 +1,39 @@
 
 
-.pwp__mast
+.hero-image
   display: flex
   justify-content: center
   align-items: center
+
+.hero__pwp
   height: 90vh
-  height: calc( var(--vh, 1vh) * 90 )
+  height: calc(var(--vh, 1vh) * 90)
 
-.pwp__bg
-  position: relative
-  height: 100%
+.hero__overlay
   width: 100%
-  background-image: url($baseurl + 'assets/img/landing__pwp-mobile.jpg')
-  background-size: cover
-  opacity: .7
-  filter: grayscale(1) contrast(.2) brightness(1.6)
+  height: 100%
+  z-index: -1
 
-.pwp__overlay
-  position: relative
+.hero__overlay--pwp
+  background-color: $opd-orange-confidence
+
+.hero__image
   height: 100%
   width: 100%
-  background-color: $env-primary
+  object-fit: cover
+  object-position: center
 
-.pwp--strap
+.hero__image--pwp
+  opacity: .7
+  filter: grayscale(.2) contrast(.2) brightness(1.6)
+
+.hero__strap
   position: absolute
   color: $env-secondary
   text-align: center
   padding-top: $navbar-height
 
-
-.pwp--strap-start
+.hero__strap--start
   color: $env-primary
 
 .pwp__follow
@@ -49,50 +53,52 @@
     font-size: 20px
     transform: scaleY(2)
 
-.pwp__device--img
-  background-size: cover
-  background-repeat: no-repeat
-  width: 100%
-  height: 0
-  padding-top: 62.5%
-  z-index: 99999
-
-.pwp__device--docked
-  background-image: url($baseurl + 'assets/img/pwp_device_group_docked.png')
-  svg
-    position: absolute
-    transform: translateY(-100%)
-
-.pwp__device--group
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  svg
-    position: absolute
-    transform: translateY(-100%)
-    //-height: 100vh
-
-.pwp__straps
+
+.augmented-image
+  position: relative
+  display: flex
+
+.svg__augment
+  position: absolute
+  top: 0
+  left: 0
+
+.svg__augment--led
+  fill: url(#augmentLED)
+
+#augmentLED
+  stop:first-child
+    stop-color: $pure-white
+    stop-opacity: 1
+
+  stop:last-child
+    stop-color: $led
+    stop-opacity: 1
+
+.svg__augment--pulse
+  fill: $led
+  animation: pulse-ring 2s cubic-bezier(.1,.74,.53,.91) infinite
+
+.strapline
   text-align: center
-  //padding: 5rem 2rem
-  background-position: center
-  color: $env-secondary
 
-.pwp__device--strap
+.pwp--strap
+  color: $env-secondary
   background-color: $opd-blue-trust
-  padding: 5rem 2rem
+  padding: 5rem 1rem
   & > h2
-    padding: 2rem 0
+    padding: 1rem 0
 
-.pwp__grid-wrap
+.segment-wrap
   display: flex
   flex-direction: column-reverse
   width: 100vw
 
-.pwp__grid-col-r
-  svg
-    display: none
-    position: absolute
+.augment--gaurentee
+  width: 100%
+  height: 100%
 
-.pwp__grid__text
+.segment__gaurentee
   display: flex
   align-items: center
   justify-content: center
@@ -113,11 +119,7 @@
   .site__logo--Q
     fill: $white
 
-.pwp__grid_img
-  background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
-  background-size: cover
-  background-repeat: no-repeat
-  padding-top: 150%
+.image--guarantee
   filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
 
 .pwp--guarantee
@@ -125,57 +127,86 @@
   width: 80%
   margin: 3rem 0
 
-.pwp__grid_keywords
+.segment__keywords
   display: flex
   flex-direction: row
   flex-wrap: wrap
   background-color: $opd-blue-trust
+  color: $env-secondary
   & > *
     padding: 3rem 0
     width: 50%
 
+.svg__labels
 
-.pulsating-circle
-  position: absolute
-  left: 75.5%
-  top: 52.5%
-  transform: translateX(-50%) translateY(-50%)
-  width: 8px
-  height: 8px
-
-  &::before
-    content: ''
-    position: relative
-    display: block
-    width: 300%
-    height: 300%
-    box-sizing: border-box
-    margin-left: -100%
-    margin-top: -100%
-    border-radius: 100px
-    background-color: rgb(252, 133, 133)
-    animation: pulse-ring 2s cubic-bezier(.01,.56,.2,.2) infinite
+  & > *
+    fill: $white
 
-  &::after
-    content: ''
-    position: absolute
-    left: 0
-    top: 0
-    display: block
-    width: 100%
-    height: 100%
-    background: radial-gradient(rgb(255, 176, 176), rgb(255, 107, 107))
-    border-radius: 100px
+  & > .svg--elem
+    transition: .4s ease-in-out
+
+  & > .svg--circle
+    stroke: rgba($pure-black, .2)
+    stroke-width: 1
 
+  & > .svg--line
+    stroke: $white
+    stroke-width: 1
+
+  & > .svg--text
+    font-size: $font-size * .8
+
+.svg__labels.hidden
+
+  & > .svg--circle
+    opacity: 0
+
+  & > .svg--text
+    opacity: 0
+
+.svg__labels.not-hidden
+
+  & > .svg--circle
+    opacity: 1
+
+  & > .svg--text
+    transform: translateX(0)
+    opacity: 1
+
+  & > .svg--line
+    stroke-dashoffset: 0!important
+
+
+  & > .trans-left
+    animation: trans-in-left .6s  ease-in-out
+
+  & > .trans-right
+    animation: trans-in-right .6s ease-in-out
+
+$svg-text-offset: 60px
+
+@keyframes trans-in-left
+  0%
+    transform: translateX(-$svg-text-offset)
+
+  100%
+    transform: translateX(0)
+
+@keyframes trans-in-right
+  0%
+    transform: translateX($svg-text-offset)
+
+  100%
+    transform: translateX(0)
 
 @keyframes pulse-ring
   0%
     opacity: 1
-    transform: scale(.3)
+    r: .1
 
-  80%
-    opacity: 0
+  50%
+    opacity: .1
 
   100%
     opacity: 0
-    transform: scale(1)
+    r: 3

data/_sass/feed.sass

@@ -1,14 +1,17 @@
 .feed__head
-  margin-top: ($navbar-height + $secondary-navbar-height)*1.5
+  margin-top: ($navbar-height + $secondary-navbar-height) * 1.5
   width: 100vw
 
 .feed__title
+  width: 80vw
+  max-width: 1200px
   margin: auto
-  text-align: center
+  
 
 .post__feed
   display: flex
-  justify-content: space-between
+  justify-content: space-around
+  flex-wrap: wrap
   width: 80vw
   max-width: 1200px
   margin: 10vh auto
@@ -16,43 +19,60 @@
 .feed__card
   display: flex
   flex-direction: column
-  width: 30vw
+  width: 200px
   max-width: 360px
-  height: 220px
-  margin-bottom: 10vh
+  //height: 220px
+  margin: 20px
   overflow: hidden
-  border-radius: 12px
-  box-shadow: 0 0 6px rgba($env-primary,.8)
-  transition: .8s ease-in-out
+  border-radius: 0
+  //box-shadow: 0 0 6px rgba($env-primary,.8)
+
 
   &:hover
-    box-shadow: 2px 2px 10px rgba($env-primary,1)
     .feed__card--image
-      transform: scale(1.1)
+      transform: scale(1.2)
+    .feed__card__image
+      box-shadow: 0 10px 6px -5px rgba($env-primary,.6)
+      transition: 1s ease-in-out
     .feed__card--title
-      font-weight: 400
-      color: $pure-white
+      color: $pure-black
+      transition: .4s ease-in-out
+
+.feed__card__image
+  width: 100%
+  height: 112.5px
+  overflow: hidden
+  box-shadow: 0 0 6px rgba($env-primary,.8)
+  transition: .6s ease-in-out
 
 .feed__card--image
-  display: block
   object-fit: cover
   object-position: top
   width: 100%
   height: 100%
-  overflow: hidden
-  transition: .8s ease-in-out
+  transition: .6s ease-in-out
 
 .feed__card--text
-  background-color: $env-primary
-  padding: 2rem 1rem
-  color: $white
-  z-index: 1
-  font-size: $font-size * .7
+  padding: 2rem 0
+  color: $opd-blue-confidence
+  font-size: $font-size
 
 .feed__card--link
   text-decoration: none
   color: inherit
-  text-transform: uppercase
+
+
+.feed__card--title
+  transition: .2s ease-in-out
+  font-weight: 600
 
 .feed__card--meta
-  font-size: $font-size * .7
+  font-size: $font-size * .5
+  padding: 1rem 0
+  & > span
+    font-weight: 600
+
+@media screen and ( min-width: 768px )
+
+  .feed__card--meta
+    font-size: $font-size * .7

data/_sass/navigation/burger.sass

@@ -4,7 +4,7 @@
   cursor: pointer
   display: block
   padding-right: 3vw
-  z-index: 999
+  z-index: 9999
   & > div
     height: 2px
     margin: 7px

data/_sass/navigation/global.sass

@@ -16,12 +16,12 @@
   top: 0
   white-space: nowrap
   width: 100%
-  z-index: 999
+  z-index: 99
 
 .nav-brand
   width: 30vw
   padding-left: 3vw
-  z-index: 2
+  z-index: 100
 
   .site__logo *
     transition: 2s ease-in
@@ -51,7 +51,8 @@
 
 .nav-group-content .nav-link
   font-size: 1.7rem
-  
+  z-index: 100
+
 .nav-active
   // we toggle this class in mobile-nav-slider.js on burger click
   transform: translateX(0%)

data/assets/css/env/gaitq_clinician.sass

@@ -3,6 +3,10 @@
 
 $baseurl: '{{ site.baseurl }}/'
 
+@import '_variables'
+
+@import '_mixins'
+
 @import 'colors/_variables'
 
 @import 'navigation/_variables'

data/assets/css/env/gaitq_landing.sass

@@ -2,6 +2,10 @@
 ---
 $baseurl: '{{ site.baseurl }}/'
 
+@import '_variables'
+
+@import '_mixins'
+
 @import 'colors/_variables'
 
 @import 'navigation/_variables'

data/assets/css/env/gaitq_pwp.sass

@@ -3,6 +3,10 @@
 
 $baseurl: '{{ site.baseurl }}/'
 
+@import '_variables'
+
+@import '_mixins'
+
 @import 'colors/_variables'
 
 @import 'navigation/_variables'

data/assets/css/gaitq_global.sass

@@ -3,6 +3,10 @@
 
 // Site wide styling
 
+@import '_variables'
+
+@import '_mixins'
+
 @import 'typography/_variables'
 
 @import 'colors/_variables'

data/assets/css/gaitq_post.sass

@@ -1,5 +1,6 @@
 ---
 ---
+@import '_mixins'
 
 @import "typography/_variables"
 

data/assets/js/mobile-nav-slider.js

@@ -5,8 +5,8 @@ const navSlide = ()=>{
   const navLinks = document.querySelectorAll('.nav-link');
   const navBar = document.querySelector('.navbar');
 
-  // watch for touch clicks on the whole navbar
-  navBar.addEventListener('touchstart', () => {
+  // watch for touch clicks on the burger
+  burger.addEventListener('touchstart', () => {
     // animate accordinaly
     navSlider.classList.toggle('nav-active');
     brand.classList.toggle('site__logo-active');

data/assets/js/svg_aos.js

@@ -0,0 +1,25 @@
+// collect all the circles and bubbles so we can ani them in at 0%
+var view_height = document.documentElement.clientHeight;
+
+var svg_aos = function(e) {
+
+  var svgs = Array.from(document.getElementsByClassName("svg__labels"));
+
+  for (let i = 0; i < svgs.length; i++) {
+
+    var abs_path_top = svgs[i].getBoundingClientRect().top;
+
+    if (abs_path_top <= .6 * view_height) {
+      svgs[i].classList.remove('hidden');
+      svgs[i].classList.add('not-hidden');
+    } else {
+      svgs[i].classList.add('hidden');
+      svgs[i].classList.remove('not-hidden');
+    }
+
+
+  }
+
+};
+
+window.addEventListener('scroll', _.throttle(svg_aos, 100, { leading: true, trailing: true}));

data/assets/js/svg_text_width.js

@@ -0,0 +1,36 @@
+// Get the svg text elemnets inside svg__labels, calulate their length and position wiith clientWidth conditions.
+
+function svg_text_width() {
+  // scren width
+  const view_width = document.documentElement.clientWidth;
+  // Get svg text and lines contained by .svg__labels
+  const text = document.querySelectorAll('.svg__labels > .svg--text');
+  const lines = document.querySelectorAll('.svg__labels > .svg--line');
+
+  for (let i = 0; i < text.length; i++) {
+    // get width of all the text labels
+    const width = text[i].getComputedTextLength();
+    // set up vars depending on 768 breakpoint
+    if(view_width > 768 ){
+      var lineLength = 100 ; // length in pixels of the drawn line
+      var x_offset = 10 + width ; // offset the text label s.t. last character sits 10 px from end of line
+      var y_offset = .5 ;
+    } else {
+      var lineLength = 70 ;
+      var x_offset = 0 ; // offset the text label s.t. first character sits inline with end of line
+      var y_offset = -1.5 ;}
+      lines[i].setAttribute("stroke-dashoffset", lineLength + 'px')
+      lines[i].setAttribute("stroke-dasharray", lineLength + 'px')
+    if( text[i].classList.contains('trans-left')){
+      lines[i].setAttribute("x2", -lineLength + 'px')
+      text[i].setAttribute("x", - lineLength - x_offset + 'px');
+      text[i].setAttribute("y", y_offset + 'rem');
+    } else {
+      lines[i].setAttribute("x2", lineLength + 'px')
+      text[i].setAttribute("x", lineLength + x_offset - width + 'px');
+      text[i].setAttribute("y", y_offset + 'rem');
+    };
+  };
+}
+
+svg_text_width()

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-18 00:00:00.000000000 Z
+date: 2020-12-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -188,6 +188,8 @@ files:
 - _includes/footer/footer.html
 - _includes/footer/footer_full.html
 - _includes/forms/mc-register.html
+- _includes/functions/calc-svg-coord.html
+- _includes/functions/pull_page_args.html
 - _includes/head/.DS_Store
 - _includes/head/README.md
 - _includes/head/descriptors/og-meta.html
@@ -199,6 +201,7 @@ files:
 - _includes/link.html
 - _includes/navigation/global.html
 - _includes/scripts.html
+- _includes/vimeoPlayer.html
 - _layouts/about.html
 - _layouts/compress.html
 - _layouts/default.html
@@ -209,6 +212,8 @@ files:
 - _layouts/feed.html
 - _layouts/post.html
 - _layouts/register.html
+- _sass/_mixins.sass
+- _sass/_variables.sass
 - _sass/about.sass
 - _sass/aos-overrides.sass
 - _sass/breakpoints/about.sass
@@ -277,6 +282,8 @@ files:
 - assets/js/animate_after_load.js
 - assets/js/calc-mobile-viewport.js
 - assets/js/mobile-nav-slider.js
+- assets/js/svg_aos.js
+- assets/js/svg_text_width.js
 - assets/vendor/aos/aos.css
 - assets/vendor/aos/aos.js
 homepage: https://github.com/madeslowly/slow-steps