✎'s "Under Construction" page prototype

dabblet.css

/**
 * ✎'s "Under Construction" page prototype
 */

/* Background
-------------------------------*/
body {
	background-color: #ccc;
}

/* Header
-------------------------------*/
h1 {
	font: 16em sans-serif;
	margin: 0.3em 0 0 0;
	text-align: center;
}

#pick {
	animation: pickaxe 2s linear infinite;
	display: inline-block;
	margin-left: -0.7em;
	position: relative;
	top: -0.2em;
	transform-origin: 95% 90%;
	transform: rotate(17deg);
}

#clang {
	animation: clang 2s linear infinite;
	font: bold 0.0625em sans-serif;
	position: absolute;
	text-transform: uppercase;
	transform: rotate(20deg);
}

@keyframes clang {
	from {
		padding-left: 0;
		opacity: 0;
	}
	10% {
		padding-left: 1em;
		opacity: 0;
	}
	20% {
		padding-left: 0;
		opacity: 1;
	}
	40% {
		padding-left: 0;
		opacity: 0;
	}
	to {
		padding-left: 0;
		opacity: 0;
	}
}

@keyframes pickaxe {
	from {
		transform: rotate(80deg);
	}
	10% {
		transform: rotate(17deg);
	}
	20% {
		transform: rotate(17deg);
	}
	90% {
		transform: rotate(80deg);
	}
	to {
		transform: rotate(80deg);
	}
}

p {
	color: #777;
	font: 2em sans-serif;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

strong {
	color: #444;
}

dabblet.html

<h1><span id="clang">Clang!</span> ✎<span id="pick">⛏</span></h1>

<p><strong>✎ is temporarily down for some important fixes.</strong> Check the blog for details.</p>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}