Untitled

dabblet.css

p{
	margin:0px;
	padding:0px;
}
article.post {
	font-family: Tahoma, Verdana, Sans Serif;
	font-size: 10pt;
	width:90%;
	margin:0% 5%;
}
article.post h1{
	display:block;
	padding-bottom:10px;
	border-bottom:1px dotted #999;
	margin-bottom:20px;
}
article.post h1 a{
	color:#fff;
	text-decoration:none;
	text-shadow:#000 2px 2px 6px;	
}
article.post header {
	background-color:#ccc;
	margin:10px;
	padding:10px;
	border-radius:8px;
	box-shadow:#666 2px 2px 8px;
	color:#fff;
}
article.post .content{
	display:block;
	padding:20px;
	text-align:justify;
}
article.post .content p{
	padding:4pt 2pt;
}
article.post img.photo{
	border:1px solid #fff;
	padding:2px;
	box-shadow:#000 2px 2px 6px;
}
article.post footer a img.avatar{
	width:16px;
	height:16px;
	vertical-align:middle;
	padding:1px;
	border:2px solid #B21;
	margin-right:4px;
	border-radius:4px;
}
article.post footer {
 	text-align:right;
 	border-top:1px dotted #666;
 	padding-top:10px;
 	margin-top:10px;
}
article.post footer a{
	text-decoration:none;
	color:#444;
	text-shadow: #222 1px 1px 3px; 
}
article.post footer a.permalink{
	float:left;
	font-size:9pt;
	text-decoration:none;
	color:#bbb;
	text-shadow:none;
}
.left{
	float:left;
	margin:6px 16px 8px 0px;
}
.right{
	float:right;
	margin:6px 0px 8px 16px;
	margin-left:15px;
}
.center{
	text-align:center;
}
article.post .gallery .screenshots figure.screenshot{
	display:inline-block;
	position:relative;
	border:4px solid #fff;
	box-shadow:#000 2px 2px 6px;
	border-radius:4px;
	margin:3px;
	overflow:hidden;
	/*padding:4px;*/
}
article.post .gallery .screenshots figure.screenshot img{
	background-clip:border-box;
	display:block;
}
.gallery{
	text-align:center;
	width:90%;
	margin:0% 5%;
}
.screenshots{
	display:inline-block;
	display:block;
	width:450px;
}
.medium{
	width:100px;
	/*height:54px;*/
}
.big{
	width:340px;
	/*height:230px;*/
}
.small{
	width:40px;
}

article.post .gallery .screenshots figure figcaption{
	display:block;
	position:absolute;
	font-size:6pt;
	background-color:rgba(100,100,100,0.2);
	bottom: -50px;
	color:#fff;
	padding:10px 0px;
	width:100%;
	-moz-transition: bottom .5s;
	-webkit-transition: bottom .5s;
	-o-transition: bottom .5s;
	transition: bottom .5s;
}
article.post .gallery .screenshots figure img {
	width:100%;
}
article.post .gallery .screenshots figure:hover figcaption{
	bottom:0px;
}
/*---- any figure with an image -----*/
a {
	text-decoration:none;
}
figure.caption{
	display:inline-block;
	position:relative;
	border:4px solid #fff;
	box-shadow:#000 2px 2px 6px;
	border-radius:4px;
	margin:3px;
	overflow:hidden;
	/*padding:4px;*/
	margin:6px 10px 8px 0px;
}
figure.caption img{
	background-clip:border-box;
	display:block;
}
figure.caption figcaption{
	display:block;
	position:absolute;
	font-size:6pt;
	background-color:rgba(100,100,100,0.2);
	border-top:4px solid #fff;
	bottom: -50px;
	color:#fff;
	width:100%;
	box-shadow:#000 0px -10px 4px;
	-moz-transition: bottom .5s;
	-webkit-transition: bottom .5s;
	-o-transition: bottom .5s;
	transition: bottom .5s;
	text-align:center;
	padding:2px;
}
figure.caption img {
	width:100%;
}
figure.caption:hover figcaption{
	bottom:0px;
}

