emory-libraries/dlp-selfdeposit

View on GitHub
app/assets/stylesheets/scss/footer.scss

Summary

Maintainability
Test Coverage
@import "colors.scss";

footer {
  display: grid;
  background-color: $dark-blue;
  color: $light-blue;
  margin-top: 5rem;
  grid-template-columns: repeat(2, 1fr) min-content repeat(2, 1fr);
  grid-row-gap: 0.9375rem;
  grid-column-gap: 1.875rem;
  padding: 2.5rem calc((100vw - 1250px) / 2) 2.5rem calc((100vw - 1250px) / 2);
  grid-row-gap: 0.9375rem;
  grid-column-gap: 1.875rem;

  .logo {
    grid-column: 3;
    height: 168.567px;
    width: 145px;
    max-width: 155px;
    grid-row: 1;
    margin-top: -2.5rem;
    display: flex;
    justify-content: space-around;
    svg {
      width: 100%;
      fill: $white;
    }
    svg #badge-bg {
      opacity: 1 !important;
      fill: $dark-blue;
    }
  }

  a.logo-badge {
    grid-area: logo;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: -2.5rem;
  }

  div.footer-list {
    grid-row: 1;
    display: flex;
    justify-content: space-around;
  }

  ul {
    list-style-type: none;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;
    padding: 0;
  }

  a.nav-link {
    text-decoration: none;
    color: $light-blue;

    &:hover {
      color: $alt-bright-blue;
      text-decoration: none;
      transition: all 0.25s ease;
    }
  }

  a {
    text-decoration: none;
    color: $light-blue;
  }

  a.link {
    padding: 0.5rem 1rem;
    display: block;

    &:hover {
      color: $alt-bright-blue;
      text-decoration: none;
      transition: all 0.25s ease;
    }
  }

  div.footer-placeholder {
    height: 100px;
    grid-row: 2;
  }

  div.footer-version {
    margin-top: 3.125rem;
    grid-row: 2;
    grid-column: 1 / span 5;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;

    p {
      margin-bottom: 0.2rem;
    }
  }

  div.footer-copyright {
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;
    grid-row: 3;
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
  }

  .copyright-signature {
    display: flex;
    justify-content: center;
    margin: 1.5625rem 1rem;
  }

  a.copyright-policy {
    margin-left: 0.625rem;
    color: $light-blue;
    text-decoration: underline;

    &:hover {
      color: $alt-bright-blue;
      transition: all 0.25s ease;
    }
  }
}