font size option added

11 years ago · 72e36acfd2
3 changed files with 102 additions and 96 deletions
--- 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).
+- **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).
+- **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
--- 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")
--- a/resources/public/styles/main.less
+++ b/resources/public/styles/main.less
@ -17,170 +17,173 @@
 // mixins
 .helvetica {
-  font-weight: 300;
+    font-weight: 300;
-  font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
+    font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
 }
 .central-element {
-  @media screen and (min-width: 1024px) {
+    @media screen and (min-width: 1024px) {
-    width: @width;
+width: @width;
-  }
+    }
-  @media screen and (max-width: 1023px) {
+    @media screen and (max-width: 1023px) {
-    width: 90%;
+width: 90%;
-  }
+    }
-  margin-left: auto;
+    margin-left: auto;
-  margin-right: auto;
+    margin-right: auto;
 }
 .thin-border {
-  border: 1px solid @foreground;
+border: 1px solid @foreground;
 }
 // end mixins
 .ui-border {
-  border-radius: 3px;
+    border-radius: 3px;
-  .thin-border;
+    .thin-border;
 }
 code, pre {
-  font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace;
+    font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace;
-  font-size: 0.9em;
+    font-size: 0.9em;
 }
 a {
-  color: @link_fresh;
+color: @link_fresh;
-  text-decoration: none;
+       text-decoration: none;
-  border-bottom: 1px dotted;
+       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;
+    .helvetica;
-  border-radius: 3px;
+    border-radius: 3px;
-  .thin-border;
+    .thin-border;
-  padding: 0.3em;
+padding: 0.3em;
-  opacity: 0.8;
+opacity: 0.8;
-  font-size: 1em;
+         font-size: 1em;
-  background: @background;
+background: @background;
 }
 .landing-button, textarea, fieldset {
-  border: none;
+border: none;
 }
 .landing-button {
-  box-shadow: 0 2px 5px #aaa;
+    box-shadow: 0 2px 5px #aaa;
-  text-decoration: none;
+    text-decoration: none;
-  font-size: 1.5em;
+    font-size: 1.5em;
-  background: #0a2;
+background: #0a2;
-  border-radius: 10px;
+            border-radius: 10px;
-  padding: 10px;
+padding: 10px;
-  .helvetica;
+         .helvetica;
 }
 .landing-button:hover {
-  background: #0b2;
+background: #0b2;
 }
 #links {
-  .helvetica;
+    .helvetica;
-  width: 100%;
+width: 100%;
-  font-size: 0.8em;
+       font-size: 0.8em;
-  padding-bottom: 1em;
+       padding-bottom: 1em;
-  text-align: center;
+       text-align: center;
-  @media screen and (max-width: 767px) {
+       @media screen and (max-width: 767px) {
-    font-size: 0.4em;
+           font-size: 0.4em;
-  }
+       }
 }
 #links a {
-  border: none;
+border: none;
 }
 html, body {
-  background: @background;
+background: @background;
-  color: @foreground;
+color: @foreground;
-  margin: 0;
+margin: 0;
-  padding: 0;
+padding: 0;
 }
 #hero {
-  padding-top: 5em;
+    padding-top: 5em;
-  padding-bottom: 5em;
+    padding-bottom: 5em;
-  text-align: center;
+    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;
+    .helvetica;
-  margin: 2em;
+margin: 2em;
 }
 article {
-  font-family: @text_font, 'Georgia';
+    font-family: @text_font, 'Georgia';
-  .central-element;
+    .central-element;
-  margin-top: 5em;
+    margin-top: 5em;
-  text-align: justify;
+    text-align: justify;
  font-size: @font_size;
 }
 article p {
-  line-height: 140%;
+    font-size: @font_size;
    line-height: 140%;
 }
 article > h1:first-child {
-  text-align: center;
+    text-align: center;
-  font-size: 2em;
+    font-size: 2em;
-  margin: 2em;
+margin: 2em;
 }
 .centered {
-  text-align: center;
+    text-align: center;
 }
 .bottom-space {
-  margin-bottom: 7em;
+    margin-bottom: 7em;
 }
 pre {
-  border-radius: 3px;
+    border-radius: 3px;
-  padding: 0.5em;
+padding: 0.5em;
-  border: 1px dotted @foreground_halftone;
+border: 1px dotted @foreground_halftone;
-  background: @background_halftone;
+background: @background_halftone;
 }
 *:focus {
-  outline: 0px none transparent;
+outline: 0px none transparent;
 }
 textarea {
-  @media screen and (min-width: 1024px) {
+    @media screen and (min-width: 1024px) {
-    width: @width;
+width: @width;
-  }
+    }
-  border-radius: 5px;
+    border-radius: 5px;
-  font-family: Courier;
+    font-family: Courier;
-  font-size: 1em;
+    font-size: 1em;
-  height: 500px;
+height: 500px;
 }
 .hidden, #links {
-  display: none;
+display: none;
 }
 #dashed-line {
-  border-bottom: 1px dashed @foreground_halftone;
+    border-bottom: 1px dashed @foreground_halftone;
-  margin-top: 3em;
+    margin-top: 3em;
-  margin-bottom: 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%;
+width: 100%;
-  border-collapse: collapse;
+       border-collapse: collapse;
 }
 th {
-  padding: 0.3em;
+padding: 0.3em;
-  background-color: @background_halftone;
+         background-color: @background_halftone;
 }
 td {
-  border-top: 1px dotted @foreground_halftone;
+    border-top: 1px dotted @foreground_halftone;
-  padding: 0.3em;
+padding: 0.3em;
 }
 .middot {
-  padding: 0.5em;
+padding: 0.5em;
 }