Patrick Danhof pixiebox

## facebook
<!-- at the bottom of the body element -->
<div id="fb-root"></div>
<script type="text/javascript">
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)){
      return;
    }

## touch detection from Modernizr
(function () {
  /**
   * docElement is a convenience wrapper to grab the root element of the document
   *
   * @access private
   * @returns {HTMLElement|SVGElement} The root element of the document
   */

  var docElement = document.documentElement;

## dynamicScript,js
function dynamicAsset(script_name, cb) {
  var body = document.body,
    script = document.createElement('script'),
    done = false;

  script.type = 'text/javascript';
  script.src = lang.templateUrl + '/dist/scripts/' + script_name;
  script.onload = script.onreadystatechange = function(){

  if ( !done && (!this.readyState ||

## viewport
function viewport() {
  var el = window,
    attr = 'inner';

  if (!('innerWidth' in window )) {
    attr = 'client';
    el = document.documentElement || document.body;
  }

  return {

## iOs viewport fix
/*
  @note

  fallback iOS vh unit bug
*/

/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}

## skewed-border.css
.element:before {
  content: '';
  background: #000;
  bottom: 40%;
  height: 80%;
  position: absolute;
  transform: skewY(1deg);
  width: 100%;
}

## gulp
// Deep Breaths //
//////////////////

	// Gulp
	var gulp = require('gulp');

	// Sass/CSS stuff
	var sass = require('gulp-sass');
	var prefix = require('gulp-autoprefixer');
	var minifycss = require('gulp-minify-css');

## gist:80b9d2e870bd97400d496b3716a8d261
<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <canvas id="canvas" width="500" height="300"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;

## responsive-arrow.html
<!DOCTYPE html>
<html>
  <head>
    <title>Responsive arrow</title>
    <style>
      div {
        background: #eb7261;
        position: relative;
        height: 200px;
        max-width: 600px;

## markerMenu
<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        padding: 0;
        position: relative;
      }
      li {
	<!-- at the bottom of the body element -->
	<div id="fb-root"></div>
	<script type="text/javascript">
	(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];

	if (d.getElementById(id)){
	return;
	}
	(function () {
	/**
	* docElement is a convenience wrapper to grab the root element of the document
	*
	* @access private
	* @returns {HTMLElement\|SVGElement} The root element of the document
	*/

	var docElement = document.documentElement;
	function dynamicAsset(script_name, cb) {
	var body = document.body,
	script = document.createElement('script'),
	done = false;

	script.type = 'text/javascript';
	script.src = lang.templateUrl + '/dist/scripts/' + script_name;
	script.onload = script.onreadystatechange = function(){

	if ( !done && (!this.readyState \|\|
	function viewport() {
	var el = window,
	attr = 'inner';

	if (!('innerWidth' in window )) {
	attr = 'client';
	el = document.documentElement \|\| document.body;
	}

	return {
	/*
	@note

	fallback iOS vh unit bug
	*/

	/* iPhone 4 */
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

	}
	.element:before {
	content: '';
	background: #000;
	bottom: 40%;
	height: 80%;
	position: absolute;
	transform: skewY(1deg);
	width: 100%;
	}
	// Deep Breaths //
	//////////////////

	// Gulp
	var gulp = require('gulp');

	// Sass/CSS stuff
	var sass = require('gulp-sass');
	var prefix = require('gulp-autoprefixer');
	var minifycss = require('gulp-minify-css');
	<!DOCTYPE HTML>
	<html>
	<head></head>
	<body>
	<canvas id="canvas" width="500" height="300"></canvas>
	<script>
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	<!DOCTYPE html>
	<html>
	<head>
	<title>Responsive arrow</title>
	<style>
	div {
	background: #eb7261;
	position: relative;
	height: 200px;
	max-width: 600px;