New Theme

public/script.js

@@ -0,0 +1,9 @@
+function search(q)
+{
+	var quotes = document.getElementsByClassName('quotes');
+	for( var i in quotes ) 
+	{
+		if( quotes[i].innerHTML == undefined ) continue;
+		quotes[i].className = quotes[i].innerHTML.indexOf(q) == -1 ? 'quotes hidden' : 'quotes';
+	}
+}

public/styles.css

@@ -2,6 +2,7 @@
  * Authors 
  * Dafydd "Afal" Francis [ http://www.somethingafal.com/ ]
  * "npc" / Samuel Clements [ http://borntyping.co.uk ]
+ * danharibo / Daniel Evans [ http://bytecove.co.uk]
  */
 
 html {
@@ -16,13 +17,24 @@ body {
     padding: 25px;
     margin: 0;
     font-family: "Lucida Grande";
-    color: black;
+    color: #444;
     text-shadow: 1px 1px 2px #2B2B2B;
 }
 
+div#page {
+	width: 90%;
+	margin: 0 auto 0 auto;
+}
+
 div#title {
     font-size: 42px;
     font-weight: bold;
+    margin: 0 0 10px 0;
+    color: #444;
+}
+
+div#title a {
+	color: #000;
 }
 
 div#main {
@@ -30,35 +42,47 @@ div#main {
     margin: 0px; 
     font-size: 21px;
     text-align:center;
+    background: #FFF;
+    border-radius: 20px;
+    box-shadow: 0px 0px 4px #000;
 }
 
-a {
+div#controls {
+	width: 100%;
+}
+
+input {
+	width: 80%;
+}
+
+a,a:active,a:visited {
   text-decoration: none;
 }
 
-div.quotes, div.quote {
+ul#quotelist {
-    color: #12699B;
+    padding: 0;
-    box-shadow: 0 0 20px black;
+    margin: 0;
-    opacity: 0.5;
+}
+
+li.quotes, li.quote {
+    color: #3333FF;
 }
 
 /* Quotes list page */
 
-div.quotes {
+li.quotes {
-    background: white;
+    margin: 8px;
-    float: left;
+    padding: 6px;
-    display: inline;
+    display: inline-block;
-    margin: 10px;
+    border-radius: 10px;
-    padding: 20px;
-    border-radius: 15px;
 }
 
-div.quotes:hover {
+li.quotes:hover {
-  opacity: 0.8;
+    background: rgba(0,0,255,0.3);
 }
 
-div.quotes a {
+.hidden {
-
+    display: none !important;
 }
 
 /* Quote list pages */
@@ -67,18 +91,17 @@ div#quotelist {
     width:100%;
 }
 
-div#quotelist div.quote {
+li.quote {
     background: white;
     border-radius: 5px;
-    margin: 10px auto;
+    display: inline-block;
-    padding: 10px;
+    margin: 6px auto;
+    padding: 6px;
     font-size: 18px;
-    width:90%;
+    width: 40%;
-    opacity: 0.7;
-    color:darkblue;
     text-shadow: 1px 1px 1px black;
 }
 
-div#quotelist div.quote:hover {
+img {
-    opacity: 1;
+	max-width: 100%;
-}
+}

views/layout.jade

@@ -1,10 +1,13 @@
 !!! 5
-html(lang: 'en')
+html(lang='en')
   head 
-    meta(charset: 'utf-8')
+    meta(charset='utf-8')
-    link(rel: 'stylesheet', type: 'text/css', href: '/styles.css')
+    link(rel='stylesheet', type='text/css', href='/styles.css')
     title Depressionbot web interface
   body
-    div#title Depressionbot web interface
+    div#page
-    div#main
+        div#title 
-        !{body}
+            a(href='/') Depressionbot web interface
+        div#main
+            !{body}
+    script(type="text/javascript", src="/script.js")

views/quotelist.jade

@@ -1,3 +1,7 @@
--each quote in quotelist
+div#controls
-    div.quotes
+    input(type="text", name="search", id="search-text", oninput="search(this.value)")
-        a(href='/quotes/'+quote) #{quote}
+ul#quotelist
+    -each quote in quotelist
+        a(href='/quotes/'+quote)
+            li.quotes #{quote}
+

views/quotes.jade

@@ -1,11 +1,11 @@
-div#quotelist
+ul#quotelist
     -each quote in quotes
         -if(quote.match(locals.url_regex))
-            div.quote 
+            li.quote 
                 a(href=quote)
                     -if(quote.match(/(jpg|png|gif|jpeg|tiff)$/))
                         img(src=quote)
                     -else
                         =quote
         -else
-            div.quote #{quote}
+            li.quote #{quote}