From 72e36acfd26746db2504c5348f2252bf9a8a5cc4 Mon Sep 17 00:00:00 2001 From: Christian Mueller Date: Sat, 27 Sep 2014 14:55:03 +0200 Subject: [PATCH] font size option added --- LANDING.md | 5 +- resources/public/js/themes.js | 2 + resources/public/styles/main.less | 191 +++++++++++++++--------------- 3 files changed, 102 insertions(+), 96 deletions(-) diff --git a/LANDING.md b/LANDING.md index 3d6272f..737b57a 100644 --- a/LANDING.md +++ b/LANDING.md @@ -1,6 +1,6 @@ ## Features -- **Themes**: specify the color scheme in the URL: [default](/2014/3/31/demo-note), [dark](/2014/3/31/demo-note?theme=dark), [solarized](/2014/3/31/demo-note?theme=solarized-light), [solarized dark](/2014/3/31/demo-note?theme=solarized-dark). -- **Fonts**: specify a font (e.g., [Google Web Fonts](http://www.google.com/webfonts/)) for headers and body text in the URL like [this](/8m4l9) or [this](/2014/3/31/demo-note?text-font=Helvetica&header-font=Courier). +- **Themes**: specify the color scheme in the URL: [default](/2014/3/31/demo-note), [dark](/2014/3/31/demo-note?theme=dark), [solarized light](/2014/3/31/demo-note?theme=solarized-light), [solarized dark](/2014/3/31/demo-note?theme=solarized-dark). +- **Fonts**: specify a font (e.g., [Google Web Fonts](http://www.google.com/webfonts/)) for headers and body text in the URL like [this](/8m4l9) or [this](/2014/3/31/demo-note?text-font=Helvetica&header-font=Courier&font-size=1.3). - **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. - **Statistics**: page view counter, publishing and editing date. @@ -9,6 +9,7 @@ - **API**: Integrate the publishing functionality into your editor using the official [NoteHub API](/api). ## Changelog + - September 2014: font size modifications added - July 2014: - deprecated all API versions less than 1.4 - performance improvements diff --git a/resources/public/js/themes.js b/resources/public/js/themes.js index 4fa0f6e..96fdedd 100644 --- a/resources/public/js/themes.js +++ b/resources/public/js/themes.js @@ -98,6 +98,8 @@ if(ui["header-font"] || ui["text-font"]) { }, ""); } +if(ui["font-size"]) vars["@font_size"] = ui["font-size"] + "em"; + fontURL = fontURL.replace(/%s/, injection); var fileref = document.createElement("link") fileref.setAttribute("rel", "stylesheet") diff --git a/resources/public/styles/main.less b/resources/public/styles/main.less index e601680..38f4ec9 100644 --- a/resources/public/styles/main.less +++ b/resources/public/styles/main.less @@ -17,170 +17,173 @@ // 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; - } - @media screen and (max-width: 1023px) { - width: 90%; - } - margin-left: auto; - margin-right: auto; + @media screen and (min-width: 1024px) { +width: @width; + } + @media screen and (max-width: 1023px) { +width: 90%; + } + margin-left: auto; + margin-right: auto; } .thin-border { - border: 1px solid @foreground; +border: 1px solid @foreground; } // end mixins .ui-border { - border-radius: 3px; - .thin-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; + 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; } #links { - .helvetica; - width: 100%; - font-size: 0.8em; - padding-bottom: 1em; - text-align: center; - @media screen and (max-width: 767px) { - font-size: 0.4em; - } + .helvetica; +width: 100%; + font-size: 0.8em; + padding-bottom: 1em; + text-align: center; + @media screen and (max-width: 767px) { + font-size: 0.4em; + } } #links 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; +} +h1, h2, h3, h4, h5, h6 { + font-weight: bold; } #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; } article p { - line-height: 140%; + font-size: @font_size; + 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 { - @media screen and (min-width: 1024px) { - width: @width; - } - border-radius: 5px; - font-family: Courier; - font-size: 1em; - height: 500px; + @media screen and (min-width: 1024px) { +width: @width; + } + border-radius: 5px; + font-family: Courier; + font-size: 1em; +height: 500px; } .hidden, #links { - 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 { - width: 100%; - border-collapse: collapse; +width: 100%; + 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; +padding: 0.5em; }