switched to less.js

LANDING.md

@@ -11,7 +11,8 @@ Send your feedback and comments directly to [@gravitydenier](http://twitter.com/
 ## Features
 - **Color Themes**: specify the color scheme by appending the corresponding parameter to the URL:
     - [Dark](http://notehub.org/2012/6/16/how-notehub-is-built?theme=dark)
-    - [Solarized](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized)
+    - [Solarized-Dark](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-dark)
+    - [Solarized-Light](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-light)
 - **Fonts**: select a [Google Web Font](http://www.google.com/webfonts/) for headers and for the text by appending parameters to the note [URL](http://notehub.org/2012/6/16/how-notehub-is-built?header-font=Chau+Philomene+One&text-font=Alegreya+Sans+SC).
 - **Short URLs**: every page (including theme & font options) has its own short url.
 - **Editing**: if you set a password during publishing, you can edit your note any time later.

resources/public/js/themes.js

@@ -0,0 +1,62 @@
+var themes = {
+    "dark": {
+        background: {
+            normal: '#333',
+            halftone: '#444'
+        },
+        foreground: {
+            normal: '#ccc',
+            halftone: '#bbb' 
+        },
+        link: {
+            fresh: '#6b8',
+            visited: '#496',
+            hover: '#7c9' 
+        }
+    },
+    "solarized-light": {
+        background: {
+            normal: '#fdf6e3',
+            halftone: '#eee8d5' 
+        },
+        foreground: {
+            normal: '#657b83',
+            halftone: '#839496'
+        },
+        link: {
+            fresh: '#b58900',
+            visited: '#cb4b16',
+            hover: '#dc322f' 
+        }
+    },
+    "solarized-dark": {
+        background: {
+            normal: '#073642',
+            halftone: '#002b36' 
+        },
+        foreground: {
+            normal: '#93a1a1',
+            halftone: '#eee8d5'
+        },
+        link: {
+            fresh: '#cb4b16',
+            visited: '#b58900',
+            hover: '#dc322f' 
+        }
+    },
+    "default": {
+        background: {
+            normal: '#fff',
+            halftone: '#efefef'
+        },
+        foreground: {
+            normal: '#333',
+            halftone: '#888'
+        },
+        link: {
+            fresh: '#097',
+            visited: '#054',
+            hover: '#0a8' 
+        }
+    }
+};

resources/public/style.less

@@ -1,34 +1,59 @@
+// variables
+
+@background: #fff;
+@foreground: #333;
+@background_halftone: #efefef;
+@foreground_halftone: #888;
+@link_fresh: #097;
+@link_visited: #054;
+@link_hover: #0a8;
+
+@width: 800px;
+
+// mixins
+.helvetica {
+    font-weight: 300;
+    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+}
+.central-element {
+    width: @width;
+    margin-left: auto;
+    margin-right: auto;
+}
+.thin-border {
+    border: 1px solid @foreground;
+}
+
 a {
-    color: #097;
+    color: @link_fresh;
     text-decoration: none;
     border-bottom: 1px dotted;
 }
 a:hover {
-    color: #0a8;
+    color: @link_hover;
 }
 
 a:visited {
-    color: #054;
+    color: @link_visited;
 }
 #draft {
     margin-bottom: 3em;
 }
 .ui-border {
     border-radius: 3px;
-    border: 1px solid #333;
+    .thin-border;
 }
 .button {
     cursor: pointer;
 }
 .ui-elem {
-    font-weight: 300;
+    .helvetica;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
     border-radius: 3px;
-    border: 1px solid #333;
+    .thin-border;
     padding: 0.3em;
     opacity: 0.8;
     font-size: 1em;
-    background: #fff;
+    background: @background;
 }
 .landing-button, table, tr, td, textarea, fieldset {
     border: none;
@@ -40,19 +65,17 @@ a:visited {
     background: #0a2;
     border-radius: 10px;
     padding: 10px;
-    font-weight: 300;
+    .helvetica;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
 }
 .landing-button:hover {
     background: #0b2;
 }
 #panel {
-    font-weight: 300;
+    .helvetica;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
     position: fixed;
     width: 100%;
-    border-top: 1px dotted #888;
+    border-top: 1px dotted @foreground_halftone;
-    background: #efefef;
+    background: @background_halftone;
     padding: 0.2em;
     bottom: 0px;
     font-size: 0.7em;
@@ -62,24 +85,14 @@ a:visited {
     border: none;
 }
 html, body {
-    background: #fff;
+    background: @background;
-    color: #333;
+    color: @foreground;
     margin: 0;
     padding: 0;
-}
-#stats {
-
-}
-#stats tr {
-
 }
 #stats tr > td:first-child {
     text-align: right;
 }
