Effective

dabblet.css

/**
 * Effective
 */
* { margin: 0; body: 0; }
html,body{ height:100%; }
body{
	background: #333;
	padding: 4em;
}
article#credits {	
	display: table;
}
h1, h2 {
	font-size: 64px;
	font-family: sans-serif;
	color: #66B;
}
h2{font-size:48px;}
article#credits  ol {
	display: table-cell;
	list-style-type: none;
	text-align: center;
	height: 100%;
	background: #333;
	padding: 16px 64px;
	width: 150px;
	border-collapse:collapse;
}
article#credits  ol li {
	font-size: 24px;
	color: #888;
	line-height: 32px;
}
article#credits  ol li:nth-child(1) {
	font-size: 38px;
	color: #ccc;
	line-height: 42px;
	font-family: sans-serif;
}
article#reviews {
	
}
article#reviews div {
	width: 400px;
	background:#222;
	margin: 2em;
	padding-bottom: 3em;
	position: relative;
}
article#reviews div p {
	display: block;
	text-indent: 2em;
	text-align: justify;
	font-size: 16px;
	font-family: sans-serif;
	color: #999;
	padding: 2em;
	text-transform: capitalize;
	line-height: 2em;
	quotes: "“" "”" "‘" "’";
}
article#reviews div p::before{
content: open-quote;
position: absolute;
display:block;
left: 0;
font-size: 64px;
font-family: serif;
}
article#reviews div p::after{
content: close-quote;
position: absolute;
display:block;
right: 0;
font-size: 64px;
font-family: serif;
} 
article#reviews div p::first-letter {
	letter-spacing: 2px;
	font-size: 24px;
	text-align:center;
}
article#reviews div em {
	float: right;
	font-size: 24px;
	color: #A44;
	padding-right: 1em;
}
article#reviews div em::after {
	content: "~";
	margin-left: 8px;
	color: #555;
	text-shadow: 0 1px 6px #444, 0 -1px 6px #444;
}

dabblet.html

<h1>Production Title</h1>
<h2>Producing company</h2>
<article id="credits">
<ol>
	<li>Developers</li>
	<li>John Carmack</li>
	<li>Jim Gettys</li>
	<li>Mel Kaye</li>
</ol>
<ol>
	<li>Producers</li>
	<li>Tom Cruise</li>
	<li>George Lucas</li>
</ol>
</article>
<article>
<article id="reviews">
	<div>
		<p>Revolutionairy graphical appeal, classical astoundishment, and modern inspiration. In a word: Stunning</p>
		<em>Ecstatic Inc.</em>
	</div>
	<div>
		<p>If only everyone could understand this flawless execution.</p>
		<em>Tweaked</em>
	</div>
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"html"}