From f29e410d247f38cd1a1826cf04d1453ccb6dcfe6 Mon Sep 17 00:00:00 2001
From: Gabor Csardi <csardi.gabor@gmail.com>
Date: Sat, 25 Apr 2015 14:09:23 -0400
Subject: [PATCH] Simple homepage at /, #12

---
 app.js                          |   5 +-
 package.json                    |   3 +-
 public/css/local.css            |  38 ++++
 public/css/normalize.css        | 427 ++++++++++++++++++++++++++++++++++++++++
 public/css/skeleton.css         | 418 +++++++++++++++++++++++++++++++++++++++
 public/images/metacran-logo.svg | 128 ++++++++++++
 public/stylesheets/style.css    |   8 -
 routes/index.js                 |  10 +
 views/error.jade                |   6 -
 views/index.html                | 124 ++++++++++++
 views/index.jade                |   5 -
 views/layout.html               |  17 ++
 views/layout.jade               |   7 -
 13 files changed, 1168 insertions(+), 28 deletions(-)
 create mode 100644 public/css/local.css
 create mode 100644 public/css/normalize.css
 create mode 100644 public/css/skeleton.css
 create mode 100644 public/images/metacran-logo.svg
 delete mode 100644 public/stylesheets/style.css
 create mode 100644 routes/index.js
 delete mode 100644 views/error.jade
 create mode 100644 views/index.html
 delete mode 100644 views/index.jade
 create mode 100644 views/layout.html
 delete mode 100644 views/layout.jade

diff --git a/app.js b/app.js
index d881e9b..99d6db6 100644
--- a/app.js
+++ b/app.js
@@ -5,17 +5,19 @@ var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
 var fs = require('fs')
+var whiskers = require('whiskers');
 
 var downloads = require('./routes/downloads');
 var top       = require('./routes/top');
 var trending  = require('./routes/trending');
 var badges    = require('./routes/badges');
+var index     = require('./routes/index');
 
 var app = express();
 
 // view engine setup
+app.engine('.html', whiskers.__express);
 app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'jade');
 
 // uncomment after placing your favicon in /public
 //app.use(favicon(__dirname + '/public/favicon.ico'));
@@ -35,6 +37,7 @@ app.use('/downloads', downloads);
 app.use('/top', top);
 app.use('/trending', trending);
 app.use('/badges', badges);
+app.use('/', index);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
diff --git a/package.json b/package.json
index 75a83e0..4a2cf7e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "serve-favicon": "~2.1.3",
     "debug": "~2.0.0",
     "pg": "~3.6.2",
-    "multiline": "~1.0.2"
+    "multiline": "~1.0.2",
+    "whiskers": "~0.3.3"
   }
 }
