groups/themes/openstack/sass-extensions/zen-grids/templates/project/_layout.scss

/**
 * @file
 * Layout styles.
 *
 * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
 * right breakpoints to use for your site depend on your content.
 */

.centered {
  @include zen-grid-background();
  padding: {
    top: 1.5em;
    bottom: 1.5em;
  }
  margin: {
    left: auto;
    right: auto;
  }
  max-width: 1111px;
}

/* Set the shared properties for all grid items. */
%grid-item,
.grid-item {
  @include zen-grid-item-base();
}

/* Set the container for our grid items. */
.main {
  @include zen-grid-container();
}

/* Horizontal navigation bar */
@media all and (min-width: 444px) {
  $zen-column-count: 1;
  $navbar-height: 5em;

  .main {
    padding-top: $navbar-height;
  }
  .grid-item__menu {
    @include zen-grid-item(1, 1);
    margin-top: -$navbar-height;
    height: $navbar-height;
  }
}

@media all and (min-width: 444px) and (max-width: 665px) {
  $zen-column-count: 2;

  .centered {
    @include zen-grid-background();
  }
  .grid-item__content {
    @include zen-grid-item(2, 1);
  }
  .grid-item__aside1 {
    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
    @include zen-grid-item(1, 1);
  }
  .grid-item__aside2 {
    @include zen-grid-item(1, 2);
  }
}

@media all and (min-width: 666px) and (max-width: 776px) {
  $zen-column-count: 3;

  .centered {
    @include zen-grid-background();
  }
  .grid-item__content {
    @include zen-grid-item(2, 1);
  }
  .grid-item__aside1 {
    @include zen-grid-item(1, 1, right); // Position from the right
  }
  .grid-item__aside2 {
    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
    @include zen-grid-item(2, 1);
  }
}

@media all and (min-width: 777px) and (max-width: 998px) {
  $zen-column-count: 3;

  .centered {
    @include zen-grid-background();
  }
  .grid-item__content {
    @include zen-grid-item(2, 1);
  }
  .grid-item__aside1 {
    @include zen-grid-item(1, 1, right); // Position from the right
  }
  .grid-item__aside2 {
    @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
    @include zen-grid-item(1, 1, right);
  }
}

@media all and (min-width: 999px) {
  $zen-column-count: 5;

  .centered {
    @include zen-grid-background();
  }
  .grid-item__content {
    @include zen-grid-item(3, 2);
  }
  .grid-item__aside1 {
    @include zen-grid-item(1, 1);
  }
  .grid-item__aside2 {
    @include zen-grid-item(1, 5);
  }
}