_theme_nav.sass

$nav-height: 60px
$nav-color: rgba(255, 255, 255, 0.95)
$nav-font-color: rgba(255, 255, 255, 0.75)
$nav-font: "Roboto Slab"
$nav-font-size: $base-font-size / 1.5
$nav-text-transform: lowercase

body.use-certbot
  nav.main-nav ul li:nth-of-type(2)
    a
      color: #000

body.about
  nav.main-nav ul li:nth-of-type(3)
    a
      color: #000

body.faq
  nav.main-nav ul li:nth-of-type(4)
    a
      color: #000

body.wy-body-for-nav
  nav.main-nav ul li:nth-of-type(5)
    a
      color: #000

body.support
  nav.main-nav ul li:nth-of-type(6)
    a
      color: #000

nav.main-nav body.source
  ul li:nth-of-type(2)
    a
      color: #000

nav.main-nav
  display: none !important
  +susy-breakpoint($md)
    display: block !important

  img
    position: absolute
    display: block
    width: 55px
    top: 10px
    left: 0
  a
    color: inherit
    display: inline-block
    text-decoration: none
    &:hover
      text-decoration: none
    &:visited
      color: inherit
  z-index: 100000000000
  position: relative
  top: 0
  left: 0
  width: 100%
  display: block
  margin: 0 auto
  text-align: center
  height: $nav-height
  background-color: $nav-color
  ul
    padding: 0
    +container(40em)
    +susy-breakpoint($md)
      +container(60em)

    +susy-breakpoint($lg)
      +container($lg)
      letter-spacing: 0.07em
      font-size: 0.9em

    display: flex
    justify-content: space-around
    margin-bottom: 0 !important
    list-style-type: none
    line-height: $nav-height
    font-size: 0.75em
    letter-spacing: 0em
    li
      display: none
      &:nth-of-type(1)
        // logo
        display: inline-block
        +susy-breakpoint($md)
          display: none
      +susy-breakpoint($md)
        display: inline-block
      &:last-of-type // hamburger
        display: none

      text-align: center
      text-transform: $nav-text-transform
      font-family: $nav-font
      font-size: $nav-font-size
      color: rgba(0, 0, 0, 0.5)
      +susy-breakpoint($md)
        font-size: $base-font-size / 1.15



      font-weight: 400
      &.donate
        text-transform: none
        color: $certbot-red
        display: inline-block
        position: absolute
        top: 0
        left: 0
        text-align: center
        width: 100%
        font-size: 1.5em
        +susy-breakpoint($md)
          position: relative
          width: auto
          font-size: inherit
          +susy-breakpoint($md)
            font-size: $base-font-size / 1.15
        &:hover
          &:after
            position: absolute
            content: '❤'
            margin-left: 5px

      &.active
        color: rgba(0, 0, 0, 0.95)
      &:hover
        &:not(.donate)
          color: rgba(0, 0, 0, 0.95)


nav.main-nav.fixed
  position: fixed

+susy-breakpoint($md)
  \:target
    &:before
      content: ""
      display: block
      height: $nav-height
      margin-top: -$nav-height

nav.wy-nav-top
  a
    color: $certbot-red !important