diff --git a/public/css/local.css b/public/css/local.css
new file mode 100644
index 0000000..38c0679
--- /dev/null
+++ b/public/css/local.css
@@ -0,0 +1,38 @@
+
+body {
+    margin-top: 20px;
+}
+
+h1 {
+    margin-top: 15px;
+}
+
+ul.menu {
+    list-style-type: none;
+    margin-left: 10px;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    color: red;
+}
+
+form {
+    margin-bottom: 0px;
+}
+
+pre {
+    padding-top: 5px;
+}
+
+span.output {
+    color: #888;
+}
+
+img.badge {
+    width: 200px;
+    height: auto;
+}
diff --git a/public/css/normalize.css b/public/css/normalize.css
new file mode 100644
index 0000000..81c6f31
--- /dev/null
+++ b/public/css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/public/css/skeleton.css b/public/css/skeleton.css
new file mode 100644
index 0000000..63b1d10
--- /dev/null
+++ b/public/css/skeleton.css
@@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Bree", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
diff --git a/public/images/metacran-logo.svg b/public/images/metacran-logo.svg
new file mode 100644
index 0000000..fa65eca
--- /dev/null
+++ b/public/images/metacran-logo.svg
@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="105"
+   height="105"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="metacran-logo.pdf"
+   inkscape:export-filename="/Users/gaborcsardi/works/metacran/metacran-logo.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.6095238"
+     inkscape:cx="52.5"
+     inkscape:cy="52.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:window-width="1676"
+     inkscape:window-height="1005"
+     inkscape:window-x="4"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3184"
+       empspacing="5"
+       visible="true"
+       enabled="true"
+       snapvisiblegridlinesonly="true"
+       originx="-296.08408px"
+       originy="-597.06456px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-296.08408,-350.29762)">
+    <g
+       id="g3956"
+       transform="translate(1.3999598,-19.895213)">
+      <path
+         d="m 301.87289,419.50504 0,-26.01563 5.11524,0 7.1543,20.12695 7.34765,-20.12695 4.57031,0 0,26.01563 -3.44531,0 0,-21.14649 -7.10156,19.40625 -3.56836,0 -6.89063,-19.47656 0,21.2168 -3.18164,0"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:83.99999738%;letter-spacing:-1px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#666666;fill-opacity:1;stroke:none;font-family:Luxi Sans;-inkscape-font-specification:Luxi Sans"
+         id="path3004"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 329.35336,419.50504 0,-26.01563 18.86133,0 0,2.75977 -15.16992,0 0,8.34961 13.42969,0 0,2.7246 -13.42969,0 0,9.42188 15.94336,0 0,2.75977 -19.63477,0"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:83.99999738%;letter-spacing:-1px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#666666;fill-opacity:1;stroke:none;font-family:Luxi Sans;-inkscape-font-specification:Luxi Sans"
+         id="path3006"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 360.18344,419.50504 0,-23.25586 -8.78906,0 0,-2.75977 21.26953,0 0,2.75977 -8.78906,0 0,23.25586 -3.69141,0"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:83.99999738%;letter-spacing:-1px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#666666;fill-opacity:1;stroke:none;font-family:Luxi Sans;-inkscape-font-specification:Luxi Sans"
+         id="path3008"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 371.25571,419.50504 9.8789,-26.01563 3.65625,0 9.72071,26.01563 -3.97266,0 -2.70703,-7.20704 -10.44141,0 -2.70703,7.20704 -3.42773,0 m 7.18945,-9.94922 8.36719,0 -4.16602,-11.14453 -4.20117,11.14453"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:83.99999738%;letter-spacing:-1px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#666666;fill-opacity:1;stroke:none;font-family:Luxi Sans;-inkscape-font-specification:Luxi Sans"
+         id="path3010"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:nodetypes="cscsccccccscscc"
+         d="m 323.42522,449.09339 c -2.85495,0.89589 -5.55471,1.38666 -8.61328,1.38666 -4.27736,0 -7.52931,-1.16016 -9.75586,-3.48047 -2.23829,-2.32031 -3.35743,-5.70116 -3.35742,-10.14258 -1e-5,-4.42967 1.13671,-7.82224 3.41015,-10.17773 2.27343,-2.34373 5.56054,-3.5156 9.86133,-3.51563 2.40233,3e-5 7.20896,0.38089 10.41992,1.14258 l 0,3.46289 c -3.64455,-1.23044 -8.51564,-1.84568 -10.61328,-1.8457 -2.94142,2e-5 -5.19727,0.93752 -6.76758,2.8125 -1.57032,1.8633 -2.35547,4.55861 -2.35547,8.08594 0,3.44532 0.83789,6.09961 2.51368,7.96289 1.67577,1.875 4.03123,2.8125 7.0664,2.8125 2.54295,0 7.27342,-0.75586 10.19141,-2.26758 l 0,3.16406"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:83.99999738%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#666666;fill-opacity:1;stroke:none;font-family:Kefa;-inkscape-font-specification:Luxi Sans"
+         id="path3012"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:nodetypes="ccsccccccccccscccccc"
+         d="m 328.87713,451.89626 0,-30.14883 13.1392,0 c 6.12482,3e-5 9.18723,2.49207 9.18723,7.4761 -2e-5,2.41736 -0.71979,4.42727 -2.15929,6.02976 -0.85557,0.93708 -2.08465,1.79265 -3.68713,2.56674 l 6.08395,14.07623 -7.0483,0 -4.69873,-12.32435 -4.90937,0 0,12.32435 -5.90756,0 m 5.90756,-16.45963 3.30009,0 c 2.59386,2e-5 4.4476,-0.60431 5.56121,-1.813 0.84197,-0.90988 1.26299,-2.09818 1.263,-3.5649 -2e-5,-1.53458 -0.58397,-2.6346 -1.7519,-3.30007 -1.00498,-0.58394 -2.4513,-0.87592 -4.33899,-0.87595 l -4.03343,0 0,9.55392"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:83.99999738%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ff0000;fill-opacity:1;stroke:none;font-family:Kefa;-inkscape-font-specification:Kefa"
+         id="path3014"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 350.40121,449.82966 9.8789,-26.01563 3.65625,0 9.72071,26.01563 -3.97266,0 -2.70703,-7.20703 -10.44141,0 -2.70703,7.20703 -3.42773,0 m 7.18945,-9.94922 8.36719,0 -4.16602,-11.14453 -4.20117,11.14453"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:83.99999738%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#666666;fill-opacity:1;stroke:none;font-family:Kefa;-inkscape-font-specification:Luxi Sans"
+         id="path3016"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 374.7938,449.82966 0,-26.01563 3.60351,0 13.41211,20.0918 0,-20.0918 3.16407,0 0,26.01563 -3.6211,0 -13.39453,-20.0918 0,20.0918 -3.16406,0"
+         style="font-size:36px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:83.99999738%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#666666;fill-opacity:1;stroke:none;font-family:Kefa;-inkscape-font-specification:Luxi Sans"
+         id="path3018"
+         inkscape:connector-curvature="0" />
+    </g>
+    <rect
+       style="fill:none;stroke:#b4ac9f;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="rect3954"
+       width="102.07509"
+       height="65.084579"
+       x="297.54654"
+       y="370.25534"
+       ry="11.493073" />
+  </g>
+</svg>
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
deleted file mode 100644
index 30e047d..0000000
--- a/public/stylesheets/style.css
+++ /dev/null
@@ -1,8 +0,0 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-}
-
-a {
-  color: #00B7FF;
-}
\ No newline at end of file
diff --git a/routes/index.js b/routes/index.js
new file mode 100644
index 0000000..6a09439
--- /dev/null
+++ b/routes/index.js
@@ -0,0 +1,10 @@
+var express = require('express');
+var router = express.Router();
+
+router.get("/", function(req, res) {
+    res.render('layout.html', {
+	partials: { body: 'index.html' }
+    })
+});
+
+module.exports = router;
diff --git a/views/error.jade b/views/error.jade
deleted file mode 100644
index 51ec12c..0000000
--- a/views/error.jade
+++ /dev/null
@@ -1,6 +0,0 @@
-extends layout
-
-block content
-  h1= message
-  h2= error.status
-  pre #{error.stack}
diff --git a/views/index.html b/views/index.html
new file mode 100644
index 0000000..b775269
--- /dev/null
+++ b/views/index.html
@@ -0,0 +1,124 @@
+<div class="container">
+  <div class="row">
+    <div class="two columns">
+      <a href="https://github.com/metacran">
+	<img src="images/metacran-logo.svg">
+      </a>
+      <ul class="menu">
+        <li><a href="#badges">Badges</a>
+        <li><a href="#rpackage">R package</a>
+        <li><a href="#jsonapi">JSON API</a>
+	<li><a href="https://github.com/metacran/cranlogs.app">On Github</a>
+	<li><a href="https://github.com/metacran/cranlogs.app/issues">Report a bug</a>
+      </ul>
+    </div>
+    <div class="ten columns">
+
+      <script>
+       function update1() {
+	 var pkg = document.getElementById("package").value;
+	 var url = "http://cranlogs.r-pkg.org/badges/" + pkg;
+	 var md = "[![Build Status](http://cranlogs.r-pkg.org/badges/" +
+		  pkg + ")](http://cran.rstudio.com/web/packages/" +
+		  pkg + "/index.html)";
+	 document.getElementById("url").value = url;
+	 document.getElementById("markdown").value = md;
+	}
+       function update() {
+	 setTimeout("update1()", 100);
+       }
+      </script>
+      
+      <h1>CRAN download counts</h1>
+
+      <p>
+	API for CRAN package download counts, from the
+	<a href="http://cran-logs.rstudio.com/">RStudio CRAN mirror</a>.
+      </p>
+
+      <hr>
+      <a id="badges"></a>
+      <h3>Badges</h3>
+
+      <p>Add a badge with download counts to your homepage or your
+	Github project page. Our badges were generated by
+	<a href="http://shields.io/">shields.io</a>.
+
+      <p>
+      <form>
+	<label>Example</label>
+	<img class="badge" src="http://cranlogs.r-pkg.org/badges/ggplot2">
+	<label for="package">R Package</label>
+	<input class="u-full-width" type="text" value="ggplot2" id="package"
+	       onkeydown="update()">
+	<label for="url">URL</label>
+	<input class="u-full-width" type="text" readonly="readonly"
+	       value="http://cranlogs.r-pkg.org/badges/ggplot2" id="url">
+	<label for="markdown">MarkDown</label>
+	<textarea class="u-full-width" id="markdown" readonly="readonly">
+[![Build Status](http://cranlogs.r-pkg.org/badges/ggplot2)](http://cran.rstudio.com/web/packages/ggplot2/index.html)
+	</textarea>
+      </form>
+      
+      See the <a href="https://github.com/metacran/cranlogs.app">
+	Github page</a> for other badge styles.
+      </p>
+
+      <hr>
+      <a id="rpackage"></a>
+      <h3>R package</h3>
+
+      <p>Query download counts directly from R with the
+	<a href="https://github.com/metacran/cranlogs"><code>cranlogs</code></a>
+	R package. You can install it from Github:
+
+      <pre><code>> devtools::install_github("metacran/cranlogs")</code></pre>
+
+      Then you can use it to query the CRAN logs server, and the results
+      are returned in a data frame. You can also query multiple packages
+      at once.
+      <pre><code>> cran_downloads(when = "last-week", packages = c("ggplot2", "httr"))
+	<span class="output">
+         date count package
+1  2015-04-17  5245 ggplot2
+2  2015-04-18  3688 ggplot2
+3  2015-04-19  3989 ggplot2
+4  2015-04-20  6865 ggplot2
+5  2015-04-21  6523 ggplot2
+6  2015-04-22  6767 ggplot2
+7  2015-04-23  6346 ggplot2
+8  2015-04-17  2024    httr
+9  2015-04-18  1819    httr
+10 2015-04-19  2025    httr
+11 2015-04-20  2706    httr
+12 2015-04-21  2457    httr
+13 2015-04-22  2621    httr
+14 2015-04-23  2286    httr</span></code></pre></p>
+
+      <p>See more on its <a href="https://github.com/metacran/cranlogs">
+	Github page</a>.</p>
+
+      <hr>
+      <a id="jsonapi"></a>
+      <h3>JSON API</h3>
+
+      <p>
+	The server provides a JSON API throught HTTP as well:
+	<pre><code>$ curl http://cranlogs.r-pkg.org/downloads/total/last-week/ggplot2
+	  <span class="output">
+[
+  {
+    start: "2015-04-17",
+    end: "2015-04-23",
+    downloads: 39423,
+    package: "ggplot2"
+  }
+]</span></code></pre>	
+	The details are documented on the
+	<a href="https://github.com/metacran/cranlogs.app">Github page.</a>
+      </p>
+      
+    </div>
+  </div>
+  <hr>
+</div>
diff --git a/views/index.jade b/views/index.jade
deleted file mode 100644
index 3d63b9a..0000000
--- a/views/index.jade
+++ /dev/null
@@ -1,5 +0,0 @@
-extends layout
-
-block content
-  h1= title
-  p Welcome to #{title}
diff --git a/views/layout.html b/views/layout.html
new file mode 100644
index 0000000..9c6c108
--- /dev/null
+++ b/views/layout.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CRAN logs</title>
+    <meta name="description" content="CRAN R package download counts">
+    <meta name="author" content="METACRAN, https://github.com/metacran">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/skeleton.css">
+    <link rel="stylesheet" href="css/local.css">
+  </head>
+  <body>
+    {>body}
+  </body>
+</html>
diff --git a/views/layout.jade b/views/layout.jade
deleted file mode 100644
index b945f57..0000000
--- a/views/layout.jade
+++ /dev/null
@@ -1,7 +0,0 @@
-doctype html
-html
-  head
-    title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
-  body
-    block content
\ No newline at end of file