Browse Source

font size option added

master
Christian Mueller 11 years ago
parent
commit
72e36acfd2
  1. 5
      LANDING.md
  2. 2
      resources/public/js/themes.js
  3. 191
      resources/public/styles/main.less

5
LANDING.md

@ -1,6 +1,6 @@ @@ -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 @@ @@ -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

2
resources/public/js/themes.js

@ -98,6 +98,8 @@ if(ui["header-font"] || ui["text-font"]) { @@ -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")

191
resources/public/styles/main.less

@ -17,170 +17,173 @@ @@ -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;
}

Loading…
Cancel
Save