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;

  @include themed() {
    color: t(color-medium);
    border-top: 1px solid t(color-kinda-light);
    background-color: t(color-super-duper-light);
  }

  a {
    @include themed() {
      color: t(color-medium);
    }
  }

  div#row {
    width: 100%;
    max-width: $max-width;
    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 {
        padding-bottom: 2px;

        @include themed() {
          border-bottom: 1px solid t(color-light);
        }
      }
    }

    &#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;
      }
    }
  }
}