Merge pull request #669 from storybookjs/charles-fixes-homepage

Homepage fixes for mobile
storybookjs · Mar 11, 2024 · 95a8888 · 95a8888
2 parents 9f33d7a + 65c993c
commit 95a8888
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.4",
     "@storybook/api": "^6.5.9",
-    "@storybook/components-marketing": "^2.3.1",
+    "@storybook/components-marketing": "^2.3.2",
     "@storybook/design-system": "7.13.1",
     "@storybook/icons": "^1.2.2",
     "@storybook/theming": "^6.5.9",

diff --git a/src/components/screens/IndexScreen/IndexScreen.js b/src/components/screens/IndexScreen/IndexScreen.js
@@ -81,6 +81,7 @@ const Content = styled.div`
 `;
 
 const Texture = styled.div`
+  display: none;
   position: fixed;
   width: 100%;
   height: 100%;
@@ -91,6 +92,20 @@ const Texture = styled.div`
   background-size: 180px 100px;
   opacity: 0.6;
   mix-blend-mode: color-dodge;
+
+  @media (min-width: 600px) {
+    display: block;
+  }
+`;
+
+const Circles = styled.div`
+  position: absolute;
+  width: 100%;
+  min-height: 1600px;
+  overflow-x: hidden;
+  overflow-y: visible;
+  top: 0;
+  left: 0;
 `;
 
 const CirclePink = styled.div`
@@ -99,7 +114,7 @@ const CirclePink = styled.div`
   border-radius: 928px;
   opacity: 0.6;
   background: #ff4785;
-  filter: blur(72px);
+  filter: blur(44px);
   z-index: 2;
 
   width: 500px;
@@ -108,6 +123,7 @@ const CirclePink = styled.div`
   left: -160px;
 
   @media (min-width: 600px) {
+    filter: blur(72px);
     width: 700px;
     height: 700px;
     top: -300px;
@@ -139,7 +155,7 @@ const CircleOrange = styled.div`
   border-radius: 740px;
   opacity: 0.6;
   background: #fc521f;
-  filter: blur(72px);
+  filter: blur(44px);
   z-index: 1;
 
   width: 400px;
@@ -148,6 +164,7 @@ const CircleOrange = styled.div`
   left: 200px;
 
   @media (min-width: 600px) {
+    filter: blur(72px);
     width: 600px;
     height: 600px;
     top: -260px;
@@ -176,7 +193,7 @@ const CircleBlue = styled.div`
   border-radius: 1192px;
   opacity: 0.4;
   background: #4791ff;
-  filter: blur(72px);
+  filter: blur(44px);
   z-index: 1;
 
   width: 600px;
@@ -185,6 +202,7 @@ const CircleBlue = styled.div`
   left: 200px;
 
   @media (min-width: 600px) {
+    filter: blur(72px);
     top: 220px;
     left: 400px;
   }
@@ -286,9 +304,11 @@ export function IndexScreen({ pageContext }) {
         </div>
       </Content>
       <Texture />
-      <CirclePink />
-      <CircleOrange />
-      <CircleBlue />
+      <Circles>
+        <CirclePink />
+        <CircleOrange />
+        <CircleBlue />
+      </Circles>
     </>
   );
 }

diff --git a/src/components/screens/IndexScreen/IndexScreen.stories.jsx b/src/components/screens/IndexScreen/IndexScreen.stories.jsx
@@ -25,5 +25,5 @@ Default.args = {
   },
 };
 Default.parameters = {
-  backgrounds: { default: 'dark' },
+  backgrounds: { default: '#0e0c2c' },
 };
diff --git a/yarn.lock b/yarn.lock
@@ -5214,10 +5214,10 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components-marketing@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/components-marketing/-/components-marketing-2.3.1.tgz#3afdcf818b86e0c58b0b2fb22e8211a7f94848e6"
-  integrity sha512-Zgaw4azsKl2xu/NnKuxgDN2FIxing0Z6D+M6aeilwdoeSW2b6OSJh8UTIuyhfhHLCSPhXfKeCAupqxj6yY2Kkw==
+"@storybook/components-marketing@^2.3.2":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/components-marketing/-/components-marketing-2.3.2.tgz#66db3e8942a19667642aaad663e453c0e6a1da2c"
+  integrity sha512-KnHqky/WpdjQvzTdZpxOtMU74jhjvGStxEdTzAS1s+9ndAkmcFrFFq+tlBxA8dw9bQATkWbnKp8r0OfeS4PUAA==
   dependencies:
     "@docsearch/react" "^3.1.0"
     "@emotion/weak-memoize" "^0.2.5"