infima/styles/layout/grid.css

A UI framework for content-centric websites.

:root {
  --ifm-container-width: 1140px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--ifm-container-width);
  padding-left: var(--ifm-spacing-horizontal);
  padding-right: var(--ifm-spacing-horizontal);
  width: 100%;

  &.container--fluid {
    max-width: inherit;
  }
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: calc(var(--ifm-spacing-horizontal) * -1);
  margin-right: calc(var(--ifm-spacing-horizontal) * -1);

  &.row--no-gutters {
    margin-left: 0;
    margin-right: 0;

    & > .col {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &.row--align-top {
    align-items: flex-start;
  }

  &.row--align-bottom {
    align-items: flex-end;
  }

  &.row--align-center {
    align-items: center;
  }

  &.row--align-stretch {
    align-items: stretch;
  }

  &.row--align-baseline {
    align-items: baseline;
  }

  & .col {
    --ifm-col-width: 100%;

    display: block;
    flex: 1 0;
    margin-left: 0;
    max-width: 100%;
    padding-left: var(--ifm-spacing-horizontal);
    padding-right: var(--ifm-spacing-horizontal);
    width: 100%;

    &[class*='col--'] {
      flex: 0 0 var(--ifm-col-width);
      max-width: var(--ifm-col-width);
    }

    @media (--ifm-narrow-window) {
      // Increase specificity.
      &.col.col {
        --ifm-col-width: 100%;
        flex-basis: var(--ifm-col-width);
        margin-left: 0;

        max-width: var(--ifm-col-width); // @compat
      }
    }

    @for $column from 1 to 12 {
      &.col--$(column) {
        --ifm-col-width: calc($(column) / 12 * 100%);

        flex: 0 0 var(--ifm-col-width); // @compat
        max-width: var(--ifm-col-width); // @compat
      }

      &.col--offset-$(column) {
        margin-left: calc($(column) / 12 * 100%);
      }
    }
  }
}