Include styles

project.clj

@@ -11,6 +11,7 @@
                  [org.apache.commons/commons-math3 "3.6.1"]
                  [org.clojure/core.async "0.4.474"]
                  [quil "2.6.0"]
-                 [hiccup "1.0.5"]]
+                 [hiccup "1.0.5"]
+                 [garden "1.3.5"]]
   :plugins [[lein-ring "0.9.7"]]
   :ring {:handler sketchbook.handler/app})

src_clj/sketchbook/handler.clj

@@ -7,7 +7,8 @@
             [ring.server.standalone :refer [serve]]
             [clojure.core.async :refer [<!! <! go]]
             [sketchbook.sketches :as sketches]
-            [sketchbook.views :as views])
+            [sketchbook.views :as views]
+            [sketchbook.style :as style])
   (:import [java.io ByteArrayInputStream]))
 
 (defn sketch-handler
@@ -42,7 +43,9 @@
   (context "/api" []
     (GET "/sketches/:sketch" [sketch width height] sketch-handler)
     (GET "/sketches/:sketch/:seed" [sketch seed width height] sketch-handler))
-  (GET "/" [] (views/index))
+  (GET "/" [] (views/index-page))
+  (GET "/stylesheet" []
+    (content-type (response (style/stylesheet)) "text/css"))
   (GET "/:sketch" [sketch]
     (let [sketch-item ((keyword sketch) sketches/sketches)]
       (views/sketch-page (:title sketch-item) sketch)))

src_clj/sketchbook/sketches.clj

@@ -29,7 +29,7 @@
         (with-open [in (io/input-stream filename)]
           (io/copy in out))
         (go (>! channel (.toByteArray out))))
-      (q/sketch :size [(/ (first size) 2) (/ (second size) 2)] ;; For some reason images were coming out twice as large as they should be
+      (q/sketch :size size
                 :setup (fn []
                          (r/set-seed seed)
                          (setup))

src_clj/sketchbook/style.clj

@@ -0,0 +1,23 @@
+(ns sketchbook.style
+  (:require [garden.core :refer [css]]))
+
+(def sizes
+  {:tiny "9px"
+   :small "12px"
+   :medium "16px"
+   :large "21px"
+   :huge "28px"})
+
+(defn sketch-thumbnail-styles
+  "Styles for sketch thumbnails"
+  []
+  [:h3.sketch-thumbnail-title
+   {:font-size (:small sizes)
+    :margin-bottom 0
+    :text-transform "uppercase"}])
+
+(def stylesheet-css
+  (css (sketch-thumbnail-styles)))
+
+(defn stylesheet []
+  stylesheet-css)

src_clj/sketchbook/views.clj

@@ -1,27 +1,34 @@
 (ns sketchbook.views
-  (:require [hiccup.core :refer [html]]
+  (:require [hiccup.page :refer [html5 include-css]]
             [sketchbook.sketches :refer [sketches]]))
 
+(defmacro page
+  "A template for a website page"
+  [& body]
+  `(html5
+    [:head
+     (include-css "stylesheet")]
+    [:body ~@body]))
+
 (defn sketch-img
   "A sketch image"
   [name width height]
-  (html
+  [:img {:src (str "/api/sketches/" name "?width=" width "&height=" height)
-   [:img {:src (str "/api/sketches/" name "?width=" width "&height=" height)
+         :width width
-          :width width
+         :height height}])
-          :height height}]))
 
 (defn sketch-thumbnail
   "A thumbnail of a sketch"
   [title name width height]
-  (html
+  [:div
-   [:h1 title]
+   [:h3.sketch-thumbnail-title title]
    [:a {:href (str "/" name)}
-    (sketch-img name width height)]))
+    (sketch-img name width height)]])
 
-(defn index
+(defn index-page
   "The index page"
   []
-  (html
+  (page
    (map #(sketch-thumbnail (:title (second %))
                            (name (first %))
                            300
@@ -31,6 +38,6 @@
 (defn sketch-page
   "Page for an individual sketch"
   [title name]
-  (html
+  (page
    [:h1 title]
    (sketch-img name 768 768)))