stephenhay’s gists

stephenhay / index.html

Created July 16, 2011 10:41

Simple HTML+CSS progress bar

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Simple HTML+CSS progress bar</title>
	<style>
	body {
	/* Demo only */
	font-family: Arial, sans-serif;

stephenhay / index.html

Created September 6, 2011 18:09

Pearce's Flexbox Snaking Cell Dilemma

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Pearce's Flexbox Snaking Cell Dilemma</title>
	<style media="screen">
	body { font: 100%/1.5 sans-serif; padding: 0 2em;}
	.block {
	background-color: silver;

stephenhay / index.html

Created October 7, 2011 11:48

Simple regions example (deprecated syntax, works in Chrome Dev per 7 Oct 2011

	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Regions test</title>

	<style>
	/* A section is a slide. It's size is 800x600, and this will never change */

stephenhay / index.html

Created October 11, 2011 14:37

Ubuntu logo in HTML/CSS (for the Fronteers CSS challenge)

	<style>
	#ubuntulogo {
	width: 108px;
	height: 108px;
	position:relative;
	}
	#ubuntulogo, #inner, .line { background-color: white; }
	#outer {
	background-color: #d40000;
	background-image: -webkit-radial-gradient(-3px 45px, #fb8b00 44px, transparent 44px), -webkit-radial-gradient(70px 0, #f44800 45px, transparent 20px);

stephenhay / index.html

Last active September 27, 2015 13:38

Smashing Magazine logo with HTML/CSS (just for fun: Fronteers CSS challenge)

	<!DOCTYPE html>
	<style>
	body {
	font-size: 100%;
	}
	h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2.4em;
	letter-spacing: .05em;
	text-transform: uppercase;

stephenhay / index.html

Last active December 10, 2015 13:49

d3 test

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.2"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.2"></script>
	<style type="text/css">

	.node circle {

stephenhay / jsbin.atarOxU.css

Created September 24, 2013 11:47

stephenhay / hamburger.css

Last active August 29, 2015 13:57

stephenhay / list-chars.js

Last active November 21, 2015 12:42 — forked from sanderaarts/list-chars.js

Based on https://gist.github.com/vasilisvg/e79dae967e25d3ce1d64

	void function() {
	var chars = document.body.innerText.split('').sort().filter(function(char, i, arr) {
	return i === 0 \|\| arr[i - 1] !== char;
	}).join('');
	var textarea = document.createElement('textarea'),
	snippet = '<pre><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata&text=' + chars + '"></pre>';

	textarea.innerHTML = snippet;
	textarea.setAttribute('style','position:fixed;top:5vh;left:5vw;height:90vh;width:90vw;box-shadow:0 0 5vmax black;background:white');
	document.body.appendChild(textarea);