TimPietrusky/index.html

## index.html
<body data-max-width="1400" data-auto-extend="true">

  <article data-high="1">
    <section data-cols="2">
      <div class="move--center">
        <img  src="http://timpietrusky.com/img/tim_pietrusky_on_rampage.jpg" alt="" />
      </div>
      <div class="move--center">
        <h1>Tim Pietrusky</h1>
        <p>I'm a Webcraftsman from Frankfurt (Main), Germany and I love the web.</p>
        <p>
          <a href="http://timpietrusky.com" target="_blank">timpietrusky.com</a>
        </p>
      </div>
    </section>
  </article>

<!-- I write -->
  <article data-high="2">
    <section data-cols="1" class="section--alpha">
      <div class="move--left">
        <h2>I write</h2>
      </div>
    </section>

     <section data-cols="2">
      <div>
        <h3>for css-tricks.com</h3>
        <ul class="list--alpha">
          <li><a href="http://css-tricks.com/responsive-menu-concepts/">Responsive Menu Concepts</a></li>
          <li><a href="http://css-tricks.com/five-use-cases-for-icon-fonts/">5 Use Cases for Icon Fonts</a></li>
        </ul>
      </div>
      <div>
        <h3>on timpietrusky.com</h3>
        <ul class="list--alpha">
          <li><a href="http://timpietrusky.com/advanced-checkbox-hack/">Advanced Checkbox Hack</a></li>
          <li><a href="http://timpietrusky.com/tims-dev-diary-march-2013">Tim's Dev Diary: March 2013</a></li>
          <li><a href="http://timpietrusky.com/svg-how-to-create-and-use-vector-graphics-on-the-web">SVG - How to create & use vector graphics on the web</a></li>
          <li><a href="http://timpietrusky.com/breaking-bad-logo">Breaking Bad Logo</a></li>
        </ul>
      </div>
     </section>
  </article>

<!--  Everything I do is open source -->
  <article data-high="2">
    <section data-cols="1" class="section--beta">
      <div class="move--right">
        <h2>Everything I do is open source</h2>
      </div>
    </section>

     <section data-cols="2">
      <div>
        <h3>Experiments on CodePen</h3>
        <ul class="list--alpha list--alpha__mod">
          <li><a href="http://codepen.io/TimPietrusky/pen/gqlhA">Custom Dropdown</a></li>
          <li><a href="http://codepen.io/TimPietrusky/pen/guAGh">Colorful stripes</a></li>
          <li><a href="http://codepen.io/TimPietrusky/pen/eaqFb">asdf</a></li>
          <li><a href="http://codepen.io/TimPietrusky/pen/oJIcy">SNES Controller</a></li>
          <li><a href="http://codepen.io/TimPietrusky/pen/Bsegb">Breaking Bad Logo</a></li>
          <li><a href="http://codepen.io/TimPietrusky/pen/pxCct">Random String to CSS color converter</a></li>
        </ul>
      </div>
      <div>
        <h3>Projects on GitHub</h3>
        <ul class="list--alpha list--alpha__mod">
          <li><a href="https://github.com/TimPietrusky/grumpycathatesyou">Grumpy Cat meme generator</a></li>
          <li><a href="https://github.com/TimPietrusky/weloveiconfonts">We Love Icon Fonts</a></li>
          <li><a href="https://github.com/TimPietrusky/alien-avatar-generator">Alien Avatar Generator</a></li>
          <li><a href="https://github.com/TimPietrusky/crystallo">crystallo - Responsive micro framework</a></li>
          <li><a href="https://github.com/TimPietrusky/pentizr">pentizr</a></li>
          <li><a href="https://github.com/TimPietrusky/codepen-awesomepi">unofficial CodePen API</a></li>
        </ul>
      </div>
     </section>
  </article>

