Permalink
Browse files

adding back try,play,fork to index and rearranging to put wiki on top

  • Loading branch information...
1 parent dd4b26e commit 22270c6d2887a347f17fa63ff88d93cb3bae5417 @enjalot committed Aug 18, 2012
Showing with 107 additions and 24 deletions.
  1. +52 −5 static/css/index.css
  2. +55 −19 templates/index.html
View
@@ -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;
-}
+}
+
+#who {
+ width: 640px;
+ display: inline-block;
+ margin: 6px;
+}
+#where {
+ width: 640px;
+ display: inline-block;
+ margin: 6px;
+}
+
+
View
@@ -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 @@
<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 @@
<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

0 comments on commit 22270c6

Please sign in to comment.