Shelve work on mobile-first

Gonna go clean up About IA.
gratipay · Jan 8, 2015 · b58a9a8 · b58a9a8
1 parent 438742e
commit b58a9a8
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 26 deletions.
diff --git a/scss/gratipay.scss b/scss/gratipay.scss
@@ -34,8 +34,10 @@
 @import "molecules/markdown";
 @import "molecules/members";
 @import "molecules/memberships";
+@import "molecules/nav";
 @import "molecules/mini-user";
 @import "molecules/payments-by";
+@import "molecules/secondary-nav";
 @import "molecules/sign_in";
 @import "molecules/support_gratipay";
 @import "molecules/tip-distribution";

diff --git a/scss/molecules/nav.scss b/scss/molecules/nav.scss
@@ -0,0 +1,14 @@
+.nav {
+    li {
+        margin: 0;
+        a {
+            display: block;
+            padding: 8px;
+            border-top: 1px solid $brown;
+            font-weight: normal;
+        }
+        &:last-child {
+            border-bottom: 1px solid $brown;
+        }
+    }
+}
diff --git a/scss/molecules/secondary-nav.scss b/scss/molecules/secondary-nav.scss
@@ -0,0 +1,6 @@
+#secondary-nav {
+    background: transparentize($brown, 0.1);
+    a {
+        color: $white;
+    }
+}
diff --git a/scss/organisms/content.scss b/scss/organisms/content.scss
@@ -0,0 +1,8 @@
+#content {
+    h1 {
+        font: bold 16px/21px $Ideal;
+    }
+    font: normal 10px/14px $Chronicle;
+    text-align: left;
+    padding: 2px;
+}
diff --git a/scss/organisms/header.scss b/scss/organisms/header.scss
@@ -0,0 +1,2 @@
+#header {
+}
diff --git a/scss/templates/smallest.scss b/scss/templates/smallest.scss
@@ -0,0 +1,3 @@
+body {
+    text-align: center;
+}
diff --git a/templates/about.html b/templates/about.html
@@ -1,5 +1,5 @@
 {% extends "templates/base.html" %}
-{% block sidebar %}
+{% block secondary_nav %}
     {% set current_page = path.raw.split('/')[2] %}
     {% set current_page = current_page if current_page in ('features', 'policies', 'security') else '' %}
     {% set nav_base = "/about" %}

diff --git a/templates/base.html b/templates/base.html
@@ -39,29 +39,6 @@
         <div id="header" class="clearfix">
             <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
                                  alt="Gratipay" /></a></h1>
-            {% set pages = [('/about/', _('About')), ('/explore/', _('Explore')), ('/search', _('Search'))] %}
-            {% set current_page = path.raw.split('/')[1] %}
-            {% include "templates/nav.html" %}
-            {% if user.ANON %}
-                {% include "templates/sign-in-using.html" %}
-            {% else %}
-            <ul class="nav you-are">
-                <li>
-                    <a href="/{{ user.participant.username }}/"{% if path.raw.split('/')[1] == user.participant.username  %} class="selected"{% endif %}>
-                        {{ user.participant.username }}
-                        <div class="quick-stats">
-                            <span class="my-total-giving">{{ format_currency(user.participant.giving, "USD") }}</span>/{{ _("wk") }}
-                        </div>
-                    </a>
-                </li>
-                <li>
-                    <a id="sign-out" href="/sign-out.html">
-                        <span class="icon">&#xe600;</span>
-                        <span class="screen-reader-text">Sign out</span>
-                    </a>
-                </li>
-            </ul>
-            {% endif %}
             {% include "templates/support-gratipay.html" %}
         </div>
 
@@ -74,8 +51,19 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
             </div>
         </div>
 
-        <div id="footer">
-            <ul>
+        <div id="secondary-nav">{% block secondary_nav %}{% endblock %}</div>
+
+        <div id="succinct-global-nav">
+            {% set pages=[ ('/about/', _('About'))
+                         , ('/explore/', _('Explore'))
+                         , ('/search/', _('Search'))
+                          ]%}
+            {% set current_page = path.raw.split('/')[1] %}
+            {% include "templates/nav.html" %}
+        </div>
+
+        <div id="verbose-global-nav">
+            <ul class="nav">
                 <li><a href="/about/">{{ _("About") }}</a></li>
                 <li><a href="/about/contact">{{ _("Contact Us") }}</a></li>
                 <li><a href="/about/faq">{{ _("FAQ") }}</a></li>
@@ -86,6 +74,29 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
                 <li><a href="https://github.com/gratipay/gratipay.com">GitHub</a></li>
             </ul>
         </div>
+
+        <div id="you-are">
+            {% if user.ANON %}
+            {% include "templates/sign-in-using.html" %}
+            {% else %}
+            <ul class="nav">
+                <li>
+                    <a href="/{{ user.participant.username }}/"{% if path.raw.split('/')[1] == user.participant.username  %} class="selected"{% endif %}>
+                        {{ user.participant.username }}
+                        <div class="quick-stats">
+                            <span class="my-total-giving">{{ format_currency(user.participant.giving, "USD") }}</span>/{{ _("wk") }}
+                        </div>
+                    </a>
+                </li>
+                <li>
+                    <a id="sign-out" href="/sign-out.html">
+                        <span class="icon">&#xe600;</span>
+                        <span class="screen-reader-text">Sign out</span>
+                    </a>
+                </li>
+            </ul>
+            {% endif %}
+        </div>
     </div>
 
 <script>