split languages
This commit is contained in:
Koen Lageveen
parent
e8f37c3097
commit
d360fba14a
|
|
@ -0,0 +1,7 @@
|
|||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-86647457-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
html {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #F5F0E6;
|
||||
}
|
||||
body {
|
||||
color: #fff;
|
||||
background: #222;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
padding: 1em 0 0 0;
|
||||
}
|
||||
h1 + p {
|
||||
line-height: 1;
|
||||
padding: 0 0 2em 0;
|
||||
}
|
||||
p {
|
||||
padding: 0 0 .5em 0;
|
||||
}
|
||||
article {
|
||||
float: left;
|
||||
background: transparent;
|
||||
padding: 0 2em;
|
||||
text-align: right;
|
||||
min-height: 100%;
|
||||
min-width: 38%;
|
||||
}
|
||||
footer {
|
||||
font-size: .8em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#font-info p {
|
||||
display: none;
|
||||
line-height: 1;
|
||||
padding: 0 0 2em 0;
|
||||
}
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
opacity: 1;
|
||||
}
|
||||
select {
|
||||
all: unset;
|
||||
width: 9em;
|
||||
margin-left: .5ex;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
#size,
|
||||
#spacing {
|
||||
all: unset;
|
||||
width: 4em;
|
||||
margin-left: .5ex;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
pre,
|
||||
textarea,
|
||||
.CodeMirror {
|
||||
font-family: "Input Mono", monospace;
|
||||
height: auto;
|
||||
}
|
||||
form {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
.nav-button {
|
||||
all: unset;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
label + .nav-button {
|
||||
margin-left: .5ex;
|
||||
}
|
||||
.CodeMirror {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
background: transparent;
|
||||
box-shadow: none !important;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.CodeMirror.no-smooth {
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing : none;
|
||||
}
|
||||
.CodeMirror .cm-atom { font-style: italic; }
|
||||
.CodeMirror-gutters {
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
article, form, .CodeMirror { height: auto; min-height: 0; }
|
||||
article { float: none; text-align: left; }
|
||||
h1 + p,
|
||||
footer { display: none; }
|
||||
}
|
||||
277
index.html
277
index.html
|
|
@ -101,130 +101,12 @@
|
|||
|
||||
<!-- ProgrammingFonts @font-faces -->
|
||||
<!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
|
||||
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css">
|
||||
<link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Poppins:300,500' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
html {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
background: #F5F0E6;
|
||||
}
|
||||
body {
|
||||
color: #fff;
|
||||
background: #222;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
padding: 1em 0 0 0;
|
||||
}
|
||||
h1 + p {
|
||||
line-height: 1;
|
||||
padding: 0 0 2em 0;
|
||||
}
|
||||
p {
|
||||
padding: 0 0 .5em 0;
|
||||
}
|
||||
article {
|
||||
float: left;
|
||||
background: transparent;
|
||||
padding: 0 2em;
|
||||
text-align: right;
|
||||
min-height: 100%;
|
||||
min-width: 38%;
|
||||
}
|
||||
footer {
|
||||
font-size: .8em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#font-info p {
|
||||
display: none;
|
||||
line-height: 1;
|
||||
padding: 0 0 2em 0;
|
||||
}
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
opacity: 1;
|
||||
}
|
||||
select {
|
||||
all: unset;
|
||||
width: 9em;
|
||||
margin-left: .5ex;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
#size,
|
||||
#spacing {
|
||||
all: unset;
|
||||
width: 4em;
|
||||
margin-left: .5ex;
|
||||
padding: 0 .5ex;
|
||||
border: 1px solid rgba(100,100,100,.5);
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
pre,
|
||||
textarea,
|
||||
.CodeMirror {
|
||||
font-family: "Input Mono", monospace;
|
||||
height: auto;
|
||||
}
|
||||
form {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
.nav-button {
|
||||
all: unset;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
label + .nav-button {
|
||||
margin-left: .5ex;
|
||||
}
|
||||
.CodeMirror {
|
||||
border: none;
|
||||
font-size: 100%;
|
||||
background: transparent;
|
||||
box-shadow: none !important;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.CodeMirror.no-smooth {
|
||||
font-smooth: never;
|
||||
-webkit-font-smoothing : none;
|
||||
}
|
||||
.CodeMirror .cm-atom { font-style: italic; }
|
||||
.CodeMirror-gutters {
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
article, form, .CodeMirror { height: auto; min-height: 0; }
|
||||
article { float: none; text-align: left; }
|
||||
h1 + p,
|
||||
footer { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -372,160 +254,11 @@ function updateGutters(cm) {
|
|||
</textarea>
|
||||
</form>
|
||||
|
||||
<!-- Some jquery to make life easier -->
|
||||
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
|
||||
<!-- The business -->
|
||||
<script>
|
||||
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script src="ga.js"></script>
|
||||
<script src="index.js"></script>
|
||||
|
||||
// CodeMirror
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
matchBrackets: true,
|
||||
theme: "pastel-on-dark",
|
||||
lineWrapping: true
|
||||
});
|
||||
|
||||
function applyColors() {
|
||||
$("body").css("color", $(".CodeMirror").css("color"));
|
||||
$("body").css("background", $(".CodeMirror").css("background-color"));
|
||||
}
|
||||
|
||||
// CodeMirror theme selector
|
||||
var input = document.getElementById("select");
|
||||
function selectTheme() {
|
||||
var theme = input.options[input.selectedIndex].innerHTML;
|
||||
editor.setOption("theme", theme);
|
||||
applyColors();
|
||||
}
|
||||
|
||||
var choice = document.location.search &&
|
||||
decodeURIComponent(document.location.search.slice(1));
|
||||
|
||||
if (choice) {
|
||||
input.value = choice;
|
||||
editor.setOption("theme", choice);
|
||||
}
|
||||
|
||||
// ProgrammingFonts font selector
|
||||
function selectFont() {
|
||||
var font = $("#select-font").val();
|
||||
|
||||
if (font === "input") {
|
||||
$("pre").css({ fontFamily: "Input Mono, monospace" });
|
||||
$("textarea").css({ fontFamily: "Input Mono, monospace" });
|
||||
$(".CodeMirror").css({ fontFamily: "Input Mono, monospace" });
|
||||
} else {
|
||||
$("pre").css({ fontFamily: font + ", monospace" });
|
||||
$("textarea").css({ fontFamily: font + ", monospace" });
|
||||
$(".CodeMirror").css({ fontFamily: font + ", monospace" });
|
||||
}
|
||||
|
||||
$("#font-info p").hide();
|
||||
$("." + font).show();
|
||||
updateHash();
|
||||
}
|
||||
|
||||
function setSize() {
|
||||
$(".CodeMirror").css({ fontSize: $("#size").val() + "px" });
|
||||
}
|
||||
function setSpacing() {
|
||||
$(".CodeMirror").css({ lineHeight: $("#spacing").val() });
|
||||
}
|
||||
function setAntialiasing() {
|
||||
if ($("#aliasing").is(":checked")) {
|
||||
$(".CodeMirror").removeClass("no-smooth");
|
||||
} else {
|
||||
$(".CodeMirror").addClass("no-smooth");
|
||||
}
|
||||
}
|
||||
function selectLanguage() {
|
||||
editor.setOption("mode", $("#select_language").val().toLowerCase());
|
||||
}
|
||||
|
||||
function updateHash(){
|
||||
var newHash = '#' + $("#select-font").val();
|
||||
if(history.pushState) {
|
||||
history.pushState(null, null, newHash);
|
||||
}
|
||||
else {
|
||||
location.hash = newHash;
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
selectTheme();
|
||||
applyColors();
|
||||
setSize();
|
||||
setSpacing();
|
||||
|
||||
$(function() {
|
||||
console.log("loaded")
|
||||
});
|
||||
|
||||
var font_aliases = [];
|
||||
$.getJSON("fonts.json", function(data) {
|
||||
|
||||
$.each(data, function(k,v) {
|
||||
font_aliases.push(v.alias);
|
||||
$("#select-font").append("<option value=\"" + v.alias + "\">" + v.name + "</option>");
|
||||
|
||||
if (typeof v.year === "undefined") {
|
||||
yearString = "";
|
||||
} else {
|
||||
yearString = " (" + v.year + ")";
|
||||
}
|
||||
|
||||
$("#font-info").append(
|
||||
"<p class=\"" + v.alias + "\"> " + v.name +
|
||||
" - " + "<a href=\""+ v.website + "\" rel=\"external\">" + v.author + "</a>" + yearString +
|
||||
"</p>"
|
||||
);
|
||||
});
|
||||
|
||||
var hash = window.location.hash.substring(1);
|
||||
if(hash){
|
||||
$("#select-font").val(hash);
|
||||
}
|
||||
else {
|
||||
$("#select-font").val('input'); // default to this awesome font
|
||||
}
|
||||
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#next").click(function() {
|
||||
$("#select-font :selected").next().prop("selected", true);
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#previous").click(function() {
|
||||
$("#select-font :selected").prev().prop("selected", true);
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#theme-next").click(function() {
|
||||
$("#select :selected").next().prop("selected", true);
|
||||
selectTheme();
|
||||
});
|
||||
|
||||
$("#theme-previous").click(function() {
|
||||
$("#select :selected").prev().prop("selected", true);
|
||||
selectTheme();
|
||||
});
|
||||
});
|
||||
|
||||
// Google Analytics
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-86647457-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
// CodeMirror
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||||
lineNumbers: true,
|
||||
styleActiveLine: true,
|
||||
matchBrackets: true,
|
||||
theme: "pastel-on-dark",
|
||||
lineWrapping: true
|
||||
});
|
||||
|
||||
function applyColors() {
|
||||
$("body").css("color", $(".CodeMirror").css("color"));
|
||||
$("body").css("background", $(".CodeMirror").css("background-color"));
|
||||
}
|
||||
|
||||
// CodeMirror theme selector
|
||||
var input = document.getElementById("select");
|
||||
function selectTheme() {
|
||||
var theme = input.options[input.selectedIndex].innerHTML;
|
||||
editor.setOption("theme", theme);
|
||||
applyColors();
|
||||
}
|
||||
|
||||
var choice = document.location.search &&
|
||||
decodeURIComponent(document.location.search.slice(1));
|
||||
|
||||
if (choice) {
|
||||
input.value = choice;
|
||||
editor.setOption("theme", choice);
|
||||
}
|
||||
|
||||
// ProgrammingFonts font selector
|
||||
function selectFont() {
|
||||
var font = $("#select-font").val();
|
||||
|
||||
if (font === "input") {
|
||||
$("pre").css({ fontFamily: "Input Mono, monospace" });
|
||||
$("textarea").css({ fontFamily: "Input Mono, monospace" });
|
||||
$(".CodeMirror").css({ fontFamily: "Input Mono, monospace" });
|
||||
} else {
|
||||
$("pre").css({ fontFamily: font + ", monospace" });
|
||||
$("textarea").css({ fontFamily: font + ", monospace" });
|
||||
$(".CodeMirror").css({ fontFamily: font + ", monospace" });
|
||||
}
|
||||
|
||||
$("#font-info p").hide();
|
||||
$("." + font).show();
|
||||
updateHash();
|
||||
}
|
||||
|
||||
function setSize() {
|
||||
$(".CodeMirror").css({ fontSize: $("#size").val() + "px" });
|
||||
}
|
||||
function setSpacing() {
|
||||
$(".CodeMirror").css({ lineHeight: $("#spacing").val() });
|
||||
}
|
||||
function setAntialiasing() {
|
||||
if ($("#aliasing").is(":checked")) {
|
||||
$(".CodeMirror").removeClass("no-smooth");
|
||||
} else {
|
||||
$(".CodeMirror").addClass("no-smooth");
|
||||
}
|
||||
}
|
||||
function selectLanguage() {
|
||||
editor.setOption("mode", $("#select_language").val().toLowerCase());
|
||||
}
|
||||
|
||||
function updateHash(){
|
||||
var newHash = '#' + $("#select-font").val();
|
||||
if(history.pushState) {
|
||||
history.pushState(null, null, newHash);
|
||||
}
|
||||
else {
|
||||
location.hash = newHash;
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
selectTheme();
|
||||
applyColors();
|
||||
setSize();
|
||||
setSpacing();
|
||||
|
||||
$(function() {
|
||||
console.log("loaded")
|
||||
});
|
||||
|
||||
var font_aliases = [];
|
||||
$.getJSON("fonts.json", function(data) {
|
||||
|
||||
$.each(data, function(k,v) {
|
||||
font_aliases.push(v.alias);
|
||||
$("#select-font").append("<option value=\"" + v.alias + "\">" + v.name + "</option>");
|
||||
|
||||
if (typeof v.year === "undefined") {
|
||||
yearString = "";
|
||||
} else {
|
||||
yearString = " (" + v.year + ")";
|
||||
}
|
||||
|
||||
$("#font-info").append(
|
||||
"<p class=\"" + v.alias + "\"> " + v.name +
|
||||
" - " + "<a href=\""+ v.website + "\" rel=\"external\">" + v.author + "</a>" + yearString +
|
||||
"</p>"
|
||||
);
|
||||
});
|
||||
|
||||
var hash = window.location.hash.substring(1);
|
||||
if(hash){
|
||||
$("#select-font").val(hash);
|
||||
}
|
||||
else {
|
||||
$("#select-font").val('input'); // default to this awesome font
|
||||
}
|
||||
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#next").click(function() {
|
||||
$("#select-font :selected").next().prop("selected", true);
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#previous").click(function() {
|
||||
$("#select-font :selected").prev().prop("selected", true);
|
||||
selectFont();
|
||||
});
|
||||
|
||||
$("#theme-next").click(function() {
|
||||
$("#select :selected").next().prop("selected", true);
|
||||
selectTheme();
|
||||
});
|
||||
|
||||
$("#theme-previous").click(function() {
|
||||
$("#select :selected").prev().prop("selected", true);
|
||||
selectTheme();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue