Merge branch 'master' of github.com:reality/depressionbot

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(http://dl.dropbox.com/u/13375195/depressionbot/images/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,72 @@ html {
 }
 
 body {
-  padding: 30px;
-  font-size: 46px;
-  font-family: "Lucida Grande";
-  font-weight: bold;
+    padding: 25px;
     margin: 0;
+    font-family: "Lucida Grande";
     color: black;
     text-shadow: 1px 1px 2px #2B2B2B;
 }
 
-ul {
-  list-style: none;
+div#title {
+    font-size: 42px;
+    font-weight: bold;
+}
+
+div#main {
+    padding: 25px 0px;
+    margin: 0px; 
+    font-size: 21px;
+    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 {
+div.quotes, div.quote {
+    color: #12699B;
+    box-shadow: 0 0 20px black;
+    opacity: 0.5;
+}
+
+/* Quotes list page */
+
+div.quotes {
+    background: white;
+    float: left;
+    display: inline;
+    margin: 10px;
+    padding: 20px;
+    border-radius: 15px;
+}
+
+div.quotes:hover {
   opacity: 0.8;
 }
 
-a span {
-  position: relative;
-  top: -60px;
+div.quotes a {
+
 }
 
-img {
-  width: 150px;
-  height: 150px;
-  background: url(http://dl.dropbox.com/u/13375195/depressionbot/images/null.png);
+/* Quote list pages */
+
+div#quotelist {
+    width:100%;
+}
+
+div#quotelist div.quote {
+    background: white;
+    border-radius: 5px;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 18px;
+    width:90%;
+    opacity: 0.7;
+    color:darkblue;
+    text-shadow: 1px 1px 1px black;
+}
+
+div#quotelist div.quote:hover {
+    opacity: 1;
 }

views/layout.jade

@@ -6,4 +6,5 @@ html(lang: 'en')
     title Depressionbot web interface
   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(href='/quotes/' + quote) #{quote}
+-each quote in quotelist
+    div.quotes
+        a(href='/quotes/'+quote) #{quote}

views/quotes.jade

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