Design. I think.

dabblet.css

/**
 * Design. I think. 
 */

@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Serif|Montserrat);

.noise {
	background: url(http://i.imgur.com/gaTfJ.png);
}

.icon {
	border: 2px dashed #63D1F4;
	border-radius: 50%;
	height: 3em; width: 3em;
	margin: 0 0.2em 0.2em 0;
	transition: all ease-out 0.5s;
	float: left;
}

#linkedin{
	padding: 0.4em;
	height: 2.2em;
	width: 2.2em;
}

.icon:hover {
	border-style: solid;
}

.social_icons {;
	list-style-type: none;
	padding: 0 0 3em 0;
}

header{
	color: white;
	padding: 0.5em 1em 0 1em;
}

header h1 {
	clear: both;
	font-size: 2em;
	margin-top: 0;
	color: white;
}
header h2 {
	font-size: 1.2em;
	text-transform: uppercase;
	text-stroke: 0;
	text-shadow: none;
	margin: 0.5em;
	color: white;
}

time.posted {
	background: green;
	border: 1px solid #3E6617;
	border-left: none;
	color: white;
	font-family: PT Sans, sans-serif;
	padding: 0.5em 3em;
	margin-left: -2em;
	border-radius: 0 5px 5px 0;
}

#article_wrapper {
	height: 100%;
	background: linear-gradient(right top, green 0%, #00CD00 60%);
	/*background: #92c146;
	background: #40AD84; /* darkseagreen 
	background: #4B9816;
	background: #0C6;*/
}

.content {
	height: 100%;
	padding-left: 0.6em;
}


body {
	background: #1D0D0D;
	min-height: 100%;
	
	margin: 0;
	padding: 0;
}

h2, h3, h4, h5, h6 {
	font-family: PT Sans, Helvetica, Arial, sans-serif;
	
	margin-bottom: 0.2em;
}
h1, h2, h3, h4, h5, h6{
	color: black;
	text-fill-color: white;
	text-stroke: 1px #3E6617;

}

h1 {
	font-family: Montserrat;
	font-size: 3.2em;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -0.06em;
	padding: 0;
	margin: 0.5em 0.2em 0.2em 0.2em;
	
	color: black;
	
	border-bottom: 1px dashed lightgreen;
}

h2 {
	font-size: 2em;
}

p {
	font-family: PT Serif, serif;
	font-size: 1.1em;
	margin-top: 0.2em;
	color: #121212;
	text-shadow: 0 1px #fff;
}

a {
	color: #63D1F4;
	transition: all linear 0.1s;
	text-decoration: none;
}


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







/*
 *     Footer
 */

footer {
	width: 100%;
	margin: 0; padding: 0;
	color: white;
	position:relative;
	display: block;
}

footer p {
	color: #eaeaea;
	text-shadow: none;
	padding: 1em;
}

footer ul {
	list-style: none;
	font-size: 1.4em;
	padding-left: 1em;
}

footer li {
	margin-top: 0.6em;
}

footer a:hover, footer a:hover {
	color: #fff;
}

footer h1 {
	color: #fff;
	font-size: 2em;
}

footer .links {
	width: 50%;
	position: absolute; top: 1em; left: 1em;
}

footer .personalia {
	width: 35%;
	position: absolute; top: 1em; right: 1em;
}






article {
	max-width: 640px;
	padding: 2em;
	background: #fff;
	background: url(http://i.imgur.com/rZGbf.png);
	border: 1px solid #3E6617;
	border-top:0; border-bottom: 0;
}

.subtle_shadow {
	box-shadow: #444 0 1px 5px;
}



/*
 * Media
 */

#media_wrapper {
	position: relative;
	width: 60%;
	float: left;
	margin: 2em 2em 1em 0;
}

.media_image {
	max-width: 100%;
	padding: 0.1em; margin: 0;
	border: 1px solid #3E6617;
}

.media {
	padding: 0; margin: 0;
}

figcaption {
	font-family: PT Sans, sans-serif;
	font-size: 0.9em;
	color: #121212;
}

.media_meta {
	width: 100%;
	height: 0;
	background: #000;
	opacity: 0.7;
	overflow: hidden;
	
	position: absolute;
	top: 0.2em; left: 0.2em;
	
	transition: height cubic-bezier(0, 0.9, 0.7, 1.1) 0.4s;
	transition-delay: 0.5s;
}

.media_meta p {
	color: white;
	text-shadow: none;
	padding: 2em;
}

