slow-steps 0.1.12 → 0.3.1

data/_sass/global.sass

@@ -22,11 +22,14 @@ body
   background-color: $white
 
 .fullwidth__wrap
-  width: 90vw
-  max-width: 800px
-  margin: auto
-  margin-top: $navbar-height + $secondary-navbar-height + 5vh
+  background-color: $white
+  width: 100vw
+  padding-top: $navbar-height + $secondary-navbar-height + 5vh
+  & > *
+    margin: auto
+    max-width: 800px
   & > p
+
     padding: 3rem 0
   & > ol li, ul li
     padding: 1rem 0
@@ -135,9 +138,15 @@ body
     transform: scaleY(2)
 
 
+.image--caption
+  font-size: $font-size * .7
+  color: $grey
+  padding: 1rem 0
+  text-align: center
+
 // Block colors and sizes
 .strap--opd-trust
-  @include opd-blue-trust
+  @include opd-light-blue
 
 
 .strap__100
@@ -243,32 +252,28 @@ $svg-text-offset: 60px
     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
+// Social icons wraped in <a's
 
-  100%
-    opacity: 0
-    r: 2
+.social-media
+  display: flex
+  padding: 0
+  margin: 0
 
+.social-media-item
+  list-style: none
 
-// Social icons wraped in <a's
-.social
-  color: $grey
-  text-decoration: none
+.social-media-link
+  @include default-trans
+  color: $white
 
 .yaml--link
   color: inherit
   text-decoration: none
   &:hover
-    color: $opd-blue-trust
+    color: $opd-light-blue
 
 
 @media screen and ( min-width: 768px )
@@ -288,26 +293,23 @@ $svg-text-offset: 60px
     max-width: 600px
     margin: 0 auto
 
-  .social--Facebook
+  .social-media-item
     &:hover
-      color: $facebook-primary
+      .social--Facebook
+        color: $facebook-primary
 
-  .social--Twitter
-    &:hover
-      color: $twitter-primary
+      .social--Twitter
+        color: $twitter-primary
 
-  .social--LinkedIn
-    &:hover
-      color: $linkedin-primary
+      .social--LinkedIn
+        color: $linkedin-primary
 
-  .social--Instagram
-    &:hover
-      color: $instagram-primary
+      .social--Instagram
+        color: $instagram-primary
 
-  .social--Website,
-  .social--Email
-    &:hover
-      color: $opd-blue-trust
+      .social--Website,
+      .social--Email
+        color: $opd-light-blue
 
 
 // This is basically a button and should to be centralised

data/_sass/navigation/README.md

@@ -0,0 +1,35 @@
+# Navbar Sass
+
+All the styling for the navbar originates here.
+
+## _variables.sass
+
+Sass variable definitions for dimensions and transitions
+
+## colors.sass
+
+Collection of color definitions that are not defined by environmental colors
+
+## base.sass
+
+Base sass for navigation.
+
+## burger.sass
+
+Burger specific sass.
+
+## breakpoints/1024.sass
+
+1024 px breakpoint for navigation
+
+## landing.sass
+
+Unique settings for the landing page
+
+## clinician.sass
+
+Unique settings for the clinician pages
+
+## pwp.sass
+
+Unique settings for the pwp pages

data/_sass/navigation/_variables.sass

@@ -1,25 +1,24 @@
 // This is where we setup the apperance of the navigation. Note, the contents is picked up from _data/menu.yml and written into _inludes/navbar.html
 
-// We have two key sass files, _sass/navbar/mobile.sass and .../desktop.sass
-
-// The mobile.sass is loaded first whilst a breakpoint controls the desktop.sass
-
-
 // ************* Dimesions *************
 
 // Applies to ALL displays
+
 $navbar-height: 5vh
 
 $mobile-navbar-height: 10vh
 
 $secondary-navbar-height: 10vh
 
+$brand-height: 55%
+
 // change .nav-list.height manually in _sass/navbar/mobile.sass, can't figure out how to use calc --vh whith sass var
+
 $nav-list-height: 85vh
 
 // ************* Colours *************
 
-// see _sass/colors/_variables.sass
+// see _sass/navigation/colors.sass
 
 // ************* Animations *************
 

data/_sass/navigation/{global.sass → base.sass}

@@ -1,13 +1,8 @@
 
-
-// Global navigation Sass
-
-// Avoid declaring any styling like color etc.
-// These are defined in _sass/colors/env/_env.sass and called by various functions in _sass/colors/...
-
-// Everything here will be included in EVERY .html
+// Navigation styling for base
 
 .navbar
+  @include default-trans
   align-items: center
   display: flex
   height: $mobile-navbar-height
@@ -16,27 +11,26 @@
   top: 0
   white-space: nowrap
   width: 100%
-  z-index: 99
+  z-index: 9998
 
   .social-media
-    padding-left: 4rem
+    margin-left: 3vw
+    z-index: inherit
+
   .social-media-link
-    color: $white
-    font-size: $font-size * .8
-    transform: translateY(0)
-    &:hover
-      text-shadow: 3px 3px 6px rgba($black, .2)
-      //font-size: $font-size * 1
-      transform: translateY(-2px)
+    font-size: $sm-font-size
+    padding-right: $sm-font-size
 
+.nav-scrolled
+  @include navbar-color
 
 .nav-brand
   width: 30vw
   padding-left: 3vw
-  z-index: 100
+  z-index: 1
 
   .site__logo *
-    transition: 2s ease-in
+    @include default-trans
 
 .nav-list
   border-bottom-left-radius: 80px
@@ -54,6 +48,8 @@
   transform: translateX(100%)
   transition: $nav-slider-transition
   width: 100vw
+  box-sizing: content-box
+  background-color: $env-primary
 
 .nav-link
   margin: 6vh 15vw
@@ -61,14 +57,19 @@
   text-decoration: none
   display: flex
 
-.nav-group-content .nav-link
+.nav-group-link
+  color: $nav-link-color
+
+.nav-link
   font-size: 1.7rem
   z-index: 100
+  color: $nav-link-color
 
 .nav-active
   // we toggle this class in mobile-nav-slider.js on burger click
   transform: translateX(0%)
 
+
 .site__logo-active
   .site__logo--group
     .site__logo--curve,
@@ -79,4 +80,4 @@
     .site__logo__i *,
     .site__logo--t,
     .site__logo--Q
-      transition: 1.2s ease-in
+      fill: $env-secondary

data/_sass/navigation/breakpoints/1024.sass

@@ -1,18 +1,16 @@
-// Navigation styling for breakpoint 768
-
-// Avoid declaring any styling like color etc.
-// These will be decalred in _sass/naviagtion/env/
-
-// Everything here will be included in EVERY .html
-
-$brand-height: 55%
+// Navigation styling for breakpoint 1024
 
 @media screen and ( min-width: 1024px )
 
+  .pwp-group-link, .clinician-group-link
+    display: flex
+
   .navbar
     @include default-trans
-    height: $navbar-height
     align-items: center
+    background-color: $env-primary
+    height: $navbar-height
+
 
   .nav-scrolled
     @include default-trans
@@ -23,7 +21,11 @@ $brand-height: 55%
     .nav-brand
       @include default-trans
       height: 8vh
-      top: 6vh
+      max-height: 100px
+
+  .nav-scrolled
+    background-color: $env-primary
+    // overwrite mobile
 
   .nav-brand
     @include default-trans
@@ -31,12 +33,10 @@ $brand-height: 55%
     position: absolute
     max-width: 160px
     height: 10vh
-    z-index: 999
     top: 7.5vh
 
     .site__logo
       position: absolute
-      top: (100% - $brand-height) / 2
       height: $brand-height
 
   .nav-list
@@ -63,8 +63,12 @@ $brand-height: 55%
     overflow: hidden
     position: relative
 
-  // Surround current link with lines
+  .sub-link,
+  .subsub-link
+    color: $env-primary
 
+
+  // Surround current link with ticks
   .current--url
     &:before, &:after
       content: ""
@@ -84,6 +88,7 @@ $brand-height: 55%
 
   .nav-group-content
     @include default-trans
+    @include navbar-color
     align-items: center
     justify-content: flex-end
     position: absolute
@@ -93,7 +98,10 @@ $brand-height: 55%
     padding: 0
     height: $secondary-navbar-height
     //max-height: 100px
-    backdrop-filter: blur(20px)
+
+    .current--url
+      &:before, &:after
+        background-color: $env-primary
 
   .nav-group-content .nav-link
     margin: 0
@@ -103,7 +111,7 @@ $brand-height: 55%
 
   .nav-subsub-content
     background-color: $pure-white
-    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
+    box-shadow: 1px 1px 1px rgba($pure-black, .1)
     visibility: hidden
     opacity: 0
     border-radius: 6px
@@ -129,6 +137,15 @@ $brand-height: 55%
       transform: rotate(-45deg) translateY(14px)
       z-index: -1
 
+  .nav-group-container
+    .nav-link
+      font-weight: 400
+      text-transform: uppercase
+      padding: 1rem 3rem
+      &:not(.current--url)
+        &:hover
+          text-decoration: underline
+
   .nav-group-container:hover > .nav-subsub-content
     visibility: visible
     opacity: 1

data/_sass/navigation/burger.sass

@@ -4,20 +4,26 @@
   cursor: pointer
   display: block
   padding-right: 3vw
-  z-index: 9999
+  z-index: 1
   & > div
+    background-color: $burger-color
     height: 2px
     margin: 7px
     width: 25px
 
+
 .burger-line-1
-  transition: width .6s ease-in-out
+  transition: width .6s ease-in-out, background-color .3s ease-in-out
 
 .burger-line-2
-  transition: width .3s ease-in-out
+  transition: width .3s ease-in-out, background-color .3s ease-in-out
 
+.burger-line-3
+  transition: background-color .3s ease-in-out
 
 .burger-active
+  & > div
+    background-color: $env-secondary
   .burger-line-1
     width: 8px
     // reduce by 17 px

data/_sass/navigation/clinician.sass

@@ -0,0 +1,31 @@
+// Theme specific for clinician env
+
+// Navbar site logo
+.nav-brand
+  @include logo-color($env-primary)
+
+// Color the navbar once we start scrolling
+.navbar.nav-scrolled
+
+  .social-media-link
+    color: $env-primary
+
+  .burger > div
+    background-color: $env-primary
+
+// on mobile and within an env we hide the other submenus
+.pwp-group
+  display: none
+
+@media screen and ( min-width: 1024px )
+
+  .clinician-group
+    display: flex
+    align-items: center
+    width: 100vw
+    height: 15vh
+    left: 0
+    flex-direction: row
+
+
+@import 'collection'

data/_sass/navigation/collection.sass

@@ -0,0 +1,9 @@
+@import '_variables'
+
+@import 'colors'
+
+@import 'base'
+
+@import 'burger'
+
+@import 'breakpoints/1024'