stephenhay

## list-chars.js
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);

## hamburger.css
body {
  display: flex;
  align-items: center;
  padding: 5em 20%;
  font-family: sans-serif;
  line-height: 1.4em;
  /* color: dimgray; */
}

h1 {

## jsbin.atarOxU.css
body {
  font: 100%/1.25 sans-serif;
  color: #636363;
  padding: 1em;
}

table {
  width: 100%;
  margin: 0;
  border-top: 1px solid #e4e2e8;

## index.html
<!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 {

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

## index.html
<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);

## index.html
<!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 */

## index.html
<!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;

## index.html
<!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;
	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);
	body {
	display: flex;
	align-items: center;
	padding: 5em 20%;
	font-family: sans-serif;
	line-height: 1.4em;
	/* color: dimgray; */
	}

	h1 {
	body {
	font: 100%/1.25 sans-serif;
	color: #636363;
	padding: 1em;
	}

	table {
	width: 100%;
	margin: 0;
	border-top: 1px solid #e4e2e8;
	<!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 {
	<!DOCTYPE html>
	<style>
	body {
	font-size: 100%;
	}
	h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2.4em;
	letter-spacing: .05em;
	text-transform: uppercase;
	<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);
	<!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 */