slow-steps 0.1.2 → 0.1.3

data/_sass/global.sass

@@ -25,6 +25,172 @@
 .no-touch__wrap
   padding: 18vh 0 10vh 0
 
+// Hero div at the top of most pages
+.hero
+  align-items: center
+  display: flex
+  justify-content: center
+
+.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
+
+.hero__strap
+  padding-top: $navbar-height
+  position: absolute
+  text-align: center
+
+.hero__follow
+  align-items: center
+  border-radius: 30px
+  color: $white
+  display: flex
+  height: 11vh
+  justify-content: center
+  position: absolute
+  width: 30px
+  z-index: 2
+
+  &::after
+    content: '\2193'
+    font-size: 20px
+    transform: scaleY(2)
+
+
+// Block colors and sizes
+.strap--opd-trust
+  @include opd-blue-trust
+
+
+.strap__100
+  padding: 5rem 1rem
+  & > h2
+    padding: 1rem 0
+
+@media screen and ( min-width: 768px )
+
+  .strap__100
+    padding: 10rem 5rem
+    & > h2
+      padding-bottom: 5rem
+    & > p
+      max-width: 800px
+      margin: 0 auto
+
+
+// SVG augmenting text labels
+
+.svg__labels
+
+  & > *
+    fill: $white
+
+  & > .svg--elem
+    transition: .4s ease-in-out
+
+  & > .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)
+
+
+
+// SVG flashing LED used on env landing pages
+
+
+.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
+  animation: pulse-ring 2s $bezier-pulse infinite
+  fill: $led
+
+@keyframes pulse-ring
+  0%
+    opacity: .5
+    r: .1
+
+  50%
+    opacity: .2
+
+  100%
+    opacity: 0
+    r: 2
+    
+
 // Social icons wraped in <a's
 .social
   color: $grey

data/_sass/navigation/env/landing.sass

@@ -7,13 +7,4 @@
 // Navbar site logo
 // make sure we don't style any other instance so nest with .nav-brand
 .nav-brand
-  .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
+  @include logo-primary-colors

data/_sass/navigation/env/pwp.sass

@@ -2,20 +2,7 @@
 // Navbar site logo
 // make sure we don't style any other instance so nest with .nav-brand
 .nav-brand
-  .site__logo--group
-    .site__logo--curve
-      fill: $opd-orange-confidence
-    .site__logo--legvert
-      fill: $opd-blue-confidence
-    .site__logo--leg45
-      fill: $opd-blue-trust
-    .site__logo--g,
-    .site__logo--a,
-    .site__logo__i,
-    .site__logo--t
-      fill: $opd-blue-confidence
-    .site__logo--Q
-      fill: $opd-orange-confidence
+  @include logo-primary-colors
 
 // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
 .clinician-group, .gaitq-group

data/assets/css/gaitq_global.sass

@@ -11,8 +11,6 @@
 
 @import 'colors/_variables'
 
-@import 'global'
-
 @import 'typography/resets'
 
 @import 'typography/branding'
@@ -29,6 +27,8 @@
 
 // Footer
 
-@import 'footer'
+@import 'footer_full'
 
 @import 'aos-overrides'
+
+@import 'global'

data/assets/js/svg_aos.js

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

data/assets/js/svg_text_width.js

@@ -1,4 +1,12 @@
-// Get the svg text elemnets inside svg__labels, calulate their length and position wiith clientWidth conditions.
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# svg label calc  /assets/js/svg_text_width.js
+ *##############################################
+ *
+ */
+
+ // Get the svg text elemnets inside .svg__labels, calulate their length and position with 768 clientWidth condition.
 
 function svg_text_width() {
   // scren width

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slow-steps
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Made Slowly
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-22 00:00:00.000000000 Z
+date: 2020-12-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -251,7 +251,6 @@ files:
 - assets/css/gaitq_feed.sass
 - assets/css/gaitq_global.sass
 - assets/css/gaitq_post.sass
-- assets/css/img_handler.sass
 - assets/fonts/.DS_Store
 - assets/fonts/Quicksand/OFL.txt
 - assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf

data/assets/css/img_handler.sass

@@ -1,5 +0,0 @@
----
----
-$baseurl: '{{ site.baseurl }}/'
-$img: url($baseurl + 'assets/img/pwp_device_group_docked.png')
-$img_height:  '{% imagesize source:height %} / {% imagesize source:width %}'