writer.css by Bartek Szopka @bartaz

dabblet.css

/**
 * writer.css by Bartek Szopka @bartaz
 *
 * CSS inspired by markdown styles of iA Writer Mac app.
 *
 * Based on iA Writer markdown guide:
 * http://support.iawriter.com/help/kb/frequently-asked-questions-in-general/markdown-syntax-reference-guide
 */

/* Nitti Light that is used by Writer is not a free font,
   so here I use Ubuntu Mono as a 'good enough' equivalent */
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic);

body {
	background: #f5f6f6;
	color: #424242;
	
	font-family: "Nitti Light", "Ubuntu Mono", monospace;
	font-size: 22px;
	line-height: 1.6;
	
	max-width: 40em;
	margin: 0 auto;
	padding: 3em 4em;
}

/* reset default styles */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote {
	font-size: 1em;
	margin: 0;
	padding: 0;
	position: relative; /* for absolutely positioned markdown syntax */
}

/* importance: **importance** */
b:before, b:after, strong:before, strong:after {
	content: "**";
	font-weight: normal;
}

/* emphasis: _emphasis_ */
em {
	font-style: normal;
	text-decoration: underline;
}
em:before, em:after {
	content: "_";
	text-decoration: none;
}

/* inline code: `code` */
code:before, code:after { content: "`"; }

/* links: [link](http://example.com "title") */
a {
	text-decoration: none;
	color: inherit;
	padding: 0.1em 0 0.2em;
	border-radius: 0.2em;
}
a:hover { background: rgba(255,255,255,0.8); }
a:before { content: "["; }
a:after { content: "]"; }
a[href]:after { content: "](" attr(href) ")"; }
a[href][title]:after { content: "](" attr(href) " " "\"" attr(title) "\")"}


/* setting up some absolutely positioned :before elements */
h1:before, h2:before, h3:before,
h4:before, h5:before, h6:before,
li:before,
blockquote:before {
	position: absolute;
	right: 100%;	
}

/* headings: # Heading */

h1:before { content: "#\00A0"; }
h2:before { content: "##\00A0"; }
h3:before { content: "###\00A0"; }
h4:before { content: "####\00A0"; }
h5:before { content: "#####\00A0"; }
h6:before { content: "######\00A0"; }

/* lists */
ul, li { list-style: none; }

/* unordered lists:

     * list item
     * list item 
    ** nested list item
    
 */
ul li:before { content: "*\00A0" }
ul li li:before { content: "**\00A0" }
ul li li li:before { content: "***\00A0" }
ul li li li li:before { content: "****\00A0" }

/* ordered lists,
   counter magic based on: https://developer.mozilla.org/en/CSS_Counters
   
      1. first item
      2. second item
    2.1. nested item
      
 */

ol {
	  counter-reset: section; /* reset section counter with each ol element */
	  list-style-type: none;
}

ol li:before {
	  counter-increment: section; /* increment section counter */
	  content: counters(section, ".") ".\00A0";   /* get value of section counters separated by `.` */
}

/* quote:
   
     > This is some quote text that
       keeps its indent.
 
 */
blockquote {
	margin-left: 1em;
}

blockquote:before {
	content: ">\00A0";
}

/* and yes, I try to mimic the selection colour, too ... */

::selection {
	background: rgba(181,213,255,.8);
}

::-moz-selection {
	background: rgba(181,213,255,.8);
}

dabblet.html

<h1>writer.css</h1>
<p>Just having fun, trying to mimic <a href="http://iawriter.com">iA Writer</a> Markdown formatting styles.</p>

<h2>Supported formatting</h2>
<p>I tried some CSS magic to use as many original formatting options as possible.</p>

<h3>Headings</h3>
<p>Headings are supported (as it can be seen above these sections).

<h3>Text styles</h3>
<p>Basic text styles include <strong>strong</strong> text, some <em>emphasis</em>, a little bit of <code>inline code</code>
   and even <a href="http://dabblet.com" title="with optional titles">links</a>.</p>

<h3>Lists</h3>

<h4>Bulleted lists</h4>
<ul>
	<li>Unordered lists</li>
	<li>are supported
		<ul>
			<li>even with
				<ul><li>nested elements.</li></ul>
			</li>
		</ul>
	</li>
</ul>
<h4>Numbered lists</h4>
<ol>
	<li>Same is true</li>
	<li>for ordered lists
		<ol>
			<li>with nested
				<ol><li>counters.</li></ol>
			</li>
		</ol>
	</li>
<ol>

<h3>Quotes</h3>

<blockquote>Quote block also gets marked and nicely indented if it is long long long long long long long long enough.</blockquote>

<h2>Want moar?</h2>
<p>Of course there are more formatting options possible. If you have any suggestions feel free to fork and add something or let me know <a href="http://twitter.com/bartaz">@bartaz</a>.</p>
<p>But don't expect to much, it was just a Friday evening fun ;)</p>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}