slow-steps 0.1.1 → 0.1.6

data/_sass/colors/_variables.sass

@@ -1,15 +1,25 @@
-// Colour variables, accessible within _sass/
+/*
+ *
+ *##############################################
+ *# Global colors  /_sass/colors/_varibales.sass
+ *##############################################
+ *
+ */
 
 // 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)
 
+
 // Socials
 
 $twitter-primary: rgb(56, 161, 243)
@@ -20,6 +30,7 @@ $linkedin-primary: rgb(14, 118, 168)
 
 $instagram-primary: rgb(64, 93, 230)
 
+
 // General
 
 $pure-white: rgb(255, 255, 255)
@@ -38,6 +49,16 @@ $light-grey: rgb(220, 220, 220)
 
 $grey: rgb(130, 130, 130)
 
-$box-shadow-shade: rgba(0, 0, 0, .2)
+$led: rgb(255, 70, 0)
+
+
+// Object colors
+
+$secondary-navbar-color: rgba(255, 255, 255, .8)
+
+
+// Color set mixins
 
-$secondary_navbar_color: rgba(255, 255, 255, .3)
+@mixin opd-blue-trust
+  background-color: $opd-blue-trust
+  color: $opd-blue-confidence

data/_sass/colors/breakpoints/{768.sass → 1024.sass}

@@ -4,13 +4,13 @@
 // in assets/css/gaitq_env.sass we import this AFTER
 //  @import 'colors/env/env.sass'
 
-@media screen and ( min-width: 768px )
+@media screen and ( min-width: 1024px )
 
   .navbar
     background-color: $env-primary
 
   .nav-group-content
-    background-color: $secondary_navbar_color
+    background-color: $secondary-navbar-color
 
     > *
       color: $env_primary

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/breakpoints/768.sass

@@ -1,79 +1,52 @@
 
 @media screen and ( min-width: 768px )
 
-  .pwp__grid-wrap
+  .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
-    svg
-      display: none
-      position: absolute
-      //transform: translateY(-100%)
-      //-height: 100vh
 
-  .pwp__grid__text
-    display: flex
-    align-items: center
-    justify-content: space-between
-    text-align: left
+  .segment__gaurentee
     flex-direction: row
-    width: 100%
     height: 50%
-    background-color: $env-primary
-    color: $white
+    justify-content: space-between
     padding: 0
+    text-align: left
 
     .site__logo
-      display: flex
-      justify-content: center
-      align-items: center
-      text-align: center
-      width: 15vw
-      margin: 0 5vw
-      //padding: 8rem
+      width: 140px
 
-  .pwp--guarantee
+  .strap__guarantee
     border: none
     border-left: solid 2px $pure-white
     width: 35vw
     margin: 0
     padding: 0 3rem
 
-  .pwp__grid_img
+  .segment__keywords
     width: 100%
-    min-height: 100vh
-    right: 0
-    background-image: url($baseurl + 'assets/img/pwp__grid_img.png')
-    background-size: cover
-    background-position: center
-    background-repeat: no-repeat
-    padding: 0
-    //padding-top: 100%
-
-
-  .pwp__grid_keywords
-    width: 100%
-    height: 50%
     flex-direction: column
     align-items: center
     justify-content: center
 
-    & > *
-      padding: 2rem 0
-
   .clinician__strap
     h1
       display: block
+
+  .svg__labels
+
+    & > .svg--text
+      font-size: $font-size

data/_sass/env/clinician.sass

@@ -1,150 +1,52 @@
-
-
-.clinician__hero
-  align-items: center
-  display: flex
-  flex-direction: column
-  height: 65vh
-  height: calc(var(--vh, 1vh) * 65)
-  justify-content: center
-
-.clinician__bg
-  background-image: url($baseurl + 'assets/img/landing__clinician-mobile.jpg')
-  background-size: cover
-  filter: grayscale(1) contrast(.2) brightness(1.6)
-  height: 100%
-  opacity: .7
-  position: relative
-  width: 100%
-
-.clinician__overlay
+/*  Last full read through 28/12/2020
+ *
+ *##############################################
+ *# clinician landing  /_sass/env/clinician.sass
+ *##############################################
+ *
+ */
+
+.image__filter--blur
+  @include image-filter--blur
+
+.hero__overlay
   background-color: $env-primary
-  height: 70%
-  position: relative
-  width: 100%
 
-.clinician__strap
+.bg--env-100
   background-color: $env-primary
-  color: $white
-  display: flex
-  flex-direction: column
-  height: 30%
-  justify-content: space-around
-  padding-bottom: 3vh
-  text-align: center
-  width: 100%
 
-  h1
-    // Hide on mobile
-    display: none
+.bg--env-50
+  background-color: rgba($env-primary, .5)
 
-.clinician__strap-start
-  color: $env-primary
-
-.clinician__follow
-  display: flex
-  position: absolute
-  top: 59.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)
-
-
-.clinician__hero__2
-  display: block
-  object-fit: cover
-  height: 50vh
-  width: 100vw
-
-.clinician__device--group
-  background-image: url($baseurl + 'assets/img/pwp_device_group.png')
-  svg
-    position: absolute
-    transform: translateY(-100%)
-    //-height: 100vh
-
-.clinician__straps
-  text-align: center
-  //padding: 5rem 2rem
-  background-position: center
-  color: $env-secondary
-  & > h2
-    //padding: 2rem 0
-
-.clinician__device--strap
-  background-color: $opd-blue-trust
-  padding: 5rem 2rem
-  & > h2
-    padding: 2rem 0
+  top: 59.5vh
 
