literally drunk styles, sober styles coming soon

app/settings.js

@@ -5,7 +5,7 @@ module.exports = function(app, nconf) {
   app.set('views', path.resolve(__dirname, '..', 'views'));
   app.set('view engine', 'jade');
   app.set('view options', { layout: false });
-  app.use(express.static(__dirname + '/public'));
+  app.use(express.static(path.resolve(__dirname, '..', 'public')));
   app.use(express.bodyParser());
   app.use(express.cookieParser());
   app.use(express.session({

public/stylesheets/main.css

@@ -0,0 +1,104 @@
+* {
+  margin:0;
+  padding:0;
+}
+
+html, body {
+  height:100%;
+  width:100%;
+}
+
+body {
+  font-family:'Helvetica Neue', sans-serif;
+  font-size:20px;
+  background:#f181ad;
+  color:#555;
+}
+
+ul {
+  list-style:none;
+}
+
+.page-wrapper {
+  max-width:320px;
+  margin:0 auto;
+}
+
+.page-wrapper > h1 {
+  font-size:54px;
+  text-align:center;
+  color:#fff;
+}
+
+.match {
+  background:#fff;
+  padding:10px;
+  border-radius:4px;
+}
+
+.match img {
+  width:100%;
+}
+
+.match input[type="submit"] {
+  width:100%;
+  display:block;
+  border:0;
+  background:#f181ad;
+  color:#fff;
+  padding:10px 0;
+  font-size:20px;
+  font-family:'Helvetica Neue', sans-serif;
+  cursor:pointer;
+  border-radius:3px;
+}
+
+.match input[type="submit"]:hover, .match input[type="submit"]:focus {
+  background:#d81863;
+}
+
+.match h2 {
+  width:100;
+  text-align:center;
+}
+
+.warming-message {
+  font-size:15px;
+}
+
+.answers {
+  margin:24px 0;
+}
+
+.answers li {
+  padding:5px 0;
+}
+
+.answers .correct {
+  background:blue;
+}
+
+.answers .chosen {
+  background:red;
+}
+
+.answers .correct.chosen {
+  background:green;
+}
+
+.answers input[type="radio"] {
+  margin-right:10px;
+}
+
+.more-meat {
+  display:block;
+  background:#d81863;
+  padding:10px 0;
+  text-decoration:none;
+  color:#fff;
+  text-transform:uppercase;
+  font-weight:bold;
+  text-align:center;
+  border-radius:4px;
+  margin:16px 0;
+}

views/index.jade

@@ -1,12 +1,13 @@
 extend layout
 
 block content
-  img(src=match.gif, alt='')
-  form(method='post', action='/')
-    ul.answers
-      each answer in match.answers
-        li
-          label
-            input(type='radio', name='answer', value=answer)
-            = answer
-    input(type='submit', value='Final Answer')
+  .match
+    img(src=match.gif, alt='')
+    form(method='post', action='/')
+      ul.answers
+        each answer in match.answers
+          li
+            label
+              input(type='radio', name='answer', value=answer)
+              = answer
+      input(type='submit', value='Final Answer')

views/results.jade

@@ -2,12 +2,14 @@ extend layout
 
 block content
   - var answerCorrect = userAnswer === match.rightAnswer;
-  img(src=match.gif, alt='')
-  ul.answers
-    each answer in match.answers
-      - var classes = []
-      - if (answer === userAnswer) classes.push('chosen')
-      - if (answer === match.rightAnswer) classes.push('correct')
-      li(class=classes.join(' '))= answer
-  h2= answerCorrect ? 'Correct' : 'Wrong'
-  a.more-meat(href='/') More Meat
+  .match
+    img(src=match.gif, alt='')
+    ul.answers
+      each answer in match.answers
+        - var classes = []
+        - if (answer === userAnswer) classes.push('chosen')
+        - if (answer === match.rightAnswer) classes.push('correct')
+        li(class=classes.join(' '))= answer
+    h2= answerCorrect ? 'Correct' : 'Wrong'
+  p
+    a.more-meat(href='/') More Meat