slow-steps 0.2.1 → 0.3.0

data/_sass/breakpoints/about.sass

@@ -25,7 +25,7 @@
 
   .team__head
     border-bottom: none
-    border-right: solid 1px $opd-blue-confidence
+    border-right: solid 1px $opd-blue
     display: block
     height: auto
     width: auto
@@ -49,7 +49,7 @@
     padding: 2rem 4rem 2rem 2rem
     transform: rotate(0)
     white-space: nowrap
-    color: $opd-blue-confidence
+    color: $opd-blue
     border: solid 1px rgba($env-primary, 0)
     margin: 2rem 0
     &:not(.team__title--active)
@@ -71,7 +71,7 @@
 
   .team__members
     //padding: 10rem
-    color: $opd-blue-confidence
+    color: $opd-blue
     background-color: $white
 
   .team__title--active
@@ -80,7 +80,7 @@
     padding-right: 1rem !important
     color: $env-primary !important
     background-color: $white
-    border: solid 1px $opd-blue-confidence
+    border: solid 1px $opd-blue
     border-right: solid 1px $white
     transform: translateX(1px)
     text-align: right

data/_sass/contact.sass

@@ -17,7 +17,9 @@
   padding: 0 1rem
 
 .form-instruction
-  padding-bottom: 2rem
+  padding-bottom: $font-size
+  padding-top: $lg-font-size
+  color: $env-primary
 
 .contact-form
   width: 100%
@@ -30,7 +32,7 @@
     padding: 2rem
   label
     font-size: $font-size * .8
-    color: $black
+    color: $env-secondary
 
 .google-map
   width: 100%
@@ -52,13 +54,15 @@
   .fas
     color: $env-primary
   a
-    color: $black
+    color: $env-secondary
     transition: all .2s ease-in-out
     //text-decoration: none
     &:hover
       color: $env-primary
   .social-media-link
-    font-size: $font-size * 1.4
+    font-size: $lg-font-size
+    color: $env-secondary
+    padding-right: $lg-font-size
 
 .form-element
   width: 100%
@@ -87,22 +91,6 @@
   width: auto
   position: relative
 
-.social-media
-  display: flex
-  justify-content: center
-  padding: 0
-  margin: 0
-  z-index: 9999
-
-.social-media-item
-  list-style: none
-  padding-right: 2rem
-
-.social-media-link
-  color: $grey
-  transition: all .3s ease-in-out
-
-
 
 @media screen and ( min-width: 1024px )
 
@@ -120,9 +108,6 @@
     width: 60%
     padding: 0 5rem
 
-  .form-instruction
-    padding-bottom: 2rem
-
   .contact-form
     width: 100%
     display: block
@@ -155,7 +140,6 @@
     .fas
       color: $env-primary
     a
-      color: $black
       transition: all .2s ease-in-out
       text-decoration: none
       &:hover
@@ -210,18 +194,3 @@
       &::after
         opacity: 1
         transition: all 0.3s
-
-  .social-media
-    display: flex
-    justify-content: flex-start
-    padding: 0
-    margin: 0
-    z-index: 9999
-
-  .social-media-item
-    list-style: none
-    padding-right: 2rem
-
-  .social-media-link
-    color: $grey
-    transition: all .3s ease-in-out

data/_sass/env/landing.sass

@@ -48,10 +48,10 @@ $landing-height: 100vh
   @include image-filter--mix
 
 .env--pwp
-  background-color: $opd-orange-confidence
+  background-color: $opd-coral
 
 .env--clinician
-  background-color: $opd-blue-confidence
+  background-color: $opd-blue
 
 @media screen and ( min-width: 768px )
 
@@ -101,12 +101,12 @@ $landing-height: 100vh
       width: 40%
 
   .primary__cta
-    background-color: $opd-blue-trust
-    border: solid 1px $opd-blue-trust
-    color: $opd-blue-confidence
+    background-color: $opd-light-blue
+    border: solid 1px $opd-light-blue
+    color: $opd-blue
     &:hover
       background-color: transparent
-      color: $opd-blue-trust
+      color: $opd-light-blue
 
   .secondary__cta
     background-color: transparent
@@ -114,7 +114,7 @@ $landing-height: 100vh
     color: $white
     &:hover
       background-color: $white
-      color: $opd-blue-confidence
+      color: $opd-blue
 
   .primary__cta, .secondary__cta
     &:hover

