Cloudy quotelist page!

public/styles.css

@@ -4,21 +4,8 @@
  * "npc" / Samuel Clements [ http://borntyping.co.uk ]
  */
 
-/* #quotelist {
-    padding: 10px;
-}
-
-.quotes {
-    border-left: 2px solid red;
-    padding: 10px;
-}
-
-.quote {
-    border-left: 2px solid blue;
-} */
-
 html {
-  background: url("/background.jpg") no-repeat center center fixed;
+    background: url("background.jpg") no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
@@ -26,46 +13,59 @@ html {
 }
 
 body {
-  padding: 30px;
+    padding: 25px;
-  font-size: 46px;
-  font-family: "Lucida Grande";
-  font-weight: bold;
     margin: 0;
+    font-family: "Lucida Grande";
     color: black;
     text-shadow: 1px 1px 2px #2B2B2B;
 }
 
-ul {
+div#title {
-  list-style: none;
+    font-size: 42px;
+    font-weight: bold;
+}
+
+div#main {
+    padding: 0px;
+    margin: 0px; 
+    font-size: 28px;
+    line-height: 100px;
+    text-align:center;
 }
 
 a {
-  width: 600px;
-  height: 150px;
-  margin: 25px auto;
-  display: block;
-  background: white;
-  box-shadow: 0 0 20px black;
-  padding: 20px;
-  border-radius: 15px;
-  opacity: 0.5;
-  color: #12699B;
-  text-align: center;
-  vertical-align: middle;
   text-decoration: none;
 }
 
-a:hover {
+a.category, a.quote {   
+    
+    color: #12699B;
+    box-shadow: 0 0 20px black;
+    opacity: 0.5;
+}
+
+/* Quotes list page */
+
+a.category {
+    background: white;
+    float: left;
+    display: inline;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 15px;
+}
+
+a.category:hover {
   opacity: 0.8;
 }
 
-a span {
+span.quote {
-  position: relative;
+    background: #222;
-  top: -60px;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 15px;
 }
 
-img {
+span.quote:hover {
-  width: 150px;
+
-  height: 150px;
-  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/null.png);
 }

views/layout.jade

@@ -4,16 +4,7 @@ html(lang: 'en')
     meta(charset: 'utf-8')
     link(rel: 'stylesheet', type: 'text/css', href: '/styles.css')
     title Depressionbot web interface
-    script
-        var quotes = document.getElementsByTagName("a");
-        var i, ii;
-        for (i = 0, ii = quotes.length; i < ii; i++) {
-            var quote = quotes[i];
-            var q_name = quote.innerHTML;
-            var img = new Image();
-            img.src = 'http://dl.dropbox.com/u/13375195/depressionbot/images/quoted/' + q_name + '.gif';
-            quote.innerHTML = img.outerHTML + ' <span>' + q_name + '</span>';
-        }
   body
     div#title Depressionbot web interface
+    div#main
         !{body}

views/quotelist.jade

@@ -1,4 +1,3 @@
 div#quotelist
     -each quote in quotelist
-        div.category
+        a#quote(href='/quotes/' + quote) #{quote}
-            a(href='/quotes/' + quote) #{quote}

views/quotes.jade

@@ -1,3 +1,3 @@
 div.quotes
     -each quote in quotes
-        div.quote #{quote}
+        span.quote #{quote}