diff --git a/README.md b/README.md
index 7b623a3..c0d0b4a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,13 @@
This is the code powering [freepost](http://freepo.st).
+# Development
+
+## Stylesheets
+
+Sources are in css/. They are compiled using Stylus. Run this command from the project's root:
+
+$ stylus --watch --compress --disable-cache --out css/ css/
+
# Contacts
If you have any questions please get in contact with us at [freepost](http://freepo.st).
diff --git a/css/freepost.css b/css/freepost.css
index 58ad06c..3960707 100644
--- a/css/freepost.css
+++ b/css/freepost.css
@@ -1,426 +1 @@
-* {
- margin: 0;
- padding: 0;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-img
-{
- /* Prevent images from taking up too much space in comments */
- max-width: 100%;
-}
-
-label
-{
- cursor: pointer;
- font-weight: normal;
-}
-
-html, body
-{
- background-color: #fff; /* #f5f8fa; */
- font-size: 1em;
- height: 100%;
- line-height: 1em;
- margin: 0;
- padding: 0;
- width: 100%;
-}
-
- /* Page header */
- .header
- {
- padding: 1em 0;
- text-align: center;
- }
-
- /* Logo text */
- .header a.logo,
- .header a.logo:hover,
- .header a.logo:visited
- {
- color: #000;
- font-weight: bold;
- text-decoration: none;
- }
-
- /* Logo picture */
- .header a.logo > img
- {
- height: 1.5em;
- margin: 0 1em;
- vertical-align: middle;
- }
-
- /* Menu under the logo */
- .header > .menu
- {
- padding: 1em 0;
- }
-
- .header > .menu > *
- {
- margin: 0 1em;
- }
-
- .header > .menu .new_messages
- {
- background-color: rgb(255, 175, 50);
- border-radius: 4px;
- color: #fff;
- font-weight: bold;
- margin: 0 .5em 0 0;
- padding: 0em 0.5em;
- text-decoration: none;
- }
-
-
- .content
- {
- padding: 1em 0;
- line-height: 1.5em;
- }
-
- .content .vote
- {
- margin: 0 1.5em 0 0;
- }
-
- .content .vote > a
- {
- display: inline-block;
- margin: 0;
- overflow: hidden;
- padding: 0;
- text-decoration: none;
- vertical-align: middle;
- }
-
- .content .vote img {
- cursor: pointer;
- height: 1em;
- margin: 0;
- padding: .2em;
- float: left;
- }
-
- .content .vote .upvoted
- {
- background-color: #fff;
- border: 1px solid #00E313;
- border-radius: 999em;
- }
-
- .content .vote .downvoted
- {
- background-color: #fff;
- border: 1px solid #FF0000;
- border-radius: 999em;
- }
-
- .content .vote .count {
- margin: 0 .5em;
- }
-
- /* Home page */
- .content .posts
- {
- }
-
- .content .posts .post
- {
- margin: 0 0 2em 0;
- vertical-align: top;
- }
-
- .content .posts .post > .title
- {
- font-size: 1.5em;
- }
-
- .content .posts .post > .title > a
- {
- color: #000;
- }
-
- .content .posts .post > .info
- {
- color: #666;
- margin: .5em 0;
- opacity: .8;
- }
-
- /* New submission */
- .content > form.submit
- {
- margin: auto;
- max-width: 30em;
- }
-
- /* View a post */
- .content > .post
- {
- }
-
- /* Style used to format Markdown tables */
- .content > .post table
- {
- background: #fff;
- border-collapse: collapse;
- text-align: left;
- }
-
- .content > .post table th
- {
- border-bottom: 2px solid #6678b1;
- color: #039;
- font-weight: normal;
- padding: 0 1em;
- }
-
- .content > .post table td
- {
- border-bottom: 1px solid #ccc;
- color: #669;
- padding: .5em 1em;
- }
-
- .content > .post table tbody tr:hover td
- {
- color: #009;
- }
-
- /* The post title */
- .content > .post > .title
- {
- font-size: 1.5em;
- }
-
- /* Info below post title */
- .content > .post > .info
- {
- margin: 1em 0;
- }
-
- /* Post text */
- .content > .post > .text
- {
- margin: 1em 2.5em;
- word-wrap: break-word;
- }
-
- /* Post "new comment" form */
- .content > .post > .new_comment
- {
- margin: 0 2.5em;
- overflow: hidden;
- }
-
- .content > .post > .new_comment > textarea
- {
- height: 2.5em;
-
- -webkit-transition: 1s;
- transition: 1s;
- }
-
- .content > .post > .new_comment > textarea:focus
- {
- height: 10em;
- }
-
- .content > .post > .new_comment > input[type=submit]
- {
- float: right;
- margin: 1em 0;
- }
-
- /* Comments tree for the Post page */
- .content > .post > .comments
- {
- margin: 5em 0 0 0;
- }
-
- .content > .post > .comments > .comment
- {
- margin: 0 0 2em 0;
- overflow: hidden;
- }
-
- .content > .post > .comments > .comment > .pin
- {
- color: #CD006B;
- float: left;
- font-size: .8em;
- padding: 0 1em 0 0;
- vertical-align: top;
- }
-
- .content > .post > .comments > .comment > .info
- {
- font-size: .9em;
- margin: 0 0 0 1em;
- }
-
- .content > .post > .comments > .comment > .info .username > a,
- .content > .post > .comments > .comment > .info .username > a:hover
- {
- font-weight: bold;
- }
-
- .content > .post > .comments > .comment > .info .op > a,
- .content > .post > .comments > .comment > .info .op > a:hover
- {
- background-color: rgb(255, 175, 50);
- border-radius: 4px;
- color: #fff;
- font-weight: bold;
- margin: 0 .5em 0 0;
- padding: 0em 0.5em;
- text-decoration: none;
- }
-
- .content > .post > .comments > .comment > .info > .vote
- {
- margin: 0 1em;
- }
-
- .content > .post > .comments > .comment > .text
- {
- margin: .5em 0 0 1.5em;
- word-wrap: break-word;
- }
-
- /* Give the comment that's linked to in the URL location hash a lightyellow background color */
- .content > .post > .comments > .comment:target
- {
- background-color: lightyellow;
- }
-
-
- /* User home page */
- .content table.user
- {
- /* If one length specified: both horizontal and vertical spacing
- * If two length specified: first sets the horizontal spacing, and
- * the second sets the vertical spacing
- */
- border-spacing: 2em 1em;
- border-collapse: separate;
- margin: auto;
- width: 80%;
- }
-
- .content table.user tr > td:first-child
- {
- font-weight: bold;
- text-align: right;
- vertical-align: top;
- width: 30%;
- }
-
- .content table.user tr > td:last-child
- {
- text-align: left;
- }
-
- .content table.user tr > td:last-child label
- {
- padding: 1em 0;
- }
-
- /* User activity */
- .content > .user_activity
- {
- }
-
- .content > .user_activity > *
- {
- margin: 0 0 2em 0;
- }
-
- .content > .user_activity > * > .info
- {
- color: #888;
- }
-
- /* Login page */
- .content > .login
- {
- margin: auto;
- max-width: 20em;
- }
-
- .content > .login input[type=submit]
- {
- margin: 1em 0;
- }
-
- /* Edit a post or a comment */
- .content > .edit
- {
- }
-
- /* Reply to a comment */
- .content > .reply
- {
- }
-
- /* About page */
- .content > .about
- {
- }
-
- .content > .about > h3
- {
- margin: 1em 0 .5em 0;
- }
-
- .content > .about > p
- {
- line-height: 1.5em;
- }
-
- .footer
- {
- border-top: 1px solid #6ECFFF;
- margin: 3em 0 0 0;
- padding: 2em 0;
- }
-
- .footer img
- {
- height: 1.2em;
- margin: 0 .5em 0 0;
- vertical-align: middle;
- }
-
- .footer > ul
- {
- list-style: none;
- margin: 0;
- overflow: hidden;
- padding: 0;
- }
-
- .footer > ul > li
- {
- float: left;
- margin: 0 2em 0 0;
- }
-
- /* When users vote, this is used as target, such that
- * the page is not reloaded
- */
- .vote_sink
- {
- height: 1px;
- left: -10px;
- position: fixed;
- top: -10px;
- width: 1px;
- }
\ No newline at end of file
+*{margin:0;padding:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}img{max-width:100%}label{cursor:pointer;font-weight:normal}html,body{background-color:#fff;font-size:1em;height:100%;line-height:1em;margin:0;padding:0;width:100%;}html .header,body .header{padding:1em 0;text-align:center;}html .header a.logo,body .header a.logo,html .header a.logo:hover,body .header a.logo:hover,html .header a.logo:visited,body .header a.logo:visited{color:#000;font-weight:bold;text-decoration:none;}html .header a.logo > img,body .header a.logo > img,html .header a.logo:hover > img,body .header a.logo:hover > img,html .header a.logo:visited > img,body .header a.logo:visited > img{height:1.5em;margin:0 1em;vertical-align:middle}html .header > .menu,body .header > .menu{padding:1em 0;}html .header > .menu > *,body .header > .menu > *{margin:0 1em}html .header > .menu .new_messages,body .header > .menu .new_messages{background-color:#ffaf32;border-radius:4px;color:#fff;font-weight:bold;margin:0 .5em 0 0;padding:0 .5em;text-decoration:none}html .content,body .content{padding:1em 0;line-height:1.5em;}html .content .vote,body .content .vote{margin:0 1.5em 0 0;}html .content .vote > a,body .content .vote > a{display:inline-block;margin:0;overflow:hidden;padding:0;text-decoration:none;vertical-align:middle}html .content .vote img,body .content .vote img{cursor:pointer;height:1em;margin:0;padding:.2em;float:left}html .content .vote .upvoted,body .content .vote .upvoted{background-color:#fff;border:1px solid #00e313;border-radius:999em}html .content .vote .downvoted,body .content .vote .downvoted{background-color:#fff;border:1px solid #f00;border-radius:999em}html .content .vote .count,body .content .vote .count{margin:0 .5em}html .content .posts .post,body .content .posts .post{margin:0 0 2em 0;vertical-align:top;}html .content .posts .post > .title,body .content .posts .post > .title{font-size:1.5em;}html .content .posts .post > .title > a,body .content .posts .post > .title > a{color:#000}html .content .posts .post > .info,body .content .posts .post > .info{color:#666;margin:.5em 0;opacity:.8}html .content > form.submit,body .content > form.submit{margin:auto;max-width:30em}html .content > .post table,body .content > .post table{background:#fff;border-collapse:collapse;text-align:left;}html .content > .post table th,body .content > .post table th{border-bottom:2px solid #6678b1;color:#039;font-weight:normal;padding:0 1em}html .content > .post table td,body .content > .post table td{border-bottom:1px solid #ccc;color:#669;padding:.5em 1em}html .content > .post table tbody tr:hover td,body .content > .post table tbody tr:hover td{color:#009}html .content > .post > .title,body .content > .post > .title{font-size:1.5em}html .content > .post .info,body .content > .post .info{margin:1em 0}html .content > .post > .text,body .content > .post > .text{margin:1em 2.5em;word-wrap:break-word}html .content > .post .new_comment,body .content > .post .new_comment{margin:0 2.5em;overflow:hidden;}html .content > .post .new_comment > textarea,body .content > .post .new_comment > textarea{height:2.5em;-webkit-transition:1s;transition:1s}html .content > .post .new_comment > textarea:focus,body .content > .post .new_comment > textarea:focus{height:10em}html .content > .post .new_comment > input[type=submit],body .content > .post .new_comment > input[type=submit]{float:right;margin:1em 0}html .content > .post > .comments,body .content > .post > .comments{margin:5em 0 0 0;}html .content > .post > .comments > .comment,body .content > .post > .comments > .comment{margin:0 0 2em 0;overflow:hidden;}html .content > .post > .comments > .comment > .pin,body .content > .post > .comments > .comment > .pin{color:#cd006b;float:left;font-size:.8em;padding:0 1em 0 0;vertical-align:top}html .content > .post > .comments > .comment > .info,body .content > .post > .comments > .comment > .info{font-size:.9em;margin:0 0 0 1em;}html .content > .post > .comments > .comment > .info .username > a,body .content > .post > .comments > .comment > .info .username > a,html .content > .post > .comments > .comment > .info .username > a:hover,body .content > .post > .comments > .comment > .info .username > a:hover{font-weight:bold}html .content > .post > .comments > .comment > .info .op > a,body .content > .post > .comments > .comment > .info .op > a,html .content > .post > .comments > .comment > .info .op > a:hover,body .content > .post > .comments > .comment > .info .op > a:hover{background-color:#ffaf32;border-radius:4px;color:#fff;font-weight:bold;margin:0 .5em 0 0;padding:0 .5em;text-decoration:none}html .content > .post > .comments > .comment > .info > .vote,body .content > .post > .comments > .comment > .info > .vote{margin:0 1em}html .content > .post > .comments > .comment > .text,body .content > .post > .comments > .comment > .text{margin:.5em 0 0 1.5em;word-wrap:break-word}html .content > .post .comment:target,body .content > .post .comment:target{background-color:#ffffe0}html > table.user,body > table.user{border-spacing:2em 1em;border-collapse:separate;margin:auto;width:80%;}html > table.user tr > td:first-child,body > table.user tr > td:first-child{font-weight:bold;text-align:right;vertical-align:top;width:30%}html > table.user tr > td:last-child,body > table.user tr > td:last-child{text-align:left;}html > table.user tr > td:last-child label,body > table.user tr > td:last-child label{padding:1em 0}html > .user_activity > *,body > .user_activity > *{margin:0 0 2em 0;}html > .user_activity > * > .info,body > .user_activity > * > .info{color:#888}html > .login,body > .login{margin:auto;max-width:20em;}html > .login input[type=submit],body > .login input[type=submit]{margin:1em 0}html > .about > h3,body > .about > h3{margin:1em 0 .5em 0}html > .about > p,body > .about > p{line-height:1.5em}.footer{border-top:1px solid #6ecfff;margin:3em 0 0 0;padding:2em 0;}.footer img{height:1.2em;margin:0 .5em 0 0;vertical-align:middle}.footer > ul{list-style:none;margin:0;overflow:hidden;padding:0;}.footer > ul > li{float:left;margin:0 2em 0 0}.vote_sink{height:1px;left:-10px;position:fixed;top:-10px;width:1px}
\ No newline at end of file
diff --git a/css/freepost.styl b/css/freepost.styl
new file mode 100644
index 0000000..36409fe
--- /dev/null
+++ b/css/freepost.styl
@@ -0,0 +1,322 @@
+*
+ margin 0
+ padding 0
+ font-family "Helvetica Neue", Helvetica, Arial, sans-serif
+
+ -moz-box-sizing border-box
+ -webkit-box-sizing border-box
+ box-sizing border-box
+
+
+img
+ /* Prevent images from taking up too much space in comments */
+ max-width 100%
+
+label
+ cursor pointer
+ font-weight normal
+
+html, body
+ background-color #fff
+ font-size 1em
+ height 100%
+ line-height 1em
+ margin 0
+ padding 0
+ width 100%
+
+ /* Page header */
+ .header
+ padding 1em 0
+ text-align center
+
+ /* Logo text */
+ a.logo,
+ a.logo:hover,
+ a.logo:visited
+ color #000
+ font-weight bold
+ text-decoration none
+
+ /* Logo picture */
+ > img
+ height 1.5em
+ margin 0 1em
+ vertical-align middle
+
+ /* Menu under the logo */
+ > .menu
+ padding 1em 0
+
+ > *
+ margin 0 1em
+
+ /* Highlight username if there are unread messages */
+ .new_messages
+ background-color rgb(255, 175, 50)
+ border-radius 4px
+ color #fff
+ font-weight bold
+ margin 0 .5em 0 0
+ padding 0em 0.5em
+ text-decoration none
+
+
+ .content
+ padding 1em 0
+ line-height 1.5em
+
+ .vote
+ margin 0 1.5em 0 0
+
+ > a
+ display: inline-block
+ margin: 0
+ overflow: hidden
+ padding: 0
+ text-decoration none
+ vertical-align middle
+
+ /* up-down arrows are images */
+ img
+ cursor pointer
+ height 1em
+ margin 0
+ padding .2em
+ float left
+
+ /* Arrow style if already upvoted (green) */
+ .upvoted
+ background-color #fff
+ border 1px solid #00E313
+ border-radius 999em
+
+ /* Arrow style if already upvoted (red) */
+ .downvoted
+ background-color #fff
+ border 1px solid #FF0000
+ border-radius 999em
+
+ /* Votes counter */
+ .count
+ margin 0 .5em
+
+ /* Home page */
+ .posts
+
+ /* A singe post */
+ .post
+ margin 0 0 2em 0
+ vertical-align top
+
+ > .title
+ font-size 1.5em
+
+ > a
+ color #000
+
+ /* Some post info showed below the title */
+ > .info
+ color #666
+ margin .5em 0
+ opacity .8
+
+ /* New submission page */
+ > form.submit
+ margin auto
+ max-width 30em
+
+ /* Page for a post */
+ > .post
+
+ /* Style used to format Markdown tables */
+ table
+ background #fff
+ border-collapse collapse
+ text-align left
+
+ th
+ border-bottom 2px solid #6678b1
+ color #039
+ font-weight normal
+ padding 0 1em
+
+ td
+ border-bottom 1px solid #ccc
+ color #669
+ padding .5em 1em
+
+ tbody tr:hover td
+ color #009
+
+ /* The post title */
+ > .title
+ font-size 1.5em
+
+ /* Info below post title */
+ .info
+ margin 1em 0
+
+ /* Post text */
+ > .text
+ margin 1em 2.5em
+ word-wrap break-word
+
+ /* The "new comment" form for this post page */
+ .new_comment
+ margin 0 2.5em
+ overflow hidden
+
+ > textarea
+ height 2.5em
+
+ -webkit-transition 1s
+ transition 1s
+
+ > textarea:focus
+ height 10em
+
+ > input[type=submit]
+ float right
+ margin 1em 0
+
+ /* Comments tree for the Post page */
+ > .comments
+ margin 5em 0 0 0
+
+ /* A single comment in the tree */
+ > .comment
+ margin 0 0 2em 0
+ overflow hidden
+
+ /* This is just a mark to indicate the beginning
+ * of a new comment. The only reason for this is
+ * to make the thread more readable
+ */
+ > .pin
+ color #CD006B
+ float left
+ font-size .8em
+ padding 0 1em 0 0
+ vertical-align top
+
+ /* Some info about this comment */
+ > .info
+ font-size .9em
+ margin 0 0 0 1em
+
+ .username > a,
+ .username > a:hover
+ font-weight bold
+
+ .op > a,
+ .op > a:hover
+ background-color rgb(255, 175, 50)
+ border-radius 4px
+ color #fff
+ font-weight bold
+ margin 0 .5em 0 0
+ padding 0em 0.5em
+ text-decoration none
+
+ > .vote
+ margin 0 1em
+
+ /* The comment text */
+ > .text
+ margin .5em 0 0 1.5em
+ word-wrap break-word
+
+ /* Give the comment that's linked to in the URL location hash a lightyellow background color */
+ .comment:target
+ background-color lightyellow
+
+ /* User home page */
+ > table.user
+ /* If one length specified: both horizontal and vertical spacing
+ * If two length specified: first sets the horizontal spacing, and
+ * the second sets the vertical spacing
+ */
+ border-spacing 2em 1em
+ border-collapse separate
+ margin auto
+ width 80%
+
+ tr
+ > td:first-child
+ font-weight bold
+ text-align right
+ vertical-align top
+ width 30%
+
+ > td:last-child
+ text-align left
+
+ label
+ padding 1em 0
+
+ /* User activity */
+ > .user_activity
+
+ > *
+ margin 0 0 2em 0
+
+ > .info
+ color #888
+
+ /* Login page */
+ > .login
+ margin auto
+ max-width 20em
+
+ input[type=submit]
+ margin 1em 0
+
+ /* Page to edit a post or a comment */
+ > .edit
+ {
+ }
+
+ /* Page to reply to a comment */
+ > .reply
+ {
+ }
+
+ /* About page */
+ > .about
+
+ > h3
+ margin 1em 0 .5em 0
+
+ > p
+ line-height 1.5em
+
+ .footer
+ border-top 1px solid #6ECFFF
+ margin 3em 0 0 0
+ padding 2em 0
+
+ img
+ height 1.2em
+ margin 0 .5em 0 0
+ vertical-align middle
+
+ > ul
+ list-style none
+ margin 0
+ overflow hidden
+ padding 0
+
+ > li
+ float left
+ margin 0 2em 0 0
+
+ /* When users vote, this is used as target, such that
+ * the page is not reloaded
+ */
+ .vote_sink
+ height 1px;
+ left -10px
+ position fixed
+ top -10px
+ width 1px
\ No newline at end of file