<!-- I spend my online time chatting with the 4ae9b8 team -->
  <article data-high="2">
    <section data-cols="1" class="section--gamma">
      <div class="move--left">
        <h2>I spend my online time chatting with the 4ae9b8 team</h2>
      </div>
    </section>

     <section data-cols="1">
      <div>
        <h3>We found each other through CodePen</h3>
        <p>Hugo Giraudel, Mads Cordes (>:D), Sara Soueidan, Ana Tudor, Fabrice Weinberg & Joshua Hibbert. A really awesome group of people to spend the time with.</p>
        <p>I <span class="typicons-heart"></span> you guys!</p>

        <h3>We created Browserhacks</h3>
        <p>
         An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
        </p>

        <ul class="list--alpha">
          <li><a href="http://browserhacks.com">browserhacks.com</a></li>
        </ul>
      </div>
     </section>
  </article>

<!-- I tried screencasting once or twice -->
  <article data-high="2">
    <section data-cols="1" class="section--delta">
      <div class="move--center">
        <h2>I tried screencasting once or twice</h2>
      </div>
    </section>

     <section data-cols="1">
      <div>
        <p>
          <iframe width="420" height="500" src="http://www.youtube.com/embed/39nVZsPP__E?rel=0" frameborder="0" allowfullscreen></iframe>
        </p>

        <ul class="list--alpha">
          <li><a href="http://www.youtube.com/watch?v=39nVZsPP__E">Convert a scribble to SVG</a></li>
        </ul>
      </div>
     </section>
  </article>

<!-- You can find me around the interwebs -->
  <article data-high="2">
    <section data-cols="1" class="section--zeta">
      <div class="move--left">
        <h2>You can find me around the interwebs</h2>
      </div>
    </section>

     <section data-cols="5">
      <div>
        <a href="http://twitter.com/TimPietrusky" target="_blank">
          <button class="section--zeta">Twitter</button>
        </a>
      </div>
      <div>
        <a href="http://codepen.io/TimPietrusky" target="_blank">
          <button class="section--zeta">CodePen</button>
        </a>
      </div>
      <div>
        <a href="http://github.com/TimPietrusky" target="_blank">
          <button class="section--zeta">GitHub</button>
        </a>
      </div>
      <div>
        <a href="https://soundcloud.com/timpietrusky/likes" target="_blank">
          <button class="section--zeta">SoundCloud</button>
        </a>
      </div>
      <div>
        <a href="http://dribbble.com/TimPietrusky" target="_blank">
          <button class="section--zeta">Dribbble</button>
        </a>
      </div>

     </section>
  </article>

<!-- Kudos Please -->
  <article data-high="2">
    <section data-cols="1" class="section--epsilon">
      <div class="move--center">
<div class="kudos" data-amount="0" data-url="codepen.io/TimPietrusky/pen/Kazcy"></div>
      </div>
    </section>
  </article>
</body>

## script.js
/**
  Kind of a "Tell us something about you"

  Facts about me.

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

r(function() {
  /*
   * Create Kudos Please widget
   */
  var kudosPlease = new KudosPlease({
    el : '.kudos',
    duration : 1500,
    status : {
      alpha: 'typicons-radar',
      beta: 'typicons-radar',
      gamma: 'typicons-brightness'
    }
  });
});

## style.scss
@import "compass";
@import url(http://s.cdpn.io/1202/crystallo_compiled_1.css);
@import url(http://fonts.googleapis.com/css?family=Basic|Armata);
@import url(http://weloveiconfonts.com/api/?family=typicons);

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (min-width: 67em) { @content; }
  }
  @if $point == mama-bear {
    @media (max-width: 66em) { @content; }
  }
  @if $point == baby-bear {
    @media (max-width: 44em) { @content; }
  }
}

/* typicons */
[class*="typicons-"]:before,
*:before {
  font-family: 'Typicons', sans-serif;
  font-size:1.5em;
  vertical-align:bottom;
}

/* vars */
$size-alpha: .45em;
$color-zeta: rgba(#ff66ef, .8);

/* Helper */
.move--left {
  text-align:left;
}

.move--right {
  text-align:right;
}

.move--center {
  text-align:center;
}

body {
  font: 1em/1.8em "Armata", sans-serif;
  color: #000;

  $color-helper-alpha: #c7c2d7;
  $color-helper-beta: #ecd6B2;
  $color-helper-gamma: #b2ac99;
  $color-helper-delta: #63cce3;

  @include background-image(
    linear-gradient(125deg, rgba($color-helper-alpha, .3) 0%, rgba($color-helper-beta, .3) 33%, rgba($color-helper-gamma, .3) 71%, rgba($color-helper-delta, .3) 95%),
    linear-gradient(-88deg, rgba($color-helper-alpha, .8) 0%, rgba($color-helper-beta, .3) 33%, rgba($color-helper-gamma, .7) 71%, rgba($color-helper-delta, .7) 95%),
    linear-gradient(23deg, rgba($color-helper-alpha, 1) 0%, rgba($color-helper-beta, .6) 33%, rgba($color-helper-gamma, 1) 71%, rgba($color-helper-delta, 1) 95%)
  );
}

a {
  text-decoration:none;
  padding-bottom:.25em;
  color:rgba(#888, .8);
  @include transition(
    color .25s ease-in-out,
    border .25s ease-in-out
  );

  &:hover {
    color:#000;
    border-bottom-color:rgba(#000, .35);
  }
}

h1 {
  font:bold 4em "Basic", sans-serif;
  margin:0 0 .5em 0;
}

h2 {
  font-size:3em;
  line-height:1.75em;
  margin:0;
  color:#fff;
}

h3 {
  font: bold 2em "Armata", sans-serif;
}

img {
  margin:0;
  padding:0;
}

p {
  font-size:1.2em;
}

ul {
  margin:0;
  padding:0;

  li {
    margin:1.05em 0;
    line-height:1.25;
  }

  &.list--alpha {
    list-style-type:none;
    font-size:1.4em;

    li {
      &:before {
        content:')';
        color:rgba(#000, .5);
      }

      a {
        vertical-align:top;
      }
    }

    &.list--alpha__mod {
      li {
        &:before {
          content:'o';
        }
      }
    }
  }
}

article {
  padding:5em 0;

  @include breakpoint(baby-bear) {
    padding:.5em 0;
  }

  > section {
    background:#fff;
    box-shadow:0 0 0 $size-alpha rgba(#fff, .55);
    padding:1.5em 5em;

  @include breakpoint(baby-bear) {
    padding:.5em .75em;
  }

    &.section--alpha {
      background:rgba(#F38973, .8);
    }

    &.section--beta {
      background:rgba(#C18DBE, .8);
    }

    &.section--gamma {
      background:rgba(#F8BC76, .8);
    }

    &.section--delta {
      background:rgba(#8AD6D6, .8);
    }

    &.section--epsilon {
      background:rgba(#97CE68, .8);
    }

    &.section--zeta {
      background:$color-zeta;
    }

    &:first-child {
      padding-top:5em;
    }

    &:last-child {
      padding-bottom:5em;
    }
  }

  &[data-high="1"] {
    margin-top:2em;
    background:rgba(#fff, .45);

    > section {
      padding:5em 0;

      @include breakpoint(baby-bear) {
        padding:2.5em .75em;
      }

      p {
        font-size:1.65em;
        line-height:1.85em;
        padding:.75em;
      }

      img {
        box-shadow:0 0 0 $size-alpha rgba(#ccc, .15);
      }

      div {
        padding: 0 .5em;
      }
    }
  }

  &[data-high="2"] {
    margin-top:2em;
    background:rgba(#fff, .45);
  }
}

/*
 * Buttons
 */
button {
  padding:1.5em .5em;
  font-size:1.5em;
  font-weight:bold;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 $size-alpha rgba(#fff, 1);
  border:none;
  color:#fff;
  @include transition(
    color .25s ease-in-out,
    background .35s ease-in-out
  );

  &.section--zeta {
    background:$color-zeta;

    &:hover {
      color:#000;
      background:rgba($color-zeta, .5);
    }
  }
}

/*
 * Kudos
 */
$kudos_duration: 1.5s;
$kudos_duration_finish: .45s;
$kudos_width: 8em;
$kudos_height: 8em;
$kudos_color_alpha: #fff;
$kudos_color_beta: rgba(#ddd552, 1);

.kudos {
  font-size:2em;
  position:relative;
  max-width:$kudos_width;
  max-height:$kudos_height;
  margin:0 auto;
  background:$kudos_color_alpha;

  box-shadow:
    inset 0 0 0 .25em rgba(#ccc, .15),
    inset 0 0 0 $kudos_width / 3 $kudos_color_alpha,
    inset 0 0 0 $kudos_width rgba(#97CE68, .8)
  ;
  line-height:$kudos_height;
  text-align:center;
  @include transition(box-shadow $kudos_duration_finish / 2 ease-out);

  &:before {
    @include transition(font-size $kudos_duration_finish ease-in);
    font-size:0;
  }

  &.active {
    @include transition(box-shadow $kudos_duration linear);
    box-shadow:
      inset 0 0 0 .25em rgba(#ccc, .55),
      inset 0 0 0 0 $kudos_color_alpha,
      inset 0 0 0 .75em rgba($kudos_color_beta, .75),
      inset 0 0 0 $kudos_width $kudos_color_beta
    ;

    &:after {
       content: 'Don\'t move!';
    }
  }

  &.finish {
    @include transition(
      box-shadow $kudos_duration_finish linear,
      transform $kudos_duration_finish * 1.25 ease-in-out
    );
    box-shadow:
      inset 0 0 0 .25em rgba($kudos_color_beta, .5),
      inset 0 0 0 .5em $kudos_color_alpha,
      inset 0 0 0 .75em rgba($kudos_color_beta, .75),
      inset 0 0 0 1em $kudos_color_alpha,
      inset 0 0 0 0 $kudos_color_alpha,
      inset 0 0 0 $kudos_width $kudos_color_beta
    ;

    &:before {
      font-size:2.25em;
      color:$kudos_color_alpha;
      line-height:$kudos_height / 2.125;
    }
  }

  &:after {
    position:absolute;
    content: attr(data-amount) ' Kudos';
    bottom:-1.25em;
    left:0;
    width:$kudos_width;
    text-align:center;
    line-height:1em;
    font-variant:small-caps;
  }
}
	<body data-max-width="1400" data-auto-extend="true">

	<article data-high="1">
	<section data-cols="2">
	<div class="move--center">
	<img src="http://timpietrusky.com/img/tim_pietrusky_on_rampage.jpg" alt="" />
	</div>
	<div class="move--center">
	<h1>Tim Pietrusky</h1>
	<p>I'm a Webcraftsman from Frankfurt (Main), Germany and I love the web.</p>
	<p>
	<a href="http://timpietrusky.com" target="_blank">timpietrusky.com</a>
	</p>
	</div>
	</section>
	</article>

	<!-- I write -->
	<article data-high="2">
	<section data-cols="1" class="section--alpha">
	<div class="move--left">
	<h2>I write</h2>
	</div>
	</section>

	<section data-cols="2">
	<div>
	<h3>for css-tricks.com</h3>
	<ul class="list--alpha">
	<li><a href="http://css-tricks.com/responsive-menu-concepts/">Responsive Menu Concepts</a></li>
	<li><a href="http://css-tricks.com/five-use-cases-for-icon-fonts/">5 Use Cases for Icon Fonts</a></li>
	</ul>
	</div>
	<div>
	<h3>on timpietrusky.com</h3>
	<ul class="list--alpha">
	<li><a href="http://timpietrusky.com/advanced-checkbox-hack/">Advanced Checkbox Hack</a></li>
	<li><a href="http://timpietrusky.com/tims-dev-diary-march-2013">Tim's Dev Diary: March 2013</a></li>
	<li><a href="http://timpietrusky.com/svg-how-to-create-and-use-vector-graphics-on-the-web">SVG - How to create & use vector graphics on the web</a></li>
	<li><a href="http://timpietrusky.com/breaking-bad-logo">Breaking Bad Logo</a></li>
	</ul>
	</div>
	</section>
	</article>

	<!-- Everything I do is open source -->
	<article data-high="2">
	<section data-cols="1" class="section--beta">
	<div class="move--right">
	<h2>Everything I do is open source</h2>
	</div>
	</section>

	<section data-cols="2">
	<div>
	<h3>Experiments on CodePen</h3>
	<ul class="list--alpha list--alpha__mod">
	<li><a href="http://codepen.io/TimPietrusky/pen/gqlhA">Custom Dropdown</a></li>
	<li><a href="http://codepen.io/TimPietrusky/pen/guAGh">Colorful stripes</a></li>
	<li><a href="http://codepen.io/TimPietrusky/pen/eaqFb">asdf</a></li>
	<li><a href="http://codepen.io/TimPietrusky/pen/oJIcy">SNES Controller</a></li>
	<li><a href="http://codepen.io/TimPietrusky/pen/Bsegb">Breaking Bad Logo</a></li>
	<li><a href="http://codepen.io/TimPietrusky/pen/pxCct">Random String to CSS color converter</a></li>
	</ul>
	</div>
	<div>
	<h3>Projects on GitHub</h3>
	<ul class="list--alpha list--alpha__mod">
	<li><a href="https://github.com/TimPietrusky/grumpycathatesyou">Grumpy Cat meme generator</a></li>
	<li><a href="https://github.com/TimPietrusky/weloveiconfonts">We Love Icon Fonts</a></li>
	<li><a href="https://github.com/TimPietrusky/alien-avatar-generator">Alien Avatar Generator</a></li>
	<li><a href="https://github.com/TimPietrusky/crystallo">crystallo - Responsive micro framework</a></li>
	<li><a href="https://github.com/TimPietrusky/pentizr">pentizr</a></li>
	<li><a href="https://github.com/TimPietrusky/codepen-awesomepi">unofficial CodePen API</a></li>
	</ul>
	</div>
	</section>
	</article>

	<!-- I spend my online time chatting with the 4ae9b8 team -->
	<article data-high="2">
	<section data-cols="1" class="section--gamma">
	<div class="move--left">
	<h2>I spend my online time chatting with the 4ae9b8 team</h2>
	</div>
	</section>

	<section data-cols="1">
	<div>
	<h3>We found each other through CodePen</h3>
	<p>Hugo Giraudel, Mads Cordes (>:D), Sara Soueidan, Ana Tudor, Fabrice Weinberg & Joshua Hibbert. A really awesome group of people to spend the time with.</p>
	<p>I <span class="typicons-heart"></span> you guys!</p>

	<h3>We created Browserhacks</h3>
	<p>
	An extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.
	</p>

	<ul class="list--alpha">
	<li><a href="http://browserhacks.com">browserhacks.com</a></li>
	</ul>
	</div>
	</section>
	</article>

	<!-- I tried screencasting once or twice -->
	<article data-high="2">
	<section data-cols="1" class="section--delta">
	<div class="move--center">
	<h2>I tried screencasting once or twice</h2>
	</div>
	</section>

	<section data-cols="1">
	<div>
	<p>
	<iframe width="420" height="500" src="http://www.youtube.com/embed/39nVZsPP__E?rel=0" frameborder="0" allowfullscreen></iframe>
	</p>

	<ul class="list--alpha">
	<li><a href="http://www.youtube.com/watch?v=39nVZsPP__E">Convert a scribble to SVG</a></li>
	</ul>
	</div>
	</section>
	</article>

	<!-- You can find me around the interwebs -->
	<article data-high="2">
	<section data-cols="1" class="section--zeta">
	<div class="move--left">
	<h2>You can find me around the interwebs</h2>
	</div>
	</section>

	<section data-cols="5">
	<div>
	<a href="http://twitter.com/TimPietrusky" target="_blank">
	<button class="section--zeta">Twitter</button>
	</a>
	</div>
	<div>
	<a href="http://codepen.io/TimPietrusky" target="_blank">
	<button class="section--zeta">CodePen</button>
	</a>
	</div>
	<div>
	<a href="http://github.com/TimPietrusky" target="_blank">
	<button class="section--zeta">GitHub</button>
	</a>
	</div>
	<div>
	<a href="https://soundcloud.com/timpietrusky/likes" target="_blank">
	<button class="section--zeta">SoundCloud</button>
	</a>
	</div>
	<div>
	<a href="http://dribbble.com/TimPietrusky" target="_blank">
	<button class="section--zeta">Dribbble</button>
	</a>
	</div>

	</section>
	</article>

	<!-- Kudos Please -->
	<article data-high="2">
	<section data-cols="1" class="section--epsilon">
	<div class="move--center">
	<div class="kudos" data-amount="0" data-url="codepen.io/TimPietrusky/pen/Kazcy"></div>
	</div>
	</section>
	</article>
	</body>
	/**
	Kind of a "Tell us something about you"

	Facts about me.

	# 2013 by Tim Pietrusky
	# timpietrusky.com
	**/

	function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

	r(function() {
	/*
	* Create Kudos Please widget
	*/
	var kudosPlease = new KudosPlease({
	el : '.kudos',
	duration : 1500,
	status : {
	alpha: 'typicons-radar',
	beta: 'typicons-radar',
	gamma: 'typicons-brightness'
	}
	});
	});
	@import "compass";
	@import url(http://s.cdpn.io/1202/crystallo_compiled_1.css);
	@import url(http://fonts.googleapis.com/css?family=Basic\|Armata);
	@import url(http://weloveiconfonts.com/api/?family=typicons);

	@mixin breakpoint($point) {
	@if $point == papa-bear {
	@media (min-width: 67em) { @content; }
	}
	@if $point == mama-bear {
	@media (max-width: 66em) { @content; }
	}
	@if $point == baby-bear {
	@media (max-width: 44em) { @content; }
	}
	}

	/* typicons */
	[class*="typicons-"]:before,
	*:before {
	font-family: 'Typicons', sans-serif;
	font-size:1.5em;
	vertical-align:bottom;
	}

	/* vars */
	$size-alpha: .45em;
	$color-zeta: rgba(#ff66ef, .8);

	/* Helper */
	.move--left {
	text-align:left;
	}

	.move--right {
	text-align:right;
	}

	.move--center {
	text-align:center;
	}

	body {
	font: 1em/1.8em "Armata", sans-serif;
	color: #000;

	$color-helper-alpha: #c7c2d7;
	$color-helper-beta: #ecd6B2;
	$color-helper-gamma: #b2ac99;
	$color-helper-delta: #63cce3;

	@include background-image(
	linear-gradient(125deg, rgba($color-helper-alpha, .3) 0%, rgba($color-helper-beta, .3) 33%, rgba($color-helper-gamma, .3) 71%, rgba($color-helper-delta, .3) 95%),
	linear-gradient(-88deg, rgba($color-helper-alpha, .8) 0%, rgba($color-helper-beta, .3) 33%, rgba($color-helper-gamma, .7) 71%, rgba($color-helper-delta, .7) 95%),
	linear-gradient(23deg, rgba($color-helper-alpha, 1) 0%, rgba($color-helper-beta, .6) 33%, rgba($color-helper-gamma, 1) 71%, rgba($color-helper-delta, 1) 95%)
	);
	}

	a {
	text-decoration:none;
	padding-bottom:.25em;
	color:rgba(#888, .8);
	@include transition(
	color .25s ease-in-out,
	border .25s ease-in-out
	);

	&:hover {
	color:#000;
	border-bottom-color:rgba(#000, .35);
	}
	}

	h1 {
	font:bold 4em "Basic", sans-serif;
	margin:0 0 .5em 0;
	}

	h2 {
	font-size:3em;
	line-height:1.75em;
	margin:0;
	color:#fff;
	}

	h3 {
	font: bold 2em "Armata", sans-serif;
	}

	img {
	margin:0;
	padding:0;
	}

	p {
	font-size:1.2em;
	}

	ul {
	margin:0;
	padding:0;

	li {
	margin:1.05em 0;
	line-height:1.25;
	}

	&.list--alpha {
	list-style-type:none;
	font-size:1.4em;

	li {
	&:before {
	content:')';
	color:rgba(#000, .5);
	}

	a {
	vertical-align:top;
	}
	}

	&.list--alpha__mod {
	li {
	&:before {
	content:'o';
	}
	}
	}
	}
	}

	article {
	padding:5em 0;

	@include breakpoint(baby-bear) {
	padding:.5em 0;
	}

	> section {
	background:#fff;
	box-shadow:0 0 0 $size-alpha rgba(#fff, .55);
	padding:1.5em 5em;

	@include breakpoint(baby-bear) {
	padding:.5em .75em;
	}

	&.section--alpha {
	background:rgba(#F38973, .8);
	}

	&.section--beta {
	background:rgba(#C18DBE, .8);
	}

	&.section--gamma {
	background:rgba(#F8BC76, .8);
	}

	&.section--delta {
	background:rgba(#8AD6D6, .8);
	}

	&.section--epsilon {
	background:rgba(#97CE68, .8);
	}

	&.section--zeta {
	background:$color-zeta;
	}

	&:first-child {
	padding-top:5em;
	}

	&:last-child {
	padding-bottom:5em;
	}
	}

	&[data-high="1"] {
	margin-top:2em;
	background:rgba(#fff, .45);

	> section {
	padding:5em 0;

	@include breakpoint(baby-bear) {
	padding:2.5em .75em;
	}

	p {
	font-size:1.65em;
	line-height:1.85em;
	padding:.75em;
	}

	img {
	box-shadow:0 0 0 $size-alpha rgba(#ccc, .15);
	}

	div {
	padding: 0 .5em;
	}
	}
	}

	&[data-high="2"] {
	margin-top:2em;
	background:rgba(#fff, .45);
	}
	}

	/*
	* Buttons
	*/
	button {
	padding:1.5em .5em;
	font-size:1.5em;
	font-weight:bold;
	text-transform:uppercase;
	box-shadow:inset 0 0 0 $size-alpha rgba(#fff, 1);
	border:none;
	color:#fff;
	@include transition(
	color .25s ease-in-out,
	background .35s ease-in-out
	);

	&.section--zeta {
	background:$color-zeta;

	&:hover {
	color:#000;
	background:rgba($color-zeta, .5);
	}
	}
	}

	/*
	* Kudos
	*/
	$kudos_duration: 1.5s;
	$kudos_duration_finish: .45s;
	$kudos_width: 8em;
	$kudos_height: 8em;
	$kudos_color_alpha: #fff;
	$kudos_color_beta: rgba(#ddd552, 1);

	.kudos {
	font-size:2em;
	position:relative;
	max-width:$kudos_width;
	max-height:$kudos_height;
	margin:0 auto;
	background:$kudos_color_alpha;

	box-shadow:
	inset 0 0 0 .25em rgba(#ccc, .15),
	inset 0 0 0 $kudos_width / 3 $kudos_color_alpha,
	inset 0 0 0 $kudos_width rgba(#97CE68, .8)
	;
	line-height:$kudos_height;
	text-align:center;
	@include transition(box-shadow $kudos_duration_finish / 2 ease-out);

	&:before {
	@include transition(font-size $kudos_duration_finish ease-in);
	font-size:0;
	}

	&.active {
	@include transition(box-shadow $kudos_duration linear);
	box-shadow:
	inset 0 0 0 .25em rgba(#ccc, .55),
	inset 0 0 0 0 $kudos_color_alpha,
	inset 0 0 0 .75em rgba($kudos_color_beta, .75),
	inset 0 0 0 $kudos_width $kudos_color_beta
	;

	&:after {
	content: 'Don\'t move!';
	}
	}

	&.finish {
	@include transition(
	box-shadow $kudos_duration_finish linear,
	transform $kudos_duration_finish * 1.25 ease-in-out
	);
	box-shadow:
	inset 0 0 0 .25em rgba($kudos_color_beta, .5),
	inset 0 0 0 .5em $kudos_color_alpha,
	inset 0 0 0 .75em rgba($kudos_color_beta, .75),
	inset 0 0 0 1em $kudos_color_alpha,
	inset 0 0 0 0 $kudos_color_alpha,
	inset 0 0 0 $kudos_width $kudos_color_beta
	;

	&:before {
	font-size:2.25em;
	color:$kudos_color_alpha;
	line-height:$kudos_height / 2.125;
	}
	}

	&:after {
	position:absolute;
	content: attr(data-amount) ' Kudos';
	bottom:-1.25em;
	left:0;
	width:$kudos_width;
	text-align:center;
	line-height:1em;
	font-variant:small-caps;
	}
	}