mirror of https://github.com/zulip/zulip.git
footer: Integrate newly designed footer.
This footer was designed and mostly written by @terpimost. This adds a new design of the footer for both corporate and not corporate enabled pages.
This commit is contained in:
Aman Agrawal
Tim Abbott
parent
e8cefe181a
commit
dbe930394f
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
|
||||
<div class="feature-end">
|
||||
<div class="bottom-register-buttons">
|
||||
<div class="bottom-register-buttons extra_margin_before_footer">
|
||||
<h1>
|
||||
Join today!
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-register-buttons">
|
||||
<div class="bottom-register-buttons extra_margin_before_footer">
|
||||
<h1>
|
||||
Most communities get an 85%+ discount on <a href="/plans">Zulip Cloud Standard</a>!
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -708,7 +708,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="bottom-register-buttons">
|
||||
<div class="bottom-register-buttons extra_margin_before_footer">
|
||||
<h1>
|
||||
<a href="/plans">Zulip Cloud Standard</a> is free for open-source projects!
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -392,7 +392,7 @@
|
|||
</div>
|
||||
|
||||
<div class="feature-end">
|
||||
<div class="bottom-register-buttons">
|
||||
<div class="bottom-register-buttons extra_margin_before_footer">
|
||||
<h1>
|
||||
<a href="/plans">Zulip Cloud Standard</a> is free for
|
||||
academic research!
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
{{ render_markdown_path(article, context=api_uri_context, pure_markdown=True) }}
|
||||
{% endif %}
|
||||
|
||||
<div id="footer" class="documentation-footer">
|
||||
<div class="documentation-footer">
|
||||
<hr />
|
||||
{% if corporate_enabled %}
|
||||
{% if page_is_policy_center %}
|
||||
|
|
|
|||
|
|
@ -1,186 +1,118 @@
|
|||
{% if corporate_enabled %}
|
||||
<div class="footer">
|
||||
<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 & pricing") }}</a></li>
|
||||
<li><a href="/self-hosting/">{{ _("Self-hosting") }}</a></li>
|
||||
<li><a href="/apps/">{{ _("Desktop & mobile apps") }}</a></li>
|
||||
<li><a href="/security/">{{ _("Security") }}</a></li>
|
||||
<li><a href="/integrations/">{{ _("Integrations") }}</a></li>
|
||||
</ul>
|
||||
<footer id="footer">
|
||||
{% if corporate_enabled %}
|
||||
<div class='footer__container'>
|
||||
<div class="footer__section">
|
||||
<h3 class="footer__section-title">
|
||||
{{ _("Product") }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li><a href="/why-zulip/">{{ _("Why Zulip") }}</a></li>
|
||||
<li><a href="/features/">{{ _("Features") }}</a></li>
|
||||
<li><a href="/plans/">{{ _("Plans & pricing") }}</a></li>
|
||||
<li><a href="/self-hosting/">{{ _("Self-hosting") }}</a></li>
|
||||
<li><a href="/security/">{{ _("Security") }}</a></li>
|
||||
<li><a href="/integrations/">{{ _("Integrations") }}</a></li>
|
||||
<li class="extra_margin"><a href="/apps/">{{ _("Desktop & mobile apps") }}</a></li>
|
||||
<li><a href="/new/">{{ _("New organization") }}</a></li>
|
||||
<li><a href="/accounts/go/">{{ _("Log in") }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__section">
|
||||
<h3 class="footer__section-title">
|
||||
{{ _("Solutions") }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li><a href="/for/business/">{{ _("Business") }}</a></li>
|
||||
<li><a href="/for/education/">{{ _("Education") }}</a></li>
|
||||
<li><a href="/for/research/">{{ _("Research") }}</a></li>
|
||||
<li><a href="/for/events/">{{ _("Events & conferences") }}</a></li>
|
||||
<li><a href="/for/open-source/">{{ _("Open source projects") }}</a></li>
|
||||
<li class="extra_margin"><a href="/for/communities/">{{ _("Communities") }}</a></li>
|
||||
<li><a href="/use-cases/">{{ _("Customer stories") }}</a></li>
|
||||
<li><a href="/communities/">{{ _("Open communities") }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__section">
|
||||
<h3 class="footer__section-title">
|
||||
{{ _("Resources") }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li><a href="/help/getting-started-with-zulip">{{ _("Getting started") }}</a></li>
|
||||
<li><a href="/help">{{ _("Help center") }}</a></li>
|
||||
<li><a href="/development-community/" target="_blank">{{ _("Community chat") }}</a></li>
|
||||
<li class="extra_margin"><a href="/help/contact-support">{{ _("Contact support") }}</a></li>
|
||||
<li>
|
||||
<a href="/help/getting-your-organization-started-with-zulip">
|
||||
{{ _("Organization set up") }}
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__section">
|
||||
<h3 class="footer__section-title">
|
||||
{{ _("Contributing") }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://zulip.readthedocs.io/en/latest/contributing/contributing.html">
|
||||
{{ _("Contributing guide") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/development-community/">{{ _("Development community") }}</a></li>
|
||||
<li>
|
||||
<a href="https://zulip.readthedocs.io/en/latest/translating/translating.html">
|
||||
{{ _("Translation") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/api/">API</a></li>
|
||||
<li><a href="https://github.com/zulip/zulip/">{{ _("GitHub") }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__section">
|
||||
<h3 class="footer__section-title">
|
||||
{{ _("About us") }}
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/team/">{{ _("Team") }}</a>
|
||||
&
|
||||
<a href="/history/">{{ _("History") }}</a>
|
||||
</li>
|
||||
<li><a href="/values/">{{ _("Values") }}</a></li>
|
||||
<li><a href="/jobs/">{{ _("Jobs") }}</a></li>
|
||||
<li><a href="https://blog.zulip.com/" target="_blank">{{ _("Blog") }}</a></li>
|
||||
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
|
||||
<li><a href="https://zulip.com/help/support-zulip-project">{{ _("Support Zulip") }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>{{ _("Solutions") }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/for/business/">{{ _("Business") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/for/education/">{{ _("Education") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/for/research/">{{ _("Research") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/for/events/">{{ _("Events and conferences") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/for/open-source/">{{ _("Open source projects") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/for/communities/">{{ _("Communities") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>{{ _("Customer stories") }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/case-studies/idrift/">iDrift AS {{ _("Company") }}</a>
|
||||
</li>
|
||||
<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>
|
||||
<li>
|
||||
<a href="/case-studies/lean/">{{ _("Lean theorem prover community") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/case-studies/asciidoctor/">{{ _("Asciidoctor open-source community") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/case-studies/rust/">{{ _("Rust language community") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/case-studies/recurse-center/">Recurse Center</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/communities/">{{ _("Open communities directory") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>{{ _("Accounts") }}</h3>
|
||||
<ul>
|
||||
{% if find_team_link_disabled %}
|
||||
{% endif %}
|
||||
<div class="footer__legal {% if not corporate_enabled %}footer__legal_not_corporate{% endif %}">
|
||||
<div class="footer__legal-container">
|
||||
{% if corporate_enabled %}
|
||||
<div class="copyright">© Kandra Labs, Inc. (“Zulip”)</div>
|
||||
{% else %}
|
||||
<li><a href="{{ root_domain_uri }}/accounts/find">{{ _("Find accounts") }}</a></li>
|
||||
<div class="copyright">{% trans %}Powered by <a href="https://zulip.com">Zulip</a>{% endtrans %}</div>
|
||||
{% endif %}
|
||||
{% if open_realm_creation %}
|
||||
<li><a href="{{ root_domain_uri }}/new/">{{ _("New organization") }}</a></li>
|
||||
<div class="footer__legal-spacer"></div>
|
||||
{% if not corporate_enabled %}
|
||||
<a href="/help">{{ _("Help center") }}</a>
|
||||
{% 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>
|
||||
<a href="{{ root_domain_uri }}/terms/">{{ _("Terms of Service") }}</a>
|
||||
<a href="{{ root_domain_uri }}/privacy/">{{ _("Privacy policy") }}</a>
|
||||
{% if corporate_enabled %}
|
||||
<a href="https://zulip.com/attribution/">{{ _("Website attributions") }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>{{ _("For users") }}</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/help/getting-started-with-zulip">{{ _("Getting started") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/help">{{ _("Help center") }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/development-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/contributing/contributing.html">
|
||||
{{ _("Contributing guide") }}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="/development-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>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h3>{{ _("About us") }}</h3>
|
||||
<ul>
|
||||
<li><a href="/team/">{{ _("Team") }}</a> & <a href="/history/">{{ _("History") }}</a></li>
|
||||
<li><a href="/values/">{{ _("Values") }}</a></li>
|
||||
<li><a href="https://twitter.com/zulip/">Twitter</a></li>
|
||||
<li><a href="/jobs/">{{ _("Jobs") }}</a></li>
|
||||
<li><a href="/attribution">{{ _("Website attributions") }}</a></li>
|
||||
<li><a href="https://github.com/sponsors/zulip">{{ _("Sponsor Zulip") }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="footer self-hosted-footer">
|
||||
<div class="footer-section">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/help">{{ _("Help center") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/policies">{{ _("Policies") }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="break"></div>
|
||||
<div class="footer-section powered-by-zulip">
|
||||
<ul>
|
||||
<li>
|
||||
{% trans %}
|
||||
Powered by <a href="https://zulip.com" class="coloured-text">Zulip</a>
|
||||
{% endtrans %}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@ export function path_parts() {
|
|||
return window.location.pathname.split("/").filter((chunk) => chunk !== "");
|
||||
}
|
||||
|
||||
const hello_events = function () {
|
||||
$(".footer").addClass("hello");
|
||||
};
|
||||
|
||||
const apps_events = function () {
|
||||
const info = {
|
||||
windows: {
|
||||
|
|
@ -158,10 +154,6 @@ const events = function () {
|
|||
if (path_parts().includes("apps")) {
|
||||
apps_events();
|
||||
}
|
||||
|
||||
if (path_parts().includes("hello")) {
|
||||
hello_events();
|
||||
}
|
||||
};
|
||||
|
||||
$(() => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,182 @@
|
|||
:root {
|
||||
--color-footer-background: hsl(238, 28%, 27%);
|
||||
--color-links: hsl(238, 100%, 82%);
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--color-footer-background: hsl(238, 28%, 21%);
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
background: var(--color-footer-background);
|
||||
box-sizing: border-box;
|
||||
|
||||
ul {
|
||||
/* Override bootstrap defaults */
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer__container {
|
||||
max-width: 1132px;
|
||||
padding: 52px 52px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer__section {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer__section-title {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 133%;
|
||||
letter-spacing: 0.1em;
|
||||
color: hsl(0, 0%, 100%);
|
||||
opacity: 0.8;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer__section ul {
|
||||
margin: 28px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
color: var(--color-links);
|
||||
border-bottom: 1px solid var(--color-footer-background);
|
||||
transition: border 0.4s ease-out;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: var(--color-links);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-links);
|
||||
border-bottom: 1px solid var(--color-links);
|
||||
transition: none;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.footer__legal {
|
||||
margin: 24px 0 5px;
|
||||
padding: 0 52px;
|
||||
border-top: 1px solid hsl(0, 0%, 100%, 0.1);
|
||||
|
||||
a {
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--color-footer-background);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid var(--color-links);
|
||||
}
|
||||
}
|
||||
|
||||
&.footer__legal_not_corporate {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__legal-container {
|
||||
max-width: 1132px;
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto;
|
||||
|
||||
box-sizing: border-box;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer__legal-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.footer__legal-container .copyright {
|
||||
color: hsl(0, 0%, 100%, 0.5);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.footer__legal-container a {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.footer__legal-container a:not(:last-child) {
|
||||
margin-right: 2em;
|
||||
}
|
||||
|
||||
.footer__section .extra_margin {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* #footer responsivity and global fixes */
|
||||
@media (max-width: 940px) {
|
||||
.footer__container {
|
||||
justify-content: flex-start;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.footer__legal-container {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.footer__legal {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.footer__legal-spacer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer__legal-container {
|
||||
column-gap: 20px;
|
||||
justify-content: center;
|
||||
|
||||
a:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.footer__container {
|
||||
gap: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer__section .extra_margin {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1952,14 +1952,6 @@ nav {
|
|||
filter: invert(0.9);
|
||||
}
|
||||
|
||||
.footer.hello li a {
|
||||
color: hsl(220, 15%, 76%);
|
||||
}
|
||||
|
||||
.footer.hello li a:hover {
|
||||
color: hsl(0, 0%, 100%);
|
||||
}
|
||||
|
||||
/* -- apps page -- */
|
||||
.portico-landing.apps {
|
||||
padding-top: 0;
|
||||
|
|
@ -3607,10 +3599,6 @@ nav {
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* the gradients leave the bottom of the text and the button white so we
|
||||
want to have the gradients stay darker for longer.
|
||||
*/
|
||||
|
|
@ -3964,6 +3952,10 @@ nav {
|
|||
|
||||
.case-study-page,
|
||||
.solutions-page {
|
||||
.bottom-register-buttons.extra_margin_before_footer {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
|
|
|
|||
|
|
@ -364,10 +364,6 @@ input.text-error {
|
|||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.if-zulip-electron {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -378,91 +374,6 @@ input.text-error {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* -- new footer -- */
|
||||
.footer {
|
||||
margin: 0;
|
||||
z-index: 100;
|
||||
width: calc(100%);
|
||||
text-align: center;
|
||||
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;
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
margin: 0 20px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
/* 20-22vw for fitting content in the 4 column grid layout. We
|
||||
need to set max-width so to avoid content overflow in different
|
||||
languagues on different widths. */
|
||||
max-width: 21vw;
|
||||
|
||||
@media (width < 1200px) {
|
||||
ul li {
|
||||
text-indent: -5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
color: hsl(0, 0%, 40%);
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.coloured-text {
|
||||
color: hsl(0, 0%, 20%);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.self-hosted-footer {
|
||||
padding: 20px 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.break {
|
||||
flex-basis: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.powered-by-zulip {
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
opacity: 0.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
padding-bottom: 5px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- end new footer -- */
|
||||
|
||||
.header-main {
|
||||
.logo {
|
||||
display: block;
|
||||
|
|
@ -1171,20 +1082,6 @@ input.new-organization-button {
|
|||
}
|
||||
}
|
||||
|
||||
@media (width <= 815px) {
|
||||
.footer {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
|
||||
.footer-section {
|
||||
/* 40vw to fit content in 2 grid columns. */
|
||||
max-width: 40vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 767px) {
|
||||
body {
|
||||
padding: 0 !important;
|
||||
|
|
@ -1270,16 +1167,6 @@ input.new-organization-button {
|
|||
max-width: 100vw;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-template-columns: repeat(1, max-content);
|
||||
|
||||
.footer-section {
|
||||
width: calc(100% - 40px);
|
||||
max-width: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@
|
|||
@import url("portico.css");
|
||||
@import url("portico_signin.css");
|
||||
@import url("markdown.css");
|
||||
@import url("footer.css");
|
||||
|
|
|
|||
|
|
@ -188,7 +188,7 @@ class DocPageTest(ZulipTestCase):
|
|||
# Test the i18n version of one of these pages.
|
||||
self._test("/en/history/", "Zulip released as open source!")
|
||||
self._test("/values/", "designed our company")
|
||||
self._test("/hello/", "Chat for distributed teams", landing_missing_strings=["Log in"])
|
||||
self._test("/hello/", "Chat for distributed teams", landing_missing_strings=["xyz"])
|
||||
self._test("/communities/", "Open communities directory")
|
||||
self._test("/development-community/", "Zulip development community")
|
||||
self._test("/features/", "Beautiful messaging")
|
||||
|
|
|
|||
Loading…
Reference in New Issue