switched to less.js

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;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+    .helvetica;
     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;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+    .helvetica;
 }
 .landing-button:hover {
     background: #0b2;
 }
 #panel {
-    font-weight: 300;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+    .helvetica;
     position: fixed;
     width: 100%;
-    border-top: 1px dotted #888;
-    background: #efefef;
+    border-top: 1px dotted @foreground_halftone;
+    background: @background_halftone;
     padding: 0.2em;
     bottom: 0px;
     font-size: 0.7em;
@@ -62,24 +85,14 @@ a:visited {
     border: none;
 }
 html, body {
-    background: #fff;
-    color: #333;
+    background: @background;
+    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;
-    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+    .helvetica;
     margin: 2em;
 }
 article {
-    width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+    .central-element;
     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;
-    background: #efefef;
+    border: 1px dotted @foreground_halftone;
+    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;
 }