From 22270c6d2887a347f17fa63ff88d93cb3bae5417 Mon Sep 17 00:00:00 2001
From: Ian Johnson <enjalot@gmail.com>
Date: Sat, 18 Aug 2012 14:22:43 -0400
Subject: [PATCH] adding back try,play,fork to index and rearranging to put
 wiki on top

---
 static/css/index.css | 57 +++++++++++++++++++++++++++++++---
 templates/index.html | 74 ++++++++++++++++++++++++++++++++------------
 2 files changed, 107 insertions(+), 24 deletions(-)

diff --git a/static/css/index.css b/static/css/index.css
index db2abe7..956395a 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -10,6 +10,7 @@
 p {
     line-height: 1.5em;
 }
+
 #gallery img {
     width: 300px;
     height: 300px;
@@ -78,17 +79,50 @@ h3 {
     margin: 0;
     padding: 0;
 }
-#what {
-    width: 300px;
+
+
+#try {
+    width: 200px;
     display: inline-block;
     vertical-align: top;
 }
-#who {
+#play {
+    width: 200px;
+    display: inline-block;
+    vertical-align: top;
+}
+#fork {
+    width: 200px;
+    display: inline-block;
+    vertical-align: top;
+}
+.intro {
+    width: 200px;
+    margin-left: 5px;
+    margin-right: 5px;
+
+}
+.intro a {
+    background-color: rgba(0,0,0,0);
+}
+.intro h3 {
+    width: 2em;
+    margin-left: auto;
+    margin-right: auto;
+}
+.intro img {
+    width: 200px;
+    height: 150px;
+}
+
+#what {
     width: 300px;
     display: inline-block;
-    margin: 6px;
+    vertical-align: top;
 }
+
 #wiki {
+    display: inline-block;
     font-size: 24px;
     line-height: 34px;
     width: 300px;
@@ -97,4 +131,17 @@ h3 {
     margin-right: auto;
     padding: 16px;
     
-}
\ No newline at end of file
+}
+
+#who {
+    width: 640px;
+    display: inline-block;
+    margin: 6px;
+}
+#where {
+    width: 640px;
+    display: inline-block;
+    margin: 6px;
+}
+
+
diff --git a/templates/index.html b/templates/index.html
index a0a2542..48a9845 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,22 +12,52 @@
 
       <!-- intro -->
       <h1>Tributary</h1>
+      <br>
+      <br>
         
+      <div id="try" class="intro">
+        <a href="/tributary/3200444/">
+        <h3>Try!</h3>
+        <img class="intro1" src="/static/img/index/intro1.png" />
+        <p>Just start writing some d3 code and watch elements come to life with every keystroke!</p>
+        </a>
+      </div>
+
+      <div id="play" class="intro">
+        <a href="/tributary/2958196/">
+        <h3>Play!</h3>
+        <img class="intro2" src="/static/img/index/intro2.png" />
+        <p>No need to code, open any existing tributary and just click on any number or color
+          you see to start playing!</p>
+        </a>
+      </div>
+
+      <div id="fork" class="intro">
+        <a href="/tributary/2958568/">
+        <h3>Share!</h3>
+        <img class="intro3" src="/static/img/index/intro3.png" />
+        <p>Like what you see?
+          <br/>Click "Fork" and your code gets saved to a github gist.
+          <br/>Your URL will change, just copy, paste and share!</p>
+        </a>
+      </div>
+
       <!-- about -->
 	<div id="what">
 		<h3>What is this?</h3>
         <p class="about_what_txt">Tributary is an experimental environment for rapidly prototyping visualization code. The environment provides several libraries useful for this kind of coding, as well as a simple interface for live code editing.
         </p>	
 	</div>
-	
-	<div id="who">
-		<h3>Who is involved?</h3>
-        <p class="about_who_txt">Tributary is <a href="https://twitter.com/enjalot">@enjalot</a>'s digital laboratory.
-        <br/>Much of the design is <a href="https://twitter.com/mrejfox">@mrejfox</a>'s vision.
-        <br/>Power users that shape the projects direction include <a href="https://twitter.com/syntagmatic">@syntagmatic</a>, <a href="https://twitter.com/bausofthenauf">@bausofthenauf</a>,
-        <a href="https://twitter.com/ptvan">@ptvan</a> and <a href="https://twitter.com/poezn">@poezn</a>
-        </p>
-	</div>
+    
+<!-- documentation -->
+      <div id="wiki">
+		<h3>Wiki</h3>
+        <br/>
+        <a href="https://github.com/enjalot/tributary/wiki">Overview</a>
+        <br/><a href="https://github.com/enjalot/tributary/wiki/Tributary">Tributary</a>
+        <br/><a href="https://github.com/enjalot/tributary/wiki/Delta">Delta</a>
+          <br/>
+      </div>
 
 
 
@@ -39,7 +69,7 @@ <h3>Who is involved?</h3>
             <img class="illusions" src="/static/img/index/gallery/illusions.png" />
         </a>
         <a href="http://newhive.com/enjalot/squarecircle">
-            <img class="tubes" src="/static/img/index/gallery/tubes.png" style="opacity: 1 !important;" />
+            <img class="tubes" src="/static/img/index/gallery/tubes.png" />
         </a>
         <a href="http://newhive.com/enjalot/delta">
             <img class="arc" src="/static/img/index/gallery/arc.png" />
@@ -64,15 +94,21 @@ <h3>Who is involved?</h3>
         <small class="gallerytext">Some of these images take you to galleries of Tributary examples, don't be afraid
           to click on images which take you to the actual live tributaries!</small>
 		</div>
-      <!-- documentation -->
-      <div id="wiki">
-		<h4>Wiki</h4>
-        <a href="https://github.com/enjalot/tributary/wiki">Overview</a>
-        <br/><a href="https://github.com/enjalot/tributary/wiki/Tributary">Tributary</a>
-        <br/><a href="https://github.com/enjalot/tributary/wiki/Delta">Delta</a>
-          <br/>
-      </div>
-	  <br />
+
+    <br />
+	
+	<div id="who">
+		<h3>Who is involved?</h3>
+        <p class="about_who_txt">Tributary is <a href="https://twitter.com/enjalot">@enjalot</a>'s digital laboratory.
+        Much of the design is <a href="https://twitter.com/mrejfox">@mrejfox</a>'s vision.
+        <a href="https://github.com/enjalot/tributary/graphs/contributors">Contributors</a> include <a href="https://github.com/bollig">bollig</a> and <a href="https://github.com/ejfox">ejfox</a>.
+        Power users that shape the projects direction include <a href="https://twitter.com/syntagmatic">@syntagmatic</a>, <a href="https://twitter.com/bausofthenauf">@bausofthenauf</a>,
+        <a href="https://twitter.com/ptvan">@ptvan</a> and <a href="https://twitter.com/poezn">@poezn</a>
+        </p>
+	</div>
+
+
+    <div id="where">
       <h3>Where did it come from?</h3>
       <p class="attribution_txt">Tributary is possible thanks to much harder work done by other people. We started
         with <a href="http://gabrielflor.it/water">Gabriel Florit's implementation</a>  of concepts introduced in Bret Victor's <a href="http://www.youtube.com/watch?v=PUv66718DII">Inventing