Add a font selector to the main page demo REPL

3 files changed, 24 insertions, 7 deletions

diff --git a/docs/fonts.html b/docs/fonts.html
index 0abfae41..766b3aec 100644
--- a/docs/fonts.html
+++ b/docs/fonts.html
@@ -6,12 +6,6 @@
   <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
   <link href="style.css" rel="stylesheet"/>
   <style>
-    pre.DejaVu , .DejaVu  *:not(.run) { font-family:BQN,monospace; }
-    pre.BQN386 , .BQN386  *:not(.run) { font-family:BQN386,monospace; }
-    pre.Julia  , .Julia   *:not(.run) { font-family:JuliaMono,monospace; }
-    pre.Fairfax, .Fairfax *:not(.run) { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; }
-    .Fairfax .kb { line-height:1.25; }
-
     table { margin:0.4em auto; }
     div.right { text-align:right; }
     span.ul { text-decoration:underline; }
diff --git a/docs/repl.js b/docs/repl.js
index ecfed46e..3c744d23 100644
--- a/docs/repl.js
+++ b/docs/repl.js
@@ -107,6 +107,16 @@ doc.kb.onmousedown = ev => {
   }
 }
 
+if (doc.demo) {
+  let fonts=[["DejaVu","Mod"],["BQN386"],["Fairfax","HD"],["Julia","Mono"]];
+  let fontsel = '<select>'+fonts.map(f =>
+      '<option value="'+f[0]+'">'+f[0]+(f[1]?' '+f[1]:'')+'</option>'
+    ).join("")+'select';
+  doc.kb.innerHTML += fontsel;
+  doc.kb.querySelector('select').onchange =
+    e=>doc.cont.className='cont '+e.target.value;
+}
+
 if (doc.perm) doc.perm.onmouseover = doc.perm.onfocus = () => {
   let b=(new TextEncoder()).encode(doc.code.value);
   doc.perm.href='#code='+btoa(String.fromCharCode(...b));
diff --git a/docs/style.css b/docs/style.css
index 31c94304..84797ba9 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -52,6 +52,12 @@ table th {
   font-family: JuliaMono;
   src: url(JuliaMono_sub.woff2) format('woff2');
 }
+pre.DejaVu , .DejaVu  .kb span, .DejaVu  .code, .DejaVu  .rslt { font-family:BQN,monospace; }
+pre.BQN386 , .BQN386  .kb span, .BQN386  .code, .BQN386  .rslt { font-family:BQN386,monospace; }
+pre.Julia  , .Julia   .kb span, .Julia   .code, .Julia   .rslt { font-family:JuliaMono,monospace; }
+pre.Fairfax, .Fairfax .kb span, .Fairfax .code, .Fairfax .rslt { font-family:FFHD,monospace; font-size:1.1rem; line-height:1.01; }
+.Fairfax .kb span { line-height:1.25; }
+
 pre, code, textarea, .primitives tr td:first-child {
   background-color: #e3e7e7;
   color: #292929;
@@ -90,11 +96,18 @@ textarea { width: 100%; outline: none; resize: vertical; margin: 0; }
   line-height: 1.5;
   width: 100%;
   padding: 0.3em 0;
+  position: relative;
 }
 .kb span {
   cursor: default;
   padding: 1px;
 }
+.kb select {
+  position: absolute; bottom: 0.4em; right: 0.1em;
+  color: currentColor; opacity: 0.5;
+  font-size: 0.7em;
+  border: none;
+}
 .rel { position: relative; }
 .demo {
   position: absolute; top: 0.2em; right: 0.4em;
@@ -154,7 +167,7 @@ a:visited     { color: #3d155f; }
 .kb.backslash { background-color: #cee; }
 
 @media (prefers-color-scheme: dark) {
-  body, input { color: #d6d7d9; background-color: #141515; }
+  body, input, select { color: #d6d7d9; background-color: #141515; }
   input       { border-color: #0c0d0e; }
   textarea, pre, code, .primitives tr td:first-child { color: #969698; background-color: #0c0d0e; }
   textarea, pre, code, .kb { border-color: #040509; }