From 2eb248eabc1061264ceae14989ce8e4b5d3d4c32 Mon Sep 17 00:00:00 2001
From: Radek Stepan <dev@radekstepan.com>
Date: Fri, 29 Aug 2014 21:02:58 -0700
Subject: [PATCH] switch theme

---
 build/app.bundle.css          |  50 ++++++++++++++++++++++------------
 build/app.bundle.js           |   2 +-
 build/app.css                 |  50 ++++++++++++++++++++++------------
 build/app.js                  |   2 +-
 public/fonts/fontello.eot     | Bin 6320 -> 6480 bytes
 public/fonts/fontello.svg     |   3 ++
 public/fonts/fontello.ttf     | Bin 6152 -> 6312 bytes
 public/fonts/fontello.woff    | Bin 3800 -> 3940 bytes
 src/styles/app.styl           |  39 ++++++++++++++------------
 src/styles/icons.styl         |  23 +++++++++++++++-
 src/templates/layout.mustache |   2 +-
 11 files changed, 116 insertions(+), 55 deletions(-)

diff --git a/build/app.bundle.css b/build/app.bundle.css
index 49f7384..908b9e3 100644
--- a/build/app.bundle.css
+++ b/build/app.bundle.css
@@ -419,28 +419,44 @@ table {
 .icon.fire-station:before{content:'\e805'}
 .icon.sort-alphabet:before{content:'\e806'}
 .icon.down-open:before{content:'\e807'}
-
+.icon.spin6{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
+.icon.spin6:before{content:'\e808'}
+@-moz-keyframes spin{0%{-moz-transform:rotate(0)}
+100%{-moz-transform:rotate(360deg)}
+}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg)}
+}@-moz-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-o-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-ms-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}
 body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
