From a13d9cd41504218f82629da06717d107859f6389 Mon Sep 17 00:00:00 2001 From: Christian Mueller Date: Mon, 20 Jan 2014 23:04:09 +0100 Subject: [PATCH] mobile friendly styling added --- LANDING.md | 9 +- resources/public/style.less | 177 ++++++++++++++++++------------------ src/NoteHub/views/pages.clj | 1 + 3 files changed, 98 insertions(+), 89 deletions(-) diff --git a/LANDING.md b/LANDING.md index 470286f..02b6de5 100644 --- a/LANDING.md +++ b/LANDING.md @@ -1,8 +1,11 @@ ## News - - January 2014: NoteHub API v1.0 [introduced](/api). - - January 2014: NoteHub 2.0 released: new theme, more performance, extended markdown - - September 2013: Solarized color theme [added](https://github.com/chmllr/NoteHub/pull/4) (thanks Brandon!) ([Demo](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-dark)) + + - January 2014: + - Mobile friendly styling added. + - NoteHub API v1.0 [introduced](/api). + - NoteHub 2.0 released: new theme, more performance, extended markdown. + - September 2013: Solarized color theme [added](https://github.com/chmllr/NoteHub/pull/4) (thanks Brandon!) ([Demo](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-dark)). ## About [NoteHub](http://notehub.org) is a free and hassle-free anonymous pastebin for markdown pages intended for anonymous one-off publishing. diff --git a/resources/public/style.less b/resources/public/style.less index 94b6b52..db4161b 100644 --- a/resources/public/style.less +++ b/resources/public/style.less @@ -17,162 +17,167 @@ // mixins .helvetica { - font-weight: 300; - font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif'; + font-weight: 300; + font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif'; } + .central-element { + @media screen and (min-width: 1024px) { width: @width; margin-left: auto; margin-right: auto; + } + @media screen and (max-width: 1023px) { + margin-left: 1em; + margin-right: 1em; + } } .thin-border { - border: 1px solid @foreground; + border: 1px solid @foreground; } - // end mixins +.ui-border { + border-radius: 3px; + .thin-border; +} + code, pre { - font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace; - font-size: 0.9em; + font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace; + font-size: 0.9em; } a { - color: @link_fresh; - text-decoration: none; - border-bottom: 1px dotted; + color: @link_fresh; + text-decoration: none; + border-bottom: 1px dotted; } a:hover { - color: @link_hover; + color: @link_hover; } - a:visited { - color: @link_visited; + color: @link_visited; } #draft { - margin-bottom: 3em; -} -.ui-border { - border-radius: 3px; - .thin-border; + margin-bottom: 3em; } .button { - cursor: pointer; + cursor: pointer; } .ui-elem { - .helvetica; - border-radius: 3px; - .thin-border; - padding: 0.3em; - opacity: 0.8; - font-size: 1em; - background: @background; + .helvetica; + border-radius: 3px; + .thin-border; + padding: 0.3em; + opacity: 0.8; + font-size: 1em; + background: @background; } .landing-button, textarea, fieldset { - border: none; + border: none; } .landing-button { - box-shadow: 0 2px 5px #aaa; - text-decoration: none; - font-size: 1.5em; - background: #0a2; - border-radius: 10px; - padding: 10px; - .helvetica; + box-shadow: 0 2px 5px #aaa; + text-decoration: none; + font-size: 1.5em; + background: #0a2; + border-radius: 10px; + padding: 10px; + .helvetica; } .landing-button:hover { - background: #0b2; + background: #0b2; } #panel { - .helvetica; - position: fixed; - width: 100%; - border-top: 1px dotted @foreground_halftone; - background: @background_halftone; - padding: 0.2em; - bottom: 0px; - font-size: 0.7em; - text-align: center; + .helvetica; + position: fixed; + width: 100%; + border-top: 1px dotted @foreground_halftone; + background: @background_halftone; + padding: 0.2em; + bottom: 0px; + font-size: 0.7em; + text-align: center; } #panel a { - border: none; + border: none; } html, body { - background: @background; - color: @foreground; - margin: 0; - padding: 0; + background: @background; + color: @foreground; + margin: 0; + padding: 0; } #hero { - padding-top: 5em; - padding-bottom: 5em; - text-align: center; + padding-top: 5em; + padding-bottom: 5em; + text-align: center; } #hero h1 { - font-size: 2.5em; + font-size: 2.5em; } #hero h2 { - .helvetica; - margin: 2em; + .helvetica; + margin: 2em; } article { - font-family: @text_font, 'Georgia'; - .central-element; - margin-top: 5em; - text-align: justify; - font-size: @font_size; + font-family: @text_font, 'Georgia'; + .central-element; + margin-top: 5em; + text-align: justify; + font-size: @font_size; } article p { - line-height: 140%; + line-height: 140%; } - article > h1:first-child { - text-align: center; - font-size: 2em; - margin: 2em; + text-align: center; + font-size: 2em; + margin: 2em; } .centered { - text-align: center; + text-align: center; } .bottom-space { - margin-bottom: 7em; + margin-bottom: 7em; } pre { - border-radius: 3px; - padding: 0.5em; - border: 1px dotted @foreground_halftone; - background: @background_halftone; + border-radius: 3px; + padding: 0.5em; + border: 1px dotted @foreground_halftone; + background: @background_halftone; } *:focus { - outline: 0px none transparent; + outline: 0px none transparent; } textarea { - width: @width; - border-radius: 5px; - font-family: Courier; - font-size: 1em; - height: 500px; + width: @width; + border-radius: 5px; + font-family: Courier; + font-size: 1em; + height: 500px; } .hidden, .markdown { - display: none; + display: none; } #dashed-line { - border-bottom: 1px dashed @foreground_halftone; - margin-top: 3em; - margin-bottom: 3em; + border-bottom: 1px dashed @foreground_halftone; + margin-top: 3em; + margin-bottom: 3em; } h1, h2, h3, h4, h5, h6 { - font-family: @header_font,'Noticia Text','PT Serif','Georgia'; + font-family: @header_font,'Noticia Text','PT Serif','Georgia'; } table { - border-collapse: collapse; + border-collapse: collapse; } th { - padding: 0.3em; - background-color: @background_halftone; + padding: 0.3em; + background-color: @background_halftone; } td { - border-top: 1px dotted @foreground_halftone; - padding: 0.3em; + border-top: 1px dotted @foreground_halftone; + padding: 0.3em; } .middot { padding: 0.5em; diff --git a/src/NoteHub/views/pages.clj b/src/NoteHub/views/pages.clj index b0ef868..3d68824 100644 --- a/src/NoteHub/views/pages.clj +++ b/src/NoteHub/views/pages.clj @@ -29,6 +29,7 @@ [:head [:title (print-str (get-message :name) "—" title)] [:meta {:charset "UTF-8"}] + [:meta {:name "viewport" :content "width=device-width, initial-scale=1.2"}] [:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}] (html (include-js "/js/less.js")