RubyGems - slow-steps - Versions diffs - 0.1.1 → 0.1.6 - Mend

slow-steps 0.1.1 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

checksums.yaml +4 -4
data/_includes/.DS_Store +0 -0
data/_includes/footer/footer_full.html +42 -18
data/_includes/functions/calc-svg-coord.html +40 -0
data/_includes/functions/pull_page_args.html +31 -0
data/_includes/head/.DS_Store +0 -0
data/_includes/head/head.html +1 -2
data/_includes/scripts.html +12 -0
data/_includes/vimeoPlayer.html +12 -0
data/_layouts/about.html +53 -21
data/_layouts/default.html +2 -4
data/_layouts/env/clinician.html +96 -25
data/_layouts/env/landing.html +35 -18
data/_layouts/env/pwp.html +100 -30
data/_layouts/feed.html +7 -3
data/_layouts/full-width.html +11 -0
data/_sass/_functions.sass +2 -0
data/_sass/_mixins.sass +100 -0
data/_sass/_variables.sass +5 -0
data/_sass/about.sass +16 -30
data/_sass/colors/_variables.sass +27 -6
data/_sass/colors/breakpoints/{768.sass → 1024.sass} +2 -2
data/_sass/colors/env/_clinician.sass +1 -1
data/_sass/colors/global.sass +2 -0
data/_sass/env/breakpoints/768.sass +15 -42
data/_sass/env/clinician.sass +35 -133
data/_sass/env/landing.sass +35 -53
data/_sass/env/pwp.sass +44 -152
data/_sass/feed.sass +43 -23
data/_sass/footer_full.sass +139 -48
data/_sass/global.sass +297 -4
data/_sass/navigation/breakpoints/{768.sass → 1024.sass} +6 -3
data/_sass/navigation/burger.sass +1 -1
data/_sass/navigation/env/clinician.sass +1 -10
data/_sass/navigation/env/landing.sass +6 -9
data/_sass/navigation/env/pwp.sass +1 -14
data/_sass/navigation/global.sass +4 -3
data/assets/css/env/gaitq_clinician.sass +9 -5
data/assets/css/env/gaitq_landing.sass +4 -0
data/assets/css/env/gaitq_pwp.sass +8 -4
data/assets/css/gaitq_about.sass +22 -0
data/assets/css/gaitq_global.sass +8 -4
data/assets/css/gaitq_post.sass +1 -0
data/assets/js/mobile-nav-slider.js +2 -2
data/assets/js/svg_aos.js +25 -0
data/assets/js/svg_text_width.js +44 -0
metadata +15 -5
data/assets/css/img_handler.sass +0 -5

data/_sass/env/pwp.sass CHANGED

@@ -1,181 +1,73 @@
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# pwp landing sass         /_sass/env/pwp.sass
+ *##############################################
+ *
+ */
+.image__filter--blur
+  @include image-filter--blur
+.hero__overlay
+  background-color: $env-primary
-.pwp__mast
-  display: flex
-  justify-content: center
-  align-items: center
-  height: 90vh
-  height: calc( var(--vh, 1vh) * 90 )
-.pwp__bg
-  position: relative
-  height: 100%
-  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)
-.pwp__overlay
-  position: relative
-  height: 100%
-  width: 100%
+.bg--env-100
   background-color: $env-primary
-.pwp--strap
-  position: absolute
-  color: $env-secondary
-  text-align: center
-  padding-top: $navbar-height
+.bg--env-50
+  background-color: rgba($env-primary, .5)
+.hero__strap--env
+  color: $env-secondary
-.pwp--strap-start
+.hero__strap--start
   color: $env-primary
-.pwp__follow
-  display: flex
-  position: absolute
-  bottom: 4.5vh
-  width: 30px
-  height: 11vh
+.hero__follow
   background-color: $env-primary
-  z-index: 2
-  border-radius: 30px
-  color: $white
-  align-items: center
-  justify-content: center
-  &::after
-    content: "\2193"
-    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
-  text-align: center
-  //padding: 5rem 2rem
-  background-position: center
-  color: $env-secondary
-.pwp__device--strap
-  background-color: $opd-blue-trust
-  padding: 5rem 2rem
-  & > h2
-    padding: 2rem 0
+  bottom: 4.5vh
-.pwp__grid-wrap
+.segment__wrap
   display: flex
   flex-direction: column-reverse
   width: 100vw
-.pwp__grid-col-r
-  svg
-    display: none
-    position: absolute
-.pwp__grid__text
-  display: flex
+.segment__gaurentee
+  @include logo-color($white)
   align-items: center
-  justify-content: center
-  flex-direction: column
-  width: 100%
   background-color: $env-primary
   color: $white