-a{color:#b1b6c4;text-decoration:none}
+a{text-decoration:none;color:#aaafbf}
 h1,h2,h3,p{margin:0}
 ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .icon{margin-right:4px}
 .wrap{width:800px;margin:0 auto}
-#head{background:#252f39;color:#86939c;height:64px;}
-#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:rgba(0,0,0,0.3);display:inline-block;}
+#head{background:#c1041c;height:64px;}
+#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:#77000e;display:inline-block;color:#c1041c;}
 #head h1 .icon{margin:0}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}
-#head .q .icon{position:absolute;color:#303d4a;}
+#head .q .icon{position:absolute;color:#c1041c;}
 #head .q .icon.search{top:8px;left:12px}
 #head .q .icon.down-open{top:8px;right:12px}
-#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
+#head .q input{background:#77000e;border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:#fff;width:220px}
 #head ul{display:inline-block;}
 #head ul li{margin-left:30px}
-#head a{font-weight:bold;}
-#head a.active,#head a:hover{color:#dde1ed}
+#head a{color:#e0808d;font-weight:bold;}
+#head a.active,#head a:hover{color:#fff}
 #head .right{float:right;margin-right:20px;line-height:64px;}
-#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:11px 20px}
+#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#ffbb2a;color:#c1041c;padding:11px 20px}
 #title{border-bottom:3px solid #f3f4f8;}
 #title h2{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
 #title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
@@ -453,8 +469,8 @@ ul li{display:inline-block}
 #content #hero .content .address{font-size:120px;float:left}
 #content #hero .content .cta{text-align:center;margin-top:10px;}
 #content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
-#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
-#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
+#content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
+#content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
 #content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
 #content #repos h2{color:#3e4457;display:inline-block}
 #content #repos .sort{float:right;line-height:30px}
@@ -466,14 +482,14 @@ ul li{display:inline-block}
 #content #repos table tr td .progress .percent{float:right}
 #content #repos table tr td .progress .bar{-webkit-border-radius:4px;border-radius:4px;background:#eaecf2;height:10px;width:100%;}
 #content #repos table tr td .progress .bar.inner{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
-#content #repos table tr td .progress .bar.red{background:#ff2955}
-#content #repos table tr td .progress .bar.green{background:#4bda66}
-#content #repos table tr td .progress .due.red{color:#ff2955;font-weight:bold}
+#content #repos table tr td .progress .bar.red{background:#c1041c}
+#content #repos table tr td .progress .bar.green{background:#00b361}
+#content #repos table tr td .progress .due.red{color:#c1041c;font-weight:bold}
 #content #repos table tr td:first-child a{color:#3e4457;font-weight:bold}
 #content #repos table tr:nth-child(2) td{background:#fefefe}
 #content #repos table tr:last-child td{border:0}
 #content #repos table tr.done td{background:#ebf6f1;}
-#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#9fc9b5}
+#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#00b361}
 #content #repos .header,#content #repos .footer{padding:20px 30px}
 #content #repos .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
 #content #repos .header a{font-family:'MuseoSlab500Regular',serif}
@@ -487,10 +503,10 @@ ul li{display:inline-block}
 #content #add .form table{width:100%;}
 #content #add .form table tr td:first-child{width:100%}
 #content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
-#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#00b361;color:#fff}
+#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
 #content #add .header,#content #add .footer{padding:20px 30px}
 #content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
 #content #add .header a{font-family:'MuseoSlab500Regular',serif}
 #content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
-#content #add .footer .icon{color:#aaafbf}
+#content #add .footer .icon{display:inline-block;color:#aaafbf}
 #footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}
diff --git a/build/app.bundle.js b/build/app.bundle.js
index d3c179a..64859d1 100644
--- a/build/app.bundle.js
+++ b/build/app.bundle.js
@@ -29762,7 +29762,7 @@ if ( typeof window === "object" && typeof window.document === "object" ) {
     // layout.mustache
     root.require.register('burnchart/src/templates/layout.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>","","<div id=\"title\">","    <div class=\"wrap\">","        <h2>Disposable Project</h2>","        <span class=\"milestone\">Milestone 1.0</span>","        <p class=\"description\">The one where we deliver all that we promised.</p>","    </div>","</div>","","<div id=\"content\" class=\"wrap\">","    <div id=\"hero\">","        <div class=\"content\">","            <span class=\"icon address\"></span>","            <h2>See your project progress</h2>","            <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>","            <div class=\"cta\">","                <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>","                <a href=\"#\" class=\"secondary\">Read the Guide</a>","            </div>","        </div>","    </div>","","    <div id=\"repos\">","        <div class=\"header\">","            <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>","            <h2>Projects</h2>","        </div>","","        <table>","            <tr>","                <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","                <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">40%</span>","                        <span class=\"due\">due on Friday</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:40%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr class=\"done\">","                <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","                <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">100%</span>","                        <span class=\"due\">due tomorrow</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar green\" style=\"width:100%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","                <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">27%</span>","                        <span class=\"due\">due in 2 weeks</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:27%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","                <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">90%</span>","                        <span class=\"due red\">overdue by a month</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:90%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","        </table>","","        <div class=\"footer\">","            <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>","        </div>","    </div>","","    <div id=\"add\">","        <div class=\"header\">","            <h2>Add a Project</h2>","            <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","        </div>","","        <div class=\"form\">","            <table>","                <tr>","                    <td>","                        <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                    </td>","                    <td>","                        <a href=\"#\">Add</a>","                    </td>","                </tr>","            </table>","        </div>","","        <div class=\"footer\">","            <span class=\"icon loading\"></span> Connecting to your repo.","        </div>","    </div>","</div>","","<div id=\"footer\">","    <div class=\"wrap\">","        &copy; 2012-2014 Radek Stepan","    </div>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>","","<div id=\"title\">","    <div class=\"wrap\">","        <h2>Disposable Project</h2>","        <span class=\"milestone\">Milestone 1.0</span>","        <p class=\"description\">The one where we deliver all that we promised.</p>","    </div>","</div>","","<div id=\"content\" class=\"wrap\">","    <div id=\"hero\">","        <div class=\"content\">","            <span class=\"icon address\"></span>","            <h2>See your project progress</h2>","            <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>","            <div class=\"cta\">","                <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>","                <a href=\"#\" class=\"secondary\">Read the Guide</a>","            </div>","        </div>","    </div>","","    <div id=\"repos\">","        <div class=\"header\">","            <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>","            <h2>Projects</h2>","        </div>","","        <table>","            <tr>","                <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","                <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">40%</span>","                        <span class=\"due\">due on Friday</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:40%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr class=\"done\">","                <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","                <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">100%</span>","                        <span class=\"due\">due tomorrow</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar green\" style=\"width:100%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","                <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">27%</span>","                        <span class=\"due\">due in 2 weeks</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:27%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","                <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">90%</span>","                        <span class=\"due red\">overdue by a month</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:90%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","        </table>","","        <div class=\"footer\">","            <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>","        </div>","    </div>","","    <div id=\"add\">","        <div class=\"header\">","            <h2>Add a Project</h2>","            <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","        </div>","","        <div class=\"form\">","            <table>","                <tr>","                    <td>","                        <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                    </td>","                    <td>","                        <a href=\"#\">Add</a>","                    </td>","                </tr>","            </table>","        </div>","","        <div class=\"footer\">","            <span class=\"icon spin6\"></span> Connecting to your repo.","        </div>","    </div>","</div>","","<div id=\"footer\">","    <div class=\"wrap\">","        &copy; 2012-2014 Radek Stepan","    </div>","</div>"].join("\n");
     });
   })();
 
