SCSS for isotope project.

styles-no-padding

@mixin breakpoint($point) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { @content; }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1650px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == infant-bear {
    @media (max-width: 950px) { @content; }
  }
}

@mixin tile-width-break($point, $size, $ratio) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == mama-bear {
    @media (max-width: 1650px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px)  { width: calc( #{$size} * #{$ratio} ) }
  }
}


@mixin tile-height-break($point, $size, $ratio) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == mama-bear {
    @media (max-width: 1600px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px)  { height: calc( #{$size} * #{$ratio} ) }
  }
}



@mixin reset-box-model {
  margin: 0;
  padding: 0;
  border: 0;
}

@mixin reset-font {
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

@mixin reset-body {
  line-height: 1;
}

@mixin reset-list-style {
  list-style: none;
}

@mixin reset-table {
  border-collapse: collapse;
  border-spacing: 0;
}

@mixin reset-table-cell {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

@mixin reset-quotation {
  quotes: none;
  &:before, &:after {
    content: "";
    content: none;
  }
}

@mixin reset-image-anchor-border {
  border: none;
}

@mixin reset-html5 {
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
  }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  @include reset-box-model;
  @include reset-font; }
// Unlike Eric's original reset, we reset the html element to be compatible
// with the vertical rhythm mixins.
html {
  @include reset-body; }
ol, ul {
  @include reset-list-style; }
table {
  @include reset-table; }
caption, th, td {
  @include reset-table-cell; }
q, blockquote {
  @include reset-quotation; }
a img {
  @include reset-image-anchor-border; }
@include reset-html5;


* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-weight: 400;
}

html {
  height:100%;
  min-height:100%;
  font-size: 100%;
}

$gpa-bear:  2100px;
$papa-bear: 1650px;
$mama-bear: 1250px;
$baby-bear: 950px;

$eight-ratio: 8/12;
$six-ratio:   6/12;
$four-ratio:  4/12;
$two-ratio:   2/12;

$tile-padding: 0px;
$tile-padding-dub: $tile-padding * 2;

#landing-grid {
  margin: 0px auto;

  @include breakpoint(gpa-bear)    { width: $gpa-bear }
  @include breakpoint(papa-bear)   { width: $papa-bear }
  @include breakpoint(mama-bear)   { width: $mama-bear }
  @include breakpoint(baby-bear)   { width: $baby-bear }
  @include breakpoint(infant-bear) { width: 100% }
}

.grid-sizer {
  @include tile-width-break(gpa-bear,  $gpa-bear,  $two-ratio);
  @include tile-width-break(papa-bear, $papa-bear, $two-ratio);
  @include tile-width-break(mama-bear, $mama-bear, $two-ratio);
  @include tile-width-break(baby-bear, $baby-bear, $two-ratio);
}

.landing-tile {
  background: transparent;
  margin: 0;
  padding: $tile-padding;
  position: relative;

  span {
    padding: 10%;
    position: absolute;
    text-align: center;
  }

  img {
    width: 100%;
    display: block;
  }

  &.width-two {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $two-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $two-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $two-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $two-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-four {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $four-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $four-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $four-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $four-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-six {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $six-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $six-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $six-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $six-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-eight {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $eight-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $eight-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $eight-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $eight-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.height-two {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $two-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $two-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $two-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $two-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-four {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $four-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $four-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $four-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $four-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-six {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $six-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $six-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $six-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $six-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-eight {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $eight-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $eight-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $eight-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $eight-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  .inner {
    position: relative;

    .content {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: #fff;
      padding: 5% 6%;
      height: 100%;
    }
  }

}

styles-padding

@mixin breakpoint($point) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { @content; }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1650px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == infant-bear {
    @media (max-width: 950px) { @content; }
  }
}

@mixin tile-width-break($point, $size, $ratio) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == mama-bear {
    @media (max-width: 1650px) { width: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px)  { width: calc( #{$size} * #{$ratio} ) }
  }
}


@mixin tile-height-break($point, $size, $ratio) {
  @if $point == gpa-bear {
    @media (max-width: 2900px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @if $point == papa-bear {
    @media (max-width: 2100px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == mama-bear {
    @media (max-width: 1600px) { height: calc( #{$size} * #{$ratio} ) }
  }
  @else if $point == baby-bear {
    @media (max-width: 1250px)  { height: calc( #{$size} * #{$ratio} ) }
  }
}



@mixin reset-box-model {
  margin: 0;
  padding: 0;
  border: 0;
}

@mixin reset-font {
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

@mixin reset-body {
  line-height: 1;
}

@mixin reset-list-style {
  list-style: none;
}

@mixin reset-table {
  border-collapse: collapse;
  border-spacing: 0;
}

@mixin reset-table-cell {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

@mixin reset-quotation {
  quotes: none;
  &:before, &:after {
    content: "";
    content: none;
  }
}

@mixin reset-image-anchor-border {
  border: none;
}

@mixin reset-html5 {
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
  }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  @include reset-box-model;
  @include reset-font; }
// Unlike Eric's original reset, we reset the html element to be compatible
// with the vertical rhythm mixins.
html {
  @include reset-body; }
ol, ul {
  @include reset-list-style; }
table {
  @include reset-table; }
caption, th, td {
  @include reset-table-cell; }
q, blockquote {
  @include reset-quotation; }
a img {
  @include reset-image-anchor-border; }
@include reset-html5;


* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html, body {
  color: black;
  font-family: Arial;
  font-size: 16px;
  font-weight: 400;
}

html {
  height:100%;
  min-height:100%;
  font-size: 100%;
}

$gpa-bear:  2100px;
$papa-bear: 1650px;
$mama-bear: 1250px;
$baby-bear: 950px;

$eight-ratio: 8/12;
$six-ratio:   6/12;
$four-ratio:  4/12;
$two-ratio:   2/12;

$tile-padding: 10px;
$tile-padding-dub: $tile-padding * 2;

#landing-grid {
  margin: 0px auto;

  @include breakpoint(gpa-bear)    { width: $gpa-bear }
  @include breakpoint(papa-bear)   { width: $papa-bear }
  @include breakpoint(mama-bear)   { width: $mama-bear }
  @include breakpoint(baby-bear)   { width: $baby-bear }
  @include breakpoint(infant-bear) { width: 100% }
}

.grid-sizer {
  @include tile-width-break(gpa-bear,  $gpa-bear,  $two-ratio);
  @include tile-width-break(papa-bear, $papa-bear, $two-ratio);
  @include tile-width-break(mama-bear, $mama-bear, $two-ratio);
  @include tile-width-break(baby-bear, $baby-bear, $two-ratio);
}

.landing-tile {
  background: transparent;
  margin: 0;
  padding: $tile-padding;
  position: relative;

  span {
    padding: 10%;
    position: absolute;
    text-align: center;
  }

  img {
    width: 100%;
    display: block;
  }

  &.width-two {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $two-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $two-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $two-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $two-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-four {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $four-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $four-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $four-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $four-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-six {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $six-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $six-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $six-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $six-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.width-eight {
    @include tile-width-break(gpa-bear,  $gpa-bear,  $eight-ratio);
    @include tile-width-break(papa-bear, $papa-bear, $eight-ratio);
    @include tile-width-break(mama-bear, $mama-bear, $eight-ratio);
    @include tile-width-break(baby-bear, $baby-bear, $eight-ratio);
    @include breakpoint(infant-bear) { width: 100% }
  }

  &.height-two {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $two-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $two-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $two-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $two-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-four {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $four-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $four-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $four-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $four-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-six {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $six-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $six-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $six-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $six-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  &.height-eight {
    @include tile-height-break(gpa-bear,  $gpa-bear,  $eight-ratio);
    @include tile-height-break(papa-bear, $papa-bear, $eight-ratio);
    @include tile-height-break(mama-bear, $mama-bear, $eight-ratio);
    @include tile-height-break(baby-bear, $baby-bear, $eight-ratio);
    @include breakpoint(infant-bear) { height: auto; }
  }

  .inner {
    position: relative;

    .content {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: #fff;
      padding: 5% 6%;
      height: 100%;
    }
  }

}