Created
May 11, 2012 21:53
-
-
Save bartaz/2662615 to your computer and use it in GitHub Desktop.
writer.css by Bartek Szopka @bartaz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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); | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment