Page MenuHomePhabricator
Files F3406276

D8075.diff
No OneTemporary
Actions

D8075.diff
View Options

diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -13,11 +13,15 @@
const [hero] = imageAssetMetaData;
return (
- <main className={css.wrapper}>
- <div className={hero.imageStyle}>
- <Picture url={hero.url} alt={hero.alt} />
- </div>
- <HeroContent />
+ <main>
+ <section className={css.heroSection}>
+ <div className={css.heroContainer}>
+ <div className={css.heroImage}>
+ <Picture url={hero.url} alt={hero.alt} />
+ </div>
+ <HeroContent />
+ </div>
+ </section>
</main>
);
}
diff --git a/landing/asset-meta-data.js b/landing/asset-meta-data.js
--- a/landing/asset-meta-data.js
+++ b/landing/asset-meta-data.js
@@ -1,24 +1,14 @@
// @flow
-import css from './landing.css';
-
export type ImageAsset = {
+alt: string,
+url: string,
- +title: string,
- +description: string,
- +imageStyle: string,
- +infoStyle: string,
};
export const assetsCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
export const imageAssetMetaData = [
{
- alt: 'a mobile phone screen highlighting chat and DAO voting',
- url: `${assetsCacheURLPrefix}/Header`,
- imageStyle: css.heroImage,
- infoStyle: css.heroInfo,
- title: 'Header',
- description: '',
+ alt: 'hero image showcasing Comm',
+ url: `${assetsCacheURLPrefix}/hero`,
},
];
diff --git a/landing/hero-content.css b/landing/hero-content.css
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -15,15 +15,25 @@
margin-bottom: 56px;
}
+.heroInfo {
+ display: flex;
+ padding: 144px 0 224px 32px;
+ flex-direction: column;
+ flex: 1;
+}
+
form {
width: 92%;
}
-@media (max-width: 1099px) {
+@media screen and (max-width: 848px) {
form {
width: 100%;
}
}
-.contentWrapper {
- flex-basis: 300px;
+@media screen and (max-width: 1280px) {
+ .heroInfo {
+ padding: 0;
+ max-width: 716px;
+ }
}
diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js
--- a/landing/hero-content.react.js
+++ b/landing/hero-content.react.js
@@ -3,14 +3,11 @@
import classNames from 'classnames';
import * as React from 'react';
-import { imageAssetMetaData } from './asset-meta-data.js';
import css from './hero-content.css';
import SubscriptionForm from './subscription-form.react.js';
import typography from './typography.css';
function HeroContent(): React.Node {
- const [hero] = imageAssetMetaData;
-
const headerClassName = classNames([typography.display3, css.header]);
const subheaderClassName = classNames([
typography.subheading2,
@@ -18,17 +15,15 @@
]);
return (
- <section className={hero.infoStyle}>
- <div className={css.contentWrapper}>
- <h1 className={headerClassName}>
- Comm is an encrypted messaging app for <span>communities</span>
- </h1>
- <p className={subheaderClassName}>
- We extend Signal&rsquo;s model of E2E encryption with personal servers
- to enable richer functionality.
- </p>
- <SubscriptionForm />
- </div>
+ <section className={css.heroInfo}>
+ <h1 className={headerClassName}>
+ Comm is an encrypted messaging app for <span>communities</span>
+ </h1>
+ <p className={subheaderClassName}>
+ We extend Signal&rsquo;s model of E2E encryption with personal servers
+ to enable richer functionality.
+ </p>
+ <SubscriptionForm />
</section>
);
}
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -26,53 +26,50 @@
position: relative;
}
-.wrapper {
- transition-property: max-width;
- transition: 300ms;
- max-width: 1850px;
- margin-left: auto;
- margin-right: auto;
- display: grid;
- align-items: center;
- padding-top: 7vh;
- padding-bottom: 235px;
- grid-template-columns: 40px repeat(12, 1fr) 40px;
- grid-template-rows: repeat(auto-fill, 1fr);
- column-gap: 1.5%;
- row-gap: 75px;
- grid-template-areas: '. hImg hImg hImg hImg . hInfo hInfo hInfo hInfo hInfo hInfo hInfo .';
+.heroSection {
+ display: flex;
+ justify-content: center;
}
-@media screen and (max-width: 1099px) {
- .wrapper {
- margin-left: auto;
- margin-right: auto;
- display: grid;
+.heroContainer {
+ width: 1850px;
+ display: flex;
+ flex-direction: row-reverse;
+ overflow: hidden;
+}
+
+.heroImage {
+ flex: 1;
+ position: relative;
+}
+
+.heroImage picture img {
+ object-fit: cover;
+ object-position: left center;
+ position: absolute;
+ left: 120px;
+ top: 120px;
+ width: 624px;
+ height: 472px;
+}
+
+@media screen and (max-width: 1280px) {
+ .heroContainer {
+ flex-direction: column;
align-items: center;
- padding-top: 7vh;
- padding-bottom: 235px;
- grid-template-columns: 16px repeat(6, 1fr) 16px;
- grid-template-rows: repeat(auto-fill, 1fr);
- column-gap: 1.5%;
- row-gap: 75px;
- grid-template-areas: '. hInfo hInfo hInfo hInfo hInfo hInfo .';
+ padding: 16px 32px;
}
.heroImage {
- display: none;
+ margin-bottom: 24px;
+ max-width: 600px;
}
- .heroInfo {
- display: flex;
- flex-direction: column;
- padding-bottom: 1.5rem;
+ .heroImage picture img {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: relative;
}
}
-
-.heroImage {
- grid-area: hImg;
-}
-
-.heroInfo {
- grid-area: hInfo;
-}
diff --git a/landing/subscription-form.css b/landing/subscription-form.css
--- a/landing/subscription-form.css
+++ b/landing/subscription-form.css
@@ -74,7 +74,7 @@
color: var(--error-dark-50);
}
-@media (max-width: 1099px) {
+@media screen and (max-width: 848px) {
form {
display: block;
}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 1:17 AM (10 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2615419
Default Alt Text
D8075.diff (5 KB)

Event Timeline