Rough draft of a new homepage; #1074

We've talked a lot about different ways to make the homepage dynamic.
Here I'm taking the opposite approach: this homepage is designed to
function primarily as a first impression of Gittip that answers the most
basic questions, and then leads people in one of three further
directions: signing up, browsing communities, or reading about Gittip.
Let's make the community and profile pages the focus of dynamic activity
on the site, not the homepage.

404.spt

@@ -4,15 +4,13 @@
 {% extends "templates/base.html" %}
 
 {% block heading %}
-    <h2 class="top">
-        <span>Page Not Found</span>
-    </h2>
+    <h1>Page Not Found</h1>
 {% endblock %}
 {% block box %}
 
-<p class="as-content">
-  Sorry, we can't find the page that you are searching for.
-</p>
+<div class="as-content">
+    <p style="margin: 3em 0;">Sorry, we can't find the page that you are looking for.</p>
+</div>
 
 <div class="nav level-1"><a href="/"><button>Home</button></a></div>
 

410.spt

@@ -1,7 +1,7 @@
 [---]
 [---] text/html via jinja2
 {% extends "templates/base.html" %}
-{% block heading %}<h2 class="top"><span>Closed</span></h2>{% endblock %}
+{% block heading %}<h1>Closed</h1>{% endblock %}
 {% block box %}
 
 <div class="as-content">

scss/fonts-colors-mixins.scss

@@ -20,6 +20,8 @@ $lighter-gray: #EEE;
 $black: #333;
 $red: #C00;
 $light-red: #F99;
+$gold: #FFC300;
+$white: #FFF;
 
 @font-face {
     /* Props to http://www.fontsquirrel.com/ and http://www.losttype.com/. */

scss/gittip.scss

@@ -26,6 +26,7 @@
 // Page layout styles
 
 @import "layout";
+@import "homepage";
 
 
 // Styles specific to certain pages. 

scss/homepage.scss

@@ -0,0 +1,108 @@
+#hero {
+    .homepage {
+
+        padding: 128px 0;
+
+        h1 {
+            font-size: 96px;
+            line-height: 96px;
+            margin: 0 0 24px;
+            padding: 0;
+        }
+
+        font: normal 36px/48px $Ideal;
+        text-shadow: 0.1em 0.1em 0.2em black;
+        p { line-height: 48px; margin: 0; padding: 0; }
+
+        span {
+            white-space: nowrap;
+        }
+    }
+}
+
+.homepage-content {
+
+    color: $white; 
+    font: normal 36px/48px $Ideal;
+    text-shadow: 0.1em 0.1em 0.2em black;
+
+    h1 {
+        font: bold 96px/96px $Ideal;
+        text-transform: none;
+        margin: 0 0 24px;
+        padding: 0;
+        color: $white;
+    }
+
+    a {
+        color: $gold;
+        &:hover {
+            color: $brown;
+        }
+    }
+
+    span {
+        white-space: nowrap;
+    }
+
+    .give-receive {
+        display: table;
+        width: 100%;
+
+        .give,.receive {
+            width: 50%;
+            display: table-cell;
+            padding: 96px 48px;
+        }
+
+        .give {
+            background: url("pennies.brown.jpg");
+        }
+
+        .receive {
+            background: url("pennies.gold.jpg");
+        }
+
+    }
+
+    .why {
+        text-align: center;
+        padding: 96px 48px;
+        background: url("pennies.jpg");
+    }
+
+    .browse-about {
+        display: table;
+        width: 100%;
+
+        .browse,.about {
+            width: 50%;
+            display: table-cell;
+        }
+
+        .browse {
+            background: url("pennies.brown.jpg");
+        }
+
+        .about {
+            background: url("pennies.gold.jpg");
+            a {
+                color: $brown;
+            }
+        }
+        h1 {
+            margin: 0;
+            padding: 0;
+
+            a {
+                display: block;
+                padding: 96px 48px;
+                text-align: center;
+                &:hover {
+                    color: $green;
+                }
+            }
+        }
+
+    }
+}

scss/layout.scss

@@ -20,9 +20,9 @@
         text-transform: uppercase;
         padding-left: 18px;
         text-align: left;
-	a {
-	    color: inherit;
-	}
+    a {
+        color: inherit;
+    }
     }
     .sign-in, .you-are {
         padding-top: 18px;
@@ -47,63 +47,37 @@
 }
 
 #hero {
-    background: transparent url('hero-bg.png') top left repeat;
-    border: 1px solid $light-gray;
+    background: url("pennies.jpg") 50% 50% no-repeat;
+
+    border: 1px solid $brown;
     border-style: solid none;
     color: $black;
     padding-bottom: 100px;
     text-align: center;
     position: relative;
     z-index: 1;
 