diff --git a/build/app.css b/build/app.css
index 33f2a65..a2ebe3e 100644
--- a/build/app.css
+++ b/build/app.css
@@ -12,28 +12,44 @@
 .icon.fire-station:before{content:'\e805'}
 .icon.sort-alphabet:before{content:'\e806'}
 .icon.down-open:before{content:'\e807'}
-
+.icon.spin6{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-ms-animation:spin 2s infinite linear;animation:spin 2s infinite linear;}
+.icon.spin6:before{content:'\e808'}
+@-moz-keyframes spin{0%{-moz-transform:rotate(0)}
+100%{-moz-transform:rotate(360deg)}
+}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg)}
+}@-moz-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-o-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@-ms-keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}@keyframes spin{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
+100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
+}
 body{color:#3e4457;font-family:'MuseoSans500Regular',sans-serif}
-a{color:#b1b6c4;text-decoration:none}
+a{text-decoration:none;color:#aaafbf}
 h1,h2,h3,p{margin:0}
 ul{list-style-type:none;margin:0;padding:0;}
 ul li{display:inline-block}
 .icon{margin-right:4px}
 .wrap{width:800px;margin:0 auto}
-#head{background:#252f39;color:#86939c;height:64px;}
-#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:rgba(0,0,0,0.3);display:inline-block;}
+#head{background:#c1041c;height:64px;}
+#head h1{font-size:26px;margin:0;padding:10px 24px;line-height:44px;height:44px;background:#77000e;display:inline-block;color:#c1041c;}
 #head h1 .icon{margin:0}
 #head .q{position:relative;display:inline-block;margin:13px 20px 0 20px;vertical-align:top;}
-#head .q .icon{position:absolute;color:#303d4a;}
+#head .q .icon{position:absolute;color:#c1041c;}
 #head .q .icon.search{top:8px;left:12px}
 #head .q .icon.down-open{top:8px;right:12px}
-#head .q input{background:rgba(0,0,0,0.3);border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:rgba(255,255,255,0.5);width:220px}
+#head .q input{background:#77000e;border:0;padding:10px 12px 10px 36px;font-size:14px;-webkit-border-radius:2px;border-radius:2px;color:#fff;width:220px}
 #head ul{display:inline-block;}
 #head ul li{margin-left:30px}
-#head a{font-weight:bold;}
-#head a.active,#head a:hover{color:#dde1ed}
+#head a{color:#e0808d;font-weight:bold;}
+#head a.active,#head a:hover{color:#fff}
 #head .right{float:right;margin-right:20px;line-height:64px;}
-#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#fff;color:#00b361;padding:11px 20px}
+#head .right a{-webkit-border-radius:2px;border-radius:2px;background:#ffbb2a;color:#c1041c;padding:11px 20px}
 #title{border-bottom:3px solid #f3f4f8;}
 #title h2{border-bottom:3px solid #aaafbf;margin:30px 0 -3px 0;display:inline-block;padding-bottom:20px}
 #title .milestone{font-size:16px;font-weight:bold;margin:0 20px}
@@ -46,8 +62,8 @@ ul li{display:inline-block}
 #content #hero .content .address{font-size:120px;float:left}
 #content #hero .content .cta{text-align:center;margin-top:10px;}
 #content #hero .content .cta a{font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:2px;border-radius:2px;display:inline-block;margin:0 4px;}
-#content #hero .content .cta a.primary{font-weight:bold;background:#00b361;color:#fff}
-#content #hero .content .cta a.secondary{background:#fff;color:#00b361}
+#content #hero .content .cta a.primary{font-weight:bold;background:#c1041c;color:#fff}
+#content #hero .content .cta a.secondary{background:#fff;color:#c1041c}
 #content #repos{border:1px solid #cdcecf;-webkit-border-radius:2px;border-radius:2px;}
 #content #repos h2{color:#3e4457;display:inline-block}
 #content #repos .sort{float:right;line-height:30px}
@@ -59,14 +75,14 @@ ul li{display:inline-block}
 #content #repos table tr td .progress .percent{float:right}
 #content #repos table tr td .progress .bar{-webkit-border-radius:4px;border-radius:4px;background:#eaecf2;height:10px;width:100%;}
 #content #repos table tr td .progress .bar.inner{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
-#content #repos table tr td .progress .bar.red{background:#ff2955}
-#content #repos table tr td .progress .bar.green{background:#4bda66}
-#content #repos table tr td .progress .due.red{color:#ff2955;font-weight:bold}
+#content #repos table tr td .progress .bar.red{background:#c1041c}
+#content #repos table tr td .progress .bar.green{background:#00b361}
+#content #repos table tr td .progress .due.red{color:#c1041c;font-weight:bold}
 #content #repos table tr td:first-child a{color:#3e4457;font-weight:bold}
 #content #repos table tr:nth-child(2) td{background:#fefefe}
 #content #repos table tr:last-child td{border:0}
 #content #repos table tr.done td{background:#ebf6f1;}
-#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#9fc9b5}
+#content #repos table tr.done td .milestone,#content #repos table tr.done td .percent,#content #repos table tr.done td .due{color:#00b361}
 #content #repos .header,#content #repos .footer{padding:20px 30px}
 #content #repos .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
 #content #repos .header a{font-family:'MuseoSlab500Regular',serif}
@@ -80,10 +96,10 @@ ul li{display:inline-block}
 #content #add .form table{width:100%;}
 #content #add .form table tr td:first-child{width:100%}
 #content #add .form input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;border:1px solid #dde1ed;border-right:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}
-#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#00b361;color:#fff}
+#content #add .form a{margin-left:-2px;font-family:'MuseoSlab500Regular',serif;padding:11px 20px;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;display:inline-block;font-weight:bold;background:#c1041c;color:#fff}
 #content #add .header,#content #add .footer{padding:20px 30px}
 #content #add .header{-webkit-box-shadow:0 1px 2px rgba(221,225,237,0.5);box-shadow:0 1px 2px rgba(221,225,237,0.5);margin-bottom:2px;border-bottom:1px solid #dde1ed;}
 #content #add .header a{font-family:'MuseoSlab500Regular',serif}
 #content #add .footer{background:#f9fafb;color:#aaafbf;-webkit-box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);box-shadow:inset 0 1px 2px rgba(221,225,237,0.2);border-top:1px solid #dde1ed;text-align:center;font-family:'MuseoSlab500Regular',serif;}
-#content #add .footer .icon{color:#aaafbf}
+#content #add .footer .icon{display:inline-block;color:#aaafbf}
 #footer{border-top:1px solid #f3f4f8;text-align:center;padding:30px;margin-top:30px;font-family:'MuseoSlab500Regular',serif}
diff --git a/build/app.js b/build/app.js
index 86bf26f..cf6e77f 100644
--- a/build/app.js
+++ b/build/app.js
@@ -228,7 +228,7 @@
     // layout.mustache
     root.require.register('burnchart/src/templates/layout.js', function(exports, require, module) {
     
-      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>","","<div id=\"title\">","    <div class=\"wrap\">","        <h2>Disposable Project</h2>","        <span class=\"milestone\">Milestone 1.0</span>","        <p class=\"description\">The one where we deliver all that we promised.</p>","    </div>","</div>","","<div id=\"content\" class=\"wrap\">","    <div id=\"hero\">","        <div class=\"content\">","            <span class=\"icon address\"></span>","            <h2>See your project progress</h2>","            <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>","            <div class=\"cta\">","                <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>","                <a href=\"#\" class=\"secondary\">Read the Guide</a>","            </div>","        </div>","    </div>","","    <div id=\"repos\">","        <div class=\"header\">","            <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>","            <h2>Projects</h2>","        </div>","","        <table>","            <tr>","                <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","                <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">40%</span>","                        <span class=\"due\">due on Friday</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:40%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr class=\"done\">","                <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","                <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">100%</span>","                        <span class=\"due\">due tomorrow</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar green\" style=\"width:100%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","                <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">27%</span>","                        <span class=\"due\">due in 2 weeks</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:27%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","                <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">90%</span>","                        <span class=\"due red\">overdue by a month</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:90%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","        </table>","","        <div class=\"footer\">","            <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>","        </div>","    </div>","","    <div id=\"add\">","        <div class=\"header\">","            <h2>Add a Project</h2>","            <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","        </div>","","        <div class=\"form\">","            <table>","                <tr>","                    <td>","                        <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                    </td>","                    <td>","                        <a href=\"#\">Add</a>","                    </td>","                </tr>","            </table>","        </div>","","        <div class=\"footer\">","            <span class=\"icon loading\"></span> Connecting to your repo.","        </div>","    </div>","</div>","","<div id=\"footer\">","    <div class=\"wrap\">","        &copy; 2012-2014 Radek Stepan","    </div>","</div>"].join("\n");
+      module.exports = ["<div id=\"head\">","    <div class=\"right\">","        <a href=\"#\" class=\"github\"><span class=\"icon github\"></span> Sign In</a>","    </div>","","    <h1><span class=\"icon fire-station\"></span></h1>","","    <div class=\"q\">","        <span class=\"icon search\"></span>","        <span class=\"icon down-open\"></span>","        <input type=\"text\" placeholder=\"Jump to...\">","    </div>","","    <ul>","        <li><a href=\"#\" class=\"add\"><span class=\"icon plus-circled\"></span> Add a Project</a></li>","        <li><a href=\"#\" class=\"faq\">FAQ</a></li>","    </ul>","</div>","","<div id=\"title\">","    <div class=\"wrap\">","        <h2>Disposable Project</h2>","        <span class=\"milestone\">Milestone 1.0</span>","        <p class=\"description\">The one where we deliver all that we promised.</p>","    </div>","</div>","","<div id=\"content\" class=\"wrap\">","    <div id=\"hero\">","        <div class=\"content\">","            <span class=\"icon address\"></span>","            <h2>See your project progress</h2>","            <p>Not sure where to start? Just add a demo repo to see a chart. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>","            <div class=\"cta\">","                <a href=\"#\" class=\"primary\"><span class=\"icon plus-circled\"></span> Add your project</a>","                <a href=\"#\" class=\"secondary\">Read the Guide</a>","            </div>","        </div>","    </div>","","    <div id=\"repos\">","        <div class=\"header\">","            <a href=\"#\" class=\"sort\"><span class=\"icon sort-alphabet\"></span> Sorted by priority</a>","            <h2>Projects</h2>","        </div>","","        <table>","            <tr>","                <td><a class=\"repo\" href=\"#\">radekstepan/disposable</a></td>","                <td><span class=\"milestone\">Milestone 1.0 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">40%</span>","                        <span class=\"due\">due on Friday</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:40%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr class=\"done\">","                <td><a class=\"repo\" href=\"#\">radekstepan/burnchart</a></td>","                <td><span class=\"milestone\">Beta Milestone <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">100%</span>","                        <span class=\"due\">due tomorrow</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar green\" style=\"width:100%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">intermine/intermine</a></td>","                <td><span class=\"milestone\">Emma Release 96 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">27%</span>","                        <span class=\"due\">due in 2 weeks</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:27%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","            <tr>","                <td><a class=\"repo\" href=\"#\">microsoft/windows</a></td>","                <td><span class=\"milestone\">RC 9 <span class=\"icon down-open\"></span></a></td>","                <td>","                    <div class=\"progress\">","                        <span class=\"percent\">90%</span>","                        <span class=\"due red\">overdue by a month</span>","                        <div class=\"outer bar\">","                            <div class=\"inner bar red\" style=\"width:90%\"></div>","                        </div>","                    </div>","                </td>","            </tr>","        </table>","","        <div class=\"footer\">","            <a href=\"#\"><span class=\"icon cog\"></span> Edit</a>","        </div>","    </div>","","    <div id=\"add\">","        <div class=\"header\">","            <h2>Add a Project</h2>","            <p>Type in the name of the repository as you would normally. If you'd like to add a private GitHub project, <a href=\"#\">Sign In</a> first.</p>","        </div>","","        <div class=\"form\">","            <table>","                <tr>","                    <td>","                        <input type=\"text\" placeholder=\"user/repo\" autocomplete=\"off\">","                    </td>","                    <td>","                        <a href=\"#\">Add</a>","                    </td>","                </tr>","            </table>","        </div>","","        <div class=\"footer\">","            <span class=\"icon spin6\"></span> Connecting to your repo.","        </div>","    </div>","</div>","","<div id=\"footer\">","    <div class=\"wrap\">","        &copy; 2012-2014 Radek Stepan","    </div>","</div>"].join("\n");
     });
   })();
 
