Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/styles/portico/footer.css

223 lines
6.9 KiB
CSS
Raw Normal View History

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.
2023-03-08 19:14:05 +01:00
:root {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
--color-footer-background: hsl(238deg 28% 27%);
--color-links: hsl(238deg 100% 82%);
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.
2023-03-08 19:14:05 +01:00
@media (prefers-color-scheme: dark) {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
--color-footer-background: hsl(238deg 28% 21%);
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.
2023-03-08 19:14:05 +01:00
}
}
footer: Add social links with icons. Fixes #27886 Removed old twitter link in the same column.
2023-11-29 14:16:54 +01:00
/* These need to be here so that other pages don't need to import a different library for these icons to work */
.footer-social-icon-mastodon {
--footer-social-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'%3e%3cg fill='%23A3A5F8'%3e%3cpath d='M18.42 16.43h2.38v-6.02c0-1.23-.3-2.2-.94-2.93a3.27 3.27 0 0 0-2.55-1.1c-1.22 0-2.15.47-2.76 1.41l-.6 1-.58-1a3.07 3.07 0 0 0-2.76-1.4c-1.05 0-1.9.37-2.55 1.1a4.3 4.3 0 0 0-.94 2.92v6.02H9.5v-5.84c0-1.23.52-1.86 1.55-1.86 1.15 0 1.72.74 1.72 2.2v3.2h2.38v-3.2c0-1.46.57-2.2 1.71-2.2 1.04 0 1.56.63 1.56 1.86v5.84Z'/%3e%3cpath fill-rule='evenodd' d='M3 0a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3Zm18.39 3.6s3.26 1.45 3.26 6.43c0 0 .04 3.66-.46 6.2-.31 1.63-2.81 3.4-5.69 3.74-1.5.18-2.97.34-4.54.27-2.57-.12-4.6-.62-4.6-.62 0 .24.02.48.05.72.33 2.53 2.51 2.68 4.58 2.76 2.09.07 3.94-.52 3.94-.52l.09 1.89s-1.46.78-4.06.92c-1.43.08-3.21-.03-5.28-.58-4.5-1.19-5.27-5.98-5.39-10.84a100.6 100.6 0 0 1-.02-3v-.94c0-4.97 3.27-6.43 3.27-6.43 1.64-.76 4.46-1.07 7.39-1.1H14c2.93.03 5.75.34 7.39 1.1Z' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e");
}
.footer-social-icon-x {
--footer-social-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'%3e%3cg fill='%23A3A5F8' clip-path='url(%23a)'%3e%3cpath d='M18.87 23.69h2.71L9.11 5.36H6.4L18.87 23.7Z'/%3e%3cpath fill-rule='evenodd' d='M3.04.04a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3v-22a3 3 0 0 0-3-3h-22ZM23.34 4l-7.44 8.89 8.1 12.1h-5.96l-5.45-8.15-6.83 8.15H4l7.8-9.32L4 4h5.96l5.16 7.72L21.58 4h1.77Z' clip-rule='evenodd'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3crect width='28' height='28' fill='white' rx='3'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.footer-social-icon-linkedin {
--footer-social-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' viewBox='0 0 28 28'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23A3A5F8' d='M28 3a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3ZM8.27 23.9H4.19V10.5h4.18v13.4h-.1ZM6.17 8.7A2.42 2.42 0 0 1 3.8 6.3c0-1.3 1.1-2.4 2.39-2.4 1.3 0 2.39 1.1 2.39 2.4 0 1.3-1 2.4-2.4 2.4Zm17.65 15.2h-4.09v-6.5c0-1.5 0-3.5-2.2-3.5-2.18 0-2.48 1.7-2.48 3.4v6.6h-4.09V10.5h3.99v1.8h.1c.6-1 1.89-2.2 3.88-2.2 4.19 0 4.98 2.8 4.98 6.4v7.4h-.1Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h28v28H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
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.
2023-03-08 19:14:05 +01:00
#footer {
background: var(--color-footer-background);
box-sizing: border-box;
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& ul {
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.
2023-03-08 19:14:05 +01:00
/* 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;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100%);
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.
2023-03-08 19:14:05 +01:00
opacity: 0.8;
text-transform: uppercase;
border-bottom: 0;
margin-bottom: 0;
stylelint: Fix declaration-block-no-redundant-longhand-properties. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-11-09 00:35:32 +01:00
margin-block: 0;
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.
2023-03-08 19:14:05 +01:00
}
.footer__section ul {
footer: Minor adjustments.
2023-07-09 08:01:15 +02:00
margin: 20px 0 28px;
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.
2023-03-08 19:14:05 +01:00
display: flex;
flex-direction: column;
align-items: flex-start;
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& li {
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.
2023-03-08 19:14:05 +01:00
margin-bottom: 10px;
}
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& li {
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.
2023-03-08 19:14:05 +01:00
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;
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a,
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.
2023-03-08 19:14:05 +01:00
a:visited {
font-weight: 400;
font-size: 16px;
color: var(--color-links);
}
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a:hover,
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.
2023-03-08 19:14:05 +01:00
a:focus {
color: var(--color-links);
border-bottom: 1px solid var(--color-links);
transition: none;
text-decoration: none;
outline: none;
}
.footer__legal {
footer: Minor adjustments.
2023-07-09 08:01:15 +02:00
margin: 12px 0 5px;
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.
2023-03-08 19:14:05 +01:00
padding: 0 52px;
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
border-top: 1px solid hsl(0deg 0% 100% / 10%);
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.
2023-03-08 19:14:05 +01:00
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a {
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.
2023-03-08 19:14:05 +01:00
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 {
styles: Use modern color notation. postcss-preset-env transpiles this back as necessary. (It does a better job than we did, in fact: we had several four-argument hsl() calls that should have been hsla().) Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 22:08:47 +01:00
color: hsl(0deg 0% 100% / 50%);
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.
2023-03-08 19:14:05 +01:00
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: Add social links with icons. Fixes #27886 Removed old twitter link in the same column.
2023-11-29 14:16:54 +01:00
.footer-social-links {
margin: -25px 0 20px;
display: flex;
gap: 8px;
}
.footer-social-icon {
width: 28px;
height: 28px;
display: inline-block;
flex-shrink: 0;
background-color: hsl(238.59deg 85.86% 80.59%);
mask-position: center;
mask-repeat: no-repeat;
mask-image: var(--footer-social-icon);
transition: all 150ms ease-out;
&:hover {
background-color: hsl(238.6deg 84.31% 90%);
}
&:active {
background-color: hsl(240deg 86.67% 97.06%);
}
}
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.
2023-03-08 19:14:05 +01:00
/* #footer responsivity and global fixes */
stylelint: Fix media-feature-range-notation. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-04-04 09:10:04 +02:00
@media (width <= 940px) {
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.
2023-03-08 19:14:05 +01:00
.footer__container {
justify-content: flex-start;
row-gap: 0;
}
.footer__legal-container {
justify-content: flex-end;
}
}
stylelint: Fix media-feature-range-notation. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-04-04 09:10:04 +02:00
@media (width <= 600px) {
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.
2023-03-08 19:14:05 +01:00
.footer__legal {
padding: 0 10px;
}
.footer__legal-spacer {
width: 100%;
}
.footer__legal-container {
column-gap: 20px;
justify-content: center;
styles: Use standard CSS nesting syntax. CSS nesting is being standardized with the syntactic restriction that the nested selector cannot start with an identifier. This was necessary to allow the syntax to be parsed without lookahead. https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/ https://www.w3.org/TR/css-nesting-1/#syntax The postcss-nesting plugin used by postcss-preset-env enforces this restriction. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-17 22:10:10 +01:00
& a:not(:last-child) {
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.
2023-03-08 19:14:05 +01:00
margin-right: 0;
}
}
}
stylelint: Fix media-feature-range-notation. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-04-04 09:10:04 +02:00
@media (width <= 400px) {
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.
2023-03-08 19:14:05 +01:00
.footer__container {
gap: 0;
flex-direction: column;
}
.footer__section .extra_margin {
margin-bottom: 36px;
}
}
}