Skip to content

Loading…

Minor cosmetic changes #27

Merged
merged 4 commits into from

2 participants

@nusco

The one more visible change: I replaced links to GH with a GH banner. The banner doesn't work under IE, though. If you like the change but you care about IE at all, then I can fix that as well (I borrowed the banner from simonwhitaker/github-fork-ribbon-css so that I could customize the colour).

@Raynes Raynes merged commit 2f2f59c into Raynes:master

1 check passed

Details default The Travis build passed
@Raynes
Owner

Merged. Love the banner.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 24, 2012
  1. @nusco

    fix indentation in project file

    nusco committed
  2. @nusco

    add "Fork me on GitHub" banner

    nusco committed
  3. @nusco

    .gitignore lein deps file

    nusco committed
  4. @nusco

    clean up copyright line

    nusco committed
Showing with 85 additions and 16 deletions.
  1. +1 −0 .gitignore
  2. +1 −3 project.clj
  3. +74 −0 resources/public/css/gh-fork-ribbon.css
  4. +9 −13 src/tryclojure/views/home.clj
View
1 .gitignore
@@ -3,3 +3,4 @@ pom.xml
lib
classes
*~
+.lein-deps-sum
View
4 project.clj
@@ -2,9 +2,7 @@
:description "A simple web-based Clojure REPL for trying out Clojure without having to install it."
:dependencies [[org.clojure/clojure "1.4.0"]
[noir "1.3.0-beta10"]
- [commons-lang/commons-lang "2.5"]
+ [commons-lang/commons-lang "2.5"]
[clojail "1.0.1"]]
:jvm-opts ["-Djava.security.policy=example.policy""-Xmx80M"]
:main tryclojure.server)
-
-
View
74 resources/public/css/gh-fork-ribbon.css
@@ -0,0 +1,74 @@
+/* From https://github.com/simonwhitaker/github-fork-ribbon-css */
+
+/* Left will inherit from right (so we don't need to duplicate code */
+.github-fork-ribbon {
+ /* The right and left lasses determine the side we attach our banner to */
+ position: absolute;
+
+ /* Add a bit of padding to give some substance outside the "stitching" */
+ padding: 2px 0;
+
+ /* Set the base colour */
+ background-color: #5881d8;
+
+ /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
+ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.15));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
+
+ /* Add a drop shadow */
+ -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
+}
+.github-fork-ribbon a {
+ /* Set the font */
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: 700;
+ color: white;
+
+ /* Set the text properties */
+ text-decoration: none;
+ text-shadow: 0 -1px rgba(0,0,0,0.5);
+ text-align: center;
+
+ /* Set the geometry. If you fiddle with these you'll also need to tweak the top and right values in #github-fork-ribbon. */
+ width: 200px;
+ line-height: 20px;
+
+ /* Set the layout properties */
+ display: inline-block;
+ padding: 2px 0;
+
+ /* Add "stitching" effect */
+ border-width: 1px 0;
+ border-style: dotted;
+ border-color: rgba(255,255,255,0.7);
+}
+
+.github-fork-ribbon-wrapper {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ overflow: hidden;
+ top: 0;
+}
+
+.github-fork-ribbon-wrapper.right {
+ right: 0;
+}
+
+.github-fork-ribbon-wrapper.right .github-fork-ribbon {
+ top: 42px;
+ right: -43px;
+
+ /* Rotate the banner 45 degrees */
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
View
22 src/tryclojure/views/home.clj
@@ -24,10 +24,6 @@
"The sandbox will automatically be wiped after 15 minutes and if you evaluate more after that,"
"It'll be in an entirely new namespace/sandbox."]
[:p.bottom
- "You can find the site's source and such on its "
- (link-to "http://github.com/Raynes/tryclojure" "github")
- " page."]
- [:p.bottom
"TryClojure is written in Clojure and JavaScript (JQuery), powered by "
(link-to "https://github.com/flatland/clojail" "clojail")
" and Chris Done's "
@@ -38,22 +34,24 @@
[:p.bottom
"Welcome to Try Clojure. See that little box up there? That's 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 by typing " [:code.expr "tutorial"] " in the console!"]
- [:p.bottom
- "Check out the site's source on "
- (link-to "http://github.com/Raynes/tryclojure" "github")
- "!"])
+ "give you a taste of Clojure. Try it out by typing " [:code.expr "tutorial"] " in the console!"])
(defn root-html []
(html5
[:head
- (include-css "/resources/public/css/tryclojure.css")
+ (include-css "/resources/public/css/tryclojure.css"
+ "/resources/public/css/gh-fork-ribbon.css")
(include-js "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
"/resources/public/javascript/jquery-console/jquery.console.js"
"/resources/public/javascript/tryclojure.js")
[:title "Try Clojure"]]
[:body
[:div#wrapper
+ [:div.github-fork-ribbon-wrapper.right
+ [:div.github-fork-ribbon
+ (link-to "https://github.com/Raynes/tryclojure" "Fork me on GitHub")
+ ]
+ ]
[:div#content
[:div#header
[:h1
@@ -67,9 +65,7 @@
[:a#about.buttons.last "about"]]
[:div#changer (home-html)]]
[:div.footer
- [:p.bottom "©2011 Anthony Grimes and numerous contributors"]
- [:p.bottom
- "Built with "
+ [:p.bottom "©2011-2012 Anthony Grimes and numerous contributors. Built with "
(link-to "http://webnoir.org" "Noir")
"."]]
(javascript-tag
Something went wrong with that request. Please try again.