Start cleaning up nav

scss/homepage.scss

@@ -6,10 +6,6 @@
     min-height: 100%;
     height: 100%;
 
-    background: #434343 url("pennies.jpg") no-repeat;
-    background-size: cover;
-    background-position: 0 -54px;
-
     span {
         white-space: nowrap;
     }

scss/layout.scss

@@ -1,7 +1,7 @@
 body {
-    background: url("pennies.jpg");
+    background: #434343 url("pennies.jpg") no-repeat;
     background-size: cover;
-    background-position: 0 50%;
+    background-position: 0 -54px;
 }
 
 #header {
@@ -58,38 +58,26 @@ body {
 #content {
     display: table-row;
 }
-.pennies {
+
+#sidebar {
     display: table-cell;
     width: 200px;
     background: transparentize($brown, 0.1);
     border-right: 1px solid $brown;
 
-    h1 {
-        clear: both;
-    }
-
-    #hero {
-        color: $black;
-
-        h1 {
-            font: bold 30px/40px $Ideal;
-            padding: 48px 0 24px;
-            color: $white;
-
-            em {
-                font-style: italic;
-                color: $gold;
-            }
-        }
-
-        p {
-            color: $white;
-            font-size: 18px;
-            line-height: 24px;
+    .nav {
+        margin-top: 50px;
+        li {
+            margin: 0;
         }
-
         a {
+            padding: 5px 20px;
+            display: block;
             color: $gold;
+            &.selected {
+                background: transparentize($gold, 0.8);
+                color: $white;
+            }
         }
     }
 }
@@ -165,7 +153,6 @@ body {
 }
 .box {
     text-align: center;
-    background: white;
 
     h1 {
         font: bold 22px $Ideal;
@@ -303,56 +290,6 @@ body {
         */
     }
 
-    .nav {
-        padding: 5px;
-
-        h2 {
-            color: $black;
-            font: bold 10px $Ideal;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-            margin: 0 0 3px;
-        }
-
-        button.larger {
-            font-size: 14px;
-        }
-
-        &.level-1 {
-            border-top: 1px solid rgba($brown, 0.2);
-            background: $lighter-gray;
-
-            #payment-prompt {
-                display: none;
-                margin: 10px 0 5px;
-
-                &.needed {
-                    display: block;
-                }
-                &.really-needed {
-                    display: block;
-                }
-            }
-        }
-
-        &.level-2 {
-            border-top: 1px solid rgba($brown, 0.5);
-            background: $light-gray;
-        }
-
-        &.level-3 {
-            background: black;
-            text-align: center;
-            padding: 5px;
-            color: white;
-
-            a {
-                display: block;
-                color: white;
-            }
-        }
-    }
-
     .on-confirm {
         padding: 35px 0 0;
 
@@ -568,7 +505,7 @@ body {
 }
 
 #page {
-    padding: 20px 0 0;
+    padding: 50px;
     background: transparentize($white, 0.03);
 
     h1 {
@@ -601,7 +538,6 @@ body {
 }
 
 .col0 {
-    margin: 0 0 20px 20px;
 }
 
 .col1 {

templates/about.html

@@ -1,17 +1,7 @@
 {% extends "templates/base.html" %}
-{% block box %}
+{% block sidebar %}
     {% set current_page = path.raw.split('/')[2] %}
     {% set nav_base = "/about" %}
-    <div class="nav">
-        {% set pages = [('/', _('About')), ('/details', _('Details')), ('/faq', _('FAQ')), ('/contact', _('Contact'))] %}
-        {% include "templates/nav.html" %}
-    </div>
-    <div class="nav level-1">
-        {% set pages = [('/pricing', _('Pricing')), ('/teams/', _('Teams')), ('/stats', _('Stats')), ('/charts', _('Charts'))] %}
-        {% include "templates/nav.html" %}
-    </div>
-    <div class="nav level-2">
-        {% set pages = [('/terms/', _('Terms')), ('/privacy/', _('Privacy')), ('/fraud/', _('Fraud')), ('/dnt', _('DNT'))] %}
-        {% include "templates/nav.html" %}
-    </div>
+    {% set pages = [('/', _('About')), ('/details', _('Details')), ('/faq', _('FAQ')), ('/contact', _('Contact')), ('/pricing', _('Pricing')), ('/teams/', _('Teams')), ('/stats', _('Stats')), ('/charts', _('Charts')), ('/terms/', _('Terms')), ('/privacy/', _('Privacy')), ('/fraud/', _('Fraud')), ('/dnt', _('DNT'))] %}
+    {% include "templates/nav.html" %}
 {% endblock %}

templates/base.html

@@ -64,24 +64,19 @@ <h1>
     </div>
 
     <div class="bulk">
-        <div class="pennies">
-            {% include "templates/support-gratipay.html" %}
-            {% block heading %}
-            {% if title %}
-            <h1>{{ title }}</h1>
-            {% endif %}
-            {% endblock %}
-
-            {% block killbox %}
-            <div class="box">
-                {% block box %}{% endblock %}
-            </div>
-            {% endblock %}
+        <div id="sidebar">
+            {% block sidebar %}{% endblock %}
         </div>
 
         {% block whole_page %}
         <div class="content">
+            {% include "templates/support-gratipay.html" %}
             <div id="page" class="group">
+                {% block heading %}
+                {% if title %}
+                <h1>{{ title }}</h1>
+                {% endif %}
+                {% endblock %}
                 {% block page %}{% endblock %}
             </div>
         </div>

templates/nav.html

@@ -1,8 +1,9 @@
-{% for slug, name in pages %}
-{% if slug == None %}
-<br><br>
-{% else %}
-<a href="{{ nav_base }}{{ slug }}" data-pjax="#pjax"><button{% if slug.strip('/') == current_page %}
-        class="selected"{% endif %}>{{ name }}</button></a>
-{% endif %}
-{% endfor %}
+<ul class="nav">
+    {% for slug, name in pages %}
+    {% if slug == None %}
+    <li></li>
+    {% else %}
+    <li><a href="{{ nav_base }}{{ slug }}"{% if slug.strip('/') == current_page %} class="selected"{% endif %}>{{ name }}</a></li>
+    {% endif %}
+    {% endfor %}
+</ul>

www/about/index.spt

@@ -14,6 +14,8 @@ example = website.db.one("""
 {% block page %}
 <div class="col0">
 
+    <h1>About Gratipay</h1>
+
     <h2>What Is Gratipay?</h2>
 
     <p>Gratipay (formerly Gittip) is a way to make <b>small weekly cash