dabblet.html

<article class="post" id="1234">
	<h1><a href="post/show/1234" title="This a demo article to help on design research.">A Demonstration Article</a></h1>
	<header>
		<p>This small text exists to help designer with coding the right design for there new Blog/CMS post display.</p>
	</header>
	<div class="content">
		<a href="http://ecx.images-amazon.com/images/I/51nybWWtXtL._SL500.jpg"><figure class="caption medium left"><img src="http://ecx.images-amazon.com/images/I/51nybWWtXtL._SL120.jpg"/><figcaption>cover for Arcania Gothic 4</figcaption></figure></a>
		<p>Sed fringilla ultrices ante at auctor. Sed nec nisl ac diam vulputate egestas.</p>
		<p>Cras sit amet justo et lacus vulputate gravida non eget sem. Pellentesque gravida, orci vel elementum luctus, neque eros tempor nisl, vel posuere orci justo at lectus. Phasellus gravida sollicitudin bibendum.Curabitur ac elit quis ligula congue dapibus. Vivamus quis sem sem, quis facilisis nisi.</p>
		<p>Quisque rhoncus convallis ultrices. Nunc id risus at tortor suscipit pellentesque ac sit amet mi. Duis nibh lorem, auctor id fringilla ut, ultrices in nulla. Suspendisse rhoncus commodo enim vel consequat.</p>
		<p>Pellentesque placerat ornare mollis. Mauris eget ipsum erat.Aliquam erat volutpat. Mauris ac mauris eget purus scelerisque sodales. Fusce laoreet congue leo, semper commodo sem semper ut. Phasellus pellentesque fringilla eros, sit amet porttitor erat malesuada non. Praesent et ante diam, sit amet malesuada nisi. Donec fermentum pulvinar diam non hendrerit.</p>
		<div class="gallery">
			<div class="screenshots">
			<a href="http://img.jeuxvideo.fr/03D4022603685800-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><figure class="screenshot big"><img src="http://img.jeuxvideo.fr/03D4022603685800-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" /><figcaption>Le marché du village</figcaption></figure></a>
			<a href="http://img.jeuxvideo.fr/03D4022603391518-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><figure class="screenshot medium"><img src="http://img.jeuxvideo.fr/03D4022603391518-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" /><figcaption>Montagne enneigée</figcaption></figure></a>
			<a href="http://img.jeuxvideo.fr/03D4022603391516-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><figure class="screenshot medium"><img src="http://img.jeuxvideo.fr/03D4022603391516-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" /></a><figcaption>Mage en action !</figcaption></figure></a>
			<a href="http://img.jeuxvideo.fr/03D4022603391412-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg"><figure class="screenshot medium"><img src="http://img.jeuxvideo.fr/03D4022603391412-c1-photo-oYToxOntzOjE6InciO2k6OTgwO30%3D-arcania-gothic-4.jpg" /></a><figcaption>Temple dans la forêt</figcaption></figure></a>
			</div>
		</div>
	</div>
	<footer>
		<a class="permalink" title="permanent link to this article" href="http://blog.ext/post/show/a-demonstration-article" data-permalink="http://blog.ext/post/show/a-demonstration-article
">http://blog.ext/post/show/a-demonstration-article</a>
		<a href="user/profile/mcgivrer" data-author="mcgivrer"><img class="avatar" src="https://lh3.googleusercontent.com/-LnwgJPshkMw/AAAAAAAAAAI/AAAAAAAAHu8/8OJyK5mJPXo/s200-c-k/photo.jpg" title="mcgivrer"/>McGivrer</a> /
		<a href=""><time datetime="2012-02-28 14:12:30">28/02/2012</time></a>
	</footer>	
</article>

settings.json

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