themable look added
This commit is contained in:
Christian Mueller
@@ -1,113 +1,10 @@
|
||||
(ns NoteHub.views.common
|
||||
(:use
|
||||
[cssgen]
|
||||
[cssgen.types]
|
||||
[NoteHub.views.css-generator]
|
||||
[noir.core :only [defpartial]]
|
||||
[hiccup.page :only [include-js html5]]
|
||||
[hiccup.element :only [javascript-tag]]))
|
||||
|
||||
(defn gen-comma-list [& fonts] (apply str (interpose "," fonts)))
|
||||
(def page-width
|
||||
(mixin
|
||||
:width :800px))
|
||||
(def helvetica-neue
|
||||
(mixin
|
||||
:font-weight 300
|
||||
:font-family (gen-comma-list "'Helvetica Neue'"
|
||||
"Helvetica"
|
||||
"Arial"
|
||||
"'Lucida Grande'"
|
||||
"sans-serif")))
|
||||
(def central-element
|
||||
(mixin
|
||||
page-width
|
||||
:margin-top :5em
|
||||
:margin-bottom :10em
|
||||
:margin-left "auto"
|
||||
:margin-right "auto"))
|
||||
|
||||
(defn color [theme tone]
|
||||
(get-in {:dark-theme {:background :#fff
|
||||
:foreground :#333
|
||||
:background-halftone :#efefef
|
||||
:foreground-halftone :#888 }
|
||||
:bright-theme {:background :#fff
|
||||
:foreground :#333
|
||||
:background-halftone :#efefef
|
||||
:foreground-halftone :#888 }} [theme tone]))
|
||||
|
||||
(defn global-css [arg]
|
||||
(let [theme (if-not arg :bright-theme)
|
||||
background (mixin (color theme :background))
|
||||
foreground (color theme :foreground)
|
||||
background-halftone (color theme :background-halftone)
|
||||
foreground-halftone (color theme :foreground-halftone)]
|
||||
(css
|
||||
(rule ".landing-button"
|
||||
:box-shadow [0 :2px :5px :#aaa]
|
||||
:text-decoration :none
|
||||
:font-size :1.5em
|
||||
:background :#0a2
|
||||
:color :white
|
||||
:border :none
|
||||
:border-radius :10px
|
||||
:padding :10px
|
||||
helvetica-neue
|
||||
(rule "&:hover"
|
||||
:background :#0b2))
|
||||
(rule "html, body"
|
||||
:background background
|
||||
:color foreground
|
||||
:margin 0
|
||||
:padding 0)
|
||||
(rule "#hero"
|
||||
:padding-top :5em
|
||||
:padding-bottom :5em
|
||||
:text-align :center
|
||||
(rule "h2"
|
||||
helvetica-neue))
|
||||
(rule "article"
|
||||
central-element
|
||||
:font-family :Georgia
|
||||
:font-size :1.2em
|
||||
(rule "& > h1:first-child"
|
||||
:text-align :center
|
||||
:margin :2em))
|
||||
(rule "pre"
|
||||
:border-radius :3px
|
||||
:padding :1em
|
||||
:border [:1px :dotted foreground-halftone]
|
||||
:background background-halftone)
|
||||
(rule "*:focus"
|
||||
:outline [:0px :none :transparent])
|
||||
(rule "textarea"
|
||||
page-width
|
||||
:font-family :Courier
|
||||
:font-size :1.2em
|
||||
:border :none
|
||||
; TODO: make this dynamic
|
||||
:height :500px
|
||||
:margin-bottom :2em)
|
||||
(rule ".hidden"
|
||||
:display :none)
|
||||
(rule ".button"
|
||||
:border-radius :3px
|
||||
helvetica-neue
|
||||
:cursor :pointer
|
||||
:border [:1px :solid foreground]
|
||||
:opacity 0.8
|
||||
:font-size :1em
|
||||
:background background)
|
||||
(rule ".central-element"
|
||||
central-element)
|
||||
(rule "h1"
|
||||
:font-size :2em)
|
||||
(rule "#preview-start-line"
|
||||
:border-bottom [:1px :dashed foreground-halftone]
|
||||
:margin-bottom :5em)
|
||||
(rule "h1, h2, h3, h4"
|
||||
:font-family (gen-comma-list "'Noticia Text'" "'PT Serif'")))))
|
||||
|
||||
(defpartial generate-layout
|
||||
[params title & content]
|
||||
(html5
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
(ns NoteHub.views.css-generator
|
||||
(:use [cssgen]
|
||||
[cssgen.types]))
|
||||
|
||||
(defn gen-comma-list [& fonts] (apply str (interpose "," fonts)))
|
||||
|
||||
(def page-width
|
||||
(mixin
|
||||
:width :800px))
|
||||
(def helvetica-neue
|
||||
(mixin
|
||||
:font-weight 300
|
||||
:font-family (gen-comma-list "'Helvetica Neue'"
|
||||
"Helvetica"
|
||||
"Arial"
|
||||
"'Lucida Grande'"
|
||||
"sans-serif")))
|
||||
(def central-element
|
||||
(mixin
|
||||
page-width
|
||||
:margin-top :5em
|
||||
:margin-bottom :10em
|
||||
:margin-left "auto"
|
||||
:margin-right "auto"))
|
||||
|
||||
(defn color [theme tone]
|
||||
(get-in {:dark {:background :#333
|
||||
:foreground :#ccc
|
||||
:background-halftone :#444
|
||||
:foreground-halftone :#bbb }
|
||||
:default {:background :#fff
|
||||
:foreground :#333
|
||||
:background-halftone :#efefef
|
||||
:foreground-halftone :#888 }} [theme tone]))
|
||||
|
||||
(defn global-css [arg]
|
||||
(let [theme (if arg (keyword arg) :default)
|
||||
background (color theme :background)
|
||||
foreground (color theme :foreground)
|
||||
background-halftone (color theme :background-halftone)
|
||||
foreground-halftone (color theme :foreground-halftone)]
|
||||
(css
|
||||
(rule ".landing-button"
|
||||
:box-shadow [0 :2px :5px :#aaa]
|
||||
:text-decoration :none
|
||||
:font-size :1.5em
|
||||
:background :#0a2
|
||||
:color :white
|
||||
:border :none
|
||||
:border-radius :10px
|
||||
:padding :10px
|
||||
helvetica-neue
|
||||
(rule "&:hover"
|
||||
:background :#0b2))
|
||||
(rule "html, body"
|
||||
:background background
|
||||
:color foreground
|
||||
:margin 0
|
||||
:padding 0)
|
||||
(rule "#hero"
|
||||
:padding-top :5em
|
||||
:padding-bottom :5em
|
||||
:text-align :center
|
||||
(rule "h2"
|
||||
helvetica-neue))
|
||||
(rule "article"
|
||||
central-element
|
||||
:line-height (% 140)
|
||||
:font-family :Georgia
|
||||
:font-size :1.2em
|
||||
(rule "& > h1:first-child"
|
||||
:text-align :center
|
||||
:margin :2em))
|
||||
(rule "pre"
|
||||
:border-radius :3px
|
||||
:padding :1em
|
||||
:border [:1px :dotted foreground-halftone]
|
||||
:background background-halftone)
|
||||
(rule "*:focus"
|
||||
:outline [:0px :none :transparent])
|
||||
(rule "textarea"
|
||||
page-width
|
||||
:font-family :Courier
|
||||
:font-size :1.2em
|
||||
:border :none
|
||||
; TODO: make this dynamic
|
||||
:height :500px
|
||||
:margin-bottom :2em)
|
||||
(rule ".hidden"
|
||||
:display :none)
|
||||
(rule ".button"
|
||||
:border-radius :3px
|
||||
helvetica-neue
|
||||
:cursor :pointer
|
||||
:border [:1px :solid foreground]
|
||||
:opacity 0.8
|
||||
:font-size :1em
|
||||
:background background)
|
||||
(rule ".central-element"
|
||||
central-element)
|
||||
(rule "h1"
|
||||
:font-size :2em)
|
||||
(rule "#preview-start-line"
|
||||
:border-bottom [:1px :dashed foreground-halftone]
|
||||
:margin-bottom :5em)
|
||||
(rule "h1, h2, h3, h4"
|
||||
:font-family (gen-comma-list "'Noticia Text'" "'PT Serif'")))))
|
||||
@@ -80,8 +80,11 @@
|
||||
(common/layout {:theme theme} title [:article (md-to-html post)])
|
||||
(status 404 ""))))
|
||||
|
||||
(defpage "/:year/:month/:day/:title/theme/:theme" {:keys [year month day title theme]}
|
||||
(get-article-page theme [year month day] title))
|
||||
|
||||
(defpage "/:year/:month/:day/:title" {:keys [year month day title]}
|
||||
(get-article-page :default-theme [year month day] title))
|
||||
(get-article-page :default [year month day] title))
|
||||
|
||||
; New Note Posting
|
||||
(defpage [:post "/post-note"] {:keys [draft session-key session-value]}
|
||||
|
||||
Reference in New Issue
Block a user