Untitled

dabblet.css

* {
  margin: 0;
  padding: 0;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}

main, nav {
	padding: 20px;
}

nav {
	background: tomato;
}

main {
	background: deepskyblue;
}

nav ul {
	list-style-type: none;
}

@media screen and (min-width: 600px) {
	body {
		display: table;
		caption-side: top;
		width: 100%;
	}
	nav {
		display: table-caption;
	}
	nav ul {
		width: 100%;
	}
	nav ul li {
		display: inline;
		padding: 0 1em;
	}
}

dabblet.html

<main>
	<p>This is the main content.</p>
</main>

<nav>
	<p>This is the navigation.</p>
	<ul>
		<li><a href="#">foo</a></li>
		<li><a href="#">bar</a></li>
		<li><a href="#">baz</a></li>
	</ul>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

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