Permalink
Browse files

Various design changes and cleanup

* added a new header based on colors from colors and style of the clojure logo
* cleaned up the css to make it easier to edit
* removed the table for displaying the button links
* changed some colors, removed the background images.

It still lacks flair, but we'll get there!
  • Loading branch information...
apg committed Nov 5, 2010
1 parent 8eb8733 commit b9f2461e357d0fc2c37bd5ed7e07910501e63392
Showing with 168 additions and 80 deletions.
  1. BIN resources/public/clojure-logo.png
  2. +138 −51 resources/public/css/tryclojure.css
  3. +30 −29 src/tryclojure/core.clj
Binary file not shown.
@@ -1,54 +1,141 @@
body { background-color: white; }
div#container { width: 600px; height: 100%;
margin: 50px auto 50px auto; background-color: white;}
h1 { font-size: 32pt; color: black; border-bottom: 1px solid #333; font-family: arial;}
.bottom { background-color: white; color: #333; }
.bottom a,a:visited { color: #111; }
table.bottom { width: 100%; border: 1px solid black;}
div#changer { width: 100%; height: 100%; }
div.buttons { background: transparent url('/resources/public/buttontdbg.png') no-repeat top left;
padding-left: 0.2em; padding-right: 0.2em; text-align: center; }
.buttons a.buttons { border-right: 1px solid #5F665F; color: black; padding-right: 0.3em;
font-family: verdana; font-size: 10pt; font-weight: bold; padding-left: 0.3em;}
a.lbutton { color: black; font-family: verdana; font-size: 10pt; font-weight: bold;
padding-left: 0.3em; padding-right: 0.3em; }
td.bholder { border: 1px solid black; }
div#tuttext { overflow-y: auto; max-height: 300px; }
a.buttons:hover,a.lbutton:hover { color: white; cursor: pointer; }
div.continue { width: 100%; text-align: center; padding-top: 0.5em; }
p.bottom
{
padding: 0;
font-family: verdana;
font-size: 10pt;
}
p
{
color:gray;
font-family:\"Times New Roman\";
font-size:14px;
}
div.bottom { width: 600px; }
div.footer { width: 100%; border-top: 1px solid black; text-align: center; }
div.console div.jquery-console-inner
{ width:595px; height:300px; background:#efefef; padding-left: 3px; padding-top: 3px;
overflow:auto; text-align:left; border: 1px solid black;
background: transparent url('/resources/public/wtf.png') no-repeat top left; }
div.console div.jquery-console-message-value
{ color:#0066FF; font-family:monospace;
padding:0.1em; }
div.console div.jquery-console-prompt-box
{ color:#444; font-family:monospace; }
div.console div.jquery-console-focus span.jquery-console-cursor
{ background:#333; color:#eee; font-weight:bold }
div.console div.jquery-console-message-error
{ color:#ef0505; font-family:sans-serif; font-weight:bold;
padding:0.1em; }
div.console div.jquery-console-message-success
{ color:#187718; font-family:monospace;
padding:0.1em; }
div.console span.jquery-console-prompt-label { font-weight:bold }
body {
background: #fff;
text-align: center;
}
#wrapper {
text-align: left;
width: 600px;
margin: 0 auto;
}
#header {
background: #fff;
margin-top: 24px;
}
#header h1 {
height: 72px;
width: 72px;
line-height: 72px;
background: url(/resources/public/clojure-logo.png) no-repeat;
margin: 0;
padding: 0;
padding-left: 75px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 48px;
}
#header h1 span.logo-try {
color: #63b132;
}
#header h1 span.logo-clojure {
color: #5881d8;
}
#console {
margin-top: 24px;
}
#console div.jquery-console-inner {
width:595px;
height:300px;
background:#efefef;
padding-left: 3px;
padding-top: 3px;
overflow:auto;
text-align:left;
border: 1px solid black;
background: transparent;
}
#console div.jquery-console-message-value {
color:#0066FF;
font-family:monospace;
padding:0.1em;
}
#console div.jquery-console-prompt-box {
color:#444; font-family:monospace;
}
#console div.jquery-console-focus span.jquery-console-cursor {
background:#333; color:#eee; font-weight:bold
}
#console div.jquery-console-message-error {
color:#ef0505; font-family:sans-serif; font-weight:bold;
padding:0.1em;
}
#console div.jquery-console-message-success {
color:#187718; font-family:monospace;
padding:0.1em;
}
#console span.jquery-console-prompt-label {
font-weight:bold
}
.bottom {
background-color: white; color: #333;
}
.bottom a,a:visited {
color: #111;
}
table.bottom {
width: 100%; border: 1px solid black;
}
div#changer {
width: 100%;
height: 100%;
}
#buttons {
background: transparent;
text-align: center;
margin-top: 10px;
}
#buttons a {
/* color: #4881d8;*/
color: #3D5B99;
padding: .3em 1em;
margin-right: .7em;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
background: #90b4fe;
}
#buttons a.last {
margin-right: 0;
}
#buttons a:hover {
color: #5881d8;
cursor: pointer;
}
#changer {
margin-top: 10px;
padding: 10px;
background: #EDF1FA;
}
#changer p {
background: transparent;
line-height: 1.3em;
font-family: Arial, serif;
font-size: 16px;
color: #555;
}
div#tuttext {
}
div.continue {
width: 100%;
text-align: center;
padding-top: 0.5em;
}
div.footer {
text-align: center;
}
/* Coderay alpha style */
View
@@ -31,7 +31,7 @@
'swap! 'compare-and-set!))))
(defn has-state? [form]
(not (state-tester form nil)))
(not (state-tester form nil)))
(defn execute-text [txt history]
(let [sc (sb/new-sandbox-compiler :tester sandbox-tester
@@ -110,35 +110,36 @@
"/resources/public/javascript/tryclojure.js")
[:title "TryClojure"]]
[:body
[:script {:type "text/javascript"}
"
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-552543-3']);
_gaq.push(['_trackPageview']);
[:div#wrapper
[:div#content
[:div#header
[:h1
[:span.logo-try "Try"]
[:span.logo-clojure "Clo" [:em "j"] "ure"]]]
[:div#container
[:div#console.console]
[:div#buttons
[:a#tutorial.buttons "tutorial"]
[:a#links.buttons "links"]
[:a#about.buttons.last "about"]]
[:div#changer
[:p.bottom
"Welcome to TryClojure. Above, you have a Clojure REPL. You can type expressions and see "
"their results right here in your browser. We also have a brief tutorial to give you a "
"taste of Clojure. Try it out!"]]]
[:div.footer
[:p.bottom "©2010 Anthony Simpson (Raynes)"]
[:p.bottom "Domain and hosting kindly provided by "
(link-to "http://blog.licenser.net" "Heinz N. Gies") "."]]]
[:script {:type "text/javascript"}
"var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-552543-3']); _gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
"]
[:div {:style "text-align: center;"} [:h1 "Try Clojure"]]
[:div#container [:div#console.console]
[:table.bottom {:border "0"}
[:tr]
[:td.bholder [:div.buttons
[:a#tutorial.buttons "tutorial"]
[:a#links.buttons "links"]
[:a#about.lbutton "about"]]]
[:tr]
[:td [:div#changer [:p.bottom
"Welcome to TryClojure. Above, you have a Clojure REPL. You can type expressions and see "
"their results right here in your browser. We also have a brief tutorial to give you a "
"taste of Clojure. Try it out!"]]]]]
[:div.footer
[:p.bottom "©2010 Anthony Simpson (Raynes)"]
[:p.bottom "Domain and hosting kindly provided by "
(link-to "http://blog.licenser.net" "Heinz N. Gies") "."]]]))
]]))
(defn handler [{session :session}]
{:status 200
@@ -147,11 +148,11 @@
:body fire-html})
(defn div-handler [{qparams :query-params session :session}]
(let [[result history] (execute-text (qparams "code") (or (:history session) []))]
{:status 200
:headers {"Content-Type" "text/txt"}
:session {:history history}
:body result}))
(let [[result history] (execute-text (qparams "code") (or (:history session) []))]
{:status 200
:headers {"Content-Type" "text/txt"}
:session {:history history}
:body result}))
(defn about-handler [{session :session}]
{:status 200

0 comments on commit b9f2461

Please sign in to comment.