funky/_sass/sassline-base/_layouts.scss

// Layouts
// ---------------------------------------

// Container.
.section {
  @include clearfix;

  margin: 0 auto;
  position: relative;
  width: 94%;

  @include breakpoint(break-3) {
    @include maxwidth(3);
  }

  @include breakpoint(break-4) {
    @include maxwidth(4);
  }
}

// Single column (based on measure for typeset content).
.single-measure {
  @include measure(all);

  margin: 0 auto;
}

// Base column styles.
.column {
  @include measure(0);

  margin: 0 auto;
  width: 100%;

  @include breakpoint(break-1) {
    float: left;
    margin: initial;
    max-width: initial;
    padding-left: map-get($gutterwidths, small);
    padding-right: map-get($gutterwidths, small);
  }

  @include breakpoint(break-3) {
    padding-left: map-get($gutterwidths, medium);
    padding-right: map-get($gutterwidths, medium);
  }
}

// Two columns.
.column--duo {

  @include breakpoint(break-1) {
    width: 50%;

    &:nth-of-type(2n+3) {
      clear: left;
    }

    &:nth-of-type(n+3) {
      margin-top: 3rem;
    }
  }
}

// Three columns.
.column--trio {

  @include breakpoint(break-1) {
    width: 33.333%;

    &:nth-of-type(3n+4) {
      clear: left;
    }

    &:nth-of-type(n+4) {
      margin-top: 3rem;
    }
  }
}

// Four columns. Two at smaller breakpoints.
.column--quad {

  @include breakpoint(break-1) {
    width: 50%;
  }

  @include breakpoint(break-2) {
    width: 25%;
  }
}

// Two column layout with a main text column and a sidebar.

// Main column.
.column--main {

  @include breakpoint(break-1) {
    @include ideal-measure(1, small);
  }

  @include breakpoint(break-2) {
    @include ideal-measure(2, small);
  }

  @include breakpoint(break-3) {
    @include ideal-measure(3, medium);
  }

  @include breakpoint(break-4) {
    @include ideal-measure(4, medium);
  }
}

// Sidebar.
.column--sidebar {

  @include breakpoint(break-1) {
    @include ideal-measure(1, small, false);

    padding-right: map-get($gutterwidths, medium);
  }

  @include breakpoint(break-2) {
    @include ideal-measure(2, small, false);
  }

  @include breakpoint(break-3) {
    @include ideal-measure(3, medium, false);

    padding-right: map-get($gutterwidths, large);
  }

  @include breakpoint(break-4) {
    @include ideal-measure(4, medium, false);
  }
}

// If sidebar on the right side.
.column--main + .column--sidebar {
  @include breakpoint(break-1) {
    padding-left: map-get($gutterwidths, medium);
    padding-right: map-get($gutterwidths, small);
  }

  @include breakpoint(break-3) {
    padding-left: map-get($gutterwidths, large);
    padding-right: map-get($gutterwidths, medium);
  }
}

// Set the main text one level down in the modular scale for narrower columns.
.column--trio,
.column--quad,
.column--sidebar {

  @include breakpoint(break-3) {

    p {
      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 3);
    }

    li {
      @include fontsize(eta, 3);
    }
  }

  @include breakpoint(break-4) {

    p {
      @include sassline($fontsize: eta, $font: $bodytype, $lineheight: 2, $below: 2, $breakpoint: 4);
    }

    li {
      @include fontsize(eta, 4);
    }
  }
}

// Main column on the right with inline sidenotes.
// The sidenotes will move out the column into the sidebar position aligned to the baseline.
.column--right {

  @include breakpoint(break-1) {
    @include ideal-measure(1, small);
    @include ideal-measure(1, small, false, margin-left);
  }

  @include breakpoint(break-2) {
    @include ideal-measure(2, small);
    @include ideal-measure(2, small, false, margin-left);
  }

  @include breakpoint(break-3) {
    @include ideal-measure(3, medium);
    @include ideal-measure(3, medium, false, margin-left);
  }

  @include breakpoint(break-4) {
    @include ideal-measure(4, medium);
    @include ideal-measure(4, medium, false, margin-left);
  }

  .sidenote {

    @include breakpoint(break-1) {
      @include ideal-measure(1, small, false);

      left: 0;
      padding-left: map-get($gutterwidths, small);
      padding-right: map-get($gutterwidths, medium);
      position: absolute;
    }

    @include breakpoint(break-2) {
      @include ideal-measure(2, small, false);
    }

    @include breakpoint(break-3) {
      @include ideal-measure(3, medium, false);

      padding-right: map-get($gutterwidths, large);
    }

    @include breakpoint(break-4) {
      @include ideal-measure(4, medium, false);

      padding-left: map-get($gutterwidths, medium);
    }
  }
}

// Main column on the left with inline sidenotes.
.column--left {

  @include breakpoint(break-1) {
    @include ideal-measure(1, small);
  }

  @include breakpoint(break-2) {
    @include ideal-measure(2, small);
  }

  @include breakpoint(break-3) {
    @include ideal-measure(3, medium);
  }

  @include breakpoint(break-4) {
    @include ideal-measure(4, medium);
  }

  .sidenote {

    @include breakpoint(break-1) {
      @include ideal-measure(1, small, false);
      @include ideal-measure(1, small, true, left);

      padding-left: map-get($gutterwidths, medium);
      padding-right: map-get($gutterwidths, small);
      position: absolute;
    }

    @include breakpoint(break-2) {
      @include ideal-measure(2, small, false);
      @include ideal-measure(2, small, true, left);
    }

    @include breakpoint(break-3) {
      @include ideal-measure(3, medium, false);
      @include ideal-measure(3, medium, true, left);

      padding-left: map-get($gutterwidths, large);
    }

    @include breakpoint(break-4) {
      @include ideal-measure(4, medium, false);
      @include ideal-measure(4, medium, true, left);

      padding-right: map-get($gutterwidths, medium);
    }
  }
}