made-slowly 0.0.1

data/_sass/constants/typography.sass

@@ -0,0 +1,19 @@
+// Global typography constants
+
+$primary-font-family: 'Poppins'
+
+$global-font-size: 16px
+
+$sm-global-font-size: 14px
+
+$global-letter-spacing: 1px
+
+$extra-light-font: 100
+
+$light-font: 200
+
+$medium-font: 300
+
+$heavy-font: 600
+
+$small-font: .8rem

data/_sass/contact.sass

@@ -0,0 +1,102 @@
+
+.contact-masthead
+  background-image: linear-gradient(to bottom right, $blue , $vivid-pink)
+
+.contact-header
+  font-weight: 400
+
+.contact-strap
+  font-family: monospace
+
+.contact-wrapper
+  background-color: $soft-white
+
+.contact-grid
+  display: grid
+  grid-template-columns: 1fr
+  grid-template-areas: "contactForm" "contactDetails" "contactFooter"
+  grid-gap: 5vh
+
+.contact-details
+  grid-area: contactDetails
+
+.contact-form
+  grid-area: contactForm
+  label
+    display: none
+
+.google-map
+  //grid-area: googleMap
+  width: 100vw
+  height: 30vh
+  filter: grayscale(1) invert(0.1)
+  // fudge to pull up global container in this one instance
+  margin-bottom: -5vh
+
+.contact-footer
+  grid-area: contactFooter
+  font-size: 0.8rem
+
+.form-element
+  width: 100%
+  height: 40px
+  border-radius: 5px
+  font-size: 1rem
+  font-weight: 100
+  margin: 2vh 0
+  border: none
+  background-color: $white
+  padding: 0.5rem 0 0.4rem 0
+  text-indent: 1rem
+
+.btn-contact
+  box-shadow: $box-shadow $vivid-pink
+  margin: 2vh 0
+  width: 100%
+  color: $vivid-pink
+  background-color: $pure-white
+
+.social-media
+  display: flex
+  justify-content: flex-start
+  padding: 0
+
+.social-media-item
+  list-style: none
+  padding-right: 2rem
+
+.social-media-link
+  color: $black
+  transition: all 0.3s ease-in-out
+
+.social-media-link:hover
+  color: $vivid-pink
+
+.contact-confirm
+  padding: 5vh 5vw
+  text-align: center
+  span
+    display: none
+
+@media screen and ( min-width: 768px )
+
+  .contact-confirm
+    padding: 5vh 10vw
+    span
+      display: inline
+
+  .contact-grid
+    grid-template-columns: 50% 50%
+    grid-gap: 5vw
+    grid-template-areas: "contactForm contactDetails" "contactFooter contactFooter"
+
+  .google-map
+    // fudge to pull up global container in this one instance
+    margin-bottom: -15vh
+
+@media screen and ( min-width: 1024px )
+
+  .contact-grid
+    grid-template-columns: 60% 40%
+    max-width: 1000px
+    margin: 0 auto

data/_sass/error-page.sass

