jarv.is/assets/sass/components/_footer.scss

@charset "UTF-8";

// Global Footer Styles
footer {
  width: 100%;
  letter-spacing: -0.01em;
  line-height: 1.7;
  padding: 1.25em 1.75em;
  box-sizing: border-box;
  color: $color-medium;
  border-top: 1px solid $color-light;

  a {
    color: inherit;
  }

  div#row {
    width: 100%;
    max-width: 978px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  div {
    &#copyright,
    &#poweredby {
      width: 40%;
      font-size: 0.85em;
      line-height: 2;
    }

    &#copyright {
      text-align: left;
    }

    &#poweredby {
      text-align: right;

      a#source {
        border-bottom: 1px solid $color-light;
        padding-bottom: 2px;
      }
    }

    &#panda {
      width: 20%;
      text-align: center;
      font-size: 1.6em;
      line-height: 1;

      a {
        display: inline-block;
        transition: transform 0.2s ease-in-out;

        &:hover {
          transform: scale(1.6) rotate(10deg);
        }
      }
    }
  }
}

// Responsive
@mixin responsive--footer() {
  footer {
    padding: 1em 1.25em 0 1.25em;

    div#row {
      display: block;

      // no more room at the inn for panda :(
      div#panda {
        display: none;
      }

      div#copyright,
      div#poweredby {
        width: 100%;
        text-align: left;
        line-height: 2;
      }
    }
  }
}