infima/styles/components/footer.css

A UI framework for content-centric websites.

:root {
  --ifm-footer-background-color: var(--ifm-color-emphasis-100);
  --ifm-footer-color: inherit;
  --ifm-footer-link-color: var(--ifm-color-emphasis-700);
  --ifm-footer-link-hover-color: var(--ifm-color-primary);
  --ifm-footer-link-horizontal-spacing: 0.5rem;
  --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
  --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
  --ifm-footer-title-color: inherit;
}

.footer {
  background-color: var(--ifm-footer-background-color);
  color: var(--ifm-footer-color);
  padding: var(--ifm-footer-padding-vertical)
    var(--ifm-footer-padding-horizontal);
  width: 100%;

  &.footer--dark {
    --ifm-footer-background-color: #303846;
    --ifm-footer-color: var(--ifm-footer-link-color);
    --ifm-footer-link-color: var(--ifm-color-secondary);
    --ifm-footer-title-color: var(--ifm-color-white);

    background-color: var(--ifm-footer-background-color); // @compat
    color: var(--ifm-footer-color); // @compat

    // @compat
    & .footer__link-item {
      color: var(--ifm-footer-link-color); // @compat
    }

    // @compat
    & .footer__title {
      color: var(--ifm-footer-title-color); // @compat
    }
  }

  & .footer__links {
    margin-bottom: 1rem;
  }

  & .footer__link-item {
    color: var(--ifm-footer-link-color);
    line-height: 2;

    &:hover {
      color: var(--ifm-footer-link-hover-color);
    }
  }

  & .footer__link-separator {
    margin-left: var(--ifm-footer-link-horizontal-spacing);
    margin-right: var(--ifm-footer-link-horizontal-spacing);
  }

  & .footer__logo {
    margin-top: 1rem;
    max-width: 10rem;
  }

  & .footer__title {
    color: var(--ifm-footer-title-color);
  }

  & .footer__item {
    margin-top: 0;
  }

  & .footer__items {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
  }

  @media (--ifm-narrow-window) {
    --ifm-footer-padding-horizontal: 0;

    padding: var(--ifm-footer-padding-vertical)
      var(--ifm-footer-padding-horizontal); // @compat

    & .footer__link-separator {
      display: none;
    }

    & .footer__col {
      margin-bottom: calc(var(--ifm-spacing-vertical) * 3);
    }

    & .footer__link-item {
      display: block;
    }
  }
}