Wazzat Do?

dabblet.css

/**
 * Wazzat Do?
 * An interactive Web Platform Diagram. 
 * Inspired by Paul Irish: https://github.com/paulirish/lazyweb-requests/issues/38
 */

h1 {
	font-size:2em;
	padding:3px 10px;
	transition:all 0.5s linear;
	margin:10px;
	text-align:center;
}
h1 + section {
	display:none;
}
h1:hover {
	padding:20px;
}
section:only-child {
	background:#ee8855;
}
section:not(:only-child) {
	background:#8888FF;
}
section:nth-child(2n) {
	background:#d3d3ff;
}

dabblet.html

<section>
	<section id="core">
		<h1><a href="#core">Core</a></h1>
		<section>
			<h2>HTML</h2>
			<h2>CSS</h2>
			<h2>Javascript</h2>
		</section>
	</section>
	<section id="interactive">
		<h1>Interactive</h1>
	</section>
	<section id="audio">
		<h1>Audio</h1>
	</section>
</section>

settings.json

{"view":"split","prefixfree":"1","page":"css"}