Untitled

dabblet.css

html {
	height: 100%;
}

body {
	box-sizing: border-box;
	font-family: "Open Sans";
	height: 100%;
	margin: 0;
	padding: 10px 20px;
	width: 100%;
}

h1 {
	font-family: "Titillium Web";
}

main {
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 50%;
}

.field {
	overflow: hidden;
	padding: 10px 0;
}

label,
input,
button {
	float: left;
	display: inline-block;
	padding: 10px 15px;
}

label {
	text-align: right;
	width: 90px;
}

input,
button {
	box-sizing: border-box;
	width: 150px;
}

.submit {
	padding-left: 120px
}

.submit button {
	display: inline-block;
}

dabblet.html

<header>
	<h1>Headspring employee directory</h1>
</header>

<main>
	<h1>Log in</h1>
	<form action="#">
		<div class="field"><label for="username">Name</label> <input name="username" id="username"></div>
		<div class="field"><label for="password">Password</label> <input name="password" id="password" type="password"></div>
		<div class="submit"><button type="submit">Log in</button></div>
	</form>
</main>

dabblet.js

WebFontConfig = {
  google: { families: [ 'Titillium+Web::latin,latin-ext', 'Open+Sans:400italic,700italic,400,700:latin,latin-ext' ] }
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

settings.json

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