@@ -0,0 +1,109 @@
+.error-page
+  background: #5A657A
+  min-height: 85vh
+  padding: 10vh 5vw 5vh
+
+  p,
+  h1
+    color: $white
+
+.robo
+  display: block
+  height: 50vh
+  margin: 0 auto
+  overflow: visible !important
+
+  #robot_1_,
+  #light_1_,
+  #leftEye_1_,
+  #rightEye_1_,
+  #leftArm_1_,
+  #rightArm_1_,
+  #shadow_1_
+    animation-direction: alternate
+    animation-iteration-count: infinite
+
+  #robot_1_,
+  #leftArm_1_,
+  #rightArm_1_,
+  #shadow_1_
+    animation-duration: 1s
+    animation-timing-function: ease-in-out
+
+  #robot_1_
+    animation-name: verticalAnimation
+
+  #light_1_
+    animation-duration: .5s
+    animation-name: blinkLight
+    animation-timing-function: steps(2)
+
+  #leftEye_1_,
+  #rightEye_1_
+    animation-duration: 1.8s
+    animation-name: blinkEye
+    animation-timing-function: linear
+    transform-origin: 50% 50%
+
+  #leftArm_1_
+    animation-name: moveLeftArm
+    transform-origin: 50% 10%
+
+  #rightArm_1_
+    animation-name: moveRightArm
+    transform-origin: 50% 10%
+
+  #shadow_1_
+    animation-name: shadowAnimation
+    transform-origin: 50%
+
+@keyframes wave
+  0%
+    transform: rotate(120deg)
+
+  100%
+    transform: rotate(170deg)
+
+@keyframes moveLeftArm
+  0%
+    transform: rotate(0)
+
+  100%
+    transform: rotate(4deg)
+
+@keyframes moveRightArm
+  0%
+    transform: rotate(0)
+
+  100%
+    transform: rotate(-4deg)
+
+@keyframes shadowAnimation
+  0%
+    opacity: .4
+    transform: scale(1)
+
+  100%
+    opacity: .6
+    transform: scale(1.15)
+
+@keyframes verticalAnimation
+  0%
+    transform: translateY(-10px)
+
+  100%
+    transform: translateY(10px)
+
+@keyframes blinkLight
+  0%
+    opacity: 0
+
+  100%
+    opacity: 1
+
+@keyframes blinkEye
+  0%
+    transform: scaleY(0)
+
+  4%
+    transform: scaleY(1)

data/_sass/global/aos-overrides.sass

@@ -0,0 +1,5 @@
+// Override build in delays on mobile devices
+// This is a work around, we often build arrays of elements with incremental delays for UX effects, but often these arrays are columns on mob to it doesnt make sense to delay anything.
+@media screen and (max-width: 1024px)
+  [data-aos-delay]
+    transition-delay: 0s !important

data/_sass/global/custom-aos.sass

@@ -0,0 +1,8 @@
+[data-aos='from-origin-fade-up']
+  opacity: 0
+  transform: translateY(0)
+  transition-property: transform, opacity
+
+  &.aos-animate
+    opacity: 1
+    transform: translateY(-50px)

data/_sass/global/footer.sass

@@ -0,0 +1,52 @@
+.footer-wraper
+  background-color: $footer-bg
+  background-image: url('/assets/img/content/footer-bg.svg')
+  background-position: center
+  background-size: cover
+  color: $white
+  display: grid
+  grid-column-gap: 5vw
+  grid-row-gap: 30px
+  grid-template-areas: 'footer-header footer-header' 'sitemap category-links' 'footer-contact footer-contact' 'footer-base footer-base'
+  grid-template-columns: auto auto
+  padding: 5vh 5vw
+
+  h3
+    color: $vivid-blue
+    padding: 12px 0
+
+.footer-header
+  grid-area: footer-header
+
+.footer-nav-links > li
+  font-size: .8rem
+  list-style: none
+  padding: 3px 0
+  transition: opacity .2s ease-in-out
+
+.sitemap
+  grid-area: sitemap
+
+.category-links
+  grid-area: category-links
+
+.footer-services
+  display: none
+
+.footer-contact
+  grid-area: footer-contact
+  padding-bottom: 40px
+
+.btn-footer
+  color: $pure-white
+  width: 100%
+
+.footer-base
+  border-top: 1px solid $grey
+  display: flex
+  flex-direction: column
+  grid-area: footer-base
+  text-align: center
+
+  p
+    font-size: $small-font

data/_sass/global/main.sass

