diff options
| author | Marshall Lochbaum <mwlochbaum@gmail.com> | 2020-08-20 17:24:06 -0400 |
|---|---|---|
| committer | Marshall Lochbaum <mwlochbaum@gmail.com> | 2020-08-20 17:25:35 -0400 |
| commit | 1cb804a87b394416cc1f8b6cc85e6bda163030bd (patch) | |
| tree | 84a8cc1a9aa07525765fa863d5826c1c65def36c /docs | |
| parent | 7a7cc09523a03d6ca4158bb8959c44a840dfbe9f (diff) | |
Use classes for try.html styling and move most of it to style.css
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/style.css | 37 | ||||
| -rw-r--r-- | docs/try.html | 33 |
2 files changed, 41 insertions, 29 deletions
diff --git a/docs/style.css b/docs/style.css index d86303d5..4321426b 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + body, input { color: #0a0a0a; } @@ -29,9 +33,11 @@ table th { border-bottom-color: #5a5f5d; } -pre, code, .bqn { +pre, code, textarea { background-color: #e3e7e7; color: #292929; +} +pre, code, textarea, .kb { border: 1px solid #bdcac4; letter-spacing: 0.2; } @@ -40,14 +46,25 @@ code { white-space: nowrap; border-width: 0.3px; } -pre, .bqn { +pre, textarea, .kb { font-family: monospace; font-size: 1.16em; line-height: 1.2; } -pre { - margin: 1.6em 0.4em; - padding: 0.8em; +pre { margin: 1.6em 0.4em; } +pre, textarea { padding: 0.8em; } +textarea { width:100%; outline:none; } +.cont { margin:1.3em 0; } +.rslt { background:none; border-top:none; margin:0; } +.rslt.err { color:#d11; } +.kb { + line-height:1.5; + width:100%; + padding:0.3em 0; +} +.kb span { + cursor:default; + padding:1px; } .Value { color: #1f2020; } @@ -68,13 +85,19 @@ pre { a:link { color: #0b39dc; text-decoration-color:#0b39dc91; } a:visited { color: #3d155f; } +.kb span:hover{ background-color:#bce; } +.kb.backslash { background-color:#cee; } + @media (prefers-color-scheme: dark) { body, input { color: #d6d7d9; background-color: #141515; } input { border-color: #0c0d0e; } - pre, code, .bqn { color: #969698; background-color: #0c0d0e; border-color: #040509; } - code { border-color: #0c0d0e; background-color: #0f1011; } + textarea, pre, code { color: #969698; background-color: #0c0d0e; } + textarea, pre, code, .kb { border-color: #040509; } + code { border-color: #0c0d0e; background-color: #0f1011; } table td, th{ border-color: #636967; } table th { border-color: #88918c; background-color: #292a2b; } + .kb span:hover { background-color:#237; } + .kb.backslash { background-color:#1e2430; } .Value { color: #b2b9bb; } .Function { color: #3aa548; } diff --git a/docs/try.html b/docs/try.html index a054e8c6..3d91e728 100644 --- a/docs/try.html +++ b/docs/try.html @@ -5,33 +5,22 @@ <title>BQN online REPL</title> <link href="style.css" rel="stylesheet"/> <style> - * { box-sizing: border-box; } li { margin:0.7em 0; } - #code { width:100%; outline:none; } - #run, #perm { float:right; } - #perm { font-size:0.7em; margin:-0.2em 1.6em 0 0; } - .cont { margin:1.3em 0; } - #rslt { border:none; background:none; min-height:8em; } - #rslt.err { color:#d11; } - #kb { line-height:1.5; width:100%; padding:0.3em 0; background:inherit; } - #kb span { cursor:default; padding:1px; } - #kb span:hover { background-color:#bce; } - #kb.backslash { background-color:#cee; } - @media (prefers-color-scheme:dark) { - #kb span:hover { background-color:#237; } - #kb.backslash { background-color:#1e2430; } - } + textarea { padding:0.2em; } + .perm { font-size:0.7em; margin:-0.2em 1.6em 0 0; } + .run, .perm { float:right; } + .rslt { border:none; background:none; min-height:8em; } </style> </head> <body> <a href="https://mlochbaum.github.io/BQN/" title='BQN homepage'>BQN</a> <div class="cont"> - <div id="kb" class="bqn"></div> - <textarea id="code" class="bqn" rows="8" autofocus></textarea> - <input id="run" type="submit" value="Run (or shift-enter)"> - <a id="perm" href="#" title="Link with the code above embedded">permalink</a> + <div class="kb"></div> + <textarea class="code" rows="8" autofocus></textarea> + <input class="run" type="submit" value="Run (or shift-enter)"> + <a class="perm" href="#" title="Link with the code above embedded">permalink</a> </div> - <pre id="rslt"></pre> + <pre class="rslt"></pre> <p> Notes: <ul> @@ -45,8 +34,8 @@ <script src="bqn.js"></script> <script> let body = document.body; -let doc={}; // html elements with an id -body.querySelectorAll('[id]').forEach(e=>doc[e.id]=e); +let doc={}; // html elements with a class +body.querySelectorAll('[class]').forEach(e=>doc[e.classList[0]]=e); let repl = ()=>{ try { let s=doc.code.value; |