Twitter tegel template

template.html

<link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<style>
	* {
		box-sizing: border-box;
	}
	body{
		/* defaults, use for testing the template without PhantomJS */
		width: 400px;
		height: 400px;
		font-size: 400px;
		width: {{ width }}px;
		height: {{ height }}px;
		display: inline-block;
		background: #{{ color }}; 
		color: #FFF;
		font-size: {{ width }}px;
		font-family: 'Coming Soon', cursive;

		/* vertical align text */
		display: table-cell;
   		vertical-align: middle;
	}
	.wrapper {
		/* defaults, use for testing the template without PhantomJS */
		width: 400px;
		height: 400px;
		background-size: 400px 400px;

		width: {{ width }}px;
		height: {{ height }}px;
		background: url(http://demo.bubobox.com/vision-templates/twitter-tegel.jpg);
		background-size: 100%;
		padding:  0 16% 0 16%;

		display: table-cell;
   		vertical-align: middle;
	}
	.quote {
		color: #000;
		font-size: .06em;
		line-height: 1.1em;
		text-align: center;
	}
</style>
<div class="wrapper">
	<div class="quote">{{ quote }}</div>
</div>