EOL/ggi

// Layout: layout of major content panels and global header and footer
$base-font-size: 12px;
$base-line-height: 18px;
$ggi-breakpoint-medium: 50em;
$ggi-breakpoint-head-split: 65em;
$ggi-breakpoint-large: 80em;
$ggi-breakpoint-larger: 90em;
$ggi-breakpoint-huge: 100em;
$susy: (
  // NOTE - we do our own padding; tighter.
  gutters: 0,
  // TODO - remove this before production:
  debug: (
    image: hide,
    color: blue
  )
);
$ggi-footer-rhythm: 5;

$ggi-colors: (
  darkest: #222,
  darker: #444,
  dark: #666,
  mid: #888,
  light: #ccc,
  lighter: #e8e8e8,
  lightest: #f5f5f5,
  bright: #35a4c9,
  poor: #cc0000,
  average: #247996,
  good: green
);

$ggi-font-weight: (
  light: 300,
  normal: 400,
  bold: 700
);

@include establish-baseline;
@include border-box-sizing;

@include breakpoint($ggi-breakpoint-medium) {
  @include establish-baseline(16px);
}

@include breakpoint($ggi-breakpoint-large) {
  @include establish-baseline(19px);
}

/* DEBUGGING ONLY ... the border-radius on the body tells you how wide it 'thinks' the page is. */
body {
  border-radius: 0;
  @include breakpoint($ggi-breakpoint-medium) {
    border-radius: 60px;
  }
  @include breakpoint($ggi-breakpoint-head-split) {
    border-radius: 70px;
  }
  @include breakpoint($ggi-breakpoint-large) {
    border-radius: 80px;
  }
  @include breakpoint($ggi-breakpoint-larger) {
    border-radius: 90px;
  }
  @include breakpoint($ggi-breakpoint-huge) {
    border-radius: 110px;
  }
}

html, body {
  height: 100%; // I don't think this is doing anything.
}

// STOP GROWING:
img {
  max-width: 100%;
}

.page {
  position: relative;
  min-height: 100%;
  @include susy-breakpoint($ggi-breakpoint-large, 2) {
    @include padding-trailer($ggi-footer-rhythm);
  }
}

.page__lane {
  @include container;
  @include break;
  padding: rhythm(0.65);
  position: relative;
}

.page__bucket {
  position: relative;
  max-width: 120em;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}

header.page__header {
  @extend .page__lane;
}

.page__content {
  @extend .page__lane;
  padding: 0;
}

.site-navigation {
  padding-top: rhythm(0.75);
  width: 100%;
  margin: auto auto;
  text-align: center;
}

.site-title {
  text-align: center;
  small {
    color: map-get($ggi-colors, light);
  }
}

@include susy-breakpoint($ggi-breakpoint-head-split, 2) {
  .site-title {
    @include span(2 at 1 of 3);
    margin: 0;
    text-align: left;
  }
  .site-navigation {
    @include span(1 at 3 of 3);
    text-align: right;
  }
}

.browser {
  padding: rhythm(0.75);
  @include susy-breakpoint($ggi-breakpoint-large, 3) {
    @include span(2 at 1 of 7);
  }
}

.taxon {
  margin-bottom: 0;
  padding-top: rhythm(1);
  .taxon__information {
    margin-bottom: rhythm(2);
    img {
      width: 30em;
    }
  }
  @include susy-breakpoint($ggi-breakpoint-large, 3) {
    border: 2px solid black;
    border-top: 0; // Looks weird.
    min-height: rhythm(28);
    padding-left: rhythm(2);
    @include span(5 at 3 of 7);
    @include nested(2) {
      .taxon__information {
        @include span(3 at 1 of 7);
        img {
          max-width: 100%;
        }
      }
      .taxon__assessment {
        margin-bottom: rhythm(3);
        @include span(4 at 4 of 7);
      }
    }
  }
}

footer.page__footer {
  @extend .page__lane;
  @include susy-breakpoint($ggi-breakpoint-medium, 1) {
    position: absolute;
    top: 100%;
    width: 100%;
    min-height: rhythm($ggi-footer-rhythm);
    margin-top: -1 * rhythm($ggi-footer-rhythm + 0.5);
  }
}