Page MenuHomePhabricator
Files F3407325

D8165.diff
No OneTemporary
Actions

D8165.diff
View Options

diff --git a/landing/keyservers.css b/landing/keyservers.css
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -26,14 +26,63 @@
color: #7e57c2;
}
+.heading {
+ color: var(--white-80);
+ margin-bottom: 40px;
+}
+
+.heading + p {
+ padding-bottom: 24px;
+}
+
+span.purple_gradient {
+ background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.keyserver_company_section {
+ display: flex;
+ padding: 120px 32px;
+ justify-content: center;
+}
+
+.keyserver_company_container {
+ display: flex;
+ width: 1376px;
+ max-width: 90vw;
+}
+
+.read_the_docs {
+ width: 100%;
+ align-self: flex-end;
+ margin-bottom: 24px;
+ margin-left: 112px;
+}
+
+@media (max-width: 1440px) {
+ .keyserver_company_container {
+ flex-direction: column;
+ }
+
+ .keyserver_company_copy {
+ margin-bottom: 48px;
+ }
+
+ .read_the_docs {
+ max-width: 504px;
+ align-self: flex-start;
+ margin: 0;
+ }
+}
+
/* ===== CSS BODY GRID LAYOUT ===== */
div.body_grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
'hero_copy hero_image'
- 'server_image server_copy'
- 'keyserver_company keyserver_company'
- 'keyserver_copy read_the_docs';
+ 'server_image server_copy';
}
div.hero_copy {
@@ -54,20 +103,6 @@
grid-area: server_copy;
align-self: center;
}
-div.keyserver_company {
- grid-area: keyserver_company;
- text-align: center;
- padding-top: 80px;
-}
-
-.keyserver_company > h1 {
- padding-bottom: 24px;
-}
-div.read_the_docs {
- grid-area: read_the_docs;
- align-self: center;
- padding-bottom: 40px;
-}
/* ===== LAYOUT HACKS ===== */
div.body_grid > div + .starting_section {
@@ -102,22 +137,7 @@
'hero_image'
'hero_copy'
'server_image'
- 'server_copy'
- 'keyserver_company'
- 'keyserver_copy'
- 'read_the_docs';
- }
-
- div.keyserver_company {
- text-align: left;
- padding-top: 60px;
- }
- div.keyserver_copy {
- padding-bottom: 0;
- }
- div.read_the_docs {
- padding-top: 20px;
- padding-bottom: 0;
+ 'server_copy';
}
/* ===== LAYOUT HACKS ===== */
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -1,6 +1,7 @@
// @flow
import { create } from '@lottiefiles/lottie-interactivity';
+import classNames from 'classnames';
import * as React from 'react';
import { useIsomorphicLayoutEffect } from 'lib/hooks/isomorphic-layout-effect.react.js';
@@ -10,6 +11,7 @@
import css from './keyservers.css';
import ReadDocsButton from './read-docs-btn.react.js';
import RequestAccess from './request-access.react.js';
+import typography from './typography.css';
function Keyservers(): React.Node {
React.useEffect(() => {
@@ -67,8 +69,14 @@
return () => cloudNode.removeEventListener('load', onCloudIllustrationLoad);
}, [cloudNode, onCloudIllustrationLoad]);
+ const headingClassName = classNames([typography.heading1, css.heading]);
+ const descriptionClassName = classNames([
+ typography.subheading2,
+ css.description,
+ ]);
+
return (
- <div>
+ <main>
<div className={css.body_grid}>
<div className={`${css.hero_image} ${css.starting_section}`}>
<lottie-player
@@ -115,34 +123,34 @@
access to your data without leaking that data to corporations.
</p>
</div>
+ </div>
- <div className={css.keyserver_company}>
- <h1>
- Comm
- <span className={css.mono}>
- {' '}
- is the <span className={css.purple_accent}>keyserver </span>
+ <section className={css.keyserver_company_section}>
+ <div className={css.keyserver_company_container}>
+ <div className={css.keyserver_company_copy}>
+ <h1 className={headingClassName}>
+ Comm is the
+ <span className={css.purple_gradient}> keyserver </span>
company.
- </span>
- </h1>
+ </h1>
+ <p className={descriptionClassName}>
+ In the future, people have their own servers.
+ </p>
+ <p className={descriptionClassName}>
+ Your keyserver is the home of your digital identity. It owns your
+ private keys and your personal data. It&rsquo;s your password
+ manager, your crypto bank, your digital surrogate, and your second
+ brain.
+ </p>
+ </div>
+ <div className={css.read_the_docs}>
+ <ReadDocsButton />
+ </div>
</div>
-
- <div className={css.keyserver_copy}>
- <p>In the future, people have their own servers.</p>
- <p>
- Your keyserver is the home of your digital identity. It owns your
- private keys and your personal data. It&rsquo;s your password
- manager, your crypto bank, your digital surrogate, and your second
- brain.
- </p>
- </div>
- <div className={css.read_the_docs}>
- <ReadDocsButton />
- </div>
- </div>
+ </section>
<KeyserverFAQ />
<RequestAccess />
- </div>
+ </main>
);
}
diff --git a/landing/read-docs-btn.css b/landing/read-docs-btn.css
--- a/landing/read-docs-btn.css
+++ b/landing/read-docs-btn.css
@@ -41,11 +41,11 @@
padding-left: 5px;
}
-@media (max-width: 1099px) {
+@media (max-width: 1440px) {
.button {
font-size: 18px;
padding: 15px 20px;
- height: auto;
+ height: 88px;
}
.buttonText {
align-self: center;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 5:42 AM (14 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616098
Default Alt Text
D8165.diff (5 KB)

Event Timeline