CLJS-2584: Tweak whitespace / negative space / font sizes of default index.html

mfikes · dnolen · commit 4d9f6df5c1de · 2018-02-28T13:10:04.000-05:00
diff --git a/src/main/clojure/cljs/repl/browser.clj b/src/main/clojure/cljs/repl/browser.clj
@@ -99,18 +99,21 @@
     "<!DOCTYPE html><html>"
     "<head>"
     "<meta charset=\"UTF-8\">"
+    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" >"
     "<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"cljs-logo-icon-32.png\"/>"
     "</head>"
     "<body>"
     "<div id=\"app\">"
     "<link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\">"
     "<style>"
-    "body { color: white; font-family: \"Open Sans\", sans-serif; background-image: linear-gradient(to right, #0f2242, #2351a1); }"
-    "code, pre { color: #5cc70c; }"
+    "body { padding: 28px; margin: auto; max-width: 42em; "
+    "color: white; font-family: \"Open Sans\", sans-serif; background-image: linear-gradient(to right, #0f2242, #2351a1); }"
+    "code, pre { color: #5cc70c; font-size: 17px; white-space: pre-wrap; }"
     "</style>"
+    "<center><img src=\"cljs-logo.svg\" style=\"width: 200px; height: 200px; margin: 15px;\"/></center>"
     "<p>Welcome to the default <code>index.html</code> provided by the ClojureScript Browser REPL.</p>"
     "<p>This page provides the evaluation environment for your Browser REPL and application.</p>"
-    "<p>You can quickly validate the connection by typing <code>(js/alert&nbsp;\"Hello CLJS!\")</code> into the "
+    "<p>You can quickly validate the connection by typing <code>(js/alert&nbsp;\"Hello&nbsp;CLJS!\")</code> into the "
     "ClojureScript REPL that launched this page.</p><p>You can easily use your own HTML file to host your application "
     "and REPL by providing your own <code>index.html</code> in the directory that you launched this REPL from.</p>"
     "<p>Start with this template:</p>"
@@ -125,7 +128,6 @@
     "  &lt;/body&gt;\n"
     "&lt;/html&gt;\n"
     "</pre>"
-    "<center><img src=\"cljs-logo.svg\" style=\"width: 350px; height: 350px;\"/></center>"
     "</div></div>"
     "<script src=\"" output-to "\"></script>"
     "</body></html>"))
