Fixed blur animationthat crashed mobile devices

Author: austincondiff

components/common/Header.jsx

@@ -75,7 +75,14 @@ const MenuTray = styled.div`
     display: none;
   }
 `;
-const MenuItems = styled.ul``;
+const MenuItems = styled.ul`
+  @media only screen and (max-width: 767px) {
+    opacity: 0;
+    padding: 4px 24px 24px;
+    transform: translate3d(0, -150px, 0);
+    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s,opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
+  }
+`;
 const MenuItem = styled.li`
     margin-left: 24px;
     float: left;

components/common/Site.jsx

@@ -29,7 +29,8 @@ const Site = ({ children }) => {
       getColorSchemeSetting,
       setColorScheme,
       getSystemColorScheme,
-      windowDimensions
+      windowDimensions,
+      breakpoint: windowDimensions.breakpoint
     }}>
       <ThemeProvider theme={theme}>
         {children}

components/common/layout/Stack.jsx

@@ -5,7 +5,7 @@ import spacing from "@/styles/spacing";
 const StackWrap = styled.div`
   display: flex;
   flex-direction: ${({ $direction }) => ($direction === "vertical" ? `column` : `row`)}${({ $reverse }) => ($reverse ? `-reverse` : ``)};
-  ${({ $gap, theme }) =>
+  ${({ $gap }) =>
     $gap !== undefined && $gap !== null && $gap !== false
       ? `gap: ${Array.isArray($gap) ? spacing(...$gap) : spacing($gap)};`
       : ``}

components/pages/dev/layout.js

@@ -74,7 +74,6 @@ export default function DevPage() {
           </Column>
         </Row>
       </Section>
-
       <Section contained gutterBottom>
         <Row gap>
           <Column>
@@ -143,7 +142,7 @@ export default function DevPage() {
         </Row>
       </Section>
 
-      <Section>
+      <Section contained gutterBottom>
         <Row gap>
           <Column>
             <Typography variant="headline-reduced">Offsets</Typography>
@@ -213,7 +212,7 @@ export default function DevPage() {
         </Row>
       </Section>
 
-      <Section>
+      <Section contained gutterBottom>
         <Row gap>
           <Column>
             <Typography variant="headline-reduced">Auto Width</Typography>
@@ -248,7 +247,7 @@ export default function DevPage() {
         </Row>
       </Section>
 
-      <Section>
+      <Section contained>
         <Row gap>
           <Column>
             <Typography variant="headline-reduced">Align</Typography>
@@ -279,7 +278,7 @@ export default function DevPage() {
         </Row>
       </Section>
 
-      <Section>
+      <Section contained gutterBottom>
         <Row gap>
           <Column>
             <Typography variant="headline-reduced">Distribute</Typography>

components/pages/home/HeroImage.jsx

@@ -38,7 +38,7 @@ const SceneWrap = styled.div`
   animation: ${scaleBlurIn} 500ms 750ms cubic-bezier(0.0, 0.0, 0.2, 1);
   animation-fill-mode: both;
   transform-origin: bottom center;
-  margin-top: 64px;
+  margin-top: 6%;
 `;
 const ImageWrap = styled.div`
   position: relative;
@@ -64,8 +64,15 @@ const colorFlairPiece = css`
   left: 0;
   width: 200px;
   height: 200px;
-  border-radius: 50%;
   filter: blur(100px);
+
+  @media ${mediaQueries.md} {
+    width: 20vw;
+    height: 20vw;
+    filter: blur(10vw);
+  }
+
+  border-radius: 50%;
   background: #4F95FF;
   transform-origin: bottom center;
 `;
@@ -125,8 +132,8 @@ const StyledHardwareLockup = styled(HardwareLockup)`
 `
 
 const HeroImage = ({ percentage }) => {
-  const { colorScheme = "light" } = useSite();
-  const adjustedPercentage = (Math.min(Math.max(percentage, 1), 1.2) - 1) * 5;
+  const { colorScheme = "light", breakpoint } = useSite();
+  const adjustedPercentage = (Math.min(Math.max(percentage - ( breakpoint === 'xs' ? .2 : 0), 1), 1.2) - 1) * 5;
 
   return (
     <SceneWrap>

styles/globals.css

@@ -54,9 +54,6 @@ body {
 html {
   height: 100%;
 }
-body {
-  min-height: 100%;
-}
 
 a {
   color: inherit;
@@ -331,12 +328,17 @@ html[data-color-scheme='dark'] {
   --material-filters: saturate(180%) blur(20px);
 }
 
+#__next {
+  display: contents;
+}
+
 main {
   background: linear-gradient(
     to bottom,
     var(--dark) 0%,
     var(--fill-gray-secondary-alt) 100%
   );
+  min-height: calc(100vh - 168px);
 }
 
 main a {

yarn.lock

@@ -915,6 +915,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.2.11:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -1059,6 +1070,17 @@ globals@^13.6.0, globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
+globby@13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
 globby@^11.0.4:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -1585,6 +1607,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^2.5.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+
 prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -1748,6 +1775,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
 source-map-js@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"