slow-steps 0.2.1 → 0.4.0

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
+$navbar-height: 5vh
 
 $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
+
+$mobile-navbar-height: 10vh
+
+$mobile-nav-list-height: 90vh
 
 // ************* 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,38 +11,40 @@
   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
+  margin-top: .7rem
+  // fudge fix for G making logo apear off-centre
 
   .site__logo *
-    transition: 2s ease-in
+    @include default-trans
+
 
 .nav-list
   border-bottom-left-radius: 80px
   font-size: 1.3rem
-  height: $nav-list-height
-  height: calc( var(--vh, 1vh) * 85 )
+  height: $mobile-nav-list-height
+  height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} )
   list-style: none
   margin: 0
-  margin-block-start: 0
+  margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} )
   padding: 0
-  padding-top: 15vh
+  padding-top: 0
   position: absolute
   right: 0
   top: 0
@@ -55,6 +52,13 @@
   transition: $nav-slider-transition
   width: 100vw
   box-sizing: content-box
+  background-color: $env-primary
+  overflow: scroll
+
+.nav-group-content
+  //text-indent: 2rem
+  .nav-link
+    margin: 3vh 20vw
 
 .nav-link
   margin: 6vh 15vw
@@ -62,13 +66,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%)
+  box-shadow: -.2px .2px 0 rgba($pure-black, .3)
+
 
 .site__logo-active
   .site__logo--group
@@ -80,4 +90,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,20 +21,25 @@ $brand-height: 55%
     .nav-brand
       @include default-trans
       height: 8vh
-      top: 6vh
+      //max-height: 100px
+      // max-height breaks vertical centering
+
+  .nav-scrolled
+    background-color: $env-primary
+    // overwrite mobile
 
   .nav-brand
     @include default-trans
     display: flex
     position: absolute
-    max-width: 160px
+    //max-height: 100px
+    // max-height breaks vertical centering
     height: 10vh
-    z-index: 999
     top: 7.5vh
+    margin-top: 0
 
     .site__logo
       position: absolute
-      top: (100% - $brand-height) / 2
       height: $brand-height
 
   .nav-list
@@ -50,10 +53,19 @@ $brand-height: 55%
     height: 5vh
     padding: 0
     background-color: inherit
+    box-shadow: none
+    margin-block-start: 0
+    padding: 0
+    overflow: visible
 
   .nav-group
     padding: 0 2rem
 
+  .nav-group-content
+    //text-indent: 2rem
+    .nav-link
+      margin: 0
+
   .nav-link
     align-items: center
     padding: 0
@@ -63,8 +75,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: ""
@@ -72,18 +88,17 @@ $brand-height: 55%
       height: 2px
       position: relative
       vertical-align: middle
-      width: 6%
+      width: 6px
 
     &:before
-      right: 0.5em
-      margin-left: -10%
+      right: 3px
 
     &:after
-      left: 0.5em
-      margin-right: -10%
+      left: 3px
 
   .nav-group-content
     @include default-trans
+    @include navbar-color
     align-items: center
     justify-content: flex-end
     position: absolute
@@ -93,7 +108,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 +121,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 +147,15 @@ $brand-height: 55%
       transform: rotate(-45deg) translateY(14px)
       z-index: -1
 
+  .nav-group-container
+    .nav-link
+      font-weight: $heavy-font
+      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: 1000
   & > 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'

data/_sass/navigation/colors.sass

@@ -0,0 +1,8 @@
+
+// nav colors that are not defined by environmental colors
+
+$burger-color: $pure-white
+
+$nav-link-color: $pure-white
+
+$secondary-navbar-color: rgba($pure-white, .9)

data/_sass/navigation/no-nav.sass

@@ -0,0 +1,32 @@
+// Here we only deal with navigation for landing
+
+// We dont include the naviagtion menu(s) on the landing page. See _includes/naviagtion/global.html
+
+
+@import '_variables'
+
+@import 'colors'
+
+.navbar
+  position: absolute
+  /* fix the brand on the landing page */
+
+// Navbar site logo
+// make sure we don't style any other instance so nest with .nav-brand
+.nav-brand
+  @include logo-color($white)
+  padding-left: 2rem
+  transform: translateY(5vh)
+  height: 10vh
+
+  .site__logo
+    height: $brand-height
+    position: absolute
+
+
+@media screen and ( min-width: 1024px )
+  .nav-brand
+    padding-left: 3vw
+
+    .site__logo
+      height: $brand-height + 10%