landing_page: Restructure bottom navigation.

We recently added a lot of new pages to our top navigation and
restructured top-navigation in general. This commit updates the
footer to reflect the recent changes to our top navigation.
This commit is contained in:
Eeshan Garg
2021-07-27 15:12:18 -02:30
committed by Tim Abbott
parent 720b034095
commit 967db85201
4 changed files with 132 additions and 62 deletions

View File

@@ -2051,7 +2051,7 @@ nav {
}
.portico-landing.hello .call-to-action-bottom .zulip-octopus {
margin: 130px auto 0 auto;
margin: 15px auto 130px auto;
width: 32px;
height: 30px;
background-image: url(../../images/landing-page/zulip-octopus.png);
@@ -2060,10 +2060,6 @@ nav {
filter: invert(0.9);
}
.footer.hello {
display: block;
}
.footer.hello li a {
color: hsl(220, 15%, 76%);
}

View File

@@ -504,11 +504,17 @@ input.text-error {
/* -- new footer -- */
.footer {
margin: 20px;
margin: 0;
z-index: 100;
width: calc(100% - 40px);
width: calc(100%);
text-align: center;
font-size: 0.9em;
font-size: 16px;
background-color: hsl(33, 34%, 96%);
display: grid;
grid-template-columns: repeat(4, max-content);
justify-content: center;
padding-top: 50px;
padding-bottom: 50px;
.footer-navigation {
margin-left: 0;
@@ -519,11 +525,9 @@ input.text-error {
color: inherit !important;
}
section {
width: calc(25% - 40px);
.footer-section {
margin: 0 20px;
max-width: 150px;
display: inline-block;
max-width: max-content;
vertical-align: top;
text-align: left;
@@ -536,7 +540,7 @@ input.text-error {
}
ul {
color: hsl(0, 0%, 67%);
color: hsl(0, 0%, 40%);
list-style-type: none;
margin-left: 0;
font-weight: 400;
@@ -1446,13 +1450,10 @@ input.new-organization-button {
@media (width <= 815px) {
.footer {
width: 450px;
width: 100%;
margin-left: auto;
margin-right: auto;
section {
width: calc(50% - 40px);
}
grid-template-columns: repeat(2, max-content);
}
}
@@ -1571,22 +1572,11 @@ input.new-organization-button {
padding-left: 6px;
padding-right: 6px;
}
}
@media (width <= 475px) {
.footer {
width: auto;
grid-template-columns: repeat(1, max-content);
section {
margin: 0 3px;
width: calc(50% - 8px);
}
}
}
@media (width <= 400px) {
.footer {
section {
.footer-section {
width: calc(100% - 40px);
max-width: none;
text-align: center;

View File

@@ -1,55 +1,136 @@
<div class="footer">
<section>
<h3>{{ _("About Zulip") }}</h3>
<div class="footer-section">
<h3>{{ _("Product") }}</h3>
<ul>
<li><a href="/">{{ _("Home") }}</a></li>
<li><a href="/why-zulip/">{{ _("Why Zulip") }}</a></li>
<li><a href="/features/">{{ _("Features") }}</a></li>
<li><a href="/plans/">{{ _("Plans &amp; pricing") }}</a></li>
<li><a href="/team/">{{ _("Team") }}</a> and <a href="/history/">{{ _("History") }}</a></li>
<li><a href="/apps/">{{ _("Desktop &amp; mobile apps") }}</a></li>
<li><a href="/security/">{{ _("Security") }}</a></li>
<li><a href="/integrations/">{{ _("Integrations") }}</a></li>
</ul>
</section>
<section>
<h3>{{ _("Help &amp; community") }}</h3>
</div>
<div class="footer-section">
<h3>{{ _("Solutions") }}</h3>
<ul>
<li><a href="/developer-community/">{{ _("Community chat") }}</a></li>
<li><a href="/help/">{{ _("Help center") }}</a></li>
<li><a href="https://twitter.com/zulip/">Twitter</a> &amp; <a href="https://blog.zulip.org">Blog</a></li>
<li><a href="https://github.com/zulip/zulip/">GitHub</a>
&amp; <a href="https://zulip.readthedocs.io/en/latest/">ReadTheDocs</a></li>
<li><a href="{{ root_domain_uri }}/help/contact-support">{{ _("Support") }}</a></li>
<li>
<a href="/for/companies/">{{ _("Companies") }}</a>
</li>
<li>
<a href="/for/open-source/">{{ _("Open source projects") }}</a>
</li>
<li>
<a href="/for/education/">{{ _("Education") }}</a>
</li>
<li>
<a href="/for/events/">{{ _("Events and conferences") }}</a>
</li>
<li>
<a href="/for/research/">{{ _("Research") }}</a>
</li>
<li>
<a href="/for/communities/">{{ _("Communities") }}</a>
</li>
</ul>
</section>
<section>
</div>
<div class="footer-section">
<h3>{{ _("Customer stories") }}</h3>
<ul>
<li>
<a href="/case-studies/tum/">{{ _("Technical University of Munich") }}</a>
</li>
<li>
<a href="/case-studies/ucsd/">{{ _("University of California San Diego") }}</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("Accounts") }}</h3>
<ul>
{% if find_team_link_disabled %}
{% else %}
<li><a href="{{ root_domain_uri }}/accounts/find">{{ _("Find account") }}</a></li>
<li><a href="{{ root_domain_uri }}/accounts/find">{{ _("Find accounts") }}</a></li>
{% endif %}
{% if open_realm_creation %}
<li><a href="{{ root_domain_uri }}/new/">{{ _("New organization") }}</a></li>
{% endif %}
{% if login_link_disabled %}
{% else %}
<li><a href="{{ login_url }}">{{ _("Log in") }}</a></li>
{% endif %}
{% if register_link_disabled %}
{% elif only_sso %}
{% else %}
<li><a href="{{ url('register') }}">{{ _("Sign up") }}</a></li>
{% endif %}
<li><a href="{{ root_domain_uri }}/terms/">{{ _("Terms of Service") }}</a></li>
<li><a href="{{ root_domain_uri }}/privacy/">{{ _("Privacy policy") }}</a></li>
</ul>
</section>
<section>
<h3>{{ _("Apps &amp; integrations") }}</h3>
</div>
<div class="footer-section">
<h3>{{ _("For users") }}</h3>
<ul>
<li><a href="/apps/">{{ _("Desktop &amp; mobile apps") }}</a></li>
<li><a href="/integrations/">{{ _("Integrations") }}</a></li>
{# Interactive bots would go here? #}
<li>
<a href="/help/getting-started-with-zulip">{{ _("Getting started") }}</a>
</li>
<li>
<a href="/help">{{ _("Help center") }}</a>
</li>
<li>
<a href="/developer-community/" target=”_blank”>
{{ _("Community chat") }}
</a>
</li>
<li>
<a href="/help/contact-support">{{ _("Contact support") }}</a>
</li>
<li>
<a href="https://blog.zulip.com/">{{ _("Blog") }}</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("For administrators") }}</h3>
<ul>
<li>
<a href="/help/getting-your-organization-started-with-zulip">
{{ _("Setting up your organization") }}
</a>
</li>
<li>
<a href="https://zulip.readthedocs.io/en/stable/production/install.html">
{{ _("Installing a Zulip server") }}
</a>
</li>
<li>
<a href="https://zulip.readthedocs.io/en/stable/production/upgrade-or-modify.html">
{{ _("Upgrading a Zulip server") }}
</a>
</li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/production/upgrade-or-modify.html#modifying-zulip">
{{ _("Modifying Zulip") }}
</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>{{ _("For contributors") }}</h3>
<ul>
<li><a href="https://github.com/zulip/zulip/">{{ _("GitHub") }}</a></li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/overview/contributing.html">
{{ _("Contributing to Zulip") }}
</a>
</li>
<li><a href="/developer-community/">{{ _("Development community") }}</a></li>
<li>
<a href="https://zulip.readthedocs.io/en/latest/translating/translating.html">
{{ _("Translation") }}
</a>
</li>
<li><a href="/api/">REST API</a></li>
</ul>
</section>
</div>
<div class="footer-section">
<h3>{{ _("About us") }}</h3>
<ul>
<li><a href="/team/">{{ _("Team") }}</a> &amp; <a href="/history/">{{ _("History") }}</a></li>
<li><a href="/jobs/">{{ _("Jobs") }}</a></li>
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
<li><a href="https://github.com/sponsors/zulip">{{ _("Sponsor Zulip") }}</a></li>
</ul>
</div>
</div>

View File

@@ -159,6 +159,9 @@ IGNORED_PHRASES = [
# Used in GIPHY popover.
r"GIFs",
r"GIPHY",
# Used in our case studies
r"Technical University of Munich",
r"University of California San Diego",
]
# Sort regexes in descending order of their lengths. As a result, the