portico: Redesign /why-zulip and /for/ open-source to be more readable.

This redesigns these pages to be more readable and more in line with
the rest of the portico page styling.

static/styles/landing-page.css

@@ -243,6 +243,10 @@ nav .hamburger {
     margin-top: 3px;
 }
 
+nav.white .hamburger {
+    fill: #444;
+}
+
 nav .content {
     margin: 0 5px 0 10px;
     position: relative;
@@ -265,6 +269,10 @@ nav .logo span {
     letter-spacing: 0.1em;
 }
 
+nav.white .brand.logo span {
+    color: #444;
+}
+
 nav .brand-logo {
     width: 25px;
 }
@@ -338,6 +346,13 @@ nav ul li.active::after {
     z-index: 1;
 }
 
+.portico-landing.no-slide {
+    -webkit-transform: translateY(0px);
+    transform: translateY(0px);
+
+    opacity: 1;
+}
+
 .portico-landing.show {
     -webkit-transform: translateY(0px);
     transform: translateY(0px);
@@ -1589,6 +1604,59 @@ nav ul li.active::after {
     width: 195px;
 }
 
+/* -- /for/open-source/ -- */
+.portico-landing.why-page {
+    padding-top: 0px;
+}
+
+.portico-landing.why-page .main {
+    max-width: 900px;
+}
+
+.portico-landing.why-page .hero {
+    padding: 200px 50px 100px 50px;
+
+
+    background: #69b190;
+    color: #fff;
+}
+
+.portico-landing.why-page .hero h1 {
+    margin: 0px 0px 20px 0px;
+
+    font-size: 3.5em;
+    font-weight: 300;
+}
+
+.portico-landing.why-page .hero p {
+    width: 70%;
+    max-width: 700px;
+    margin: 0 auto;
+
+    font-size: 1.3em;
+    text-align: center;
+
+    opacity: 0.7;
+}
+
+.portico-landing.why-page .main .inner-content h2 {
+    margin-top: 30px;
+    margin-bottom: 10px;
+}
+
+.portico-landing.why-page .main li {
+    color: #555;
+}
+
+.portico-landing.why-page .main li p {
+    line-height: 1.8;
+}
+
+.portico-landing.why-page .main li strong {
+    font-weight: 600;
+    color: #333;
+}
+
 .portico-landing.hello .apps .screen {
     display: inline-block;
     margin: 0px 10px;
@@ -2044,6 +2112,10 @@ nav ul li.active::after {
         padding-bottom: 110px;
     }
 
+    nav.white {
+        padding-bottom: 40px;
+    }
+
     .portico-landing {
         padding-top: 170px;
     }
@@ -2221,6 +2293,10 @@ nav ul li.active::after {
     .portico-landing.integrations .integration-lozenges {
         text-align: center;
     }
+
+    .portico-landing.why-page .hero p br {
+        display: none;
+    }
 }
 
 @media (max-width: 830px) {
@@ -2266,6 +2342,29 @@ nav ul li.active::after {
         margin-right: 50px;
     }
 
+    .portico-landing.why-page .main {
+        width: auto;
+        margin: 0px;
+    }
+
+    .portico-landing.why-page .hero {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    .portico-landing.why-page .hero {
+        font-size: 0.6em;
+    }
+
+    .portico-landing.why-page .hero p {
+        font-size: 2em;
+        width: 100%;
+    }
+
+    .portico-landing.why-page .padded-content {
+        padding: 50px 20px;
+    }
+
     #integration-instruction-block .integration-lozenge {
         display: none !important;
     }

templates/zerver/for-open-source.html

@@ -18,11 +18,13 @@
 
 {% include 'zerver/landing_nav.html' %}
 
-<div class="portico-landing apps">
+<div class="portico-landing why-page no-slide">
+    <div class="hero">
+        <h1 class="center">{% trans %}The best choice for open source projects{% endtrans %}</h1>
+        <p>A great open source project needs a great group chat service.<br /> Here's
+        why we think Zulip is the best choice you can make today.</p>
+    </div>
     <div class="main">
-        <div class="padded-content headline">
-            <h1 class="center">{% trans %}The best choice for open source projects{% endtrans %}</h1>
-        </div>
         <div class="padded-content">
             <div class="inner-content">
                 {{ 'zerver/for/open-source.md'|render_markdown_path }}

templates/zerver/for/open-source.md

@@ -1,10 +1,3 @@
-A great open source project needs a great group chat service.  Here's
-why we think Zulip is the best choice you can make today.
-
-(Psst, I'll spoil the ending: not only is Zulip itself open source,
-but hosting on zulipchat.com is free for open source projects.
-[Sign up now](https://zulipchat.com/beta/)!)
-
 ## Great for developers
 
 * **Format code as code:** Messages take Markdown formatting,

templates/zerver/why-zulip.html

@@ -18,11 +18,11 @@
 
 {% include 'zerver/landing_nav.html' %}
 
-<div class="portico-landing apps">
+<div class="portico-landing why-page no-slide">
+    <div class="hero">
+        <h1 class="center">{% trans %}Why Zulip?{% endtrans %}</h1>
+    </div>
     <div class="main">
-        <div class="padded-content headline">
-            <h1 class="center">{% trans %}Why Zulip?{% endtrans %}</h1>
-        </div>
         <div class="padded-content">
             <div class="inner-content">
                 {{ 'zerver/why-zulip.md'|render_markdown_path }}