theming moved to server side due to unreliability of less.js
This commit is contained in:
Christian Müller
@@ -11,7 +11,7 @@ function md2html(input){
|
||||
return marked(input);
|
||||
}
|
||||
|
||||
function onLoad() {
|
||||
function onLoad () {
|
||||
$note = $("note");
|
||||
$action = $("action");
|
||||
$preview = $("preview");
|
||||
@@ -1,113 +0,0 @@
|
||||
var $ = function(id){ return document.getElementById(id); }
|
||||
var show = function(elem) { elem.style.display = "block" }
|
||||
|
||||
var themes = {
|
||||
"dark": {
|
||||
background: {
|
||||
normal: '#333',
|
||||
halftone: '#444'
|
||||
},
|
||||
foreground: {
|
||||
normal: '#ccc',
|
||||
halftone: '#bbb'
|
||||
},
|
||||
link: {
|
||||
fresh: '#6b8',
|
||||
visited: '#496',
|
||||
hover: '#7c9'
|
||||
}
|
||||
},
|
||||
"solarized-light": {
|
||||
background: {
|
||||
normal: '#fdf6e3',
|
||||
halftone: '#eee8d5'
|
||||
},
|
||||
foreground: {
|
||||
normal: '#657b83',
|
||||
halftone: '#839496'
|
||||
},
|
||||
link: {
|
||||
fresh: '#b58900',
|
||||
visited: '#cb4b16',
|
||||
hover: '#dc322f'
|
||||
}
|
||||
},
|
||||
"solarized-dark": {
|
||||
background: {
|
||||
normal: '#073642',
|
||||
halftone: '#002b36'
|
||||
},
|
||||
foreground: {
|
||||
normal: '#93a1a1',
|
||||
halftone: '#839191'
|
||||
},
|
||||
link: {
|
||||
fresh: '#cb4b16',
|
||||
visited: '#b58900',
|
||||
hover: '#dc322f'
|
||||
}
|
||||
},
|
||||
"default": {
|
||||
background: {
|
||||
normal: '#fff',
|
||||
halftone: '#efefef'
|
||||
},
|
||||
foreground: {
|
||||
normal: '#333',
|
||||
halftone: '#888'
|
||||
},
|
||||
link: {
|
||||
fresh: '#097',
|
||||
visited: '#054',
|
||||
hover: '#0a8'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var ui = { theme: "default" };
|
||||
if (location.search.length > 0) {
|
||||
location.search.slice(1).split("&").reduce(function(acc, e){
|
||||
var p = e.split("=");
|
||||
acc[p[0]] = p[1];
|
||||
return acc
|
||||
}, ui);
|
||||
}
|
||||
|
||||
var vars = {
|
||||
'@background': themes[ui.theme].background.normal,
|
||||
'@background_halftone': themes[ui.theme].background.halftone,
|
||||
'@foreground': themes[ui.theme].foreground.normal,
|
||||
'@foreground_halftone': themes[ui.theme].foreground.halftone,
|
||||
'@link_fresh': themes[ui.theme].link.fresh,
|
||||
'@link_visited': themes[ui.theme].link.visited,
|
||||
'@link_hover': themes[ui.theme].link.hover
|
||||
};
|
||||
|
||||
var fontURL = "https://fonts.googleapis.com/" +
|
||||
"css?family=PT+Serif:700|Noticia+Text:700%s" +
|
||||
"&subset=latin,cyrillic",
|
||||
injection = "";
|
||||
|
||||
if(ui["header-font"] || ui["text-font"]) {
|
||||
injection = ["header-font", "text-font"].reduce(function(acc, font){
|
||||
if(ui[font]) {
|
||||
vars["@" + font.replace(/-/, "_")] = ui[font].replace(/\+/g," ");
|
||||
return acc + "|" + ui[font];
|
||||
} else return acc;
|
||||
}, "");
|
||||
}
|
||||
|
||||
if(ui["text-size"]) vars["@text_size_factor"] = ui["text-size"];
|
||||
if(ui["header-size"]) vars["@header_size_factor"] = ui["header-size"];
|
||||
|
||||
fontURL = fontURL.replace(/%s/, injection);
|
||||
var fileref = document.createElement("link")
|
||||
fileref.setAttribute("rel", "stylesheet")
|
||||
fileref.setAttribute("type", "text/css")
|
||||
fileref.setAttribute("href", fontURL)
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref)
|
||||
|
||||
function onLoad () {
|
||||
if(ui.theme != "default" || Object.keys(ui).length > 1) less.modifyVars(vars);
|
||||
}
|
||||
@@ -1,214 +0,0 @@
|
||||
// variables
|
||||
|
||||
@background: #fff;
|
||||
@foreground: #333;
|
||||
@background_halftone: #efefef;
|
||||
@foreground_halftone: #888;
|
||||
@link_fresh: #097;
|
||||
@link_visited: #054;
|
||||
@link_hover: #0a8;
|
||||
|
||||
@width: 800px;
|
||||
|
||||
@header_font: 'Noticia Text';
|
||||
@text_font: 'Georgia';
|
||||
|
||||
@header_size_factor: 1;
|
||||
@text_size_factor: 1;
|
||||
|
||||
// mixins
|
||||
.helvetica {
|
||||
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;
|
||||
}
|
||||
.thin-border {
|
||||
border: 1px solid @foreground;
|
||||
}
|
||||
// end mixins
|
||||
|
||||
.ui-border {
|
||||
border-radius: 3px;
|
||||
.thin-border;
|
||||
}
|
||||
a {
|
||||
color: @link_fresh;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
a:hover {
|
||||
color: @link_hover;
|
||||
}
|
||||
a:visited {
|
||||
color: @link_visited;
|
||||
}
|
||||
#draft {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
.button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-elem {
|
||||
.helvetica;
|
||||
border-radius: 3px;
|
||||
.thin-border;
|
||||
padding: 0.3em;
|
||||
opacity: 0.8;
|
||||
font-size: 1em;
|
||||
background: @background;
|
||||
}
|
||||
.landing-button, textarea, fieldset {
|
||||
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;
|
||||
}
|
||||
.landing-button:hover {
|
||||
background: #0b2;
|
||||
}
|
||||
#footer {
|
||||
.helvetica;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
padding-bottom: 1em;
|
||||
text-align: center;
|
||||
@media screen and (max-width: 767px) {
|
||||
font-size: 0.4em;
|
||||
}
|
||||
}
|
||||
#footer a {
|
||||
border: none;
|
||||
}
|
||||
html, body {
|
||||
background: @background;
|
||||
color: @foreground;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#hero {
|
||||
padding-top: 5em;
|
||||
padding-bottom: 5em;
|
||||
text-align: center;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
font-family: @header_font,'Noticia Text','PT Serif','Georgia';
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.8em * @header_size_factor;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.6em * @header_size_factor;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.4em * @header_size_factor;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.2em * @header_size_factor;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.1em * @header_size_factor;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1em * @header_size_factor;
|
||||
}
|
||||
#hero h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
#hero h2 {
|
||||
.helvetica;
|
||||
margin: 2em;
|
||||
}
|
||||
article {
|
||||
font-family: @text_font, 'Georgia';
|
||||
.central-element;
|
||||
margin-top: 5em;
|
||||
text-align: justify;
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
}
|
||||
article p {
|
||||
font-size: 1.2em * @text_size_factor;
|
||||
line-height: 140%;
|
||||
}
|
||||
article > h1:first-child {
|
||||
text-align: center;
|
||||
font-size: 2em * @header_size_factor;
|
||||
margin: 2em;
|
||||
}
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
.bottom-space {
|
||||
margin-bottom: 7em;
|
||||
}
|
||||
code, pre {
|
||||
font-family: monospace;
|
||||
background: @background_halftone;
|
||||
font-size: 1.2em * @text_size_factor;
|
||||
}
|
||||
pre {
|
||||
border-radius: 3px;
|
||||
padding: 0.5em;
|
||||
border: 1px dotted @foreground_halftone;
|
||||
}
|
||||
*:focus {
|
||||
outline: 0px none transparent;
|
||||
}
|
||||
textarea {
|
||||
@media screen and (min-width: 1024px) {
|
||||
width: @width;
|
||||
}
|
||||
border-radius: 5px;
|
||||
font-family: Courier;
|
||||
font-size: 1em;
|
||||
height: 500px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#dashed-line {
|
||||
border-bottom: 1px dashed @foreground_halftone;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th {
|
||||
padding: 0.3em;
|
||||
background-color: @background_halftone;
|
||||
}
|
||||
td {
|
||||
border-top: 1px dotted @foreground_halftone;
|
||||
padding: 0.3em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
.middot {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
}
|
||||
Reference in New Issue
Block a user