@@ -0,0 +1,86 @@
+html
+  font-size: $global-font-size
+  scroll-behavior: smooth
+
+body
+  box-sizing: border-box
+  overflow-x: hidden
+
+a
+  color: inherit
+  text-decoration: none
+
+  &:hover
+    text-decoration: none
+
+// defining z here just makes sure no funny bussiness happens with other layers showing up on top
+nav,
+footer
+  z-index: 1
+
+// Reset some basic elements
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure
+  margin: 0
+  padding: 0
+
+::placeholder
+  color: $black
+  font-family: $primary-font-family
+
+// BUTTONS
+
+button,
+.btn
+  // some 'buttons' are actually hyperlinks styled to look like buttons, for the purpose of readers. So we always class as .btn btn-*
+  border-radius: 5px
+  display: block
+  font-size: 1rem
+  font-weight: $heavy-font
+  letter-spacing: 1px
+  margin: 20px auto
+  padding: 1rem 1.6rem
+  text-align: center
+  text-decoration: none
+  transition: .3s ease-in-out
+  white-space: nowrap
+  width: min-content
+
+button
+  cursor: pointer
+
+.btn-solid
+  border: 0
+
+.btn-outline
+  background-color: transparent
+  border: solid 1px
+
+.btn-yellow
+  background-color: $yellow
+  color: $blue
+
+.btn-pink
+  background-color: $vivid-pink
+  color: $white
+
+.btn-white
+  background-color: $pure-white
+  color: $soft-black
+
+.display-none
+  display: none

data/_sass/global/nav.sass

@@ -0,0 +1,136 @@
+nav
+  align-items: center
+  display: flex
+  height: 10vh
+  justify-content: space-between
+  position: fixed
+  top: 0
+  transition: background-color .6s ease-in
+  white-space: nowrap
+  width: 100%
+  z-index: 9999
+
+.nav-noscroll
+  color: $white
+
+  .burger-line-1,
+  .burger-line-2,
+  .burger-line-3
+    background-color: $white
+
+.nav-noscroll-dark
+  color: $soft-black
+
+  .burger-line-1,
+  .burger-line-2,
+  .burger-line-3
+    background-color: $soft-black
+
+.nav-scrolled
+  background-color: $nav-bg
+  color: $white
+
+  .burger-line-1,
+  .burger-line-2,
+  .burger-line-3
+    background-color: $white
+
+.nav-brand
+  align-items: center
+  display: flex
+  font-size: 1.25rem
+  letter-spacing: 4px
+  padding-left: $container-margin-x
+
+.site-logo
+  height: 1.25rem
+  transition: transform .8s ease
+  width: 6px
+
+.nav-brand-text
+  fill: $pure-white
+  padding: 0
+
+.nav-brand-circle
+  fill: $vivid-pink
+
+.nav-menu
+  background-color: $nav-bg
+  border-bottom-left-radius: 80px
+  font-size: 1.3rem
+  height: 90vh
+  list-style: none
+  margin: 0
+  padding: 10vh 0 0 5vw
+  position: absolute
+  right: 0
+  top: 0
+  // transition for the whole slider
+  transform: translateX(100%)
+  transition: transform .4s ease-in
+  width: 95vw
+  z-index: -1
+
+.nav-socials
+  display: none
+
+.nav-active
+  // we toggle this class in mobile-nav-slider.js on burger click
+  // ensure links are always white since our active bg color is dark
+  color: $white
+  transform: translateX(0%)
+
+.nav-link
+  margin: 6vh 15vw
+  opacity: 0
+
+.mob-socials
+  margin-right: 0
+
+.burger
+  cursor: pointer
+  display: block
+  padding-right: $container-margin-x
+
+.burger-line-1,
+.burger-line-2,
+.burger-line-3
+  height: 1px
+  margin: 7px
+  width: 25px
+
+.burger-line-1
+  transition: width .6s ease-in-out
+
+.burger-line-2
+  transition: width .3s ease-in-out
+  // delay on closing
+  transition-delay: .3s
+
+.burger-active
+
+  .burger-line-1,
+  .burger-line-2,
+  .burger-line-3
+    background-color: $white
+
+  .burger-line-1
+    width: 8px
+    // reduce by 17 px
+
+  .burger-line-2
+    // no delay on opening
+    transition-delay: 0s
+    width: 17px
+    // reduce by 8 px
+
+// animation for the links as the slider opens
+@keyframes navLinksFade
+  // the timings for this are set in mobile-nav-slider.js
+  from
+    opacity: 0
+    transform: translateY(20px)
+
+  to
+    opacity: 1
+    transform: translateY(0)

