From df3a74518503257791053e922fbac31575c3926e Mon Sep 17 00:00:00 2001 From: shvetsovdm Date: Sat, 13 Dec 2014 12:38:58 +1000 Subject: [PATCH 1/4] add new style --- resources/public/css/tryclojure.css | 148 ++++++++++++++-------------- 1 file changed, 75 insertions(+), 73 deletions(-) diff --git a/resources/public/css/tryclojure.css b/resources/public/css/tryclojure.css index 4a355d1..bb42c7b 100644 --- a/resources/public/css/tryclojure.css +++ b/resources/public/css/tryclojure.css @@ -1,32 +1,27 @@ body { - background: #fff; + 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; } #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; + padding: 0px 0px 0px 80px; font-weight: normal; - font-size: 48px; + font-size: 36px; } #header h1 span.logo-try { @@ -35,105 +30,105 @@ body { } #header h1 span.logo-clojure { - color: #5881d8; + 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; + padding: 10px; + background: #FFFFFF; + font-family: monospace; + font-size: 14px; + color: #6C7B89; + margin-bottom: 10px; } -#console div.jquery-console-inner { +#console div.jquery-console-inner { width:580px; - height:200px; + height:200px; margin: 10px 10px; - overflow:auto; + 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; + color:#63b132; } -#console span.jquery-console-prompt-label { +#console span.jquery-console-prompt-label { font-weight:bold; } -.bottom { - background-color: white; color: #333; +/**.bottom { + background-color: white; color: #333; } -.bottom a,a:visited { - color: #111; +.bottom a,a:visited { + color: #111; } -table.bottom { +table.bottom { width: 100%; border: 1px solid black; -} +}**/ #buttons { background: transparent; text-align: center; - margin-top: 10px; + margin-bottom: 10px; } -#buttons a { -/* color: #4881d8;*/ - color: #3D5B99; - padding: .3em 1em; - margin-right: .7em; + +#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; - font-weight: bold; - background: #90b4fe; - border-radius: 5px; - -moz-border-radius: 5px; + font-size: 16px; + transition: all 100ms; } #buttons a.last { 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; + color: red; } - +*/ #changer p { - background: transparent; - line-height: 1.3em; - font-family: Arial, serif; - font-size: 16px; - color: #555; + margin: 0.6em; +} +#changer a { + color: #2B4A8B; +} +#changer a:visited { + color: #60749E; } - #changer code { background-color: #eee; border: 1px solid #aaa; @@ -141,24 +136,31 @@ table.bottom { font-family: courier, monospace; padding: 0.1em 0.25em 0.1em 0.25em; } +#changer ul { + margin: 0px; + padding: 0px; + list-style: none; +} -div#tuttext { +#tuttext { } -div.continue { +.continue { width: 100%; text-align: center; - padding-top: 0.5em; + 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; } .code pre { margin: 0px; } @@ -204,7 +206,7 @@ table.code td { padding: 2px 4px; vertical-align: top; } /* operator */ #changer .code span.cl { - + } /* number */ From a6037ee76e975a276843a11e48a6160e469d328a Mon Sep 17 00:00:00 2001 From: shvetsovdm Date: Sat, 13 Dec 2014 12:53:44 +1000 Subject: [PATCH 2/4] Tidy up tryclojure.css --- resources/public/css/tryclojure.css | 179 ++++++++++++++-------------- 1 file changed, 89 insertions(+), 90 deletions(-) diff --git a/resources/public/css/tryclojure.css b/resources/public/css/tryclojure.css index bb42c7b..1eae2f8 100644 --- a/resources/public/css/tryclojure.css +++ b/resources/public/css/tryclojure.css @@ -1,134 +1,131 @@ body { - background: #F7F7F7; - text-align: center; - font-family: Helvetica, sans-serif; - color: #6C7B89; + background: #F7F7F7; + text-align: center; + font-family: Helvetica, sans-serif; + color: #6C7B89; } #wrapper { - text-align: left; - width: 620px; - margin: 0 auto; + text-align: left; + width: 620px; + margin: 0 auto; } #header { - margin: 20px 0px 20px 190px; + margin: 20px 0px 20px 190px; } #header h1 { - height: 72px; - line-height: 72px; - background: url(../clojure-logo.png) no-repeat; - padding: 0px 0px 0px 80px; - font-weight: normal; - font-size: 36px; + 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: #2B4A8B; - display:inline + color: #2B4A8B; + display:inline } #container { - margin-bottom: 40px; + margin-bottom: 40px; } #console { - height: 220px; - padding: 10px; - background: #FFFFFF; - font-family: monospace; - font-size: 14px; - color: #6C7B89; - margin-bottom: 10px; + height: 220px; + padding: 10px; + background: #FFFFFF; + font-family: monospace; + font-size: 14px; + color: #6C7B89; + margin-bottom: 10px; } #console div.jquery-console-inner { - width:580px; - height:200px; - margin: 10px 10px; - overflow:auto; - text-align:left; + width:580px; + height:200px; + margin: 10px 10px; + overflow:auto; + text-align:left; } + #console div.jquery-console-message-value { color:#63b132; } + #console div.jquery-console-prompt-box { - color: #6C7B89; + color: #6C7B89; } + #console div.jquery-console-focus span.jquery-console-cursor { - background:#6C7B89; - color: #FFFFFF; + background:#6C7B89; + color: #FFFFFF; } + #console div.jquery-console-message-error { - color:#FD713B; + color:#FD713B; } + #console div.jquery-console-message-success { - color:#63b132; -} -#console span.jquery-console-prompt-label { - font-weight:bold; + color:#63b132; } -/**.bottom { - background-color: white; color: #333; -} -.bottom a,a:visited { - color: #111; +#console span.jquery-console-prompt-label { + font-weight:bold; } -table.bottom { - width: 100%; border: 1px solid black; -}**/ #buttons { - background: transparent; - text-align: center; - margin-bottom: 10px; + 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; + 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 { - cursor: pointer; + cursor: pointer; } #changer { - line-height: 1.3em; - padding: 20px; - background: #D6DADD; - margin-bottom: 10px; -} -/* -#changer h3 { - color: red; + line-height: 1.3em; + padding: 20px; + background: #D6DADD; + margin-bottom: 10px; } -*/ + #changer p { - margin: 0.6em; + margin: 0.6em; } + #changer a { - color: #2B4A8B; + color: #2B4A8B; } + #changer a:visited { - color: #60749E; + color: #60749E; } + #changer code { background-color: #eee; border: 1px solid #aaa; @@ -136,33 +133,35 @@ table.bottom { font-family: courier, monospace; padding: 0.1em 0.25em 0.1em 0.25em; } + #changer ul { - margin: 0px; - padding: 0px; - list-style: none; + margin: 0px; + padding: 0px; + list-style: none; } #tuttext { } .continue { - width: 100%; - text-align: center; - padding-top: 0.5em; + width: 100%; + text-align: center; + padding-top: 0.5em; } .footer { - text-align: center; + text-align: center; } /* Coderay alpha style */ code { - display: inline-block; + display: inline-block; } .code { - color: #000; + color: #000; } + .code pre { margin: 0px; } span.code { white-space: pre; border: 0px; padding: 2px; } @@ -179,29 +178,29 @@ 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 */ @@ -211,5 +210,5 @@ table.code td { padding: 2px 4px; vertical-align: top; } /* number */ #changer .code span.i { - color: #ff0000; + color: #ff0000; } From 1d803c60e9348f157cd17682e238617d9be9712a Mon Sep 17 00:00:00 2001 From: Glen Mailer Date: Sat, 3 Jan 2015 14:41:31 +0000 Subject: [PATCH 3/4] 'responsive' layout --- resources/public/css/gh-fork-ribbon.css | 8 ++++++++ resources/public/css/tryclojure.css | 19 +++++++++++++++++++ src/tryclojure/views/home.clj | 3 ++- 3 files changed, 29 insertions(+), 1 deletion(-) 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 1eae2f8..e5145d8 100644 --- a/resources/public/css/tryclojure.css +++ b/resources/public/css/tryclojure.css @@ -48,6 +48,11 @@ body { 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; @@ -212,3 +217,17 @@ table.code td { padding: 2px 4px; vertical-align: top; } #changer .code span.i { color: #ff0000; } + +@media (max-width: 619px) { + + #wrapper { + width: 100%; + } + #header { + margin: 20px auto; + } + #console div.jquery-console-inner { + width: auto; + } + +} 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" From e61882b439eaa627ff1cc32432a2b94f74d2cab1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Moreira?= Date: Thu, 21 May 2015 21:47:57 +0100 Subject: [PATCH 4/4] Fixed typo --- resources/public/tutorial/page9.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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.