+  display: flex
+  flex-direction: column
+  justify-content: center
   padding: 4rem 0
+  width: 100%
   .site__logo
-    width: 60%
-  .site__logo--curve,
-  .site__logo--legvert,
-  .site__logo--leg45,
-  .site__logo--g,
-  .site__logo--a,
-  .site__logo__i,
-  .site__logo--t,
-  .site__logo--Q
-    fill: $white
+    margin: 0 5vw
+    text-align: center
+    width: 100px
+.segment__keywords
+  height: 50%
-.pwp__grid_img
-  background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
-  background-size: cover
-  background-repeat: no-repeat
-  padding-top: 150%
-  filter: grayscale(1) contrast(.8) brightness(.9) sepia(.4) hue-rotate(180deg)
+.image--guarantee
+  @include image-filter-rotate
-.pwp--guarantee
+.strap__guarantee
   border-top: solid 1px $soft-white
-  width: 80%
   margin: 3rem 0
+  width: 80%
+.strap--env-primary
+  background-color: $env-primary
+  color: $white
-.pwp__grid_keywords
+.segment__keywords
   display: flex
   flex-direction: row
   flex-wrap: wrap
-  background-color: $opd-blue-trust
   & > *
     padding: 3rem 0
     width: 50%
-.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
-  &::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
-@keyframes pulse-ring
-  0%
-    opacity: 1
-    transform: scale(.3)
-  80%
-    opacity: 0
-  100%
-    opacity: 0
-    transform: scale(1)

data/_sass/feed.sass CHANGED

@@ -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/footer_full.sass CHANGED

@@ -1,71 +1,83 @@
-.ft-wrapper
-  background-color: $opd-blue-confidence
-  background-image: url('/assets/img/content/footer-bg.svg')
-  background-position: center
-  background-size: cover
+.ft__wrapper
+  @include footer-bg($opd-blue-confidence)
+  border-top: solid 1px $white
   color: $white
   display: flex
   flex-wrap: wrap
-  margin-top: 10vh
-  padding: 0
+  padding: 5vh 5vw
 .ft__head
   display: flex
-  height: 10vh
-  min-height: 10vh
-  min-width: 100%
+  margin: 5vh 5vw
   width: 100%
 .ft__body
   display: flex
+  flex-direction: column-reverse
   flex-wrap: wrap
-  margin: 0 2rem
-  width: 100%
+  margin: 5vh 0
+  width: 90vw
-.ft__sitemap, .ft__contact
-  min-width: 100%
-  width: 100%
+.ft__col
+  //border-left: solid 1px rgba($opd-blue-trust, .05)
+  box-sizing: border-box
+  padding: 0 5vw
+  width: 90vw
+.ft__contact--list
+  display: block
+  font-size: $font-size * .8
+  list-style: none
+  padding: 0
+  text-decoration: none
+  li
+    line-height: 5rem
+  .address
+    line-height: 2.5rem
+.ft__contact
+  .site__logo
+    @include logo-color($opd-blue-trust)
+    width: 40vw
+.ft__sitemap
+  .ft__sitemap--env-header
+    font-size: $font-size * 1
+    font-weight: 600
+  .ft__sitemap--submenu
+    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-grey-neutral
-  a, p
-    padding-top: 0
+  min-width: 100%
+  width: 100%
+  a,
+  p
+    color: inherit
+    font-size: $font-size * .7
     margin: 0
-    font-size: 1.2rem
+    padding: .5rem .1rem
     text-decoration: none
-    color: inherit
-  div
-    a
-      &::after
-        content: " |"
-      &:last-child
-        &::after
-          content: ""
-.ft__sitemap--menu
-  position: relative
-  float: left
-  background: transparent
-  margin: 0 1% 0 1%
+.legal-links
+  display: flex
+  flex-direction: column
+  justify-content: space-between
 .ft__sitemap--header
-  border-bottom: 1px solid $opd-grey-neutral
+  border-bottom: 1px solid $opd-blue-trust
   color: $pure-white
+  font-size: 2rem
+  font-weight: 600
+  margin-bottom: 3rem
+  width: 100%
-  &:not(:first-child)
-    &::before
-      content: 'GaitQ '
-.ft__sitemap--menu, .ft__sitemap--submenu
+.ft__sitemap--menu,
+.ft__sitemap--submenu
   padding: 0
   width: 100%
@@ -73,10 +85,89 @@
   padding-bottom: 2rem
   li
     display: block
+    line-height: 3rem
     list-style: none
-    padding: .8rem 1.2rem
-    text-decoration: none
 .ft__sitemap--submenu li a
-  color: $white
-  text-decoration: none
+  color: $pure-white
+.ft__sitemap--env-wrap
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+.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
+  .ft__sitemap--env
+    width: 50%