portico-pages: Fix flex height issues with content.

This fixes the existing issue where the titles of content is chopped
off when the screen height is too small.

static/styles/landing-page.css

@@ -868,7 +868,7 @@ a:not(.no-style):hover:before {
     }
 
     .features-app .main {
-        margin: 0px auto 20px;
+        margin: 0px auto;
         width: calc(100% - 40px);
     }
 

static/styles/portico-signin.css

@@ -126,7 +126,6 @@ html {
 
 .forgot-password-container {
     width: 503px;
-    margin-top: calc(50vh - 150px);
 }
 
 .forgot-password-container form {
@@ -348,7 +347,20 @@ html {
     color: #444;
 }
 
-.new-style .input-box .text-error {
+.new-style .input-box p.text-error {
+    display: block;
+    padding: 0px;
+
+    color: #d26666;
+    font-size: 0.7em;
+    font-weight: 600;
+    height: 0;
+
+    position: relative;
+    top: -4px;
+}
+
+.new-style .input-box label.text-error {
     display: block;
 
     top: 66px;
@@ -360,14 +372,9 @@ html {
 }
 
 .new-style .get-started {
-    height: 0px;
-    margin: 0px;
-
     font-size: 2.5rem;
     text-align: center;
     color: #666;
-
-    transform: translateY(-90px);
 }
 
 .new-style button {
@@ -654,6 +661,8 @@ button.login-google-button {
 .split-view .left-side {
     width: 500px;
     border-right: 1px solid #eee;
+    position: relative;
+    left: -1px;
 }
 
 .split-view .left-side + .right-side {
@@ -742,10 +751,6 @@ button.login-google-button {
     .split-view .right-side {
         width: 324px;
     }
-
-    .new-style .get-started {
-        transform: translateY(-70px);
-    }
 }
 
 @media (max-width: 500px) {

static/styles/portico.css

@@ -276,8 +276,7 @@ img.screenshot {
 
 #registration #pw_strength {
     width: 325px;
-    height: 8px;
-    margin: -5px 0 0 0;
+    margin-top: 20px;
 }
 
 .def:before {
@@ -1233,7 +1232,7 @@ input.new-organization-button {
 
 .markdown {
     max-width: 800px;
-    margin: 20px auto;
+    margin: 20px auto 0px auto;
     padding: 20px;
 
     font-weight: 400;

templates/zerver/accounts_home.html

@@ -11,12 +11,13 @@ $(function () {
 </script>
 <div class="bg-image"></div>
 
-<div class="app register-page split-view flex full-page">
-    <div class="app-main register-page-container">
-        <div class="register-form new-style">
+<div class="app register-page split-view flex full-page new-style">
+    <div class="inline-block">
         <div class="lead">
             <h1 class="get-started">{{ _("Sign up for Zulip") }}</h1>
         </div>
+        <div class="app-main register-page-container">
+            <div class="register-form new-style">
                 {% if realm_name %}
                 <div class="left-side">
                     <div class="org-header">
@@ -74,7 +75,7 @@ $(function () {
                     </div>
                     {% endif %}
                     {% endif %}
-
+                </div>
             </div>
         </div>
     </div>

templates/zerver/find_my_team.html

@@ -4,8 +4,12 @@
 <div class="bg-image"></div>
 
 <div class="app find-team-page flex full-page">
-    <div class="app-main find-team-page-container new-style">
-        <h3 class="get-started">{{ _("Find your team") }}…</h3>
+    <div class="inline-block new-style">
+        <div class="lead">
+            <h1 class="get-started">{{ _("Find your team") }}…</h1>
+        </div>
+
+        <div class="app-main find-team-page-container">
             {% if emails %}
             <div id="results">
                 <p>
@@ -56,5 +60,6 @@
             </div>
             {% endif %}
         </div>
+    </div>
 </div>
 {% endblock %}

templates/zerver/login.html

@@ -41,10 +41,12 @@ autofocus('#id_username');
 
 
 <div class="app login-page split-view new-style flex full-page">
-    <div class="app-main login-page-container inline-block">
+    <div class="inline-block">
         <div class="lead">
             <h1 class="get-started">{{ _("Sign in to Zulip") }}</h1>
         </div>
+
+        <div class="app-main login-page-container inline-block">
             {% if only_sso %}
             {# SSO users don't have a password. #}
 
@@ -161,6 +163,7 @@ autofocus('#id_username');
             </div>
             {% endif %}
         </div>
+    </div>
     <div class="footer-padder"></div>
 </div>
 <script type="text/javascript">

templates/zerver/register.html

@@ -78,7 +78,7 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
             <div class="help-inline text-error">{{ error }}</div>
             {% endfor %}
             {% endif %}
-            <br />
+
             <div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
                 <div class="bar bar-danger" style="width: 10%;"></div>
             </div>

templates/zerver/reset.html

@@ -2,13 +2,16 @@
 {% block portico_content %}
 
 <div class="bg-image"></div>
-<div class="app-main forgot-password-container new-style">
-    <div class="bg-image"></div>
 
+<div class="flex new-style app portico-page">
+    <div class="inline-block">
         <div class="lead">
-        <h3 class="get-started">{{ _('Reset your password') }}</h3>
+            <h1 class="get-started">{{ _('Reset your password') }}</h1>
         </div>
 
+        <div class="app-main forgot-password-container new-style">
+            <div class="bg-image"></div>
+
             <p>Forgot your password? No problem, we'll send a link to reset your password to the email you signed up with.</p>
 
             <form method="post" class="form-horizontal" action="{{ url('django.contrib.auth.views.password_reset') }}">
@@ -33,6 +36,8 @@
                     </div>
                 </div>
             </form>
+        </div>
+    </div>
 </div>
 
 <script type="text/javascript">