Mirror/programmingfonts
1
0
Fork 0
mirror of https://github.com/braver/programmingfonts.git synced 2024-09-28 22:31:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve layout and add size control

Browse Source
This commit is contained in:
Koen Lageveen 2016-04-18 18:00:21 +02:00
parent baee44a325
commit eb8a175e9c
1 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@ -100,17 +100,17 @@
} }
h1 + p { h1 + p {
line-height: 1; line-height: 1;
padding: 1em 0; padding: 0 0 1em 0;
} }
article { article {
position: fixed; position: fixed;
background: transparent; background: transparent;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin-bottom: 2em; left: 0;
margin-right: 2em; padding-bottom: 2em;
padding-right: 2em;
text-align: right; text-align: right;
max-width: 50%;
} }
footer { footer {
font-size: .8em; font-size: .8em;
@ -133,8 +133,26 @@
opacity: 1; opacity: 1;
} }
select { select {
width: 12em; width: 9em;
margin-left: .5ex; margin-left: .5ex;
margin-right: 1ex;
}
#size {
width: 4em;
margin-left: .5ex;
margin-right: 1ex;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: inherit;
text-align: right;
opacity: .7;
transition: opacity .2s;
}
#size:hover,
#size:focus {
opacity: 1;
} }
pre, pre,
textarea, textarea,
@ -156,7 +174,7 @@
.CodeMirror-gutters { .CodeMirror-gutters {
background: transparent; background: transparent;
} }
@media (max-width: 400px) { @media (max-width: 560px) {
body { line-height: 1.5; } body { line-height: 1.5; }
article { margin-bottom: 1.5em; max-width: none; } article { margin-bottom: 1.5em; max-width: none; }
label { display: block; } label { display: block; }
@ -185,9 +203,9 @@ function updateGutters(cm) {
} }
gutters.style.display = i ? "" : "none"; gutters.style.display = i ? "" : "none";
updateGutterSpace(cm); updateGutterSpace(cm);
}
return "o0Og9ilL1!"; return "o0Og9ilL1!";
}
</textarea> </textarea>
</form> </form>
@ -196,12 +214,18 @@ return "o0Og9ilL1!";
<h1>Programming Fonts</h1> <h1>Programming Fonts</h1>
<p class="description">What font looks best?<br> <p class="description">Test drive over 50 free programming fonts and find out which looks best!</p>
Test drive over 50 free programming fonts and find out!</p>
<p> <p>
<span class="select"><label for="select">Select a theme</label> <span class="select" id="fontselect">
<select onchange="selectTheme()" id="select"> <label for="select-font">Font</label>
<select onchange="selectFont()" id="select-font">
<!-- filled from json -->
</select>
</span>
<span class="select">
<label for="select">Theme</label>
<select onchange="selectTheme()" id="select">
<option>3024-day</option> <option>3024-day</option>
<option>3024-night</option> <option>3024-night</option>
<option>ambiance</option> <option>ambiance</option>
@ -232,22 +256,19 @@ return "o0Og9ilL1!";
<option>vibrant-ink</option> <option>vibrant-ink</option>
<option>xq-dark</option> <option>xq-dark</option>
<option>xq-light</option> <option>xq-light</option>
</select>
</span>
</p>
<p>
<span class="select" id="fontselect"><label for="select-font">Select a font</label>
<select onchange="selectFont()" id="select-font">
<!-- filled from json -->
</select> </select>
</span> </span>
<span>
<label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="16">
</span>
</p> </p>
<dix id="font-info"></dix> <dix id="font-info"></dix>
<footer> <footer>
<a href="http://programmingfonts.org">Blog</a> -
<a href="http://programmingfonts.org/list" rel="external">The full list</a> - <a href="http://programmingfonts.org/list" rel="external">The full list</a> -
<a href="http://programmingfonts.org">The blog</a> -
<a href="http://atom.io/packages/fonts" rel="external">Atom package</a> - <a href="http://atom.io/packages/fonts" rel="external">Atom package</a> -
<a href="https://github.com/braver/programmingfonts">Fork this on Github</a> - <a href="https://github.com/braver/programmingfonts">Fork this on Github</a> -
By <a href="http://koenlageveen.nl">Koen Lageveen</a> By <a href="http://koenlageveen.nl">Koen Lageveen</a>
@ -272,7 +293,7 @@ return "o0Og9ilL1!";
function applyColors() { function applyColors() {
$("body").css('color', $(".CodeMirror").css('color')); $("body").css('color', $(".CodeMirror").css('color'));
$("article").css("text-shadow", "0 0 4px " + $(".CodeMirror").css('background-color')); $("article").css("background", $(".CodeMirror").css('background-color'));
} }
// CodeMirror theme selector // CodeMirror theme selector
@ -309,6 +330,11 @@ return "o0Og9ilL1!";
$("." + font).show(); $("." + font).show();
} }
function setSize() {
console.log($("#size").val());
$(".CodeMirror").css({ fontSize: $("#size").val() + "px" });
}
$(document).ready(function(){ $(document).ready(function(){
//randomly select a theme //randomly select a theme
@ -326,9 +352,8 @@ return "o0Og9ilL1!";
$("#select-font").append("<option value=\"" + v.alias + "\">" + v.name + "</option>"); $("#select-font").append("<option value=\"" + v.alias + "\">" + v.name + "</option>");
$("#font-info").append( $("#font-info").append(
"<p class=\"" + v.alias + "\"> " + v.name + "<p class=\"" + v.alias + "\"> " + v.name +
" - " + v.author + " - " + "<a href=\""+ v.website + "\" rel=\"external\">" + v.author + "</a>" +
" (" + v.year + ")" + " (" + v.year + ")" +
"<br><a href=\""+ v.website + "\" rel=\"external\">" + v.website + "</a>" +
"</p>" "</p>"
); );
}); });