Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitter tegel template
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment