Page MenuHomePhabricator
Files F3408909

D8166.id27601.diff
No OneTemporary
Actions

D8166.id27601.diff
View Options

diff --git a/landing/keyservers.css b/landing/keyservers.css
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -42,18 +42,36 @@
-webkit-text-fill-color: transparent;
}
+.servers_section,
.keyserver_company_section {
display: flex;
padding: 120px 32px;
justify-content: center;
}
+.servers_section {
+ background-color: var(--light-dark-page-background);
+}
+
+.servers_container,
.keyserver_company_container {
display: flex;
width: 1376px;
max-width: 90vw;
}
+.servers_image {
+ width: 100%;
+ max-height: 480px;
+}
+
+.servers_copy {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding-left: 72px;
+}
+
.read_the_docs {
width: 100%;
align-self: flex-end;
@@ -62,10 +80,16 @@
}
@media (max-width: 1440px) {
+ .servers_container,
.keyserver_company_container {
flex-direction: column;
}
+ .servers_copy {
+ padding-left: 0;
+ margin-top: 64px;
+ }
+
.keyserver_company_copy {
margin-bottom: 48px;
}
@@ -80,9 +104,7 @@
/* ===== CSS BODY GRID LAYOUT ===== */
div.body_grid {
grid-template-columns: 1fr 1fr;
- grid-template-areas:
- 'hero_copy hero_image'
- 'server_image server_copy';
+ grid-template-areas: 'hero_copy hero_image';
}
div.hero_copy {
@@ -94,15 +116,6 @@
object-fit: scale-down;
align-self: center;
}
-div.server_image {
- grid-area: server_image;
- object-fit: scale-down;
- align-self: center;
-}
-div.server_copy {
- grid-area: server_copy;
- align-self: center;
-}
/* ===== LAYOUT HACKS ===== */
div.body_grid > div + .starting_section {
@@ -135,9 +148,7 @@
div.body_grid {
grid-template-areas:
'hero_image'
- 'hero_copy'
- 'server_image'
- 'server_copy';
+ 'hero_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
@@ -101,30 +101,33 @@
it’s constrained by a crucial limitation.
</p>
</div>
-
- <div className={`${css.server_image} ${css.starting_section}`}>
- <lottie-player
- id="cloud-illustration"
- ref={setCloudNode}
- mode="normal"
- src={`${assetsCacheURLPrefix}/animated_cloud.json`}
- speed={1}
- />
- </div>
- <div className={`${css.server_copy} ${css.section}`}>
- <h1 className={css.mono}>Apps need servers.</h1>
- <p>
- Sophisticated applications rely on servers to do things that your
- devices simply can&rsquo;t.
- </p>
- <p>
- That&rsquo;s why E2E encryption only works for simple chat apps
- today. There&rsquo;s no way to build a robust server layer that has
- access to your data without leaking that data to corporations.
- </p>
- </div>
</div>
+ <section className={css.servers_section}>
+ <div className={css.servers_container}>
+ <div className={css.servers_image}>
+ <lottie-player
+ id="cloud-illustration"
+ ref={setCloudNode}
+ mode="normal"
+ src={`${assetsCacheURLPrefix}/animated_cloud.json`}
+ speed={1}
+ />
+ </div>
+ <div className={css.servers_copy}>
+ <h1 className={headingClassName}>Apps need servers.</h1>
+ <p className={descriptionClassName}>
+ Sophisticated applications rely on servers to do things that your
+ devices simply can&rsquo;t.
+ </p>
+ <p className={descriptionClassName}>
+ That&rsquo;s why E2E encryption only works for simple chat apps
+ today. There&rsquo;s no way to build a robust server layer that
+ has access to your data without leaking that data to corporations.
+ </p>
+ </div>
+ </div>
+ </section>
<section className={css.keyserver_company_section}>
<div className={css.keyserver_company_container}>
<div className={css.keyserver_company_copy}>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 2:23 PM (18 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616149
Default Alt Text
D8166.id27601.diff (4 KB)

Event Timeline