-.helvetica-neue {
-    font-weight: 300;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
-}
 #hero {
     padding-top: 5em;
     padding-bottom: 5em;
@@ -90,14 +103,11 @@ html, body {
 }
 
 #hero h2 {
-    font-weight: 300;
+    .helvetica;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
     margin: 2em;
 }
 article {
-    width: 800px;
+    .central-element;
-    margin-left: auto;
-    margin-right: auto;
     margin-top: 5em;
     font-family: 'Georgia';
     text-align: justify;
@@ -120,14 +130,14 @@ article > h1:first-child {
 pre {
     border-radius: 3px;
     padding: 0.5em;
-    border: 1px dotted #888;
+    border: 1px dotted @foreground_halftone;
-    background: #efefef;
+    background: @background_halftone;
 }
 *:focus {
     outline: 0px none transparent;
 }
 textarea {
-    width: 800px;
+    width: @width;
     border-radius: 5px;
     font-family: Courier;
     font-size: 1em;
@@ -136,16 +146,11 @@ textarea {
 .hidden {
     display: none;
 }
-.central-element {
-    width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-}
 h1 {
     font-size: 2em;
 }
 #dashed-line {
-    border-bottom: 1px dashed #888;
+    border-bottom: 1px dashed @foreground_halftone;
     margin-top: 3em;
     margin-bottom: 3em;
 }

settings

@@ -1,2 +1 @@
-page-width = 800
 max-title-length = 40

src/NoteHub/views/common.clj

@@ -18,7 +18,8 @@
 (defpartial generate-layout 
   [params title & content]
   ; for the sake of security: escape all symbols of the param values
-  (let [params (into {} (for [[k v] params] [k (escape-html v)]))]
+  (let [params (into {} (for [[k v] params] [k (escape-html v)]))
+        theme (:theme params "default")]
     (html5
       [:head
        [:title (print-str (get-message :name) "—" title)]
@@ -38,16 +39,25 @@
                       "&subset=latin,cyrillic") " " "+")
                :rel "stylesheet"
                :type "text/css"}]
-       ; generating the global CSS
+       [:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}]
-       [:link {:rel "stylesheet" :type "text/css" :href "/style.css"}]
        ; google analytics code should appear in prod mode only
        (if-not (dev-mode?) (include-js "/js/google-analytics.js"))]
       [:body content
        ; we only need JS during a new note creation, so don't render it otherwise
        (html
+         (include-js "/js/less.js")
          (include-js "/js/md5.js")
          (include-js "/js/marked.js")
-         (include-js "/js/main.js"))])))
+         (include-js "/js/main.js")
+         (include-js "/js/themes.js")
+         (javascript-tag (str "less.modifyVars({
+                          '@background': themes['" theme "'].background.normal,
+                          '@background_halftone': themes['" theme "'].background.halftone,
+                          '@foreground': themes['" theme "'].foreground.normal,
+                          '@foreground_halftone': themes['" theme "'].foreground.halftone,
+                          '@link_fresh': themes['" theme "'].link.fresh,
+                          '@link_visited': themes['" theme "'].link.visited,
+                          '@link_hover': themes['" theme "'].link.hover});")))])))
 
 (defn layout
   "Generates the main html layout"

src/NoteHub/views/pages.clj

@@ -78,9 +78,9 @@
            [:br]
            [:a.landing-button {:href "/new" :style "color: white"} (get-message :new-page)]]
           [:div#dashed-line]
-          [:article.helvetica-neue.bottom-space.markdown {:style "font-size: 1em"} 
+          [:article.helvetica.bottom-space.markdown {:style "font-size: 1em"} 
            (slurp "LANDING.md")]
-          [:div.centered.helvetica-neue.markdown (get-message :footer)]))
+          [:div.centered.helvetica.markdown (get-message :footer)]))
 
 ; input form for the markdown text with a preview area
 (defpartial input-form [form-url command fields content passwd-msg]
@@ -88,7 +88,7 @@
     (layout {:js true} (get-message :new-note)
             [:article#preview.markdown " "]
             [:div#dashed-line {:class css-class}]
-            [:div.central-element.helvetica-neue {:style "margin-bottom: 3em"}
+            [:div.central-element.helvetica {:style "margin-bottom: 3em"}
              (form-to {:autocomplete :off} [:post form-url]
                       (hidden-field :action command)
                       (hidden-field :password)
@@ -129,7 +129,7 @@
 (defpage "/:year/:month/:day/:title/stats" {:keys [year month day title]}
   (when-let [views (get-note-views [year month day] title)]
     (layout (get-message :statistics)
-            [:table#stats.helvetica-neue.central-element
+            [:table#stats.helvetica.central-element
              [:tr
               [:td (get-message :published)]
               [:td (interpose "-" [year month day])]]