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.5em 2.5em;
  box-sizing: border-box;
  color: $color-medium;
  border-top: 1px solid $color-light;

  a {
    color: inherit;
  }

  div#row {
    width: 100%;
    max-width: 980px;
    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;
      }
    }

    &#panda {
      width: 20%;
      text-align: center;
      font-size: 1.7em;
      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.5em 0 1.5em;

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

      &#copyright,
      &#poweredby {
        line-height: 1.9;
        width: 50%;
      }

      &#poweredby {
        a#hugo::after {
          content: "\A";
          white-space: pre;
        }
      }
    }
  }
}