Build out http://aspen.io/ for relaunch

index.html

@@ -1,42 +1,167 @@
 <style>
+    @import url("spartan/stylesheet.css");
+    @font-face {
+        font-family: 'The Serif';
+        src: url('prociono/Prociono-Regular-webfont.eot');
+        src: url('prociono/Prociono-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+             url('prociono/Prociono-Regular-webfont.woff2') format('woff2'),
+             url('prociono/Prociono-Regular-webfont.woff') format('woff'),
+             url('prociono/Prociono-Regular-webfont.ttf') format('truetype'),
+             url('prociono/Prociono-Regular-webfont.svg#league_spartanbold') format('svg');
+        font-weight: normal;
+        font-style: normal;
+
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
     body {
-        text-align: center;
-        font: normal 24px sans-serif;
+        font: normal 24px/48px "The Serif";
+        background: url("bg.png") repeat;
+    }
+    h2 {
+        font: bold 36px/42px "League Spartan";
+    }
+
+    .banner {
         padding: 200px;
+        text-align: center;
     }
-    p {
+    .banner h2 {
+        padding: 0 0 64px 210px;
+        font-size: 22px;
+        line-height: 30px;
     }
-    a {
+    .banner a {
         display: block;
         width: 260px;
         margin-right: 20px;
         float: left;
-        border: 1px solid #ccc;
-        border-radius: 3px;
-        box-shadow: 1px 1px 3px #CCC;
+        border: 1px solid transparent;
+        border-radius: 10px;
+        padding: 20px;
+    }
+    .banner a img {
+        width: 200px;
     }
-    a p {
+    .banner a span {
+        display: block;
         font-size: 14px;
+        padding: 20px 0 0;
+    }
+    .banner a:hover {
+        background: white;
+        box-shadow: 1px 1px 3px #CCC;
+    }
+
+    .faq {
+        clear: both;
+        background: url("bg2.png") repeat;
+        color: #DCD8CF;
+        padding: 50px 200px 150px;
+    }
+    .faq h2 {
+        padding: 100px 0 30px;
+        color: #d4d1ca;
+        color: #eab900;
+        color: #ffecce;
+        color: #fee9b0;
+    }
+    .faq a {
+        color: #DCD8CF;
+    }
+
+    footer {
+        padding: 50px 200px;
+        font: normal 16px/20px "The Serif";
+    }
+    footer img {
+        display: inline-block;
+        width: 80px;
     }
 </style>
 
-<p>Aspen provides filesystem routing for Python web frameworks.</p>
+<section class="banner">
+    <h1><img src="aspen.png" alt="Aspen"></h1>
+    <h2>Filesystem Dispatch since 2006</h2>
+
+    <a href="django">
+        <h3><img src="django.svg" alt="for Django"></h3>
+        <span>django-aspen &#x279a;</span>
+    </a>
+
+    <a href="flask">
+        <h3><img src="flask.png" alt="for Flask"></h3>
+        <span>Flask-Aspen</span>
+    </a>
+
+    <a href="pando">
+        <h3><img src="pando.png" alt="Pando"></h3>
+        <span>a microframework</span>
+    </a>
+</section>
+
+<section class="faq">
+
+    <h2>What is filesystem dispatch?</h2>
+
+    <p>Path in address bar &rarr; Path on filesystem. Done.</p>
+
+
+    <h2>Why should I care?</h2>
+
+    <p>You should care about filesystem dispatch if using regular expressions
+    or decorators or object traversal for HTTP dispatch makes your brain
+    hurt.</p>
+
+
+    <h2>What about variable path parts?</h2>
+
+    <p>Capture URL path parts with filesystem paths like
+    <code>www/%year/index.spt</code>.</p>
+
+
+    <h2>What the heck is a <code>*.spt</code> file?</h2>
+
+    <p>Aspen files are <a href="http://simplates.org/">simplates</a>
+    (<code>*.spt</code>), templates with a Python header. Here's an
+    example:</p>
+
+    <pre>import random
+
+[----]
+program = request.qs['program']
+excitement = "!" * random.randint(1, 10)
+
+[----] text/html via stdlib_format
+&lt;h1&gt;Greetings, {program}{excitement}&lt;/h1&gt;
+
+[----] text/plain via stdlib_format
+Greetings, {program}{excitement}
+
+[----] application/json via json_dump
+{ "program": program
+, "excitement": excitement
+ }</pre>
+
 
-<p>Say goodbye to regular expressions!</p>
+    <ul>
+        <li><a href="https://github.com/gratipay/simplate.vim">Vim</a></li>
+        <li><a href="https://github.com/gratipay/simplates.emacs">Emacs</a></li>
+        <li><a href="https://github.com/Changaco/kate-highlightings/blob/master/simplate.xml">Kate</a></li>
+    </ul>
 
-<p>Pick your flavor:</p>
+</section>
 
-<a href="django">
-    <h2>django-aspen</h2>
-    <p>plugin for Django</p>
-</a>
+<footer>
 
-<a href="flask">
-    <h2>Flask-Aspen</h2>
-    <p>plugin for Flask</p>
-</a>
+    <img src="aspen.png" alt="Aspen">
+    &copy; 2006&mdash;2016, Chad Whitacre &amp; contributors.
+    MIT.
+    <a href="https://hackerone.com/aspen">Security</a>.
+    <a href="https://github.com/AspenWeb/">GitHub</a>.
 
-<a href="/pando">
-    <h2>Pando</h2>
-    <p>standalone framework</p>
-</a>
+</footer>

prociono

@@ -0,0 +1 @@
+../../theleagueof/prociono/webfonts

spartan

@@ -0,0 +1 @@
+../../theleagueof/league-spartan/_webfonts