Yohann Paris YohannParis

Contract Killer

	<!-- Smaller Disqus code - http://studioromeo.co.uk/suit-and-tie/ -->

	<aside id="disqus_thread"></aside>
	<script>
	(function(d,t) {
	var c=d.createElement(t);s=d.getElementsByTagName(t)[0];
	c.async=1;c.src='http://[[YOURSITEID]].disqus.com/embed.js';
	s.parentNode.insertBefore(c,s)})(document,'script');
	</script>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Map of the USA, with States code</title>
	<style type="text/css">
	rect, path { fill: lime; }

	rect { fill-opacity: 0; }

	path {

	// detect IE
	var IEversion = detectIE();

	if (IEversion !== false) {
	document.getElementById('result').innerHTML = 'IE ' + IEversion;
	} else {
	document.getElementById('result').innerHTML = 'NOT IE';
	}

	// add details to debug result

	/**
	* The pseudo-element 'content' property doesnt accept normal (») style
	* HTML entities. These variables below easy the pain of looking up the HEX codes...
	*
	* Referenced from http://www.danshort.com/HTMLentities/
	*
	* TODO: Add all the other entities? Worth it? Some day? Maybe?
	*/

	// Punctuation

	.fluid-type(@property, @min-vw, @max-vw, @min-size, @max-size) {

	@{property}: @min-size;

	@media screen and (min-width: @min-vw) {
	@{property}: calc( @min-size ~" + " unit(@max-size - @min-size) ~" * ((100vw - " @min-vw ~") /" unit(@max-vw - @min-vw) ~")" );
	}

	@media screen and (min-width: @max-vw) {
	@{property}: @max-size;

	window.smoothScrollTo = (function () {
	var timer, start, factor;

	return function (target, duration) {
	var offset = window.pageYOffset,
	delta = target - window.pageYOffset; // Y-offset difference
	duration = duration \|\| 1000; // default 1 sec animation
	start = Date.now(); // get start time
	factor = 0;

	var header = document.querySelector('.header');
	var origOffsetY = header.offsetTop;

	function onScroll(e) {
	window.scrollY >= origOffsetY ? header.classList.add('sticky') :
	header.classList.remove('sticky');
	}

	document.addEventListener('scroll', onScroll);