Basic sstyling.

resources/public/css/style.css

@@ -1,7 +1,51 @@
+body {
+  font-family: Arial;
+  width: 100%;
+  max-width: 1024px;
+  margin: auto;
+  background-color: #FBFAF8;
+  color: #302F2B;
+  font-size: 18px;
+}
+
+h1 > img {
+  height: 1em;
+  margin-right: 0.25em;
+}
+
+a {
+  color: #2176BC;
+}
+
+button:not(#app button) {
+  display: inline-block;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: #4299e1;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 16px;
+  border-bottom: 4px solid #2b6cb0;
+  font-weight: 700;
+  color: white;
+  line-height: 26px;
+}
+
+input, textarea {
+  border: 2px solid #888;
+  padding: 0.25em 0.5em;
+  border-radius: 4px;
+  font-size: 1em;
+}
+
+code {
+  border-radius: 4px;
+}
+
 div#app
 {
   color:#666;
-  font-family: Arial;
 }
 
 div#app td

resources/public/index.html

@@ -66,10 +66,12 @@
            (.highlightElement js/hljs code))))
         (.send req)))
 
+    (.highlightAll js/hljs)
     </script>
 
     <script src="cljs/script.cljs" type="application/x-scittle"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/clojure.min.js" type="text/javascript"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/zenburn.min.css" integrity="sha512-JPxjD2t82edI35nXydY/erE9jVPpqxEJ++6nYEoZEpX2TRsmp2FpZuQqZa+wBCen5U16QZOkMadGXHCfp+tUdg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
   </head>
@@ -77,7 +79,7 @@
     <div style="float: right;">
       <a href="https://gitHub.com/babashka/scittle"><img src="https://img.shields.io/github/stars/babashka/scittle.svg?style=social&label=Star"></a></div>
 
-    <h1>Scittle</h1>
+    <h1><img src='scittle.svg'>Scittle</h1>
     <h2>What is this?</h2>
     <p>This project exposes the <a href="https://github.com/babashka/sci">Small Clojure Interpreter</a> in the
       browser in such a way that you can use it with the <tt>script</tt> tag.</p>
@@ -136,7 +138,6 @@
     in addition to <tt>scittle.js</tt>, you need to include <tt>scittle.cljs-ajax.js</tt>:
 
     <pre><code data-type="scittle" data-src="html/cljs-ajax.html" class="html"></code></pre>
-
     <button onclick="make_request()">
       Click me!
     </button>
@@ -151,7 +152,7 @@
     <h2><a href="#reader-conditional">Target :scittle in cljc</a></h2>
     You can target scittle in .cljc files (use a script tag to include the cljc file) with the <code>:scittle</code> reader conditional like this:<br>
 
-    <pre><code class="clojure">
+    <pre><code class="language-clojure hljs">
 #?(:scittle
    (js/console.log "In scittle")
    :org.babashka/nbb
@@ -164,7 +165,7 @@
     <h2><a href="#js-libraries">JS libraries</a></h2>
 
     To use JavaScript libraries with Scittle,
-    see <a href="https://github.com/babashka/scittle/blob/main/doc/js-libraries.md">README.md</a>
+    see <a href="https://github.com/babashka/scittle/blob/main/doc/js-libraries.md">js-libraries.md</a>
 
     <a name="repl"></a>
     <h2><a href="#nrepl">REPL</a></h2>

resources/public/scittle.svg

@@ -0,0 +1 @@
+../../doc/scittle.svg