-.clinician__grid-wrap
+.segment__keywords
+  align-items: center
   display: flex
-  flex-direction: row
-  flex-wrap: wrap
-
-  width: 100vw
-
-.clinician__grid-col-l, .clinician__grid-col-r
+  flex-direction: column
   height: 100%
-  width: 50%
+  justify-content: center
 
-.clinician__grid__text
-  display: flex
-  align-items: center
-  justify-content: space-between
-  flex-direction: column
-  width: 100%
-  background-color: $env-primary
-  color: $white
-  //height: 10rem
-  padding: 5rem 0
+  & > *
+    padding: 5rem 0
+    width: 50%
 
-.clinician__grid--keywords
-  padding: 1rem 0
+.image--guarantee
+  @include image-filter-rotate
 
 .action__call
-  width: 140px
-  height: 40px
-  background-color: $opd-blue-trust
-  margin: 4rem 0 0
-  border-radius: 20px
-  font-size: 12px
-  font-weight: 500
-  display: flex
-  align-items: center
-  justify-content: center
-  color: $black
-  &::after
-    content: "Get Involved"
 
+  &:before
+    background-color: rgba($env-secondary, .2)
 
+  span
+    color: $env-primary
 
-.clinician__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)
-
-.clinician--guarantee
-  border-top: solid 1px $soft-white
-  width: 80%
-  margin: 3rem 0
+  svg
+    stroke: $env-primary
 
-.clinician__grid_keywords
-  display: flex
-  flex-direction: row
-  flex-wrap: wrap
-  background-color: $opd-blue-trust
-  & > *
-    padding: 3rem 0
-    width: 50%
+  &:hover
+    &::before
+      background-color: rgba($env-secondary, 1)

data/_sass/env/landing.sass

@@ -1,12 +1,10 @@
-// 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
+/*  Last full read through 27/12/2020
+ *
+ *##############################################
+ *# Landing sass        /_sass/env/landing.sass
+ *##############################################
+ *
+ */
 
 // Fallback for browsers that do not support Custom Properties
 $landing-height: 100vh
@@ -18,41 +16,36 @@ $landing-height: 100vh
   height: calc(var(--vh, 1vh) * 100)
 
 .page__half
-  display: flex
   align-items: flex-end
+  display: flex
   height: 50vh
   width: 100vw
 
 .env__text
+  color: $white
   display: flex
   flex-direction: column
-  color: $white
 
 .landing__strap
   display: none
 
 .landing__link
-  text-decoration: none
   color: $white
+  text-decoration: none
 
 .landing__title
   font-size: $font-size
+  padding: 2rem 0
   text-align: center
   width: 100vw
-  padding: 2rem 0
 
 .hero__overlay
-  position: absolute
-  width: 100%
+  // additional css from glocal
   height: 50%
-  z-index: -1
+  position: absolute
 
-.hero__image
-  height: 100%
-  width: 100%
-  object-fit: cover
-  opacity: .7
-  filter: grayscale(.2) contrast(.2) brightness(1.6)
+.hero__filter
+  @include image-filter--mix
 
 .env--pwp
   background-color: $opd-orange-confidence
@@ -60,7 +53,6 @@ $landing-height: 100vh
 .env--clinician
   background-color: $opd-blue-confidence
 
-
 @media screen and ( min-width: 768px )
 
   .landing__page
@@ -77,23 +69,21 @@ $landing-height: 100vh
     top: 50vh
     transition: .6s ease-in-out
 
-
     &:focus-within > .landing__strap
       @include reveal-landing-strap
 
     &:hover > .landing__strap
       @include reveal-landing-strap
 
-
   .landing__strap
     display: flex
     flex-direction: column
-    justify-content: space-around
     height: 0
+    justify-content: space-around
+    max-width: 400px
     overflow: hidden
     transition: .2s ease-in-out
     width: 40vw
-    max-width: 400px
 
   .landing__cta
     display: flex
@@ -101,48 +91,50 @@ $landing-height: 100vh
     justify-content: space-between
 
     > a
-      transition: .3s ease-in-out
-      width: 40%
-      padding: 1rem 0
-      border-radius: 6px
-      text-decoration: none
-      text-align: center
       align-self: center
+      border-radius: 6px
       box-shadow: 0 20px 30px -15px rgba($pure-black, .6)
+      padding: 1rem 0
+      text-align: center
+      text-decoration: none
+      transition: .3s ease-in-out
+      width: 40%
 
   .primary__cta
     background-color: $opd-blue-trust
     border: solid 1px $opd-blue-trust
     color: $opd-blue-confidence
     &:hover
-      color: $opd-blue-trust
       background-color: transparent
-      box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
+      color: $opd-blue-trust
 
   .secondary__cta
-    background-color: none
+    background-color: transparent
     border: solid 1px $white
     color: $white
     &:hover
-      color: $opd-blue-confidence
       background-color: $white
+      color: $opd-blue-confidence
+
+  .primary__cta, .secondary__cta
+    &:hover
       box-shadow: 0 10px 15px -5px rgba($pure-black, .5)
 
   .env__text.env--pwp
+    @include build-in(slide-from-left)
     border-radius: 6px 0 0 6px
     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
     &:hover
       box-shadow: -20px 20px 20px -10px $grey
 
   .env__text.env--clinician
+    @include build-in(slide-from-right)
     border-radius: 0 6px 6px 0
     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
     &:hover
       box-shadow: 20px 20px 20px -10px $grey
 
@@ -163,18 +155,8 @@ $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