Page MenuHomePhabricator
Files F3406286

D8083.diff
No OneTemporary
Actions

D8083.diff
View Options

diff --git a/landing/footer.css b/landing/footer.css
--- a/landing/footer.css
+++ b/landing/footer.css
@@ -1,8 +1,7 @@
footer.wrapper {
display: flex;
justify-content: center;
- background: rgba(235, 235, 235, 0.05);
- backdrop-filter: blur(12px);
+ background: var(--black-100);
position: sticky;
top: 100vh;
}
@@ -13,37 +12,83 @@
}
.navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 40px;
+}
+
+.linksContainer {
display: flex;
flex-direction: column;
+ row-gap: 16px;
+}
+
+.socialIconsContainer {
+ display: flex;
+ align-items: flex-end;
+ column-gap: 24px;
}
-.navigation a {
- font-size: clamp(1rem, 0.8954rem + 0.5229vw, 1.5rem);
- font-weight: 400;
+.legalContainer {
+ border-top: 1px solid var(--black-70);
+ padding-top: 40px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.legalLinks {
+ display: flex;
+ column-gap: 32px;
+ align-items: center;
}
-.navigation svg {
+.navLinkIcons {
+ color: var(--white-60);
margin-left: 8px;
}
-.navigation a,
-.navigation svg {
- color: #808080;
+.socialIcons {
+ color: var(--white-100);
+}
+
+.links {
+ color: var(--white-60);
transition: 150ms;
transition-property: color;
}
-.navigation a:hover,
-.navigation a:hover svg {
- color: #ffffff;
+.links:hover,
+.navLinkIcons:hover {
+ color: var(--white-100);
transition: 150ms;
transition-property: color;
}
a.logo {
- font-family: var(--sans-serif);
- font-weight: 500;
- color: var(--logo-color);
- font-size: 28px;
+ color: var(--white-100);
padding-bottom: 16px;
}
+
+.copyrightText {
+ color: var(--white-60);
+}
+
+@media screen and (max-width: 600px) {
+ .navigation,
+ .legalContainer {
+ flex-direction: column;
+ }
+
+ .socialIcons,
+ .legalLinks {
+ margin-top: 16px;
+ }
+
+ .navigation {
+ margin-bottom: 24px;
+ }
+
+ .legalContainer {
+ padding-top: 24px;
+ }
+}
diff --git a/landing/footer.react.js b/landing/footer.react.js
--- a/landing/footer.react.js
+++ b/landing/footer.react.js
@@ -1,11 +1,14 @@
// @flow
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
import * as React from 'react';
import { NavLink } from 'react-router-dom';
import css from './footer.css';
+import typography from './typography.css';
const navLinkProps = {
activeStyle: {
@@ -15,47 +18,116 @@
};
function Footer(): React.Node {
+ const logoClassName = classNames([typography.heading2, css.logo]);
+ const navLinkClassName = classNames([typography.paragraph1, css.links]);
+ const legalTextClassName = classNames([
+ typography.paragraph2,
+ css.copyrightText,
+ ]);
+ const legalLinksClassName = classNames([typography.paragraph2, css.links]);
+
return (
<footer className={css.wrapper}>
<div className={css.contentWrapper}>
<div className={css.navigation}>
- <NavLink className={css.logo} to="/">
- Comm
- </NavLink>
- <NavLink to="/keyservers" exact {...navLinkProps}>
- Keyservers
- </NavLink>
- <NavLink to="/support" exact {...navLinkProps}>
- Support
- </NavLink>
- <NavLink to="/team" exact {...navLinkProps}>
- Team
- </NavLink>
- <NavLink to="/investors" exact {...navLinkProps}>
- Investors
- </NavLink>
- <NavLink to="/terms" exact {...navLinkProps}>
- Terms of Use
- </NavLink>
- <NavLink to="/privacy" exact {...navLinkProps}>
- Privacy Policy
- </NavLink>
- <a href="https://www.notion.so/How-Comm-works-d6217941db7c4237b9d08b427aef3234">
- Learn how Comm works
- <FontAwesomeIcon
- size="sm"
- color="#ffffff"
- icon={faExternalLinkSquareAlt}
- />
- </a>
- <a href="https://commapp.notion.site/Learn-more-about-Comm-1efb9b646d504dddae30a20b4f33200e">
- About Comm
- <FontAwesomeIcon
- size="sm"
- color="#ffffff"
- icon={faExternalLinkSquareAlt}
- />
- </a>
+ <div className={css.linksContainer}>
+ <NavLink className={logoClassName} to="/">
+ Comm
+ </NavLink>
+ <NavLink
+ to="/keyservers"
+ exact
+ {...navLinkProps}
+ className={navLinkClassName}
+ >
+ Keyservers
+ </NavLink>
+ <NavLink
+ to="/support"
+ exact
+ {...navLinkProps}
+ className={navLinkClassName}
+ >
+ Support
+ </NavLink>
+ <NavLink
+ to="/team"
+ exact
+ {...navLinkProps}
+ className={navLinkClassName}
+ >
+ Team
+ </NavLink>
+ <NavLink
+ to="/investors"
+ exact
+ {...navLinkProps}
+ className={navLinkClassName}
+ >
+ Investors
+ </NavLink>
+ <a
+ href="https://www.notion.so/How-Comm-works-d6217941db7c4237b9d08b427aef3234"
+ className={navLinkClassName}
+ >
+ Learn how Comm works
+ <FontAwesomeIcon
+ size="sm"
+ className={css.navLinkIcons}
+ icon={faExternalLinkAlt}
+ />
+ </a>
+ <a
+ href="https://commapp.notion.site/Learn-more-about-Comm-1efb9b646d504dddae30a20b4f33200e"
+ className={navLinkClassName}
+ >
+ About Comm
+ <FontAwesomeIcon
+ size="sm"
+ className={css.navLinkIcons}
+ icon={faExternalLinkAlt}
+ />
+ </a>
+ </div>
+ <div className={css.socialIconsContainer}>
+ <a href="https://twitter.com/commdotapp">
+ <FontAwesomeIcon
+ size="lg"
+ className={css.socialIcons}
+ icon={faTwitter}
+ />
+ </a>
+ <a href="https://github.com/CommE2E/comm">
+ <FontAwesomeIcon
+ size="lg"
+ className={css.socialIcons}
+ icon={faGithub}
+ />
+ </a>
+ </div>
+ </div>
+ <div className={css.legalContainer}>
+ <p className={legalTextClassName}>
+ &copy; 2023 Comm. All Rights Reserved
+ </p>
+ <div className={css.legalLinks}>
+ <NavLink
+ to="/terms"
+ exact
+ {...navLinkProps}
+ className={legalLinksClassName}
+ >
+ Terms of Use
+ </NavLink>
+ <NavLink
+ to="/privacy"
+ exact
+ {...navLinkProps}
+ className={legalLinksClassName}
+ >
+ Privacy Policy
+ </NavLink>
+ </div>
</div>
</div>
</footer>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 1:18 AM (11 h, 6 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2615427
Default Alt Text
D8083.diff (7 KB)

Event Timeline