new list style
This commit is contained in:
Koen Lageveen
parent
c2b9a13d9e
commit
1eb9f9580b
85
index.css
85
index.css
|
|
@ -5,7 +5,9 @@ html {
|
|||
}
|
||||
body {
|
||||
color: #fff;
|
||||
color: var(--foreground);
|
||||
background: #222;
|
||||
background: var(--background);
|
||||
font-family: "Input Mono", sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
|
|
@ -21,14 +23,26 @@ h1 {
|
|||
padding: .25em 0 0 0;
|
||||
}
|
||||
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 {
|
||||
float: left;
|
||||
margin: 1em;
|
||||
border-radius: 1ex;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
min-height: calc(100% - 3em);
|
||||
height: calc(100% - 3em);
|
||||
width: 34em;
|
||||
background: rgba(255,255,255,.05);
|
||||
display: flex;
|
||||
|
|
@ -36,7 +50,9 @@ article {
|
|||
}
|
||||
section {
|
||||
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);
|
||||
}
|
||||
section.config {
|
||||
|
|
@ -51,6 +67,44 @@ section.config > * {
|
|||
text-align: center;
|
||||
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 {
|
||||
flex: 0;
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
|
|
@ -59,19 +113,25 @@ footer {
|
|||
border-top: 1px solid rgba(255,255,255,.05);
|
||||
opacity: .6;
|
||||
}
|
||||
footer a:hover,
|
||||
footer a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#font-info p {
|
||||
display: none;
|
||||
line-height: 1;
|
||||
padding: 0 0 2em 0;
|
||||
}
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
#font-info a,
|
||||
#font-info a:link,
|
||||
#font-info a:visited {
|
||||
position: relative;
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
opacity: 1;
|
||||
#font-info a:active {
|
||||
top: 1px;
|
||||
}
|
||||
label {
|
||||
margin-right: .5ex;
|
||||
|
|
@ -126,7 +186,6 @@ form {
|
|||
label + .nav-button {
|
||||
margin-left: .5ex;
|
||||
}
|
||||
label[for="select-font"],
|
||||
label[for="select-language"],
|
||||
label[for="select-theme"] {
|
||||
display: none;
|
||||
|
|
|
|||
41
index.html
41
index.html
|
|
@ -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-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/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/base16-dark.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/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/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/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/lesser-dark.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/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/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/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-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/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/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/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/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/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-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/zenburn.css">
|
||||
|
||||
<!-- CodeMirror JS -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.28.0/codemirror.min.js"></script>
|
||||
|
|
@ -100,23 +90,18 @@
|
|||
<body>
|
||||
|
||||
<article>
|
||||
<section>
|
||||
|
||||
<p class="select" id="fontselect">
|
||||
<label for="select-font">Font</label>
|
||||
<select onchange="selectFont()" id="select-font">
|
||||
<!-- filled from json -->
|
||||
</select>
|
||||
<button class="nav-button" id="previous">↑</button>
|
||||
<button class="nav-button" id="next">↓</button>
|
||||
</p>
|
||||
<dix id="font-info"></dix>
|
||||
<section class="select-list">
|
||||
<div id="select-font">
|
||||
<!-- filled from json -->
|
||||
</div>
|
||||
</section>
|
||||
<section class="config">
|
||||
<div id="font-info"></div>
|
||||
</section>
|
||||
|
||||
<section class="config">
|
||||
<p>
|
||||
<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>
|
||||
<label for="spacing">Spacing</label>
|
||||
|
|
@ -137,7 +122,6 @@
|
|||
<option>3024-day</option>
|
||||
<option>3024-night</option>
|
||||
<option>abcdef</option>
|
||||
<option>ambiance-mobile</option>
|
||||
<option>ambiance</option>
|
||||
<option>base16-dark</option>
|
||||
<option>base16-light</option>
|
||||
|
|
@ -148,11 +132,8 @@
|
|||
<option>dracula</option>
|
||||
<option selected>duotone-dark</option>
|
||||
<option>duotone-light</option>
|
||||
<option>eclipse</option>
|
||||
<option>elegant</option>
|
||||
<option>erlang-dark</option>
|
||||
<option>hopscotch</option>
|
||||
<option>icecoder</option>
|
||||
<option>isotope</option>
|
||||
<option>lesser-dark</option>
|
||||
<option>liquibyte</option>
|
||||
|
|
@ -161,27 +142,21 @@
|
|||
<option>mdn-like</option>
|
||||
<option>midnight</option>
|
||||
<option>monokai</option>
|
||||
<option>neat</option>
|
||||
<option>neo</option>
|
||||
<option>night</option>
|
||||
<option>panda-syntax</option>
|
||||
<option>paraiso-dark</option>
|
||||
<option>paraiso-light</option>
|
||||
<option>pastel-on-dark</option>
|
||||
<option>railscasts</option>
|
||||
<option>rubyblue</option>
|
||||
<option>seti</option>
|
||||
<option>solarized</option>
|
||||
<option>the-matrix</option>
|
||||
<option>tomorrow-night-bright</option>
|
||||
<option>tomorrow-night-eighties</option>
|
||||
<option>ttcn</option>
|
||||
<option>twilight</option>
|
||||
<option>vibrant-ink</option>
|
||||
<option>xq-dark</option>
|
||||
<option>xq-light</option>
|
||||
<option>yeti</option>
|
||||
<option>zenburn</option>
|
||||
</select>
|
||||
</p>
|
||||
<p class="select">
|
||||
|
|
|
|||
64
index.js
64
index.js
|
|
@ -1,3 +1,5 @@
|
|||
var fonts=[];
|
||||
|
||||
// CodeMirror
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||||
lineNumbers: true,
|
||||
|
|
@ -8,8 +10,7 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|||
});
|
||||
|
||||
function applyColors() {
|
||||
$("body").css("color", $(".CodeMirror .cm-def").css("color"));
|
||||
$("body").css("background", $(".CodeMirror").css("background-color"));
|
||||
$("body").attr("style" ,"--foreground:" + $(".CodeMirror .cm-def").css("color") + "; --background:" + $(".CodeMirror").css("background-color") + ";");
|
||||
}
|
||||
|
||||
// CodeMirror theme selector
|
||||
|
|
@ -23,7 +24,7 @@ function selectTheme() {
|
|||
|
||||
// ProgrammingFonts font selector
|
||||
function selectFont() {
|
||||
var font = $("#select-font").val();
|
||||
var font = window.location.hash.substring(1);
|
||||
|
||||
if (font === "input") {
|
||||
$("pre").css({ fontFamily: "Input Mono, monospace" });
|
||||
|
|
@ -36,11 +37,13 @@ function selectFont() {
|
|||
}
|
||||
|
||||
$("#font-info p").hide();
|
||||
$("." + font).show();
|
||||
$("#font-info ." + font).show();
|
||||
|
||||
document.cookie = "font=" + font;
|
||||
updateHash();
|
||||
}
|
||||
|
||||
window.onhashchange = selectFont;
|
||||
|
||||
function setSize() {
|
||||
var size = $("#size").val();
|
||||
$(".CodeMirror").css({ fontSize: size + "px" });
|
||||
|
|
@ -66,16 +69,6 @@ function selectLanguage() {
|
|||
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(){
|
||||
|
||||
var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||||
|
|
@ -109,44 +102,23 @@ $(document).ready(function(){
|
|||
setAntialiasing();
|
||||
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) {
|
||||
|
||||
$.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 + ")";
|
||||
}
|
||||
|
||||
$("#select-font").append(
|
||||
"<div class='entry'><a href='#" + v.alias + "' data-value=\"" + v.alias + "\">" +
|
||||
"<span class='name'>" + v.name + "</span>" +
|
||||
"<span class='details'>" + v.author + " — (" + v.year + ")</span>" +
|
||||
"<span class='style'>" + v.style + ", " + v.rendering + "</span>" + "</a>" +
|
||||
"<a href='" + v.website + "' rel=external> " + icon + "</a></div>"
|
||||
);
|
||||
$("#font-info").append(
|
||||
"<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>"
|
||||
);
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue