slow-steps 0.1.11 → 0.3.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
 
 $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
@@ -92,7 +97,11 @@ $brand-height: 55%
     width: 100vw
     padding: 0
     height: $secondary-navbar-height
-    backdrop-filter: blur(20px)
+    //max-height: 100px
+
+    .current--url
+      &:before, &:after
+        background-color: $env-primary
 
   .nav-group-content .nav-link
     margin: 0
@@ -102,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
@@ -128,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'

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%

data/_sass/navigation/{env/pwp.sass → pwp.sass}

@@ -1,17 +1,23 @@
+// Theme specific for clinician env
 
 // Navbar site logo
 // make sure we don't style any other instance so nest with .nav-brand
 .nav-brand
   @include logo-primary-colors
 
+.navbar.nav-scrolled
+
+  .social-media-link
+    color: $env-primary
+
+  .burger > div
+    background-color: $env-primary
+
 // on mobile and within the clinician env we hide the other submenus and show the gaitq env .nav-group-link
-.clinician-group, .gaitq-group
+.clinician-group
   display: none
 
-
-@media screen and ( min-width: 768px )
-  .clinician-group-link, .pwp-group-link
-    display: flex
+@media screen and ( min-width: 1024px )
 
   .pwp-group
     display: flex
@@ -21,14 +27,4 @@
     left: 0
     flex-direction: row
 
-  .nav-group-container
-
-
-    .nav-link
-      font-weight: 400
-      color: $env-primary
-      text-transform: uppercase
-      padding: 1rem 3rem
-      &:not(.current--url)
-        &:hover
-          text-decoration: underline
+@import 'collection'

data/_sass/post.sass

@@ -42,7 +42,7 @@
     padding: 3rem 0
 
 .post__subtitle
-  padding: 5rem 0
+  padding: 1rem 0
 
 .post__image
   width: 60vw
@@ -57,13 +57,8 @@
   width: 100%
   height: 50vh
 
-.post__image--caption
-  font-size: $font-size * .7
-  color: $grey
-  padding: 1rem 0
-  text-align: center
 .post__link
-  color: $opd-blue-confidence
+  color: $opd-blue
   text-decoration: none
   &:hover
     color: $black