-    h2 {
-        span {
-            background: transparent url('hero-bg.png') top left repeat;
-            display: inline-block;
-            padding: 0 10px;
-        }
-    }
-    h2.top {
-        letter-spacing: -2px;
-        font: normal 36px $Mensch;
-        padding: 1.5em 0 1em 0;
+    h1 {
+        font: bold 48px $Ideal;
+        padding: 48px 0 24px;
+        color: $white;
+        text-shadow: 0.1em 0.1em 0.2em black;
 
-        span {
-            background: transparent url('hero-bg.png') top left repeat;
-            display: inline-block;
-            padding: 0 10px;
-        }
-        &:after {
-            background: $black;
-            content: "";
-            display: block;
-            height: 1px;
-            margin-top: -0.5em;
+        em {
+            font-style: italic;
+            color: $gold;
         }
     }
-    h1 {
-        letter-spacing: -3px;
-        font: normal 64px $Mensch;
-        padding-bottom: 0.375em;
+
+    p {
+        color: $white;
+        text-shadow: 0.1em 0.1em 0.2em black;
+        font-size: 120%;
+        line-height: 200%;
     }
-    h2.bottom {
-        padding-bottom: 20px;
-        span.button-container {
-            display: inline-block;
-            padding: 0 10px;
 
-            button {
-                font-size: 14px;
-                line-height: 17px;
-            }
-        }
-        &:after {
-            background: $black;
-            content: "";
-            display: block;
-            height: 1px;
-            margin-top: -16px;
-        }
+    a {
+        color: $gold;
     }
 }
 .box {

scss/responsiveness.scss

@@ -22,6 +22,17 @@
         width: 100%;
     }
 
+    .homepage-content {
+        .give-receive, .browse-about {
+            display: block;
+            .give,.receive,.browse,.about {
+                width: 100%;
+                display: block;
+                text-align: center;
+            }
+        }
+    }
+
     .col0, .col1, .col2 {
         float: none;
         margin: auto;
@@ -37,12 +48,24 @@
     }
 
     #hero {
-        h2.top {
-            font-size: 30px;
-        }
+        .homepage {
+            h1 {
+                font-size: 72px;
+                line-height: 72px;
+                margin: 0 0 21px;
+            }
 
+            h2 {
+                font: italic 48px/64px $Ideal;
+                padding: 0 20px;
+            }
+        }
+    }
+    .homepage-content {
         h1 {
-            font-size: 48px;
+            font-size: 72px;
+            line-height: 72px;
+            margin: 0 0 21px;
         }
     }
 
@@ -95,14 +118,27 @@
 
     #hero {
         font-size: 15px;
-        h2.top {
-            letter-spacing: -1px;
-            font-size: 1.33em;
+        h1 {
+            font-size: 36px;
+            padding: 36px 0 18px;
         }
+        .homepage {
+            h1 {
+                font-size: 64px;
+                line-height: 64px;
+                margin: 0 0 18px;
+            }
 
+            h2 {
+                font: italic 36px/48px $Ideal;
+            }
+        }
+    }
+    .homepage-content {
         h1 {
-            letter-spacing: -1px;
-            font-size: 36px;
+            font-size: 64px;
+            line-height: 64px;
+            margin: 0 0 18px;
         }
     }
 

templates/base.html

@@ -46,12 +46,13 @@ <h1>
         <div class="container">
             {% block heading %}
             {% if title %}
-            <h2 class="top"><span>{{ title }}</span></h2>
+            <h1>{{ title }}</h1>
             {% endif %}
             {% endblock %}
         </div>
     </div>
 
+    {% block whole_page %}
     <div class="container">
         {% block killbox %}
         <div class="box">
@@ -61,7 +62,10 @@ <h2 class="top"><span>{{ title }}</span></h2>
         <div id="page" class="group">
             {% block page %}{% endblock %}
         </div>
+    </div>
+    {% endblock %}
 
+    <div class="container">
         <div id="footer">
             <div class="social">
                 <a href="https://twitter.com/gittip"><img src="{{ website.asset_url }}/icons/twitter.16.png" /></a>

templates/profile.html

@@ -9,7 +9,7 @@
     })</script>
 {% endblock %}
 
-{% block heading %}<h2 class="top"><span>{{ hero }}</span></h2>{% endblock %}
+{% block heading %}<h1>{{ hero }}</h1>{% endblock %}
 
 {% block nav %}
 {% set current_page = path.raw.split('/')[2] %}