Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3409111
D8167.id29767.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
4 KB
Referenced Files
None
Subscribers
None
D8167.id29767.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 identity.</span>
+ <span className={css.purple_gradient}> digital 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’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
Details
Attached
Mime Type
text/plain
Expires
Thu, Dec 5, 3:00 PM (7 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614764
Default Alt Text
D8167.id29767.diff (4 KB)
Attached To
Mode
D8167: [landing] redesign keyserver hero section
Attached
Detach File
Event Timeline
Log In to Comment