stylez

rkononov · Mar 20, 2012 · 1e31aad · 1e31aad
1 parent e1cd88f
commit 1e31aad
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 6 deletions.
diff --git a/css/jquery.snippet.min.css b/css/jquery.snippet.min.css
diff --git a/images/arrow-left.png b/images/arrow-left.png
diff --git a/images/arrow-right.png b/images/arrow-right.png
diff --git a/images/image-icon-for-process.png b/images/image-icon-for-process.png
diff --git a/images/image-icon-processed.png b/images/image-icon-processed.png
diff --git a/images/step-2-bg.png b/images/step-2-bg.png
diff --git a/images/step-3-bg.png b/images/step-3-bg.png
diff --git a/index.php b/index.php
@@ -4,6 +4,7 @@
     <link rel="icon" href="http://www.iron.io/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/jquery.snippet.min.css">
 
     <style type="text/css" media="screen">
       @font-face {
@@ -19,6 +20,7 @@
             src="https://www.google.com/jsapi?key=ABQIAAAAhes0f80sBcwL-h5xCNkkgxQBmiBpQeSpIciQPfZ5Ss-a60KXIRQOVvqzsNpqzhmG9tjky_5rOuaeow"></script>
     <script type="text/javascript">google.load('jquery', '1');
     google.load('jqueryui', '1'); </script>
+    <script src="javascripts/jquery.snippet.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 
@@ -38,7 +40,7 @@
         <pre>
 $ironmq = new IronMQ('config.ini');
 $ironmq->postMessage("input_queue", 
-          array("body" => $url_to_picture));</pre>
+            array("body" => $url_to_picture));</pre>
       </code>
 
       <div id="posted-image">
@@ -54,7 +56,7 @@
             <input id = "pic_url" type="text" name="url" placeholder="Search..."/>
             <input type="submit" value="Push to Queue"/>
         </form>
-        <small id="sample-toggler">Or even simply choose one from our set</small>
+        <small id="sample-toggler">Or even simply choose one from our robots set</small>
         <div id="samples">
           <img src="images/samples/irondog.png" alt="">
           <img src="images/samples/transformer.png" alt="">
