Page MenuHomePhabricator
Files F3405347

D8167.id29698.diff
No OneTemporary
Actions

D8167.id29698.diff
View Options

diff --git a/landing/keyservers.css b/landing/keyservers.css
--- a/landing/keyservers.css
+++ b/landing/keyservers.css
@@ -1,31 +1,3 @@
-div.body_grid {
- max-width: 1920px;
- margin-left: auto;
- margin-right: auto;
- display: grid;
- column-gap: 6em;
- padding: 20px 60px 40px;
- transition-property: max-width;
- transition: 300ms;
-}
-
-div.body_grid h1 {
- font-size: clamp(1.5rem, 1.0817rem + 2.0915vw, 3.5rem);
-}
-
-.mono {
- font-family: 'iA Writer Duo S', monospace;
- padding-bottom: 24px;
-}
-
-.mono + p {
- padding-bottom: 24px;
-}
-
-span.purple_accent {
- color: #7e57c2;
-}
-
.heading {
color: var(--white-80);
margin-bottom: 40px;
@@ -42,6 +14,7 @@
-webkit-text-fill-color: transparent;
}
+.hero_section,
.servers_section,
.keyserver_company_section {
display: flex;
@@ -49,10 +22,15 @@
justify-content: center;
}
+.hero_section {
+ padding-top: 64px;
+}
+
.servers_section {
background-color: var(--light-dark-page-background);
}
+.hero_container,
.servers_container,
.keyserver_company_container {
display: flex;
@@ -60,6 +38,20 @@
max-width: 90vw;
}
+.hero_container {
+ flex-direction: column;
+}
+
+.hero_image {
+ width: 100%;
+ max-height: 376px;
+ margin-bottom: 72px;
+}
+
+.heroText {
+ text-align: center;
+}
+
.servers_image {
width: 100%;
max-height: 480px;
@@ -100,59 +92,3 @@
margin: 0;
}
}
-
-/* ===== CSS BODY GRID LAYOUT ===== */
-div.body_grid {
- grid-template-columns: 1fr 1fr;
- grid-template-areas: 'hero_copy hero_image';
-}
-
-div.hero_copy {
- grid-area: hero_copy;
- align-self: center;
-}
-div.hero_image {
- grid-area: hero_image;
- object-fit: scale-down;
- align-self: center;
-}
-
-/* ===== LAYOUT HACKS ===== */
-div.body_grid > div + .starting_section {
- padding-top: 80px;
-}
-
-.section {
- padding-top: 80px;
-}
-
-/* ===== MEDIUM BREAKPOINT ===== */
-@media (max-width: 1499px) {
- div.body_grid {
- padding-left: 60px;
- padding-right: 60px;
- }
-}
-
-/* ===== SMALLEST BREAKPOINT ===== */
-@media (max-width: 1099px) {
- /* ===== COMMON CSS GRID LAYOUT ===== */
- div.body_grid,
- div.app_landing_grid {
- grid-template-columns: minmax(auto, 540px);
- justify-content: center;
- padding: 0 3% 2vh;
- }
-
- /* ===== CSS BODY GRID LAYOUT ===== */
- div.body_grid {
- grid-template-areas:
- 'hero_image'
- 'hero_copy';
- }
-
- /* ===== LAYOUT HACKS ===== */
- .section {
- padding-top: 20px;
- }
-}
diff --git a/landing/keyservers.react.js b/landing/keyservers.react.js
--- a/landing/keyservers.react.js
+++ b/landing/keyservers.react.js
@@ -75,34 +75,39 @@
css.description,
]);
+ const heroHeadingClassName = classNames([headingClassName, css.heroText]);
+ const heroDescriptionClassName = classNames([
+ descriptionClassName,
+ css.heroText,
+ ]);
+
return (
<main>
- <div className={css.body_grid}>
- <div className={`${css.hero_image} ${css.starting_section}`}>
- <lottie-player
- id="eye-illustration"
- ref={setEyeNode}
- mode="normal"
- src={`${assetsCacheURLPrefix}/animated_eye.json`}
- speed={1}
- />
- </div>
- <div className={`${css.hero_copy} ${css.section}`}>
- <h1 className={css.mono}>
+ <section className={css.hero_section}>
+ <div className={css.hero_container}>
+ <div className={css.hero_image}>
+ <lottie-player
+ id="eye-illustration"
+ ref={setEyeNode}
+ mode="normal"
+ src={`${assetsCacheURLPrefix}/animated_eye.json`}
+ speed={1}
+ />
+ </div>
+ <h1 className={heroHeadingClassName}>
Reclaim your
- <span className={css.purple_accent}> digital&nbsp;identity.</span>
+ <span className={css.purple_gradient}> digital&nbsp;identity</span>
</h1>
- <p>
+ <p className={heroDescriptionClassName}>
The Internet is broken today. Private user data is owned by
mega-corporations and farmed for their benefit.
</p>
- <p>
+ <p className={heroDescriptionClassName}>
E2E encryption has the potential to change this equation. But
it&rsquo;s constrained by a crucial limitation.
</p>
</div>
- </div>
-
+ </section>
<section className={css.servers_section}>
<div className={css.servers_container}>
<div className={css.servers_image}>

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 8:31 PM (5 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614764
Default Alt Text
D8167.id29698.diff (4 KB)

Event Timeline