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

@charset "UTF-8";

// Global Footer Styles
footer {
  width: 100%;
  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#row div {
      // no more room at the inn for panda :(
      &#panda {
        display: none;
      }

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

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