@@ -174,6 +176,8 @@ function queue_worker(data) {
     }
     $(document).ready(function () {
 
+        $("#code-example pre").snippet("php",{style:"vim-dark",transparent:true,showNum:false});
+
         $('#sample-toggler').click(function(){
           $('#samples').slideToggle(300);
         });

diff --git a/javascripts/jquery.snippet.min.js b/javascripts/jquery.snippet.min.js
diff --git a/style.css b/style.css
@@ -27,6 +27,10 @@ time, mark, audio, video {
   background:transparent;
 }
 
+html, body {
+  height: 100%;
+}
+
 body {
   line-height:1;
 }
@@ -163,6 +167,7 @@ body > footer a {
   display: inline-block;
   box-shadow: 0 1px 5px rgba(0,0,0,.5);
   border-radius: 5px;
+  height: 50px;
 }
 
 body > footer a img {
@@ -254,29 +259,51 @@ body > footer a img {
 }
 
 code {
-  background: rgba(255, 255, 255, .3);
-  padding: 10px 0 10px 5px;
+  background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .67) 49%, rgba(0, 0, 0, .7) 49% ,rgba(0, 0, 0, .7));
   font-size: 11px;
   display: block;
   line-height: 1.5em;
-  box-shadow: 0 1px 0 rgba(245,255,255,.6), 0 1px 0 rgba(0,20,20,.2) inset;
+  box-shadow: 0 1px 0 rgba(245,255,255,.6), 0 0px 20px rgba(0,20,20,.5) inset, 0 1px 0 rgba(0,20,20,.3) inset;
   border-radius: 5px;
 }
 
+.sh_vim-dark .sh_sourceCode .sh_keyword, .sh_vim-dark .sh_sourceCode .sh_date, .sh_vim-dark .sh_sourceCode .sh_time, .sh_vim-dark .sh_sourceCode .sh_file, .sh_vim-dark .sh_sourceCode .sh_variable, .sh_vim-dark .sh_sourceCode .sh_difflines, .sh_vim-dark .sh_sourceCode .sh_selector, .sh_vim-dark .sh_sourceCode .sh_property, .sh_vim .sh_sourceCode .sh_keyword, .sh_vim .sh_sourceCode .sh_date, .sh_vim .sh_sourceCode .sh_time, .sh_vim .sh_sourceCode .sh_file, .sh_vim .sh_sourceCode .sh_variable, .sh_vim .sh_sourceCode .sh_difflines, .sh_vim .sh_sourceCode .sh_selector, .sh_vim .sh_sourceCode .sh_property {
+  color: #95C261 !important;
+}
+
+.sh_golden .sh_sourceCode .sh_string, .sh_golden .sh_sourceCode .sh_regexp, .sh_golden .sh_sourceCode .sh_specialchar, .sh_golden .sh_sourceCode .sh_url, .sh_golden .sh_sourceCode .sh_ip, .sh_golden .sh_sourceCode .sh_name, .sh_golden .sh_sourceCode .sh_oldfile, .sh_golden .sh_sourceCode .sh_newfile, .sh_golden .sh_sourceCode .sh_value, .sh_ide-devcpp .sh_sourceCode .sh_string, .sh_ide-devcpp .sh_sourceCode .sh_regexp, .sh_ide-devcpp .sh_sourceCode .sh_specialchar, .sh_ide-devcpp .sh_sourceCode .sh_url, .sh_ide-devcpp .sh_sourceCode .sh_ip, .sh_ide-devcpp .sh_sourceCode .sh_name, .sh_ide-devcpp .sh_sourceCode .sh_oldfile, .sh_ide-devcpp .sh_sourceCode .sh_newfile, .sh_ide-devcpp .sh_sourceCode .sh_value, .sh_ide-kdev .sh_sourceCode .sh_string, .sh_ide-kdev .sh_sourceCode .sh_regexp, .sh_ide-kdev .sh_sourceCode .sh_specialchar, .sh_ide-kdev .sh_sourceCode .sh_url, .sh_ide-kdev .sh_sourceCode .sh_ip, .sh_ide-kdev .sh_sourceCode .sh_name, .sh_ide-kdev .sh_sourceCode .sh_oldfile, .sh_ide-kdev .sh_sourceCode .sh_newfile, .sh_ide-kdev .sh_sourceCode .sh_value, .sh_kwrite .sh_sourceCode .sh_string, .sh_kwrite .sh_sourceCode .sh_regexp, .sh_kwrite .sh_sourceCode .sh_url, .sh_kwrite .sh_sourceCode .sh_ip, .sh_kwrite .sh_sourceCode .sh_name, .sh_kwrite .sh_sourceCode .sh_newfile, .sh_kwrite .sh_sourceCode .sh_value, .sh_pablo .sh_sourceCode .sh_symbol, .sh_pablo .sh_sourceCode .sh_cbracket, .sh_the .sh_sourceCode .sh_number, .sh_the .sh_sourceCode .sh_preproc, .sh_typical .sh_sourceCode .sh_string, .sh_typical .sh_sourceCode .sh_regexp, .sh_typical .sh_sourceCode .sh_symbol, .sh_typical .sh_sourceCode .sh_cbracket, .sh_typical .sh_sourceCode .sh_url, .sh_typical .sh_sourceCode .sh_ip, .sh_typical .sh_sourceCode .sh_name, .sh_typical .sh_sourceCode .sh_newfile, .sh_typical .sh_sourceCode .sh_value, .sh_vim-dark .sh_sourceCode .sh_string, .sh_vim-dark .sh_sourceCode .sh_regexp, .sh_vim-dark .sh_sourceCode .sh_number, .sh_vim-dark .sh_sourceCode .sh_url, .sh_vim-dark .sh_sourceCode .sh_ip, .sh_vim-dark .sh_sourceCode .sh_name, .sh_vim-dark .sh_sourceCode .sh_newfile, .sh_vim-dark .sh_sourceCode .sh_value, .sh_vim .sh_sourceCode .sh_string, .sh_vim .sh_sourceCode .sh_regexp, .sh_vim .sh_sourceCode .sh_number, .sh_vim .sh_sourceCode .sh_url, .sh_vim .sh_sourceCode .sh_ip, .sh_vim .sh_sourceCode .sh_name, .sh_vim .sh_sourceCode .sh_newfile, .sh_vim .sh_sourceCode .sh_value, .sh_whatis .sh_sourceCode .sh_comment, .sh_zellner .sh_sourceCode .sh_comment {
+  color: #4BDAE7 !important;
+}
+
+.snippet-wrap pre.sh_sourceCode {
+  padding: .5em 1em .8em !important;
+}
+
+.sh_url {
+  margin: 0;
+  padding: 0;
+  color: red !important;
+}
+
 .gears-bg {
   background: url(images/gears-bg.png);
   width: 100%;
   height: 250px;
   position: absolute;
   bottom: 0;
   left: 0;
+  opacity: .3;
 }
 
 #posted-image {
   text-align: center;
   display: none;
 }
 
+#posted-image img {
+  max-width: 200px;
+}
+
 #send-images {
   /*background: url(images/arrow-right.png) no-repeat;*/
   width: 260px;
@@ -339,7 +366,7 @@ code {
 }
 
 #result-flow.hidden {
-  /*display: none;*/
+  display: none;
 }
 
 #output {