diff --git a/public/fonts/fontello.eot b/public/fonts/fontello.eot
index a31aeb78dd629b7b8c80f96a3f7a6f0b0b0a9956..a50ae65de5fdb6044916c834e138dc50e7c928a9 100644
GIT binary patch
delta 607
zcmXYuO=uHA6vyA2+3Z(BOvP@J8g0>}t<{1SO%#h36$B|#EY(`1?V6@ZW74iBgxVlM
zR4PF+C4ODh+{{6tm_t3NXAcTF6|^WGJSYl+ASi^aZ(Rr8%>4c{^WJ}EmUq?r97BG9
z>XIWOG^!)3O9T1B7yx{yI2ldrM&0jU0l*^^$D+Ax2kF#Y%hajUMm&AJR60%k0>Ej+
z^^8Hfhqy|k98X=Ge$}(q3cyMLj%FgJPw{Wh9@7#rgcBslVg8QzHE}SJ&d!G>#%T(&
zWuQAX7uA(Z(iDKQfmloH^9EF$Ys5Q<J7)EC?9GF=0P!Fdd27sNvS-@2E|LM#plDo(
z86VE^YXClLe;$y(EZ@h2ip)=#Nf_g!<xjW|<yspni3RhIndiUxD1<<)wIlX!4~fC9
zP8K<Uk+A07jFKpc%&P@S=;{ngd%}WOW0J^E-D@Uq-*R7;ThzdSUz6RUIwQsxaBpg;
zcjw{e=SM4e^!V;=!ye_P`^Fu-`cPdjwn$!If54^Ynjcf=H|55E<O+8e`fz{oX`$Ij
zYUCEsj@6NBV`5$ZFL3fNmR#>1uGr(oNwS<2u8?JVF<_QTjn3KE6Y>D&S7GsACVS29
zRVx#xf8&+^L0tAJo-K9>+Esz~cowVpll8D7d(KSKEJJGTkmBU6DiK4D0y<Dc31w7J
TEl;`zMMuV%nGM&TxCGZ<MDmQ-

delta 425
zcmca$w84;dg9HNu$3#|h7N>P{_D^)Eu9sn8V0Z(>Vad6P1s5bFw=*y>x&X0Pa#@K2
zP#g$&1b_rrT0wel$Ak%yKt50pcR_k$aRE>qD96JAq&d=aD${CaibgRoFil`!V9m=&
zO-x~aV^j;20!lNOWdH>@%$Oeo`4&LFN=9x;g<^ReNRA^0B#@JzoXA$ko($wS0Qn-h
zi4_G5^SN&W`BQ*=g}lVv)H8FXfR=M?0a|jlAiua|{nuBMfsSbb$~P4hr54=HW^QF*
z5bpu<s~H%XcTAqaXwS*c9P~enA&OaH@&iUoM)u88OcU6E&SYR@VAwxrol`u&%~u9)
z<`+N_h70P#%fYnT?ezbD{%5f?Gb;f391Kh#Q6K>7ftbcp&A{;g3rjml1O;$Tp2Ddj
z1r}PsaEmdCaRuWiCM~8ertM&*oSScPax)8a0*zu~WM*VxWMyPyWM|}H<edDA$7iz-
HFAEO<zm{HX

diff --git a/public/fonts/fontello.svg b/public/fonts/fontello.svg
index 7cb5d7f..1ef0e13 100644
--- a/public/fonts/fontello.svg
+++ b/public/fonts/fontello.svg
@@ -12,6 +12,9 @@
 <glyph glyph-name="address" unicode="&#xe803;" d="m426 800q20 0 20-20l0-860q0-20-20-20l-46 0q-20 0-20 20l0 440-176 0q-16 0-28 6-12 2-26 12l-120 82q-10 6-10 16t10 16l120 82q14 10 26 12 8 4 28 4l176 0 0 190q0 20 20 20l46 0z m564-208q10-6 10-16t-10-16l-118-82q-22-12-26-12-14-6-28-6l-302 0-40 230 342 0q18 0 28-4t26-12z" horiz-adv-x="1000" />
 <glyph glyph-name="plus-circled" unicode="&#xe804;" d="m0 350q0 117 58 215t155 156 216 58 215-58 156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215z m179-36q0-14 10-25t25-10h143v-143q0-15 11-25t25-11h71q15 0 25 11t11 25v143h143q14 0 25 10t11 25v72q0 14-11 25t-25 10h-143v143q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-143h-143q-14 0-25-10t-10-25v-72z" horiz-adv-x="857.1" />
 <glyph glyph-name="fire-station" unicode="&#xe805;" d="m425 775l-175-250-100 150c-33-58-150-200-150-350 0-221 204-400 425-400 221 0 425 179 425 400 0 150-117 292-150 350l-100-150z m0-400s175-134 175-250c0-50-75-100-175-100s-175 50-175 100c0 112 175 250 175 250z" horiz-adv-x="850" />
+<glyph glyph-name="sort-alphabet" unicode="&#xe806;" d="m516 165q12-25-2-50t-44-25q-33 0-47 29l-37 75-249 0-37-75q-9-20-30-27t-40 3q-20 9-27 29t3 41l209 417q13 27 47 27t46-27z m-326 134l143 0-72 143z m905-209l-313 0q-30 0-45 27t4 57l250 332-209 0q-21 0-37 16t-15 37 15 36 37 16l313 0q30 0 45-28t-4-56l-250-333 209 0q21 0 37-15t15-37-15-37-37-15z m-417 209l-105 0q-21 0-36 15t-15 36 15 37 36 15l105 0q22 0 37-15t15-37-15-36-37-15z" horiz-adv-x="1147" />
+<glyph glyph-name="down-open" unicode="&#xe807;" d="m50 425q0 14 11 25l92 92q11 11 26 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26z" horiz-adv-x="1000" />
+<glyph glyph-name="spin6" unicode="&#xe808;" d="m855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>
\ No newline at end of file
diff --git a/public/fonts/fontello.ttf b/public/fonts/fontello.ttf
index 20677899eb454d321320553f2dfa9e0e788b9cd0..4e18fb0d30bcae6532ebdb9cc5ca73808cdb1de9 100644
GIT binary patch
delta 580
zcmeA$SYcStz{tSBz{k+Qz|4@~AFOX=r{Ng|6nO*0Vad6P1s5bGw=*y>x&X0Pa#@K2
zP#g$&HUJ5(w1V{9jtLVYf&4uT4BQ3jiNys#aRDHI1(4=Q&#6q?r*&JDfq`iP0|V>7
zjMT&w=GU8+1Eqj`2D6Ne)cQmYGv=E>ffGOhm5khy3e|WZi-7~=0F9jd<V4O|_7nyN
zP7xqqEH|;DfMEgmZ6IF<$XCcq%uPKrS4sxR_W@dRwjjT_Bt~Aj9q0g{7(-V<QEI{6
zZ01%51__Y*Y6eE;y^IqWSQ$8&s+fRIX6Tvt&ybUYIp}{DLlkqwWD7=1Mvl!zj1$=E
z|Ns17&HRHof<cvmZL>Thqpr3pn~J&`lerzExtW-_93wj$I~$X@m<mupT}_4E)Qm-3
zjES9%IehxRtSS9`jU0kpG7ger9DHnCnQZA*j21Zox(3ewp3L9Q=<a8t87#or%hxlN
zv1J~Y5St*oxP*-i4_Dd0dpU)&WpVGztfy5OF<N)6t^fBYOAP2xa5Mp<>RRZEKk@uF
zUm3WWUx0)!Xap~S(9#J&CugxV1HGZcAualnr5&sXBnbmtlVdnklpq>`Vhb2<F(xst
zVEn|S#ni>LgXup|43rwUHqYYVW)|fF@|YNz8Ce)v8QB=w895j^8M!9!;Pzo-EiTB+
LGuzC<!@>gqP9TM-

delta 403
zcmZ2s*kMr5z{tSBz{k+Qz|4@~AFOX=r{O6B6nO*0Vad6P1s5bFw=*y>x&X0Pa#@K2
zP#g$&1b_rrT0wel$Ak%yKt50pcR_k$aRE>qD96JAq&d=aD${CaibgRoFil`!V9m=&
zO-x~aV^j;20!lNOWn`q*CvuoEKL!d|00mSsa!V={%RzD+F(7_UesUsP9eXm6-vH!`
z<R(@WFwEz^4dhP&@)hzDb5qaEl>%DMu?1+!*@FDylJ#F-O$Iuq1t{NCP?TD5H=DVY
zfkC_n$ggH#WZuCzfq|8QgQ<#X4^X6M;y*)9cIKe}SqxFk3X?4uEg9K27cov?(*jBY
zLuUV+bx!g8HeVUInO^`!7%r#_F9*|Vx6}Xs`Jcto4AixULt69;OFK9uL6R`QIr$BT
w%488vVfO7{InK>SoZQU9oIsPA7?~Ma7+D$F7}*&)7&#{g@%U_B!o$J?0KW)Vn*aa+

diff --git a/public/fonts/fontello.woff b/public/fonts/fontello.woff
index 6a337b5f3a7db73362b388d726e568b414e258ed..2c16d7c50d2f7b04b62f8534b57d99723cec08a6 100644
GIT binary patch
delta 1862
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
AU;qFB

delta 1721
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
I@1p$w1<2a_{r~^~

diff --git a/src/styles/app.styl b/src/styles/app.styl
index da50911..9bfe1f5 100644
--- a/src/styles/app.styl
+++ b/src/styles/app.styl
@@ -3,13 +3,16 @@
 $serif_font = 'MuseoSlab500Regular', serif
 $sans_serif_font = 'MuseoSans500Regular', sans-serif
 
+$strong_color = #C1041C
+$highlight_color = #FFBB2A
+
 body
     color: #3E4457
     font-family: $sans_serif_font
 
 a
-    color: #B1B6C4
     text-decoration: none
+    color: #AAAFBF
 
 h1, h2, h3, p
     margin: 0
@@ -30,8 +33,7 @@ ul
     margin: 0 auto
 
 #head
-    background: #252F39
-    color: #86939C
+    background: $strong_color
     height: 64px
 
     h1
@@ -40,8 +42,9 @@ ul
         padding: 10px 24px
         line-height: 44px
         height: 44px
-        background: rgba(#000, 30%)
+        background: #77000E
         display: inline-block
+        color: $strong_color
 
         .icon
             margin: 0
@@ -54,7 +57,7 @@ ul
 
         .icon
             position: absolute
-            color: #303D4A
+            color: $strong_color
 
             &.search
                 top: 8px
@@ -65,12 +68,12 @@ ul
                 right: 12px
 
         input
-            background: rgba(#000, 30%)
+            background: #77000E
             border: 0
             padding: 10px 12px 10px 36px
             font-size: 14px
             border-radius: 2px
-            color: rgba(#FFF, 50%)
+            color: #FFF
             width: 220px
 
     ul
@@ -80,10 +83,11 @@ ul
             margin-left: 30px
 
     a
+        color: #E0808D
         font-weight: bold
 
         &.active, &:hover
-            color: #DDE1ED
+            color: #FFF
 
     .right
         float: right
@@ -92,8 +96,8 @@ ul
 
         a
             border-radius: 2px
-            background: #FFF
-            color: #00B361
+            background: $highlight_color
+            color: $strong_color
             padding: 11px 20px
 
 #title
@@ -161,12 +165,12 @@ ul
 
                     &.primary
                         font-weight: bold
-                        background: #00B361
+                        background: $strong_color
                         color: #FFF
                     
                     &.secondary
                         background: #FFF
-                        color: #00B361
+                        color: $strong_color
 
     #repos
         border: 1px solid #CDCECF
@@ -214,14 +218,14 @@ ul
                                 box-shadow: inset 0 1px 2px rgba(#000, 20%)
 
                             &.red
-                                background: #FF2955
+                                background: $strong_color
 
                             &.green
-                                background: #4BDA66
+                                background: #00B361
 
                         .due
                             &.red
-                                color: #FF2955
+                                color: $strong_color
                                 font-weight: bold
 
                     &:first-child
@@ -242,7 +246,7 @@ ul
                         background: #EBF6F1
 
                         .milestone, .percent, .due
-                            color: #9FC9B5
+                            color: #00B361
 
         .header, .footer
             padding: 20px 30px
@@ -313,7 +317,7 @@ ul
                 border-radius: 0 2px 2px 0
                 display: inline-block
                 font-weight: bold
-                background: #00B361
+                background: $strong_color
                 color: #FFF
 
         .header, .footer
@@ -336,6 +340,7 @@ ul
             font-family: $serif_font
 
             .icon
+                display: inline-block
                 color: #AAAFBF
 
 #footer
diff --git a/src/styles/icons.styl b/src/styles/icons.styl
index ea758e6..bd52389 100644
--- a/src/styles/icons.styl
+++ b/src/styles/icons.styl
@@ -1,3 +1,5 @@
+@import 'nib'
+
 .icon
     vertical-align: middle
 
@@ -48,4 +50,23 @@
 
     &.down-open
         &:before
-            content: '\e807'
\ No newline at end of file
+            content: '\e807'
+
+    &.spin6
+        animation: spin 2s infinite linear
+
+        &:before
+            content: '\e808'
+
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg) }
+    to { -moz-transform: rotate(360deg) }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg) }
+    to { -webkit-transform: rotate(360deg) }
+}
+@keyframes spin {
+    from { transform:rotate(0deg) }
+    to { transform:rotate(360deg) }
+}
\ No newline at end of file
diff --git a/src/templates/layout.mustache b/src/templates/layout.mustache
index e6af466..1b2bc13 100644
--- a/src/templates/layout.mustache
+++ b/src/templates/layout.mustache
@@ -124,7 +124,7 @@
         </div>
 
         <div class="footer">
-            <span class="icon loading"></span> Connecting to your repo.
+            <span class="icon spin6"></span> Connecting to your repo.
         </div>
     </div>
 </div>