Learning to teach

dabblet.css

/**
 * Learning to teach
 *
 * by Bartek Szopka @bartaz
 * Front-Trends 2012
 */

@import url(http://fonts.googleapis.com/css?family=The+Girl+Next+Door);

html, body {
	height: 100%;
	box-sizing: border-box;
}

html {
	/* fallback non-gradient background */
	background-color: #FEFEFE;
	background: url("http://dabblet.com/img/noise.png");
	
	/* multiple backgrounds: colour, texture and gradient for red margin line */
	background: linear-gradient(left, rgba(230,100,100,0.7) 1px, transparent 1px) no-repeat 100px 0,
				url("http://dabblet.com/img/noise.png"), 
				#FEFEFE;
}

body {
	font-family: 'The Girl Next Door', cursive;
	font-size: 5em;
	line-height: 1.5em;
	color: #333;
	text-shadow: .05em .05em .1em rgba(0,0,0,0.2);
	
	margin: 0;
	padding: 1.5em 1.4em 0 150px;
	
	/* paper lines background, 
	   based on http://dabblet.com/gist/1560755 by @LeaVerou
	   look there for more details ;) */
	background: linear-gradient(rgba(50, 100, 200, .7) 1px, transparent 1px);
	background-size: 100% 1.5em;
	background-origin: content-box;	
	background-position: 0 1em;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover, a:focus {
	text-decoration: underline;
}

h1 {
	font-size: 1em;
	margin: 0 0 1.5em;
}

p {
	margin: 0;
}

.note {
	font-size: 0.55em;
	color: #555;
}

.author {
	text-align: right;
}

dabblet.html

<h1>Learning to teach</h1>
<p class="author note">by Bartek Szopka <a href="http://twitter.com/bartaz">@bartaz</a></p>
<p class="author note">Front-Trends 2012</p>

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"result"}