Contents

// 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

.navbar
  align-items: center
  display: flex
  height: $mobile-navbar-height
  justify-content: space-between
  position: fixed
  top: 0
  white-space: nowrap
  width: 100%
  z-index: 99

  .social-media
    padding-left: 4rem
  .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)


.nav-brand
  width: 30vw
  padding-left: 3vw
  z-index: 100

  .site__logo *
    transition: 2s ease-in

.nav-list
  border-bottom-left-radius: 80px
  font-size: 1.3rem
  height: $nav-list-height
  height: calc( var(--vh, 1vh) * 85 )
  list-style: none
  margin: 0
  margin-block-start: 0
  padding: 0
  padding-top: 15vh
  position: absolute
  right: 0
  top: 0
  transform: translateX(100%)
  transition: $nav-slider-transition
  width: 100vw
  box-sizing: content-box

.nav-link
  margin: 6vh 15vw
  opacity: 0
  text-decoration: none
  display: flex

.nav-group-content .nav-link
  font-size: 1.7rem
  z-index: 100

.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,
    .site__logo--legvert,
    .site__logo--leg45,
    .site__logo--g,
    .site__logo--a,
    .site__logo__i *,
    .site__logo--t,
    .site__logo--Q
      transition: 1.2s ease-in

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
slow-steps-0.2.1	_sass/navigation/global.sass
slow-steps-0.2.0	_sass/navigation/global.sass
slow-steps-0.1.13	_sass/navigation/global.sass