Use inverse Fourier transform

index.html

@@ -23,7 +23,10 @@
           <div class="demo-instructions">
             Type an expression:
           </div>
-          <textarea id="demo-input" spellcheck="false">x = \dfrac{-b \pm \sqrt{b^2-4ac}}{2a}</textarea>
+          <textarea id="demo-input" spellcheck="false">
+f(x) = \int_{-\infty}^\infty
+    \hat f(\xi)\,e^{2 \pi i \xi x}
+    \,d\xi</textarea>
         </div>
         <div class="demo-right">
           <div class="demo-instructions">
@@ -41,6 +44,10 @@
       <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 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>
+      </div>
     </div></div>
 
     <div class="footer"><div class="container">

lib/katex/katex.min.css

@@ -746,3 +746,13 @@ big parens
 .katex .op-limits > .vlist > span {
   text-align: center;
 }
+.katex .accent > .vlist > span {
+  text-align: center;
+}
+.katex .accent .accent-body > span {
+  width: 0;
+}
+.katex .accent .accent-body.accent-vec > span {
+  position: relative;
+  left: 0.326em;
+}

main.css

@@ -14,6 +14,20 @@ body {
     overflow: hidden;
 }
 
+.cta {
+    margin: 10px 0;
+    text-align: center;
+}
+
+.cta a {
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: 600;
+    margin: 0 10px;
+    padding: 8px 24px;
+    text-decoration: none;
+}
+
 .header {
     padding: 40px 0 0;
 }
@@ -35,21 +49,13 @@ body {
     font-weight: 600;
 }
 
-.cta {
+.header .cta a {
-    margin: 10px 0;
+    border: 3px solid;
-    text-align: center;
+    color: #fff;
 }
 
-.cta a {
+.header .cta a:hover {
-    background: #329894;
+    background: rgba(255, 255, 255, 0.1);
-    border-radius: 3px;
-    border: 3px solid #fff;
-    color: #fff;
-    display: inline-block;
-    font-weight: 600;
-    margin: 0 10px;
-    padding: 8px 24px;
-    text-decoration: none;
 }
 
 .demo {
@@ -98,7 +104,7 @@ body {
 }
 
 #demo-output {
-    font-size: 20px;
+    font-size: 18px;
     padding: 10px 0;
     overflow: auto;
 }
@@ -108,14 +114,14 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
     min-height: 400px;
     position: relative;
-    padding: 10px 0;
+    padding: 30px 0;
 }
 
 .subtagline {
     color: #329894;
     font-size: 24px;
     font-weight: 600;
-    padding: 30px 0;
+    padding: 10px 0;
     text-align: center;
 }
 
@@ -125,6 +131,19 @@ body {
     margin: 30px 0;
 }
 
+.main .cta {
+    padding-top: 30px;
+}
+
+.main .cta a {
+    border: 3px solid;
+    color: #329894;
+}
+
+.main .cta a:hover {
+    background: rgba(50, 152, 148, 0.1);
+}
+
 .footer {
     padding: 30px 0;
     font-size: 21px;

main.js

@@ -8,7 +8,7 @@ window.startup = function() {
     var demoOutput = document.getElementById("demo-output");
 
     function doDemo() {
-        katex.process(demoInput.value, demoOutput);
+        katex.process("\\displaystyle " + demoInput.value, demoOutput);
     }
 
     demoInput.addEventListener("input", function() {