diff --git a/resources/public/css/gh-fork-ribbon.css b/resources/public/css/gh-fork-ribbon.css index d5c21cf..6fe4efb 100644 --- a/resources/public/css/gh-fork-ribbon.css +++ b/resources/public/css/gh-fork-ribbon.css @@ -72,3 +72,11 @@ -o-transform: rotate(45deg); transform: rotate(45deg); } + +@media (max-width: 619px) { + + .github-fork-ribbon { + zoom: 0.6; + } + +} diff --git a/resources/public/css/tryclojure.css b/resources/public/css/tryclojure.css index 4a355d1..e5145d8 100644 --- a/resources/public/css/tryclojure.css +++ b/resources/public/css/tryclojure.css @@ -1,137 +1,134 @@ body { - background: #fff; - text-align: center; + background: #F7F7F7; + text-align: center; + font-family: Helvetica, sans-serif; + color: #6C7B89; } #wrapper { - text-align: left; - width: 620px; - margin: 0 auto; - border-radius: 5px; - border: 5px solid #eee; + text-align: left; + width: 620px; + margin: 0 auto; } #header { - background: #fff; - margin-top: 24px; - margin: 10px; + margin: 20px 0px 20px 190px; } #header h1 { - height: 72px; - line-height: 72px; - background: url(../clojure-logo.png) no-repeat; - margin: 0; - padding: 0; - padding-left: 75px; - font-family: Arial, sans-serif; - font-weight: normal; - font-size: 48px; + height: 72px; + line-height: 72px; + background: url(../clojure-logo.png) no-repeat; + padding: 0px 0px 0px 80px; + font-weight: normal; + font-size: 36px; } #header h1 span.logo-try { - color: #63b132; - display:inline; + color: #63b132; + display:inline; } #header h1 span.logo-clojure { - color: #5881d8; - display:inline + color: #2B4A8B; + display:inline +} + +#container { + margin-bottom: 40px; } #console { - height: 220px; - background: #eee; - margin: 10px; - border-radius: 5px; - -moz-border-radius: 5px; - border: 1px solid #aaa; + height: 220px; + padding: 10px; + background: #FFFFFF; + font-family: monospace; + font-size: 14px; + color: #6C7B89; + margin-bottom: 10px; +} + +#console textarea { + /* Use a largish font to ensure iOS doesn't zoom in on focus */ + font-size: 2em; } -#console div.jquery-console-inner { - width:580px; - height:200px; - margin: 10px 10px; - overflow:auto; - text-align:left; +#console div.jquery-console-inner { + width:580px; + height:200px; + margin: 10px 10px; + overflow:auto; + text-align:left; } + #console div.jquery-console-message-value { - color:#0066FF; - font-family:monospace; - padding:0.1em; + color:#63b132; } + #console div.jquery-console-prompt-box { - color:#444; font-family:monospace; + color: #6C7B89; } + #console div.jquery-console-focus span.jquery-console-cursor { - background:#333; color:#eee; font-weight:bold; + background:#6C7B89; + color: #FFFFFF; } + #console div.jquery-console-message-error { - color:#ef0505; font-family:sans-serif; font-weight:bold; - padding:0.1em; + color:#FD713B; } + #console div.jquery-console-message-success { - color:#187718; font-family:monospace; - padding:0.1em; -} -#console span.jquery-console-prompt-label { - font-weight:bold; + color:#63b132; } -.bottom { - background-color: white; color: #333; -} -.bottom a,a:visited { - color: #111; -} -table.bottom { - width: 100%; border: 1px solid black; +#console span.jquery-console-prompt-label { + font-weight:bold; } #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; - border-radius: 5px; - -moz-border-radius: 5px; + background: transparent; + text-align: center; + margin-bottom: 10px; } + +#buttons a { + display: inline-block; + color: #2B4A8B; + padding: 2px 2px; + border-bottom: 2px solid #2B4A8B; + text-transform: uppercase; + margin: 10px; + font-family: Helvetica, sans-serif; + font-size: 16px; + transition: all 100ms; +} + #buttons a.last { - margin-right: 0; + margin-right: 0; } + #buttons a:hover { - color: #5881d8; - cursor: pointer; + cursor: pointer; } -#changer { - margin: 10px; - padding: 0.25em 0.5em 0.25em 0.5em; - background: #EAF2F5; - border-radius: 5px; - -moz-border-radius: 5px; - border: 1px solid #BEDCE7; +#changer { + line-height: 1.3em; + padding: 20px; + background: #D6DADD; + margin-bottom: 10px; } -#changer h3 { - color: #555; +#changer p { + margin: 0.6em; } -#changer p { - background: transparent; - line-height: 1.3em; - font-family: Arial, serif; - font-size: 16px; - color: #555; +#changer a { + color: #2B4A8B; +} + +#changer a:visited { + color: #60749E; } #changer code { @@ -142,25 +139,34 @@ table.bottom { padding: 0.1em 0.25em 0.1em 0.25em; } -div#tuttext { +#changer ul { + margin: 0px; + padding: 0px; + list-style: none; +} + +#tuttext { } -div.continue { - width: 100%; - text-align: center; - padding-top: 0.5em; +.continue { + width: 100%; + text-align: center; + padding-top: 0.5em; } -div.footer { - text-align: center; +.footer { + text-align: center; } /* Coderay alpha style */ +code { + display: inline-block; +} + .code { - border-radius: 2px; - -moz-border-radius: 1px; - color: #000; + color: #000; } + .code pre { margin: 0px; } span.code { white-space: pre; border: 0px; padding: 2px; } @@ -177,37 +183,51 @@ table.code td { padding: 2px 4px; vertical-align: top; } /* keywords */ #changer .code span.r { - color: #0000ff; - font-weight: bold; + color: #0000ff; + font-weight: bold; } /* symbols */ #changer .code span.sy { - color: #318495; + color: #318495; } /* strings */ #changer .code span.s { - color: #008800; + color: #008800; } /* paren */ #changer .code span.of { - color: #222; - font-weight: bold; + color: #222; + font-weight: bold; } /* comment */ #changer .code span.c { - color: #ccc; + color: #ccc; } /* operator */ #changer .code span.cl { - + } /* number */ #changer .code span.i { - color: #ff0000; + color: #ff0000; +} + +@media (max-width: 619px) { + + #wrapper { + width: 100%; + } + #header { + margin: 20px auto; + } + #console div.jquery-console-inner { + width: auto; + } + } diff --git a/resources/public/tutorial/page9.html b/resources/public/tutorial/page9.html index 8679f37..44e17cc 100644 --- a/resources/public/tutorial/page9.html +++ b/resources/public/tutorial/page9.html @@ -12,5 +12,5 @@

- If you want, you can create a named functions without using defn: type (def square (fn [x] (* x x))) to continue. + If you want, you can create a named function without using defn: type (def square (fn [x] (* x x))) to continue.

diff --git a/src/tryclojure/views/home.clj b/src/tryclojure/views/home.clj index e5967b0..d717b7e 100644 --- a/src/tryclojure/views/home.clj +++ b/src/tryclojure/views/home.clj @@ -30,7 +30,7 @@ " The design is by " (link-to "http://apgwoz.com" "Andrew Gwozdziewycz") "."])) (defn home-html [] - (html + (html [:p.bottom "Welcome to Clojure! " "You can see a Clojure interpreter above - we call it a REPL."] @@ -39,6 +39,7 @@ (defn root-html [] (html5 [:head + [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}] (include-css "/css/tryclojure.css" "/css/gh-fork-ribbon.css") (include-js "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"