adding some basic styles

public/stylesheets/screen.css

@@ -0,0 +1,42 @@
+/*=====================
+    RESET
+=====================*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
+/* remember to define focus styles! */
+:focus {outline: 0;}
+/* remember to highlight inserts somehow! */
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+/* tables still need 'cellspacing="0"' in the markup */
+table {border-collapse: collapse; border-spacing: 0;}
+
+/*======================
+    STYLES
+======================*/
+body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; background: #ebebeb; }
+a { color: #36c; text-decoration: none; font-style: normal; }
+#content, #footer { width: 700px; margin: 0 auto; }
+#header { background: #333; height: 50px; border-bottom: 1px solid #fff; }
+#content { padding: 30px 50px; }
+h1 { width: 960px; margin: 0 auto; color: #fff; font-weight: normal; font-size: 18px; line-height: 50px; }
+h1 span { margin-left: 0.6em; padding: 0.4em 0.6em; border-left: solid 1px #414141; }
+h1 span a { color: #fff; opacity: 0.25; -webkit-transition-duration: .20s; -webkit-transition-property: opacity; -moz-transition-duration: .20s; -moz-transition-property: opacity; }
+h1 span a#home { color: transparent; background: transparent url(/images/home.png) 0 0 no-repeat; text-indent: -9999px; }
+h1 span a:hover { opacity: 1; }
+#greeting { font-size: 2.0em; }
+#shout-form { margin: 0 auto; width: 600px; }
+#shout { width: 500px; }
+#shouts { margin-top: 10px; width: 500px; background-color: #fff;}
+.shout { padding: 15px; border-bottom: 1px solid #999; }

src/shouter/views/layout.clj

@@ -0,0 +1,15 @@
+(ns shouter.views.layout
+  (:use [hiccup.core :only [html]]
+        [hiccup.page-helpers :only [doctype include-css]]))
+
+(defn application
+  [title & body]
+  (html
+   (doctype :html5)
+   [:head
+    [:title title]
+    (include-css "/stylesheets/screen.css")]
+   [:body
+    [:div {:id "header"}
+     [:h1 "SHOUTER"]]
+    [:div {:id "content"} body]]))

src/shouter/views/shouts.clj

@@ -1,10 +1,12 @@
 (ns shouter.views.shouts
   (:use [hiccup.core :only [html]]
         [hiccup.page-helpers :only [doctype]]
-        [hiccup.form-helpers :only [form-to label text-area submit-button]]))
+        [hiccup.form-helpers :only [form-to label text-area submit-button]])
+  (:require [shouter.views.layout :as layout]))
 
 (defn shout-form
   []
+  [:div {:id "shout-form"}]
   (form-to [:post "/"]
            (label "shout" "What do you want to SHOUT?") [:br]
            (text-area "shout")
@@ -19,11 +21,4 @@
 
 (defn index
   [shouts]
-  (html
-   (doctype :html5)
-   [:head
-    [:title "Shouter"]]
-   [:body
-    [:div {:id "content"}
-     (shout-form)
-     (display-shouts shouts)]]))
+  (layout/application "SHOUTER" (shout-form) (display-shouts shouts)))