#media_wrapper:hover .media_meta {
	height: 30%;
	transition-delay: 0;
}

*::selection {
	background: #bada55;
}

*::selection {
	color: black;
}

/*

a::selection {
	background: #494949;
	color: white;
	text-shadow: none;
}
*/
@media screen and (max-width: 480px){
	#article_wrapper {
		padding:0;
		margin: 0;
		max-width: 100%;

	}
	
	
	article {
		border-right: 0;
		padding: 0.8em;
	}

	#media_wrapper {
		width: 98%;
	}
	
	body {
	}
	
	
	h1 {
	
	}
	
	h2 {
		font-size: 1.8em
	}
	
	li a {
		font-size: 0.8em;
		line-height: 0.8em;
	}
	
	ul {
		margin: 0;
		padding-left: 0.4em;
	}
	
	p, figcaption {
		font-size: 0.9em;
	}
	
	footer .personalia, footer .links  {
		width: auto;
		position: relative;
		top: 0;
		left: 0;
	}
}


@media screen and (max-width: 620px) {
	footer h1 {
		font-size: 1.6em;
	}
}

dabblet.html

<!-- content to be placed inside <body>…</body> -->

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<header class="noise">	
	<h1>This is a blog</h1>
	<h2>I might even write here sometimes</h2>
</header>


<div id="article_wrapper" class="wrapper">
<div class="content noise">

<article class="subtle_shadow">
<time class="posted subtle_shadow">January 19 2012</time>

<h1>Hello world</h1>

<p>Dette er en ingresstekst. Den er mentå bestå av ord, samt setninger av tilstrekkelig lengde. Sukkererter i pose, seigmenn på brød. Hvitløk til søster og pappa har en snekke. Hvorfor vil ikke hvalen spise epler?</p>

<div id="media_wrapper">
	<figure class="media">
		<img class="media_image subtle_shadow" src="http://i.imgur.com/0J0cp.jpg" />
		<figcaption>This is a piece of media. Wonder what happens when the text exedes one line. Will it break? Nope, it got handled fine, just fine<figcaption>
		
		<div class="media_meta">
			<p>Content relevant to media here.</p>
		</div>
	</figure>
</div>


<!-- start slipsum code -->

<h2>I'm serious as a heart attack</h2>
<p>You think <a href="#">water</a> moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

<h2>Hold on to your butts</h2>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. </p>

<h2>We happy?</h2>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>



<!-- please do not remove this line -->

<div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a></div>

<!-- end slipsum code -->

</article>

</div>
</div>

<footer class="subtle_shadow noise">
	<div id="footer_content" class="content">
		<div class="links">
			<h1>A collection of links</h1>
			<ul id="footer_anchor">
				<li><a href="#">Link somewhere</a>
				<li><a href="#">A link to some other place</a>
				<li><a href="#">The link to your dreams</a>
				<li><a href="#">Where will this anchor tag take you?</a>
				<li><a href="#">Oh my</a>
				<li><a href="#">A list of links of some kind I guess</a>
				<li><a href="#">A loooong tag to see what happens when it breaks a line. This is unfortunate.</a>

			</ul>
		</div>
		
		<div class="personalia">
			<h1>About</h1>
			<p>This has been an experiment by Trond Bremnes (<a href="http://twitter.com/kartoffelmos">@kartoffelmos</a>). Powered by <a href="http://dabblet.com">Dabblet</a>, cheap coffee and expensive beer.</p>
		
		<h1>Elsewhere</h1>
		<ul class="social_icons">
			<li><a href="http://github.com" title="http://github.com"><img src="http://dl.dropbox.com/u/185494/github.svg" class="icon" alt="http://github.com"/></a>
			<li><a href="http://twitter.com/kartoffelmos" title="http://twitter.com/kartoffelmos"><img src="http://dl.dropbox.com/u/185494/twitter.svg" class="icon" alt="http://twitter.com/kartoffelmos"/></a>
			<li><a href="http://linkedin.com" title="http://linkedin.com"><img src="http://dl.dropbox.com/u/185494/linkedin.svg" class="icon" alt="http://linkedin.com" id="linkedin"/></a>
			<li><a href="http://flickr.com/bremnes" title="http://flickr.com/bremnes"><img src="http://dl.dropbox.com/u/185494/flickr.svg" class="icon" alt="http://flickr.com/bremnes"/></a>
		</ul>

	</div>
</footer>

settings.json

{"view":"split","prefixfree":"1","page":"css"}