Page MenuHomePhabricator
Files F3407383

D8076.diff
No OneTemporary
Actions

D8076.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
@@ -18,6 +18,7 @@
<div className={css.heroContainer}>
<div className={css.heroImage}>
<Picture url={hero.url} alt={hero.alt} />
+ <div className={css.glow} />
</div>
<HeroContent />
</div>
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -1,7 +1,8 @@
:root {
--landing-page-z-index: 0;
- --mobile-nav-z-index: 1;
- --header-z-index: 2;
+ --glow-z-index: 1;
+ --mobile-nav-z-index: 2;
+ --header-z-index: 3;
--purple: #7e57c2;
--white: #fff;
--white1: #ebedee;
diff --git a/landing/hero-content.css b/landing/hero-content.css
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -1,6 +1,7 @@
.header {
color: var(--white-80);
margin-bottom: 24px;
+ z-index: var(--glow-z-index);
}
.header span {
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -43,6 +43,17 @@
position: relative;
}
+.glow {
+ 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;
@@ -51,6 +62,7 @@
top: 120px;
width: 624px;
height: 472px;
+ z-index: var(--glow-z-index);
}
@media screen and (max-width: 1280px) {
@@ -65,6 +77,17 @@
max-width: 600px;
}
+ .glow {
+ 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;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 5:53 AM (14 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616137
Default Alt Text
D8076.diff (1 KB)

Event Timeline