tkbremnes/dabblet.css

## dabblet.css
/**
 * Design. I think.
 */

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

#article_wrapper {
	height: 100%;
	background: linear-gradient(left top,#00CD00 0%, green 40%);
}

.content {
	height: 100%;
	padding-left: 0.6em;
	background: url(http://i.imgur.com/gaTfJ.png);
}


body {
	background: green;
	background: linear-gradient(left top,#00CD00 0%, green 40%);
	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.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;
}

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 0.25s;
	transition-delay: 0.6s;
}

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

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

*::selection {
	background: #D5F6B8;
	background: lightgreen;
	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: auto;
	}

	body {
	}


	h1 {
		font-size: 2.4em;
		margin-top: 1em;
	}

	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;
	}
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

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

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

<article class="subtle_shadow">
<h1>Hello world</h1>

<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">
	<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>
		</div>

	</div>
</footer>

## settings.json
{"view":"split","prefixfree":"1","page":"css"}
	/**
	* Design. I think.
	*/

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

	#article_wrapper {
	height: 100%;
	background: linear-gradient(left top,#00CD00 0%, green 40%);
	}

	.content {
	height: 100%;
	padding-left: 0.6em;
	background: url(http://i.imgur.com/gaTfJ.png);
	}


	body {
	background: green;
	background: linear-gradient(left top,#00CD00 0%, green 40%);
	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.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;
	}

	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 0.25s;
	transition-delay: 0.6s;
	}

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

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

	*::selection {
	background: #D5F6B8;
	background: lightgreen;
	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: auto;
	}

	body {
	}


	h1 {
	font-size: 2.4em;
	margin-top: 1em;
	}

	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;
	}
	}
	<!-- content to be placed inside <body>…</body> -->

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

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

	<article class="subtle_shadow">
	<h1>Hello world</h1>

	<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">
	<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>
	</div>

	</div>
	</footer>