Make stuff better

index.html

@@ -18,7 +18,7 @@
         The <em>fastest</em> math typesetting library for the web.
       </div>
       <div class="cta">
-        <a href="#" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
+        <a href="https://github.com/Khan/KaTeX/releases" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
       </div>
       <div class="demo">
         <div class="demo-left">
@@ -43,17 +43,38 @@ f(x) = \int_{-\infty}^\infty
       <div class="subtagline">
         Simple API, no dependencies – yet super-fast on all major browsers.
       </div>
+
+      <ul class="features">
+        <li><b>Fast:</b> KaTeX renders its math synchronously and doesn&rsquo;t need to reflow the page.</li>
+        <li><b>Print quality:</b> KaTeX&rsquo;s layout is based on Donald Knuth&rsquo;s TeX, the gold standard for math typesetting.</li>
+        <li><b>Self contained:</b> KaTeX has no dependencies and can easily be bundled with your website resources.</li>
+        <li><b>Server side rendering:</b> KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.</li>
+      </ul>
+
+      <div class="examples">
         <div class="example tex" data-expr="\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }"></div>
         <div class="example tex" data-expr="\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)"></div>
         <div class="example tex" data-expr="\displaystyle 1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
+      </div>
+
+      <div class="subtagline">
+        Lightning-fast, even on pages with hundreds of expressions:
+      </div>
+
+      <div class="comparison-labels">
+        <div class="left tex" data-expr="\KaTeX"></div>
+        <div class="right">MathJax</div>
+      </div>
+      <div class="comparison"></div>
 
       <div class="cta">
-        <a href="#" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
+        <a href="https://github.com/Khan/KaTeX/releases" role="button"><i class="fa fa-download"></i> Download</a><a href="https://github.com/Khan/KaTeX" role="button"><i class="fa fa-github"></i> View on GitHub</a>
       </div>
     </div></div>
 
     <div class="footer"><div class="container">
       <a class="ka-logo" href="https://www.khanacademy.org/"><img src="khan-academy.png" alt="Khan Academy" width="180" height="17"></a>
+      <span class="created-by">Created by <a href="https://github.com/xymostech">Emily Eisenberg</a> and <a href="http://benalpert.com/">Ben Alpert</a>
     </div></div>
 
     <script src="lib/katex/katex.min.js" type="text/javascript"></script>

main.css

@@ -60,7 +60,7 @@ body {
 
 .demo {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    font-size: 18px;
+    font-size: 22px;
     margin: 50px 0 0;
 }
 
@@ -74,7 +74,7 @@ body {
 .demo-right {
     box-sizing: border-box;
     float: left;
-    padding: 30px;
+    padding: 20px 30px;
     width: 50%;
 }
 
@@ -122,18 +122,52 @@ body {
     color: #329894;
     font-size: 24px;
     font-weight: 600;
-    padding: 10px 0;
+    padding: 20px 0;
     text-align: center;
 }
 
+.main .features {
+    font-size: 20px;
+    margin: 0 auto;
+    width: 540px;
+}
+
+.main .examples {
+    margin: 40px 0;
+}
+
 .main .example {
     font-size: 15px;
     text-align: center;
     margin: 30px 0;
 }
 
+.main .comparison-labels {
+    width: 100%;
+    height: 40px;
+}
+
+.main .comparison-labels .left,
+.main .comparison-labels .right {
+    box-sizing: border-box;
+    width: 50%;
+    float: left;
+    height: 40px;
+    text-align: center;
+    font-size: 20px;
+}
+
+.main .comparison {
+    background-image: url(katex-comparison.gif);
+    background-position: 50% 50%;
+    background-size: cover;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    height: 340px;
+    width: 100%;
+}
+
 .main .cta {
-    padding-top: 30px;
+    padding-top: 50px;
 }
 
 .main .cta a {
@@ -154,3 +188,12 @@ body {
     border: none;
     vertical-align: -1px;
 }
+
+.created-by {
+    float: right;
+    font-size: 18px;
+}
+
+.created-by a {
+    color: white;
+}