data/_sass/global/structure.sass

@@ -0,0 +1,18 @@
+// Overall scaffolding and display manipulation
+.global-container
+  margin: 0
+  padding: $container-margin-768
+
+.global-masthead
+  // falback
+  background-color: $vivid-pink
+  color: $white
+  min-height: 40vh
+  padding: 10vh 5vw 0
+
+.spacer
+  background-color: inherit
+  min-height: 20vh
+
+.display-desktop-only
+  display: none

data/_sass/global/typography.sass

@@ -0,0 +1,52 @@
+// Global typography styles
+
+body
+  font-family: $primary-font-family , Fallback, sans-serif
+  font-size: $global-font-size
+  letter-spacing: $global-letter-spacing
+
+h1
+  font-size: 1.9rem
+  font-weight: $extra-light-font
+  letter-spacing: 2px
+  line-height: 3rem
+  padding: 1em 0
+  text-transform: uppercase
+
+h2
+  font-size: 1.4rem
+  padding: 1rem 0
+
+h3
+  font-size: 1.3rem
+  padding: 1rem 0
+
+h4
+  font-size: 1rem
+  padding: 1rem 0
+
+h5
+  padding: 1rem 0
+
+h6
+  padding: 1rem 0
+
+p
+  font-size: 1rem
+  padding: 1rem 0
+
+a,
+p,
+h2,
+h3,
+h4,
+h5,
+h6,
+li
+  font-weight: $light-font
+
+.h-light
+  color: $soft-white
+
+.center-text
+  text-align: center

data/_sass/landing.sass

@@ -0,0 +1,77 @@
+.landing-wraper
+  // fallback
+  background-color: $blue
+  background-image: url($baseurl + 'assets/img/content/aboutme_small.png'), linear-gradient(to bottom right, $vivid-blue , $blue)
+  background-position: right
+  background-repeat: no-repeat
+  background-size: auto 100vh
+  height: 100vh
+  max-height: 100vh
+
+.landing-content
+  padding: 30vh 10vw 0
+
+.landing-page-sub-title
+  display: inline
+  padding-right: 5px
+
+.btn-landing
+  display: flex
+  justify-content: space-between
+  margin: 4rem 2rem
+  width: 380px
+
+  .btn-outline
+    color: $vivid-pink
+
+@media screen and ( min-width: 376px )
+  .landing-wraper
+    background-image: url($baseurl + 'assets/img/content/aboutme_large.png'), linear-gradient(to bottom right, $vivid-blue , $blue)
+
+@media screen and ( max-width: 767px )
+  // display on ipad but not phone
+  .landing-page-sub-title
+    display: none
+
+@media screen and ( max-width: 768px )
+  .btn-landing
+    display: none
+
+  .landing-content
+    padding: 20vh 5vw 0
+
+  .mouse
+    animation: intro 1s
+    border: 1px solid $soft-white
+    border-radius: 11px
+    height: 40px
+    left: 5vw
+    position: absolute
+    top: 75vh
+    width: 20px
+
+  .scroll
+    animation: finger 2.5s infinite
+    background: $vivd-yellow
+    border-radius: 4px
+    display: block
+    height: 5px
+    margin: 30px auto
+    width: 4px
+
+  @keyframes intro
+    from
+      opacity: 0
+      transform: translateY(40px)
+
+    to
+      opacity: 1
+      transform: translateY(0)
+
+  @keyframes finger
+    from
+      opacity: 0
+
+    to
+      opacity: 1
+      transform: translateY(-20px)