desktop-example.scss

@import "bourbon/bourbon";
@import "variables";
@import "neat/neat";
@import "typography";

section {
  @include outer-container;
  text-align: center;
  margin-bottom: 3em;

  & > code, code.block {
    display: block;
  }

  div {
    height: $body-line-height*3;
    line-height: $body-line-height;
    text-align: left;
    padding: 1em;
  }

  &.zero {
    div {
      @include span-columns(6);
      height: 20em;
    }
  }

  &.first {
    div#alpha {
      @include span-columns(1);
    }

    div#beta {
      @include span-columns(11);
    }

    div#gamma {
      @include span-columns(2);
    }

    div#delta {
      @include span-columns(10);
    }

    div#epsilon {
      @include span-columns(3);
    }

    div#zeta {
      @include span-columns(9);
    }

    div#eta {
      @include span-columns(4);
    }

    div#theta {
      @include span-columns(8);
    }

    div#iota {
      @include span-columns(5);
    }

    div#kappa {
      @include span-columns(7);
    }

    div#lambda {
      @include span-columns(6);
    }

    div#mu {
      @include span-columns(6);
    }

    div#beta, div#delta, div#zeta, div#theta, div#kappa, div#mu {
      @include omega;
    }
  }

  &.second {
    div {
      height: 20em;

      &#alpha {
        @include span-columns(4);
      }

      &#beta {
        padding: 0;
        line-height: $body-line-height*2;
        text-align: center;
        @include span-columns(8);

        aside {
          @include span-columns(4 of 8);
          border: none;
          height: 84%;
          padding: 1em;
        }

        article {
          @include span-columns(4 of 8);
          height: 84%;
          padding: 1em;
        }
      }
    }
  }

  &.third {
    div#dummy {
      height: 5.5em;
      text-align: center;
      border-bottom: 0;
    }

    div#alpha {
      @include span-columns(12);
      @include row(table);
      padding: 0;

      aside {
        @include span-columns(4, table);
        @include pad();
      }

      article {
        height: 20em;
        @include span-columns(8, table);
        @include pad();
      }
    }
  }

  &.fourth {
    div.one-column {
      @include span-columns(1);

      &.last {
        @include omega();
      }
    }

    div#alpha {
      @include span-columns(6);
      @include shift(3);
      height: 20em;
      text-align: center;
    }
  }

  &.fifth {
    & > code {
      margin-bottom: -1.5em;
    }

    div.box {
      font-size: 0.78em;
      margin-top: 2em;
      @include span-columns(3);
      @include nth-omega(4n);
    }
  }
}

div.code {
  @include outer-container();
  text-align: center;
  padding-bottom: 0;
}