font size option added
This commit is contained in:
Christian Mueller
+3
-2
@@ -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
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user