data/_sass/faq.sass

@@ -15,13 +15,13 @@
   justify-content: space-between
   width: 100%
   padding: 1rem 0
-  background-color: rgba($opd-blue-trust, .2)
+  background-color: rgba($opd-light-blue, .2)
   border-radius: 4px
   cursor: pointer
   transition: .2s ease-in-out
 
   &:hover
-    background-color: rgba($opd-blue-trust, 1)
+    background-color: rgba($opd-light-blue, 1)
 
   & > .faq__question--title
     padding-left: 1rem

data/_sass/feed.sass

@@ -6,6 +6,7 @@
   width: 80vw
   max-width: 1200px
   margin: auto
+  color: $env-primary
 
 
 .post__feed
@@ -54,7 +55,7 @@
 
 .feed__card--text
   padding: 2rem 0
-  color: $opd-blue-confidence
+  color: $opd-blue
   font-size: $font-size
 
 .feed__card--link

data/_sass/footer.sass

@@ -1,6 +1,6 @@
 .ft__wrap
   max-width: 100vw
-  background-color: $opd-grey-neutral
+  background-color: $opd-grey
   padding: 3rem 2rem
 
 .ft__base

data/_sass/footer_full.sass

@@ -1,11 +1,19 @@
+
+
 .ft__wrapper
-  @include footer-bg($opd-blue-confidence)
+  @include footer-bg($opd-blue)
   border-top: solid 1px $white
   color: $white
   display: flex
   flex-wrap: wrap
   padding: 5vh 5vw
 
+  .social-media-link
+    font-size: $font-size
+    padding-right: $sm-font-size
+    //color: $white
+
+
 .ft__head
   display: flex
   margin: 5vh 5vw
@@ -19,7 +27,7 @@
   width: 90vw
 
 .ft__col
-  //border-left: solid 1px rgba($opd-blue-trust, .05)
+  //border-left: solid 1px rgba($opd-light-blue, .05)
   box-sizing: border-box
   padding: 0 5vw
   width: 90vw
@@ -37,7 +45,7 @@
 
 .ft__contact
   .site__logo
-    @include logo-color($opd-blue-trust)
+    @include logo-color($white)
     width: 40vw
 
 .ft__sitemap
@@ -49,10 +57,11 @@
 
 .ft__base
   align-items: center
-  border-top: solid 1px $opd-blue-trust
+  border-top: solid 1px $opd-light-blue
   display: flex
-  flex-wrap: nowrap
-  justify-content: space-between
+  flex-wrap: wrap
+
+  justify-content: space-around
   min-width: 100%
   width: 100%
   a,
@@ -69,7 +78,7 @@
   justify-content: space-between
 
 .ft__sitemap--header
-  border-bottom: 1px solid $opd-blue-trust
+  border-bottom: 1px solid $opd-light-blue
   color: $pure-white
   font-size: 2rem
   font-weight: 600
@@ -131,6 +140,7 @@
       font-size: $font-size * .8
 
   .ft__base
+    justify-content: space-between
     a,
     p
       font-size: $font-size * .7
@@ -147,7 +157,7 @@
 
   .copyright
     &::after
-      content: ' Limited'
+      content: ' Ltd.'
 
   .ft__sitemap--header
     font-size: 1.8rem

data/_sass/forms/mc-forms.sass

@@ -77,7 +77,7 @@ input.switch
 input.switch
   &:checked
     + .icon
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
     ~
       .yes
@@ -126,13 +126,13 @@ input.switch
       background: $env-primary
 
 .styled-checkbox:checked
-  background: $opd-orange-confidence
+  background: $opd-coral
 
   + .icon span
     left: calc(100% - 25.732px)
 
     &:before
-      background: $opd-blue-trust
+      background: $opd-light-blue
 
 .content__gdpr
   display: flex

data/_sass/global.sass

@@ -146,7 +146,7 @@ body
 
 // Block colors and sizes
 .strap--opd-trust
-  @include opd-blue-trust
+  @include opd-light-blue
 
 
 .strap__100
@@ -256,15 +256,24 @@ $svg-text-offset: 60px
 
 
 // Social icons wraped in <a's
-.social
-  color: $grey
-  text-decoration: none
+
+.social-media
+  display: flex
+  padding: 0
+  margin: 0
+
+.social-media-item
+  list-style: 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 )
@@ -284,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 *************