From 1eb9f9580b5af9ccf69ae4904791d7621eca2971 Mon Sep 17 00:00:00 2001 From: Koen Lageveen Date: Fri, 28 Jul 2017 23:07:09 +0200 Subject: [PATCH] new list style --- index.css | 85 +++++++++++++++++++++++++++++++++++++++++++++--------- index.html | 41 +++++--------------------- index.js | 64 ++++++++++++---------------------------- 3 files changed, 98 insertions(+), 92 deletions(-) diff --git a/index.css b/index.css index 6b68fbd..487b3f3 100644 --- a/index.css +++ b/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; diff --git a/index.html b/index.html index e6eee44..1f3cebc 100755 --- a/index.html +++ b/index.html @@ -28,7 +28,6 @@ - @@ -39,11 +38,8 @@ - - - @@ -52,27 +48,21 @@ - - - - - - @@ -100,23 +90,18 @@
-
- -

- - - - -

- +
+
+ +
+
+
+
-

- +

@@ -137,7 +122,6 @@ - @@ -148,11 +132,8 @@ - - - @@ -161,27 +142,21 @@ - - - - - -

diff --git a/index.js b/index.js index a499487..b569dbf 100644 --- a/index.js +++ b/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 = '' + $.getJSON("fonts.json", function(data) { - $.each(data, function(k,v) { - font_aliases.push(v.alias); - $("#select-font").append(""); - - if (typeof v.year === "undefined") { - yearString = ""; - } else { - yearString = " (" + v.year + ")"; - } - + $("#select-font").append( + "

" + + "" + v.name + "" + + "" + v.author + " — (" + v.year + ")" + + "" + v.style + ", " + v.rendering + "" + "" + + " " + icon + "
" + ); $("#font-info").append( "

" + - "" + v.author + "" + yearString + + "Get " + v.name + " " + icon + "" + "

" ); }); - - 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(); });