layout improved, JS simplified

src-cljs/main.cljs

@@ -6,22 +6,16 @@
             [clojure.browser.event :as event]
             [goog.editor.focus :as focus]))
 
-(defn log [obj]
-  (.log js/console obj))
+(defn $ 
+  "The DOM-element selector."
+  [selector]
+    (dom/get-element selector))
 
-(defn $ [selector]
-  (let [type (first selector) name (apply str (rest selector))]
-    (cond (= \# type) (dom/get-element name)
-          (= \. type) (gdom/getElementByClass name))))
-
-(if-let [write-textarea ($ "#write-textarea")]
+(if-let [write-textarea ($ "write-textarea")]
   (focus/focusInputField write-textarea))
 
-(defn show-form-buttons []
-  (style/setStyle ($ ".form-button") "display" "block"))
-
-(event/listen ($ "#write-textarea")
+; Show the Preview button as soon as the user starts typing.
+(event/listen ($ "write-textarea")
               :keypress
               (fn [e]
-                (show-form-buttons)))
-
+                (style/setStyle ($ "form-button") "display" "block")))

src/NoteHub/views/common.clj

@@ -11,13 +11,14 @@
     (css 
       (rule ".centerized"
           :text-align :center)
-      (rule ".helvetica-neue"
+      (def helvetica-neue
+        (mixin
           :font-weight 300
           :font-family (gen-comma-list ["'Helvetica Neue'"
                         "Helvetica"
                         "Arial"
                         "'Lucida Grande'"
-                        "sans-serif"]))
+                        "sans-serif"])))
       (rule ".button"
             :box-shadow [0 :2px :5px :#aaa]
             :text-decoration :none
@@ -27,8 +28,9 @@
             :border :none
             :border-radius :10px
             :padding :10px
+            helvetica-neue
             (rule "&:hover"
-                  :background :#0b2))
+                  :background :#2b3))
       (rule "html, body"
             :color :#333
             :margin 0
@@ -36,7 +38,9 @@
       (rule "#hero"
             :padding-top :5em
             :padding-bottom :5em
-            :text-align :center)
+            :text-align :center
+            (rule "h2"
+                  helvetica-neue))
       (rule ".article-font"
             :font-family :Georgia
             :font-size :1.3em)
@@ -49,7 +53,8 @@
             :font-size :1.3em
             :border :none
             :height :600px)
-      (rule ".form-button"
+      (rule "#form-button"
+            helvetica-neue
             :display :none
             :cursor :pointer
             :border [:1px :solid]

src/NoteHub/views/pages.clj

@@ -7,14 +7,14 @@
          (common/layout "Free Markdown Hosting"
            [:div#hero
             [:h1 "NoteHub"]
-            [:h2.helvetica-neue "Free hosting for markdown pages."]
+            [:h2 "Free hosting for markdown pages."]
             [:br]
             [:br]
-            [:a.button.helvetica-neue {:href "/new"} "New Page"]]))
+            [:a.button {:href "/new"} "New Page"]]))
 
 (defpage "/new" []
          (common/layout "New Markdown Note"
            [:div.central-body.max-width
             (text-area {:class "max-width"} :write-textarea)
-            (submit-button {:class "helvetica-neue form-button"} "Publish")]))
+            (submit-button {:id "form-button"} "Preview")]))