crappyrules/notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

switched to less.js

Browse Source
This commit is contained in:
Christian Mueller
2014-01-03 22:34:04 +01:00
parent 95db9fb723
commit 22409a1341
7 changed files with 143 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
LANDING.md
+2 -1
View File
@@ -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/less.js
+16
View File
File diff suppressed because one or more lines are too long
resources/public/js/themes.js
+62
View File
@@ -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.css → resources/public/style.less
+45 -40
View File
@@ -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;
}
settings
-1
View File
@@ -1,2 +1 @@
page-width = 800
max-title-length = 40
src/NoteHub/views/common.clj
+14 -4
View File
@@ -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" :type "text/css" :href "/style.css"}]
[:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}]
; 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
+4 -4
View File
@@ -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])]]