New styles for the portico pages.

(imported from commit 832ad6eb0c2a7be91152d33a6f1ed5d96880839c)

templates/zerver/accounts_home.html

@@ -15,17 +15,20 @@ $(function () {
 });
 </script>
 
-        <div class="pitch">
+<div class="app register-page">
+  <div class="app-main register-page-container">
+
+        <div class="register-form">
             <p class="lead">
               <span id="customer3-pitch" style="display: none;">Participate in the real-time EVENT1 discussion using Zulip!</span>
-              Let's get started…
+              <div class="register-page-header">Let's get started…</div>
             </p>
             <form class="form-inline" id="send_confirm" name="email_form"
                   action="{{ current_url }}" method="post">
                 {% csrf_token %}
                 <input type="text" class="email required" placeholder="Enter your work email address"
-                       id="email" name="email"/>&nbsp;
-                <input type="submit" class="btn btn-primary btn-large" value="Sign up"/>
+                       id="email" name="email"/>
+                <input type="submit" class="btn btn-primary btn-large register-button" value="Sign up"/>
             </form>
             <div id="errors"></div>
             {% if form.email.errors %}
@@ -34,15 +37,18 @@ $(function () {
                 {% endfor %}
             {% endif %}
 
-
             <div class="alert alert-pitch" id="company-email">Please use your
             company email address to sign up. Otherwise, we won’t be able to
             connect you with your coworkers.</div>
-            <div class="pitch">
-                <a href="/accounts/login/openid/" class="zocial google">Sign up with Google</a>
+            <div class="register-google">
+                <a href="/accounts/login/openid/" class="zocial google register-google-button">Sign up with Google</a>
             </div>
         </div>
 
+</div>
+<div class="footer-padder"></div>
+</div>
+
         <script type="text/javascript">
         if (window.location.hash.substring(0, 1) === "#") {
             document.email_form.action += window.location.hash;

templates/zerver/accounts_send_confirm.html

@@ -3,15 +3,19 @@
 {# Displayed after a user attempts to sign up. #}
 
 {% block portico_content %}
+<div class="app portico-page">
+  <div class="app-main portico-page-container">
             <h2>Thanks for signing up!</h2>
             <p class="lead">Check your email so we can get started.<p>
 
             <p>Still no email? We can <a href="#" id="resend_email_link">resend it</a>.<br/>
             <small>(Just in case, take a look at your Spam folder.)</small></p>
-            <form id="resend_confirm" action="/accounts/home/" method="post">
+            <form id="resend_confirm" action="/accounts/home/" method="post" style="position: absolute;">
                 {% csrf_token %}
                 <input type="hidden" class="email" id="email" value="{{ email }}" name="email"/>&nbsp;
             </form>
+</div>
+</div>
 {% endblock %}
 
 {% block customhead %}

templates/zerver/api.html

@@ -3,13 +3,7 @@
 {# API information page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h1>We hear you like APIs...</h1>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li class="active">API</li>
-    </ul>
+    <h1 class="api-page-header">We hear you like APIs...</h1>
 
     <p>We have a <a href="/api/endpoints">well-documented API</a> that allows you to build custom integrations, in addition to our <a href="/integrations">existing integrations</a>. For ease-of-use, we've created a Python module that you can drop in to a project to start interacting with our API.</p>
 
@@ -143,8 +137,4 @@ to pull out the resulting HTML :)
 <span class="na">key</span><span class="o">=</span><span class="s">BOT_API_KEY</span>
 <span class="na">email</span><span class="o">=</span><span class="s">BOT_EMAIL_ADDRESS</span>
 </pre></div>
-  </div>
-</div>
-
-
 {% endblock %}

templates/zerver/api_endpoints.html

@@ -11,15 +11,8 @@
 
 
 {% block portico_content %}
+    <h1 class="api-page-header">API endpoints documentation</h1>
 
-<div class="row-fluid">
-  <div class="span8">
-    <h1>API endpoints documentation</h1>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li><a href="/api">API</a> <span class="divider">/</span></li>
-      <li class="active">Endpoints</li>
-    </ul>
     <p>In addition to our <a href="/api">pre-built API bindings for Python</a>, we also have a <a href="http://en.wikipedia.org/wiki/Representational_state_transfer">REST-ful</a> web API.</p>
 
     <ul class="nav nav-tabs" id="api-example-tabs">
@@ -65,8 +58,4 @@
 </div>
 {% endfor %}
 {% endautoescape %}
-
-      </div>
-    </div>
-
 {% endblock %}

templates/zerver/apps.html

@@ -3,16 +3,10 @@
 {# API information page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h1>Do we have apps? App-solutely.</h1>
-    <p class="muted"><small>Ok, I take it back, I'm sorry, please don't go.</small></p>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li class="active">Apps</li>
-    </ul>
+    <div class="apps-page-header">Do&nbsp;we&nbsp;have&nbsp;apps? App&#8209;solutely.</div>
+    <div class="apps-muted">Ok, I take it back, I'm sorry, please don't go.</div>
 
-    <h3>Installation instructions</h3>
+    <h3 class="apps-instructions-header">Installation instructions</h3>
     <ul class="nav nav-tabs" id="apps-tabs">
       <li class="active"><a href="#android" data-toggle="tab">Android</a></li>
       <li><a href="#iphone" data-toggle="tab">iPhone</a></li>
@@ -57,7 +51,7 @@
         emacs, or Photoshop.</p>
 
         <p style="text-align: center">
-          <a href="https://zulip.com/dist/apps/mac/Zulip-latest.dmg" class="btn btn-large btn-primary"><i class="icon-vector-download"></i> Download Zulip for Mac</a>
+          <a href="https://zulip.com/dist/apps/mac/Zulip-latest.dmg" class="btn btn-large btn-primary btn-app-download"><i class="icon-vector-download"></i> Download Zulip for Mac</a>
         </p>
 
         <img class="full-width-screenshot" src="/static/images/app-screenshots/zulip-desktop-mac.png">
@@ -93,7 +87,7 @@ sudo apt-get install zulip-desktop
         Solitaire, obviously.)</p>
 
         <p style="text-align: center">
-          <a href="https://zulip.com/dist/apps/win/zulip-latest.exe" class="btn btn-large btn-primary"><i class="icon-vector-download"></i> Download Zulip for Windows</a>
+          <a href="https://zulip.com/dist/apps/win/zulip-latest.exe" class="btn btn-large btn-primary btn-app-download"><i class="icon-vector-download"></i> Download Zulip for Windows</a>
         </p>
 
         <img class="full-width-screenshot" src="/static/images/app-screenshots/zulip-desktop-windows.png">
@@ -115,10 +109,6 @@ sudo apt-get install zulip-desktop
 
 
     </div>
-  </div>
-</div>
-
-
 <script>
 $(function () {
     if (navigator.appVersion.indexOf("Win") !== -1) {

templates/zerver/features.html

@@ -1,159 +1,150 @@
 {% extends "zerver/portico.html" %}
 
 {% block portico_content %}
-
-<div class="container">
-  <div class="row">
-    <div class="span4 feature-list">
-      <div>
-        <i class="icon-vector-random icon-vector-2x pull-left"></i>
+    <div class="feature-page-header">Zulip Features</div>
+      <div class="feature-block left">
+        <i class="icon-vector-random icon-vector-3x feature-icon"></i>
         <h4>Threaded group conversations</h4>
         <p>Talk about multiple topics at once without getting lost or
         overwhelmed.</p>
       </div>
-      <div>
-        <i class="icon-vector-comments icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-comments icon-vector-3x feature-icon"></i>
         <h4>One-on-one and group private conversations</h4>
         <p>Have private conversations with one or as many people as you need.</p>
       </div>
-      <div>
-        <i class="icon-vector-home icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-home icon-vector-3x feature-icon"></i>
         <h4>Persistence</h4>
         <p>We're always receiving messages for you, even when you're
         logged out.</p>
       </div>
-      <div>
-        <i class="icon-vector-road icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-road icon-vector-3x feature-icon"></i>
         <h4>History</h4>
         <p>Join a stream and see its history, so even new team
         members are never out of the loop.</p>
       </div>
-      <div>
-        <i class="icon-vector-search icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-search icon-vector-3x feature-icon"></i>
         <h4>Full-history search</h4>
         <p>Search is both snappy and smart, helping you look for text,
         people, and threads of conversation, with advanced search
         operators for fine-grained control.</p>
       </div>
-      <div>
-        <i class="icon-vector-group icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-group icon-vector-3x feature-icon"></i>
         <h4>Team presence and buddy list</h4>
         <p>See who is online at a glance.</p>
       </div>
-      <div>
-        <i class="icon-vector-picture icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-picture icon-vector-3x feature-icon"></i>
         <h4>Inline image, video, and tweet previews</h4>
         <p>Send a link and we'll automatically generate an inline
         preview.</p>
       </div>
-      <div>
-        <i class="icon-vector-paper-clip icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-paper-clip icon-vector-3x feature-icon"></i>
         <h4>Drag-and-drop file uploads</h4>
         <p>Drag a file into the compose box and we'll upload and
         preview it for you. Sharing and discussing work with team
         mates has never been easier.</p>
       </div>
-      <div>
-        <i class="icon-vector-user icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-user icon-vector-3x feature-icon"></i>
         <h4>@-notifications</h4>
         <p>Want someone's attention in a conversation? @-notify them
         and they'll be right over.
       </div>
-      <div>
-        <i class="icon-vector-bullhorn icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-bullhorn icon-vector-3x feature-icon"></i>
         <h4>Stream-wide announcements</h4>
         <p>Use <code>@all</code> or <code>@everyone</code> to get the
         attention of everyone in a stream.</p>
       </div>
-      <div>
-        <i class="icon-vector-envelope icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-envelope icon-vector-3x feature-icon"></i>
         <h4>Emails for important missed messages</h4>
         <p>If you're missing important conversations when you're away from
         Zulip, we'll send you an email summary so you're always in the
         loop.</p>
       </div>
-      <div>
-        <i class="icon-vector-info-sign icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-info-sign icon-vector-3x feature-icon"></i>
         <h4>Desktop notifications</h4>
         <p>Configurable for private and stream messages.</p>
       </div>
-    </div>
-    <div class="span4 feature-list">
-      <div>
-        <i class="icon-vector-bell icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-bell icon-vector-3x feature-icon"></i>
         <h4>Audible notifications</h4>
         <p>So you don't miss important messages even when your eyes
         are elsewhere.</p>
       </div>
-      <div>
-        <i class="icon-vector-font icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-font icon-vector-3x feature-icon"></i>
         <h4>Hotkeys</h4>
         <p>Communicate as efficiently as you use your favorite text editor.</p>
       </div>
-      <div>
-        <i class="icon-vector-thumbs-up icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-thumbs-up icon-vector-3x feature-icon"></i>
         <h4>Emoji</h4>
         <p>Sometimes it's the simple things in life, like being able
         to give a <tt>:thumbsup:</tt> while chatting.</p>
       </div>
-      <div>
-        <i class="icon-vector-edit icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-edit icon-vector-3x feature-icon"></i>
         <h4>Code</h4>
         <p>Discuss code, even multi-line code, with ease, including
         syntax-highlighting.</p>
       </div>
-      <div>
-        <i class="icon-vector-quote-left icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-quote-left icon-vector-3x feature-icon"></i>
         <h4>Lightweight markup</h4>
         <p>Get bulleted lists, clickable links, and nicely-formatted
         e-mail pastes automatically.</p>
       </div>
-      <div>
-        <i class="icon-vector-eraser icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-eraser icon-vector-3x feature-icon"></i>
         <h4>Message editing</h4>
         <p>Don't worry, you can always fix that typo.</p>
       </div>
-      <div>
-        <i class="icon-vector-lock icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-lock icon-vector-3x feature-icon"></i>
         <h4>Invite-only streams</h4>
         <p>Enjoy the benefits of threaded conversations while
         controlling your audience and privacy.</p>
       </div>
-      <div>
-        <i class="icon-vector-star-empty icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-star-empty icon-vector-3x feature-icon"></i>
         <h4>Starred messages</h4>
         <p>Keep a todo list or keep track of interesting
         conversations.</p>
       </div>
-      <div>
-        <i class="icon-vector-github icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-github icon-vector-3x feature-icon"></i>
         <h4>Integrations</h4>
         <p>Get alerts and updates from your favorite services with
         off-the-shelf <a href="/integrations">integrations</a> for
         Trac, Nagios, Github, Jenkins, and more.</p>
       </div>
-      <div>
-        <i class="icon-vector-sitemap icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-sitemap icon-vector-3x feature-icon"></i>
         <h4>API</h4>
         <p>Want to roll your own notifications? We've got a
         dead-simple RESTful <a href="/api">API and Python bindings</a>
         that will make integrations&mdash;both sending and
         receiving&mdash;a snap!</p>
       </div>
-      <div>
-        <i class="icon-vector-mobile-phone icon-vector-2x pull-left"></i>
+      <div class="feature-block left">
+        <i class="icon-vector-mobile-phone icon-vector-3x feature-icon"></i>
         <h4>Mobile apps</h4>
         <p>Check Zulip on the go with native <a href="/apps">iOS and
         Android apps</a>.</p>
       </div>
-      <div>
-        <i class="icon-vector-desktop icon-vector-2x pull-left"></i>
+      <div class="feature-block">
+        <i class="icon-vector-desktop icon-vector-3x feature-icon"></i>
         <h4>OSX desktop app</h4>
         <p>Prefer Zulip in its own window with its own Dock icon?
         Enjoy <a href="/apps">Zulip for Mac</a>.</p>
       </div>
-    </div>
-  </div>
-</div>
-
 {% endblock %}

templates/zerver/hello.html

@@ -1,204 +1,176 @@
 {% extends "zerver/portico.html" %}
-
-{% block inner_content %}
-<div class="row-fluid landing-page shaded-background">
-  <div class="content">
-    <div class="span12">
-      <div class="main-headline">
-        <img src="/static/images/landing-page/zulip-header.png" style="height: 75px">
-        <h2>Finally, workplace chat that actually improves your productivity*</h2>
-        * It's also great for sharing cat pictures.
-      </div>
-    </div>
-
-    <center>
+{% block hello_page_container %} hello-main{% endblock %}
+{% block hello_page_footer %} hello-footer{% endblock %}
+{% block portico_content %}
+<div class="app main-headline">
+  <div class="app-main main-headline-container">
+    <img src="/static/images/logo/textlogo@2x.png" class="main-headline-logo">
+    <div class="main-headline-text">
+      <span class="tagline">
+        Finally, workplace chat that actually improves your productivity.*
+      </span>
+      <span class="footnote">* It's also great for sharing cat pictures.</span>
       <a href="{% url 'signup' %}" class="main-signup-button btn btn-large btn-info">Sign up now, for free!</a>
-
-      <div class="laptop-image">
-        <img class="laptop-screen" src="/static/images/landing-page/app-screenshot.png" />
-      </div>
-    </center>
-
+    </div>
+    <img src="/static/images/landing-page/laptop-screenshot.png" class="main-image">
   </div>
 </div>
 
-{##################################}
-<div class="content">
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <h3>Conversations, not messages</h3>
+<div class="app feature-line light">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      Conversations, not&nbsp;messages.
+    </span>
+    <span class="description">
       <p>Every conversation in Zulip has a <em>topic</em>, so it&rsquo;s
-      easy to keep conversations straight.  Are your coworkers discussing
+      easy to keep conversations straight. Are your coworkers discussing
       a software bug and the content of your website at the same time?
       No problem.
-      </p>
-      <p>You wouldn&rsquo;t tolerate email without subject lines or
-      threading, so why do you for chat?</p>
-    </div>
-    <div class="span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/threads.png" />
-    </div>
+    </p>
+    <p>You wouldn’t tolerate email without subject lines or threading, so why do you for chat?</p>
+    </span>
   </div>
-
-  <div class="row-fluid">
-    <div class="offset2 span8">
-      <hr />
-    </div>
+  <div class="feature-illustration">
+    <img class="feature-image" src="/static/images/landing-page/threads.png">
   </div>
+  </div>
+</div>
 
-{##################################}
-
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/catching-up.png" />
-    </div>
-
-    <div class="span4">
-      <h3>Easily read just the important things</h3>
-
+<div class="app feature-line dark">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      Easily&nbsp;read&nbsp;just the&nbsp;important&nbsp;things.
+    </span>
+    <span class="description">
       <p>Sometimes, important things get discussed when you&rsquo;re not
       around. Unfortunately, so do a lot of unimportant things.</p>
 
       <p><em>Narrowing</em> by stream or topic lets you focus on that important
       customer project without having to read about how Jim&rsquo;s guitar lessons
       are going.</p>
-    </div>
+    </span>
   </div>
-
-  <div class="row-fluid">
-    <div class="offset2 span8">
-      <hr />
-    </div>
+  <div class="feature-illustration">
+    <img class="feature-image shadow" src="/static/images/landing-page/important-things.png">
   </div>
+  </div>
+</div>
 
-{##################################}
-
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <h3>Search that&rsquo;s better than Gmail</h3>
-      <p>An impressive amount of knowledge lives in your chat system.  Zulip&rsquo;s
+<div class="app feature-line light">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      Search&nbsp;that&rsquo;s&nbsp;better than&nbsp;Gmail&rsquo;s.
+    </span>
+    <span class="description">
+      An impressive amount of knowledge lives in your chat system.  Zulip&rsquo;s
       powerful and fast search will delight you with how quickly you can find
-      exactly what you&rsquo;re looking for.</p>
-    </div>
-    <div class="span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/search.png" />
-    </div>
+      exactly what you&rsquo;re looking for.
+    </span>
   </div>
-
-  <div class="row-fluid">
-    <div class="offset2 span8">
-      <hr />
-    </div>
+  <div class="feature-illustration">
+    <img class="feature-image shadow" src="/static/images/landing-page/better-search.png">
   </div>
+  </div>
+</div>
 
-{##################################}
-
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/api.png" />
-    </div>
-    <div class="span4">
-      <h3>Integrations that don&rsquo;t intrude</h3>
+<div class="app feature-line dark">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      Integrations&nbsp;that don&rsquo;t&nbsp;intrude.
+    </span>
+    <span class="description">
       <p>Zulip has <a href="/integrations">many integrations</a> and
       a powerful <a href="/api">API</a> to match. But here&rsquo;s
-      where it gets interesting:</p>
-
-      <p>Thanks to how Zulip categorizes messages, automated messages never
-      overwhelm you.  As with any topic in Zulip, they&rsquo;re easy to
-      focus on, skim, defer to later, or ignore&mdash;as appropriate.</p>
-    </div>
+      where it gets interesting: thanks to how Zulip categorizes messages,
+      automated messages never overwhelm you. As with any topic in Zulip,
+      they&rsquo;re easy to focus on, skim, defer to later, or ignore&mdash;as appropriate.</p>
+    </span>
   </div>
-
-  <div class="row-fluid">
-    <div class="offset2 span8">
-      <hr />
-    </div>
+  <div class="feature-illustration">
+    <img class="feature-image shadow" src="/static/images/landing-page/integrations.png">
   </div>
+  </div>
+</div>
 
-{##################################}
-
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <h3>As technical as you want to be</h3>
+<div class="app feature-line light">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      As&nbsp;technical&nbsp;as you&nbsp;want&nbsp;to&nbsp;be.
+    </span>
+    <span class="description">
       <p>Keyboard shortcuts? Check.<br />
         Syntax highlighting? Check.<br />
         Discuss code and technical topics with ease.</p>
-    </div>
-    <div class="span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/efficient.png" />
-    </div>
+    </span>
   </div>
-
-  <div class="row-fluid">
-    <div class="offset2 span8">
-      <hr />
-    </div>
+  <div class="feature-illustration">
+    <img class="feature-image shadow" src="/static/images/landing-page/technical.png">
   </div>
-
-{##################################}
-
-  <div class="row-fluid landing-page">
-    <div class="offset2 span4">
-      <img class="spotlighted-feature" src="/static/images/landing-page/more.png" />
-    </div>
-    <div class="span4">
-      <h3>...and all the obvious stuff, too</h3>
-      <p>Drag-and-drop file uploads, group private messages, audible
-        notifications, missed-message emails, desktop apps, and
-        <a href="/features">everything else you might
-        want</a>. Including emoji, naturally.</p>
-    </div>
-  </div>
-
-{##################################}
-</div> {# end of "content" div #}
-
-<div class="row-fluid landing-page main-headline darker-background">
-  <div class="content">
-    <div class="span12">
-      <h2>On the platform of your choice</h2>
-    </div>
   </div>
 </div>
-<div class="row-fluid main-headline darker-background landing-page-bottom">
-  <div class="content">
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/mac-icon.png" />
-      <h4>Mac</h4>
-    </div>
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/windows-icon.png" />
-      <h4>Windows</h4>
-    </div>
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/linux-icon.png" />
-      <h4>Linux</h4>
-    </div>
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/android-icon.png" />
-      <h4>Android</h4>
-    </div>
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/iOS-icon.png" />
-      <h4>iOS</h4>
-    </div>
-    <div class="span2">
-      <img class="platform-icon" src="/static/images/landing-page/platforms/browser-icon.png" />
-      <h4>Web</h4>
+
+<div class="app feature-line dark">
+  <div class="app-main feature-line-container">
+   <div class="feature-text">
+    <span class="tagline">
+      ..and&nbsp;all&nbsp;the obvious&nbsp;stuff,&nbsp;too.
+    </span>
+    <span class="description">
+      <p>Drag-and-drop file uploads, image pasting, group private messages,
+         audible notifications, missed-message emails, desktop apps, and
+        <a href="/features">everything else you might want</a>. Including emoji, naturally.</p>
+    </span>
+  </div>
+  <div class="feature-illustration">
+    <img class="feature-image shadow" src="/static/images/landing-page/features.png">
+  </div>
+  </div>
+</div>
+
+<div class="app feature-line light">
+  <div class="app-main feature-line-container">
+   <div class="platform-text">
+    <span class="tagline">
+      On&nbsp;the&nbsp;platform of&nbsp;your&nbsp;choice.
+    </span>
+   </div>
+   <div class="platform-icons">
+      <div class="platform">
+         <i class="icon-vector-apple platform-icon"></i>
+         <h4>Mac</h4>
+      </div>
+      <div class="platform">
+         <i class="icon-vector-windows platform-icon"></i>
+         <h4>Windows</h4>
+      </div>
+      <div class="platform">
+         <i class="icon-vector-linux platform-icon"></i>
+         <h4>Linux</h4>
+      </div>
+      <div class="platform">
+         <i class="icon-vector-android platform-icon"></i>
+         <h4>Android</h4>
+      </div>
+      <div class="platform">
+         <i class="icon-vector-mobile-phone platform-icon"></i>
+         <h4>iOS</h4>
+      </div>
+      <div class="platform">
+         <i class="icon-vector-desktop platform-icon"></i>
+         <h4>Web</h4>
+      </div>
     </div>
   </div>
 </div>
 
-{##################################}
-
-<div class="row-fluid landing-page shaded-background">
-  <div class="content">
-    <div class="span12">
-      <center>
-        <a href="{% url 'signup' %}" class="signup-button btn btn-large btn-info"><h2>Sign up now</h2></a>
-      </center>
-    </div>
+<div class="app feature-line dark">
+  <div class="app-main feature-line-container centered-content">
+        <a href="{% url 'signup' %}" class="bottom-signup-button btn btn-large btn-info">Sign up now</a>
   </div>
 </div>
-
 {% endblock %}

templates/zerver/initial_invite_page.html

@@ -18,11 +18,7 @@
 
 {% block portico_content %}
 
-<p>
-  (Welcome! We think you'll like it here.)
-</p>
-<br />
-<h2>You're the first one here!</h2>
+<h1 style="margin-top:30px;">You're the first one here!</h1>
 <p>
   They said this was some sort of group communication tool, so you probably have some people you want to chat with.
 </p>

templates/zerver/integrations.html

@@ -3,13 +3,7 @@
 {# API information page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h1>Integrations</h1>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li class="active">Integrations</li>
-    </ul>
+    <div class="integrations-page-header">Integrations</div>
 
     <p>The English poet John Donne once wrote that "no man is an
     island", and we feel the same about software. No system exists in
@@ -932,8 +926,6 @@ key=NAGIOS_BOT_API_KEY
       </p>
     </div>
 {#--------------------------------------------------------------------#}
-  </div>
-</div>
 
 {% endblock %}
 

templates/zerver/jobs/index.html

@@ -1,13 +1,7 @@
 {% extends "zerver/portico.html" %}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h1>Jobs at Zulip</h1>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li class="active">Jobs</li>
-    </ul>
+    <h1 class="jobs-page-header">Jobs at Zulip</h1>
 
     <p class="lead jobs-lead">About us</p>
     <p>We're an experienced startup team that previously founded and
@@ -22,14 +16,10 @@
 
     <p>Now we're building the group conversation product you've always
       dreamed of.</p>
-      
+
     <p class="lead jobs-lead">Open positions</p>
-    
+
     <ul>
       <li><a href="/jobs/lead-designer">Lead Designer</a></li>
     </ul>
-
-    </div>
-</div>
-
 {% endblock %}

templates/zerver/jobs/lead-designer.html

@@ -1,14 +1,7 @@
 {% extends "zerver/portico.html" %}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h1>Lead Designer</h1>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li><a href="/jobs">Jobs</a> <span class="divider">/</span></li>
-      <li class="active">Lead Designer</li>
-    </ul>
+    <h1 class="jobs-page-header">Lead Designer</h1>
 
     <p class="lead jobs-lead">About us</p>
     <p>We're an experienced startup team that previously founded and
@@ -57,7 +50,4 @@
     <br />
     <p>Questions? Please email us at <a href="mailto:jobs@zulip.com?subject=Lead%20designer%20job%20posting">jobs@zulip.com</a>.</p>
 
-    </div>
-</div>
-
 {% endblock %}

templates/zerver/login.html

@@ -19,7 +19,11 @@ autofocus('#id_username');
 {% endif %}
 </script>
 
-    <h3>You look familiar.</h3>
+
+<div class="app login-page">
+  <div class="app-main login-page-container">
+
+    <h3 class="login-page-header">You look familiar.</h3>
 
 {% if form.errors %}
 <div class="alert alert-error">
@@ -35,9 +39,7 @@ autofocus('#id_username');
 </div>
 {% endif %}
 
-<div class="row">
-    <div class="span5 login-area">
-        <form name="login_form" id="login_form" method="post" class="form-horizontal"
+        <form name="login_form" id="login_form" method="post" class="login-form"
               action="{% url 'django.contrib.auth.views.login' %}?next={{ request.get_full_path }}">
             {% csrf_token %}
             <div class="control-group">
@@ -55,19 +57,19 @@ autofocus('#id_username');
             <div class="control-group">
                 <div class="controls">
                     <input type="submit" class="btn btn-large btn-primary" value="Log in" />
-                    <span style="padding: 1em">
+                    <span class="login-forgot-password">
                       <a href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a>
                     </span>
                 </div>
             </div>
         </form>
+
+    <div class="login-google">
+    or <a href="/accounts/login/openid/" class="login-google-button zocial google">Sign in with Google</a>
     </div>
-    <div class="span1">
-        <span>- or -</span>
-    </div>
-    <div class="span4">
-        <a href="/accounts/login/openid/" class="zocial google">Sign in with Google</a>
-    </div>
+
+</div>
+<div class="footer-padder"></div>
 </div>
 <script type="text/javascript">
 if (window.location.hash.substring(0, 1) === "#") {
@@ -78,7 +80,7 @@ if (window.location.hash.substring(0, 1) === "#") {
 {% endblock %}
 
 {% block mixpanel_badge %}
-      <li><a href="https://mixpanel.com/f/partner">
+      <li class="mixpanel-badge"><a href="https://mixpanel.com/f/partner">
           <img src="//cdn.mxpnl.com/site_media/images/partner/badge_light.png" alt="Mobile Analytics" />
         </a></li>
 {% endblock %}

templates/zerver/mit.html

@@ -1,8 +1,8 @@
 {% extends "zerver/portico.html" %}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
+
+    <h1 style="margin-top:30px;">Hello, MIT.</h1>
 
     <p>Use Zulip to get help with classes, chat with friends, and meet new parts
       of the MIT community.</p>

templates/zerver/portico.html

@@ -14,48 +14,38 @@ hence the name.
     {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-  <div class="navbar navbar-inverse">
-    <div class="navbar-inner">
-      <div class="content">
-        <a class="brand" href="/">Zulip</a>
-        <ul class="nav pull-right">
-          <li><a href="/accounts/login/?next=/">Log in</a></li>
-          {# TODO: Can we make this more buttony? #}
-          <li><a href="{% url 'signup' %}">Sign up</a></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  {# This lets people override things if they don't want a giant "Zulip" #}
-  {% block inner_content %}
-  <div class="row-fluid">
-    <div class="content">
-      <div id="portico-area" class="offset2 span10">
-        <div class="title">
-          <a class="title" href="/">Zulip</a>
-          <span class="for_you">{% block for_you %}{% endblock %}</span>
+<div class="header">
+<div class="header-main" id="top_navbar">
+  <div class="column-left">
+        <div>
+          <a class="brand logo" href="/"><img src="/static/images/logo/zulip@2x.png" class="logoimage" alt="Zulip" content="Zulip"></a>
         </div>
-        {% block portico_content %}
-        {% endblock %}
-      </div>
-    </div>
   </div>
-  {% endblock %}
 
-  <div class="push"></div>
+  <div class="column-right top-links">
+          <a href="/accounts/login/?next=/">Log in</a>
+          <a href="{% url 'signup' %}">Sign up</a>
+  </div>
+</div>
 </div>
 
-<div class="navbar footer">
-  <div class="content">
-    <ul class="nav pull-right">
+<div class="app portico-page">
+  <div class="app-main portico-page-container{% block hello_page_container %}{% endblock %}">
+  {% block portico_content %}
+  {% endblock %}
+  </div>
+  <div class="footer-padder{% block hello_page_footer %}{% endblock %}"></div>
+</div>
+
+<div class="footer">
+  <div class="footer-main">
+    <ul class="footer-navigation">
       <li>© 2013 Zulip, Inc.</li>
       <li><span class="little-bullet">·</span></li>
       <li><a href="/terms">Legal</a></li>
-      <li>·</li>
+      <li><span class="little-bullet">·</span></li>
       <li><a href="/accounts/login/?next=/">Log in</a></li>
-      <li>·</li>
+      <li><span class="little-bullet">·</span></li>
       <li><a href="{% url 'signup' %}">Sign up</a></li>
       {# We only want the mixpanel badge on the front page #}
       {% block mixpanel_badge %}

templates/zerver/privacy.html

@@ -4,10 +4,7 @@
 
 {% block portico_content %}
 
-<div class="row">
-<div class="span10">
-
-<h1>Privacy Policy</h1>
+<h1 style="margin-top:30px;">Privacy Policy</h1>
 
 <p>As you use our services, we want you to be clear how we’re using
 information.</p>
@@ -266,7 +263,4 @@ version of our privacy policy on this page.</p>
 
 <p>Last modified: July 15, 2013</p>
 
-</div>
-</div>
-
 {% endblock %}

templates/zerver/register.html

@@ -15,10 +15,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
 {% block for_you %}for {% if company_name %} {{company_name}} {% else %} __________ {% endif %} {% endblock %}
 {% block portico_content %}
 
-<p>(Welcome! We think you'll like it here.)</p>
-
 <div class="pitch">
-    <hr/>
 
 {% ifequal company_name "customer3.invalid" %}
     <p>
@@ -26,7 +23,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
     </p>
 {% endifequal %}
 
-    <p>You're almost there. We just need you to do one last thing.</p>
+    <p style="margin-top:30px;">You're almost there. We just need you to do one last thing.</p>
     <h3>Tell us a bit about yourself.</h3>
 </div>
 

templates/zerver/signup.html

@@ -7,20 +7,14 @@
     {% minified_js 'landing-page' %}
 {% endblock %}
 
-{% block inner_content %}
-<div class="row-fluid shaded-background landing-page">
-  <div class="content">
-    <div class="span12 main-headline">
+{% block portico_content %}
+    <div class="signup-header">
       <h1>Sign up now!</h1>
-      <h4>Zulip is currently in closed beta, but we're constantly
+      <h4>Zulip is currently in closed beta,<br>but we're constantly
         adding new beta customer sites.</h4>
     </div>
-  </div>
-</div>
 
-<div class="row-fluid shaded-background landing-page-bottom">
-  <div class="content">
-    <div class="span6 offset3" id="envelope-holder">
+    <div class="signup-envelope-area">
       <div id="success" class="alert alert-hidden alert-success alert-block">
         <h4>Success!</h4>
         Thank you for your interest. We'll be in touch soon.
@@ -38,46 +32,38 @@
       </div>
 
       <div class="postal-envelope">
-        <div class="postal-stripes"></div>
-        <div class="stamp pull-right">
-          <div class="date">{% now "b j" %}<br />{% now "Y" %}</div>
+        <div class="paravion"></div>
+        <div class="stamp">
+          <div class="date">{% now "b d" %}<br />{% now "Y" %}</div>
         </div>
-        <span class="par-avion">PAR COURRIER ELECTRONIQUE</span>
         <form method="post" class="letter-form" id="beta-user-form" action="{% url 'beta-signup-submission' %}">
           {% csrf_token %}
           <p>&nbsp;</p>
-          <p>Hi Zulips,</p>
+          <p>Hello Zukeepers,</p>
 
           <p>My name is <input class="input-medium" type="text"
-          id="name" name="name" placeholder="Wolfgang A. Mozart" />, and
+          id="name" name="name" placeholder="Wolfgang A. Mozart" /><span class="punc">,</span> and
           you can email me at <input class="input-large" type="email"
           id="email" name="email"
-          placeholder="w.a.mozart@magicflute.com" />.
+          placeholder="w.a.mozart@magicflute.com" /><span class="punc">.</span>
 
 
           <p>I work at <input class="input-large" type="text"
-          name="company" id="company" placeholder="Salzburg Court" />,
-          and I wanted to try Zulip. There are
+          name="company" id="company" placeholder="Salzburg Court" /><span class="punc">,</span>
+          and I wanted to try Zulip. <span class="signup-section">There are
           about <input class="input-mini" type="text" id="count"
           name="count" placeholder="10" /> of us, and today we use
           <input class="input-small" type="text" id="product"
-          name="product" placeholder="IRC" /> to chat.</p>
+          name="product" placeholder="IRC" /> to chat.</p></span>
 
-          <p>I'm looking forward to it!</p>
-
-          <button type="submit" id="beta-signup" class="btn btn-large btn-info">Sign up</button>
+          <div class="signup-signature">
+             <p>I'm looking forward to it!</p>
+             <button type="submit" id="beta-signup" class="btn btn-large btn-info">Sign up</button>
+          </div>
         </form>
-        <div class="postal-stripes"></div>
       </div>
     </div>
-  </div>
-</div>
-
-<div class="row-fluid shaded-background landing-page-bottom">
-  <div class="content">
-    <div class="span6 offset3 muted">
+    <div class="signup-page-bottom">
       Does your company already use Zulip? <a href="{% url 'register' %}">Register your account here</a>.
-  </div>
-  </div>
-</div>
-{% endblock %}
+    </div>
+{% endblock %}

templates/zerver/terms.html

@@ -4,12 +4,11 @@
 
 {% block portico_content %}
 
-<div class="row">
-<div class="span10">
+<div class="app terms-page">
+  <div class="app-main terms-page-container">
 
 <h1>Zulip Terms of Service</h1>
 
-
 <h3>Welcome to Zulip!</h3>
 
 <p>Thanks for using our products and services (“Services”). The Services are

templates/zerver/what-is-humbug.html

@@ -3,13 +3,10 @@
 {# A brief "What is Humbug?" explanation page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
+
+    <h1 style="margin-top:30px;">Zulip</h1>
     <p class="lead">The group communication product you've always wanted.</p>
-    <ul class="breadcrumb">
-      <li><a href="/">Home</a> <span class="divider">/</span></li>
-      <li class="active">What is Zulip?</li>
-    </ul>
+
     <p>Email. We all get too much of it.</p>
 
     <p>Why? Because there really isn't anything better out there

templates/zerver/zephyr-mirror.html

@@ -3,9 +3,7 @@
 {# Zephyr Mirroring information page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h2>The Zephyr mirror script (not recommended)</h2>
+    <h1 style="margin-top:30px;">The Zephyr mirror script (not recommended)</h1>
 
 <p>Webathena is the easiest way to use Zulip.  With Webathena, you don't need
 to run any software in a screen session.  Your Athena password never leaves

templates/zerver/zephyr.html

@@ -3,9 +3,7 @@
 {# Zephyr Mirroring information page #}
 
 {% block portico_content %}
-<div class="row-fluid">
-  <div class="span8">
-    <h2>Zulip for MIT Zephyr</h2>
+    <h1 style="margin-top:30px;">Zulip for MIT Zephyr</h1>
 
 <p>If you have an MIT Athena account, you can start using Zulip for Zephyr in a couple of minutes.</p>