Page MenuHomePhabricator
Files F3408868

D8077.id27413.diff
No OneTemporary
Actions

D8077.id27413.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
@@ -3,9 +3,7 @@
import * as React from 'react';
import { imageAssetMetaData } from './asset-meta-data.js';
-import HeroContent from './hero-content.react.js';
-import css from './landing.css';
-import Picture from './Picture.react.js';
+import Hero from './hero.react.js';
import usePreloadImageAssets from './use-pre-load-image-assets.react.js';
function AppLanding(): React.Node {
@@ -14,15 +12,7 @@
return (
<main>
- <section className={css.heroSection}>
- <div className={css.heroContainer}>
- <div className={css.heroImage}>
- <Picture url={hero.url} alt={hero.alt} />
- <div className={css.blur} />
- </div>
- <HeroContent />
- </div>
- </section>
+ <Hero {...hero} />
</main>
);
}
diff --git a/landing/landing.css b/landing/hero.css
copy from landing/landing.css
copy to landing/hero.css
--- a/landing/landing.css
+++ b/landing/hero.css
@@ -1,31 +1,3 @@
-.container {
- background: radial-gradient(ellipse at bottom, #1f252e, #111827) fixed;
- font-family: var(--sans-serif);
- -moz-osx-font-smoothing: grayscale;
- text-rendering: optimizeLegibility;
- color: white;
- word-break: break-word;
- height: 100%;
- position: relative;
- z-index: var(--landing-page-z-index);
-}
-
-.innerContainer {
- background-color: var(--page-background);
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: auto;
-}
-
-.innerContainerMobileNav {
- overflow-y: hidden;
-}
-
-.pageContentContainer {
- position: relative;
-}
-
.heroSection {
display: flex;
justify-content: center;
diff --git a/landing/hero.react.js b/landing/hero.react.js
new file mode 100644
--- /dev/null
+++ b/landing/hero.react.js
@@ -0,0 +1,30 @@
+// @flow
+
+import * as React from 'react';
+
+import HeroContent from './hero-content.react.js';
+import css from './hero.css';
+import Picture from './Picture.react.js';
+
+type Props = {
+ +url: string,
+ +alt: string,
+};
+
+function Hero(props: Props): React.Node {
+ const { url, alt } = props;
+
+ return (
+ <section className={css.heroSection}>
+ <div className={css.heroContainer}>
+ <div className={css.heroImage}>
+ <Picture url={url} alt={alt} />
+ <div className={css.blur} />
+ </div>
+ <HeroContent />
+ </div>
+ </section>
+ );
+}
+
+export default Hero;
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -25,74 +25,3 @@
.pageContentContainer {
position: relative;
}
-
-.heroSection {
- display: flex;
- justify-content: center;
-}
-
-.heroContainer {
- width: 1850px;
- display: flex;
- flex-direction: row-reverse;
- overflow: hidden;
-}
-
-.heroImage {
- flex: 1;
- position: relative;
-}
-
-.blur {
- position: absolute;
- width: 448px;
- height: 360px;
- border-radius: 50%;
- background-color: var(--violet-dark-40);
- top: 200px;
- left: 224px;
- filter: blur(80px);
-}
-
-.heroImage picture img {
- object-fit: cover;
- object-position: left center;
- position: absolute;
- left: 120px;
- top: 120px;
- width: 624px;
- height: 472px;
- z-index: var(--gradient-z-index);
-}
-
-@media screen and (max-width: 1280px) {
- .heroContainer {
- flex-direction: column;
- align-items: center;
- padding: 16px 32px;
- }
-
- .heroImage {
- margin-bottom: 24px;
- max-width: 600px;
- }
-
- .blur {
- position: absolute;
- width: 70%;
- height: 70%;
- border-radius: 50%;
- background-color: var(--violet-dark-40);
- top: 112px;
- left: 100px;
- filter: blur(80px);
- }
-
- .heroImage picture img {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: relative;
- }
-}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 2:13 PM (17 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2617191
Default Alt Text
D8077.id27413.diff (3 KB)

Event Timeline