footer.sass

.footer
  background: #fff
  bottom: 0
  box-shadow: 0 0 1rem rgba(#000, 0.2)
  left: 0
  position: fixed
  right: 0

.footer-title
  align-items: center
  color: $text-light
  display: none
  line-height: 1.2
  padding: 0 1rem
  small
    font-size: 0.8em
    margin-left: 0.5em
  a
    border-radius: 2px
    margin-left: -4px
    padding: 2px 4px
    &:hover
      background: $alpha
      color: $alpha-invert

.footer-facebook,
.footer-github
  align-items: center
  display: none
  flex-shrink: 0
  justify-content: flex-end
  iframe
    height: 20px

.footer-share
  align-items: center
  display: flex
  position: relative

.footer-share--contribute
  display: none

.footer-share-label
  margin-right: 0.25rem

.footer-share-button
  align-items: center
  display: flex
  height: 2rem
  justify-content: center
  position: relative
  width: 2rem
  &:before
    +overlay
    background: $background
    border-radius: 5px
    content: ""
    display: block
    height: 100%
    opacity: 0
    transform: scale(1.2)
    transform-origin: center center
    transition-duration: $speed
    transition-property: opacity, transform
    width: 100%
  svg
    height: 1rem
    position: relative
    width: 1rem
  &:hover:before
    opacity: 1
    transform: scale(1)

.footer-share-nav
  align-items: center
  bottom: 0
  display: flex
  font-weight: $weight-bold
  padding: 0 1rem
  position: absolute
  right: 0
  top: 0

+mobile
  .footer-share--social
    padding: 0.5rem 1rem

+desktop
  .footer
    align-items: stretch
    display: flex
    font-size: 0.8rem
    height: 3rem
    left: $menu-width
  .footer-share,
  .footer-facebook,
  .footer-github
    display: flex
  .footer-title
    display: none
    padding: 0.25rem 1rem
  .footer-share
    border-left: 1px solid $border
    flex-grow: 1
    flex-shrink: 1
    padding: 0.25rem 1rem
  .footer-share-nav
    display: none

+from(1000px)
  .footer-title
    display: flex