Mirror
/
programmingfonts
mirror of https://github.com/braver/programmingfonts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

new list style

This commit is contained in:
Koen Lageveen 2017-07-28 23:07:09 +02:00
parent c2b9a13d9e
commit 1eb9f9580b
3 changed files with 98 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
index.css
View File

@ -5,7 +5,9 @@ html {
} }
body { body {
color: #fff; color: #fff;
color: var(--foreground);
background: #222; background: #222;
background: var(--background);
font-family: "Input Mono", sans-serif; font-family: "Input Mono", sans-serif;
font-size: 12px; font-size: 12px;
line-height: 1.6; line-height: 1.6;
@ -21,14 +23,26 @@ h1 {
padding: .25em 0 0 0; padding: .25em 0 0 0;
} }
p { p {
padding: 0 0 .5em 0; padding: 0;
}
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: inherit;
}
.octicon {
fill: currentcolor;
vertical-align: middle;
} }
article { article {
float: left; float: left;
margin: 1em; margin: 1em;
border-radius: 1ex; border-radius: 1ex;
border: 1px solid rgba(0,0,0,.2); border: 1px solid rgba(0,0,0,.2);
min-height: calc(100% - 3em); height: calc(100% - 3em);
width: 34em; width: 34em;
background: rgba(255,255,255,.05); background: rgba(255,255,255,.05);
display: flex; display: flex;
@ -36,7 +50,9 @@ article {
} }
section { section {
flex: 1; flex: 1;
padding: 0.5em 1em; flex-shrink: 0;
min-height: 1.6em;
padding: .5em 1em;
border-bottom: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05);
} }
section.config { section.config {
@ -51,6 +67,44 @@ section.config > * {
text-align: center; text-align: center;
padding: 0; padding: 0;
} }
section.select-list {
overflow: auto;
}
section.select-list .entry {
display: flex;
flex-direction: row;
}
section.select-list a[data-value] {
flex: 1;
display: block;
padding-bottom: .5em;
position: relative;
}
section.select-list a:hover .name,
section.select-list a:active .name {
text-decoration: underline;
}
section.select-list a[rel="external"] {
opacity: 0;
transition: all .2s ease-in-out;
}
section.select-list .entry:hover a[rel="external"] {
opacity: 1;
}
section.select-list .details {
opacity: .6;
font-style: italic;
display: block;
font-size: .8em;
text-indent: 2em;
}
section.select-list .style {
position: absolute;
right: .5em;
top: .5em;
font-size: .7em;
opacity: .6;
}
footer { footer {
flex: 0; flex: 0;
padding: 0.5em 1em 1em 1em; padding: 0.5em 1em 1em 1em;
@ -59,19 +113,25 @@ footer {
border-top: 1px solid rgba(255,255,255,.05); border-top: 1px solid rgba(255,255,255,.05);
opacity: .6; opacity: .6;
} }
footer a:hover,
footer a:active {
text-decoration: underline;
}
#font-info p { #font-info p {
display: none; display: none;
line-height: 1;
padding: 0 0 2em 0;
} }
a, #font-info a,
a:link, #font-info a:link,
a:visited { #font-info a:visited {
color: inherit; position: relative;
background: var(--foreground);
color: var(--background);
display: inline-block;
padding: 0 1em;
border-radius: 3px;
} }
a:hover, #font-info a:active {
a:active { top: 1px;
opacity: 1;
} }
label { label {
margin-right: .5ex; margin-right: .5ex;
@ -126,7 +186,6 @@ form {
label + .nav-button { label + .nav-button {
margin-left: .5ex; margin-left: .5ex;
} }
label[for="select-font"],
label[for="select-language"], label[for="select-language"],
label[for="select-theme"] { label[for="select-theme"] {
display: none; display: none;

41
index.html
View File

@ -28,7 +28,6 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-day.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-day.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-night.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/3024-night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/abcdef.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/abcdef.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/ambiance-mobile.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/ambiance.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/ambiance.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/base16-light.css">
@ -39,11 +38,8 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/dracula.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/dracula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/duotone-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/eclipse.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/elegant.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/erlang-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/erlang-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/hopscotch.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/hopscotch.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/icecoder.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/isotope.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/isotope.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/lesser-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/lesser-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/liquibyte.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/liquibyte.css">
@ -52,27 +48,21 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/mdn-like.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/mdn-like.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/midnight.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/midnight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/monokai.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/monokai.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/neat.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/neo.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/neo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/night.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/panda-syntax.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-light.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/paraiso-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/pastel-on-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/pastel-on-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/railscasts.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/railscasts.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/rubyblue.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/rubyblue.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/seti.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/seti.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/solarized.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/the-matrix.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/the-matrix.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-bright.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-eighties.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/ttcn.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/twilight.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/twilight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/vibrant-ink.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/vibrant-ink.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/xq-dark.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/xq-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/xq-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/yeti.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/yeti.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/theme/zenburn.css">
<!-- CodeMirror JS --> <!-- CodeMirror JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js"></script>
@ -100,23 +90,18 @@
<body> <body>
<article> <article>
<section> <section class="select-list">
<div id="select-font">
<p class="select" id="fontselect"> <!-- filled from json -->
<label for="select-font">Font</label> </div>
<select onchange="selectFont()" id="select-font"> </section>
<!-- filled from json --> <section class="config">
</select> <div id="font-info"></div>
<button class="nav-button" id="previous">↑</button>
<button class="nav-button" id="next">↓</button>
</p>
<dix id="font-info"></dix>
</section> </section>
<section class="config"> <section class="config">
<p> <p>
<label for="size">Size</label> <label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="14" min="1" max="32" step="1"> <input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
</p> </p>
<p> <p>
<label for="spacing">Spacing</label> <label for="spacing">Spacing</label>
@ -137,7 +122,6 @@
<option>3024-day</option> <option>3024-day</option>
<option>3024-night</option> <option>3024-night</option>
<option>abcdef</option> <option>abcdef</option>
<option>ambiance-mobile</option>
<option>ambiance</option> <option>ambiance</option>
<option>base16-dark</option> <option>base16-dark</option>
<option>base16-light</option> <option>base16-light</option>
@ -148,11 +132,8 @@
<option>dracula</option> <option>dracula</option>
<option selected>duotone-dark</option> <option selected>duotone-dark</option>
<option>duotone-light</option> <option>duotone-light</option>
<option>eclipse</option>
<option>elegant</option>
<option>erlang-dark</option> <option>erlang-dark</option>
<option>hopscotch</option> <option>hopscotch</option>
<option>icecoder</option>
<option>isotope</option> <option>isotope</option>
<option>lesser-dark</option> <option>lesser-dark</option>
<option>liquibyte</option> <option>liquibyte</option>
@ -161,27 +142,21 @@
<option>mdn-like</option> <option>mdn-like</option>
<option>midnight</option> <option>midnight</option>
<option>monokai</option> <option>monokai</option>
<option>neat</option>
<option>neo</option> <option>neo</option>
<option>night</option> <option>night</option>
<option>panda-syntax</option>
<option>paraiso-dark</option> <option>paraiso-dark</option>
<option>paraiso-light</option> <option>paraiso-light</option>
<option>pastel-on-dark</option> <option>pastel-on-dark</option>
<option>railscasts</option> <option>railscasts</option>
<option>rubyblue</option> <option>rubyblue</option>
<option>seti</option> <option>seti</option>
<option>solarized</option>
<option>the-matrix</option> <option>the-matrix</option>
<option>tomorrow-night-bright</option> <option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option> <option>tomorrow-night-eighties</option>
<option>ttcn</option>
<option>twilight</option> <option>twilight</option>
<option>vibrant-ink</option> <option>vibrant-ink</option>
<option>xq-dark</option> <option>xq-dark</option>
<option>xq-light</option>
<option>yeti</option> <option>yeti</option>
<option>zenburn</option>
</select> </select>
</p> </p>
<p class="select"> <p class="select">

64
index.js
View File

@ -1,3 +1,5 @@
var fonts=[];
// CodeMirror // CodeMirror
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
@ -8,8 +10,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
}); });
function applyColors() { function applyColors() {
$("body").css("color", $(".CodeMirror .cm-def").css("color")); $("body").attr("style" ,"--foreground:" + $(".CodeMirror .cm-def").css("color") + "; --background:" + $(".CodeMirror").css("background-color") + ";");
$("body").css("background", $(".CodeMirror").css("background-color"));
} }
// CodeMirror theme selector // CodeMirror theme selector
@ -23,7 +24,7 @@ function selectTheme() {
// ProgrammingFonts font selector // ProgrammingFonts font selector
function selectFont() { function selectFont() {
var font = $("#select-font").val(); var font = window.location.hash.substring(1);
if (font === "input") { if (font === "input") {
$("pre").css({ fontFamily: "Input Mono, monospace" }); $("pre").css({ fontFamily: "Input Mono, monospace" });
@ -36,11 +37,13 @@ function selectFont() {
} }
$("#font-info p").hide(); $("#font-info p").hide();
$("." + font).show(); $("#font-info ." + font).show();
document.cookie = "font=" + font; document.cookie = "font=" + font;
updateHash();
} }
window.onhashchange = selectFont;
function setSize() { function setSize() {
var size = $("#size").val(); var size = $("#size").val();
$(".CodeMirror").css({ fontSize: size + "px" }); $(".CodeMirror").css({ fontSize: size + "px" });
@ -66,16 +69,6 @@ function selectLanguage() {
document.cookie = "language=" + lang; document.cookie = "language=" + lang;
} }
function updateHash(){
var newHash = '#' + $("#select-font").val();
if(history.pushState) {
history.pushState(null, null, newHash);
}
else {
location.hash = newHash;
}
}
$(document).ready(function(){ $(document).ready(function(){
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*\=\s*([^;]*).*$)|^.*$/, "$1"); var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*\=\s*([^;]*).*$)|^.*$/, "$1");
@ -109,44 +102,23 @@ $(document).ready(function(){
setAntialiasing(); setAntialiasing();
selectLanguage(); selectLanguage();
var font_aliases = []; var icon = '<svg class="octicon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 10h1v3c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3v1H1v10h10v-3zM6 2l2.25 2.25L5 7.5 6.5 9l3.25-3.25L12 8V2H6z"></path></svg>'
$.getJSON("fonts.json", function(data) { $.getJSON("fonts.json", function(data) {
$.each(data, function(k,v) { $.each(data, function(k,v) {
font_aliases.push(v.alias); $("#select-font").append(
$("#select-font").append("<option value=\"" + v.alias + "\">" + v.name + "</option>"); "<div class='entry'><a href='#" + v.alias + "' data-value=\"" + v.alias + "\">" +
"<span class='name'>" + v.name + "</span>" +
if (typeof v.year === "undefined") { "<span class='details'>" + v.author + " — (" + v.year + ")</span>" +
yearString = ""; "<span class='style'>" + v.style + ", " + v.rendering + "</span>" + "</a>" +
} else { "<a href='" + v.website + "' rel=external> " + icon + "</a></div>"
yearString = " (" + v.year + ")"; );
}
$("#font-info").append( $("#font-info").append(
"<p class=\"" + v.alias + "\"> " + "<p class=\"" + v.alias + "\"> " +
"<a href=\""+ v.website + "\" rel=\"external\">" + v.author + "</a>" + yearString + "<a href=\""+ v.website + "\" rel=\"external\">Get " + v.name + " " + icon + "</a>" +
"</p>" "</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(); selectFont();
}); });