Refactor home page shapes background

2 years ago · 35ba440636
parent da19ce8f01
commit 35ba440636
3 changed files with 181 additions and 195 deletions
--- a/components/ShapesBackground.module.css
+++ b/components/ShapesBackground.module.css
@ -18,180 +18,3 @@
  filter: var(--blue);
  opacity: 20%;
 }
-
-.homeDots {
-  top: calc(0.06 * (580rem / 0.65) / 16);
-  right: 90vw;
-  width: calc(168rem / 16);
-  height: calc(204rem / 16);
-  filter: var(--teal);
-  opacity: 25%;
-}
-
-.homeHash1 {
-  top: calc(0.32 * (580rem / 0.65) / 16);
-  left: 12vw;
-  width: calc(60rem / 16);
-  height: calc(60rem / 16);
-}
-
-.homeTriangle1 {
-  top: calc(0.05 * (580rem / 0.65) / 16);
-  left: 20vw;
-  width: calc(68rem / 16);
-  height: calc(68rem / 16);
-  transform: rotate(18deg);
-  filter: var(--teal);
-  opacity: 30%;
-}
-
-.homeWaves1 {
-  top: calc(0.5 * (580rem / 0.65) / 16);
-  left: 24vw;
-  width: calc(116rem / 16);
-  height: calc(58rem / 16);
-  filter: var(--teal);
-}
-
-.homeTriangle2 {
-  top: calc(0.02 * (580rem / 0.65) / 16);
-  right: 40vw;
-  width: calc(68rem / 16);
-  height: calc(68rem / 16);
-  transform: rotate(-26deg);
-}
-
-.homePlus {
-  top: calc(0.42 * (580rem / 0.65) / 16);
-  right: 22vw;
-  width: calc(48rem / 16);
-  height: calc(48rem / 16);
-}
-
-.homeWaves2 {
-  top: calc(0.1 * (580rem / 0.65) / 16);
-  right: 18vw;
-  width: calc(102rem / 16);
-  height: calc(50rem / 16);
-  filter: var(--teal);
-}
-
-.homeHash2 {
-  top: calc(0.25 * (580rem / 0.65) / 16);
-  right: 9vw;
-  width: calc(60rem / 16);
-  height: calc(60rem / 16);
-}
-
-@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
-  .homeDots {
-    top: 6vh;
-  }
-  .homeHash1 {
-    top: 32vh;
-  }
-  .homeTriangle1 {
-    top: 5vh;
-  }
-  .homeWaves1 {
-    top: 50vh;
-  }
-  .homeTriangle2 {
-    top: 2vh;
-  }
-  .homePlus {
-    top: 42vh;
-  }
-  .homeWaves2 {
-    top: 10vh;
-  }
-  .homeHash2 {
-    top: 25vh;
-  }
-}
-
-@media only screen and (max-height: calc((420rem / 0.65) / 16)) {
-  .homeDots {
-    top: calc(0.06 * (420rem / 0.65) / 16);
-  }
-  .homeHash1 {
-    top: calc(0.32 * (420rem / 0.65) / 16);
-  }
-  .homeTriangle1 {
-    top: calc(0.05 * (420rem / 0.65) / 16);
-  }
-  .homeWaves1 {
-    top: calc(0.5 * (420rem / 0.65) / 16);
-  }
-  .homeTriangle2 {
-    top: calc(0.02 * (420rem / 0.65) / 16);
-  }
-  .homePlus {
-    top: calc(0.42 * (420rem / 0.65) / 16);
-  }
-  .homeWaves2 {
-    top: calc(0.1 * (420rem / 0.65) / 16);
-  }
-  .homeHash2 {
-    top: calc(0.25 * (420rem / 0.65) / 16);
-  }
-}
-
-@media only screen and (max-width: calc(768rem / 16)) {
-  .homeDots {
-    top: 0;
-    right: 80vw;
-    width: calc(168rem / 16);
-    height: calc(152rem / 16);
-    filter: var(--blue);
-    opacity: 20%;
-  }
-
-  .homeHash1 {
-    top: calc(190rem / 16);
-    left: unset;
-    right: 87vw;
-    width: calc(60rem / 16);
-    height: calc(60rem / 16);
-  }
-
-  .homeTriangle1 {
-    top: calc(266rem / 16);
-    left: unset;
-    right: 78vw;
-    width: calc(45rem / 16);
-    height: calc(45rem / 16);
-    transform: rotate(-26deg);
-    filter: var(--blue);
-    opacity: 20%;
-  }
-
-  .homeWaves1 {
-    display: none;
-  }
-
-  .homeTriangle2 {
-    top: calc(4rem / 16);
-    right: 3vw;
-    width: calc(45rem / 16);
-    height: calc(45rem / 16);
-    transform: rotate(16deg);
-  }
-
-  .homePlus {
-    display: none;
-  }
-
-  .homeWaves2 {
-    top: calc(168rem / 16);
-    left: 86vw;
-    right: unset;
-    width: calc(102rem / 16);
-    height: calc(50rem / 16);
-    filter: var(--blue);
-  }
-
-  .homeHash2 {
-    display: none;
-  }
-}
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@ -56,18 +56,3 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
    />
  );
 }
-
-// function HomeShapes() {
-//   return (
-//     <>
-//       <Shape type="dots" className={styles.homeDots} />
-//       <Shape type="hash" className={styles.homeHash1} />
-//       <Shape type="triangle" className={styles.homeTriangle1} />
-//       <Shape type="waves" className={styles.homeWaves1} />
-//       <Shape type="triangle" className={styles.homeTriangle2} />
-//       <Shape type="plus" className={styles.homePlus} />
-//       <Shape type="waves" className={styles.homeWaves2} />
-//       <Shape type="hash" className={styles.homeHash2} />
-//     </>
-//   );
-// }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -95,8 +95,186 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
 };

 Home.getShapesConfig = (() => {
-  return {
-    triangle: [{ left: "2rem" }, { bottom: "2rem" }],
-    dots: [{ top: "100px", right: "50vw" }],
+  const bigDesktopConfig = {
+    dots: [
+      {
+        top: "calc(0.06 * (580rem / 0.65) / 16)",
+        right: "90vw",
+        width: "calc(168rem / 16)",
+        height: "calc(204rem / 16)",
+        filter: "var(--teal)",
+        opacity: "25%",
+      },
+    ],
+    hash: [
+      {
+        top: "calc(0.32 * (580rem / 0.65) / 16)",
+        left: "12vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+      {
+        top: "calc(0.25 * (580rem / 0.65) / 16)",
+        right: "9vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+    ],
+    plus: [
+      {
+        top: "calc(0.42 * (580rem / 0.65) / 16)",
+        right: "22vw",
+        width: "calc(48rem / 16)",
+        height: "calc(48rem / 16)",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(0.05 * (580rem / 0.65) / 16)",
+        left: "20vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(18deg)",
+        filter: "var(--teal)",
+        opacity: "30%",
+      },
+      {
+        top: "calc(0.02 * (580rem / 0.65) / 16)",
+        right: "40vw",
+        width: "calc(68rem / 16)",
+        height: "calc(68rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+    ],
+    waves: [
+      {
+        top: "calc(0.5 * (580rem / 0.65) / 16)",
+        left: "24vw",
+        width: "calc(116rem / 16)",
+        height: "calc(58rem / 16)",
+        filter: "var(--teal)",
+      },
+      {
+        top: "calc(0.1 * (580rem / 0.65) / 16)",
+        right: "18vw",
+        width: "calc(102rem / 16)",
+        height: "calc(50rem / 16)",
+        filter: "var(--teal)",
+      },
+    ],
  };
+
+  const mediumDesktopConfig = {
+    dots: [{ ...bigDesktopConfig["dots"][0], top: "6vh" }],
+    hash: [
+      { ...bigDesktopConfig["hash"][0], top: "32vh" },
+      { ...bigDesktopConfig["hash"][1], top: "25vh" },
+    ],
+    plus: [{ ...bigDesktopConfig["plus"][0], top: "42vh" }],
+    triangle: [
+      { ...bigDesktopConfig["triangle"][0], top: "5vh" },
+      { ...bigDesktopConfig["triangle"][1], top: "2vh" },
+    ],
+    waves: [
+      { ...bigDesktopConfig["waves"][0], top: "50vh" },
+      { ...bigDesktopConfig["waves"][1], top: "10vh" },
+    ],
+  };
+
+  const smallDesktopConfig = {
+    dots: [
+      {
+        ...bigDesktopConfig["dots"][0],
+        top: "calc(0.06 * (420rem / 0.65) / 16)",
+      },
+    ],
+    hash: [
+      {
+        ...bigDesktopConfig["hash"][0],
+        top: "calc(0.32 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["hash"][1],
+        top: "calc(0.25 * (420rem / 0.65) / 16)",
+      },
+    ],
+    plus: [
+      {
+        ...bigDesktopConfig["plus"][0],
+        top: "calc(0.42 * (420rem / 0.65) / 16)",
+      },
+    ],
+    triangle: [
+      {
+        ...bigDesktopConfig["triangle"][0],
+        top: "calc(0.05 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["triangle"][1],
+        top: "calc(0.02 * (420rem / 0.65) / 16)",
+      },
+    ],
+    waves: [
+      {
+        ...bigDesktopConfig["waves"][0],
+        top: "calc(0.5 * (420rem / 0.65) / 16)",
+      },
+      {
+        ...bigDesktopConfig["waves"][1],
+        top: "calc(0.1 * (420rem / 0.65) / 16)",
+      },
+    ],
+  };
+
+  const mobileConfig = {
+    dots: [
+      {
+        top: "0",
+        right: "80vw",
+        width: "calc(168rem / 16)",
+        height: "calc(152rem / 16)",
+      },
+    ],
+    hash: [
+      {
+        top: "calc(190rem / 16)",
+        right: "87vw",
+        width: "calc(60rem / 16)",
+        height: "calc(60rem / 16)",
+      },
+    ],
+    triangle: [
+      {
+        top: "calc(266rem / 16)",
+        right: "78vw",
+        width: "calc(45rem / 16)",
+        height: "calc(45rem / 16)",
+        transform: "rotate(-26deg)",
+      },
+      {
+        top: "calc(4rem / 16)",
+        right: "3vw",
+        width: "calc(45rem / 16)",
+        height: "calc(45rem / 16)",
+        transform: "rotate(16deg)",
+      },
+    ],
+    waves: [
+      {
+        top: "calc(168rem / 16)",
+        left: "86vw",
+        width: "calc(102rem / 16)",
+        height: "calc(50rem / 16)",
+      },
+    ],
+  };
+
+  if (window.innerWidth <= 768) {
+    return mobileConfig;
+  } else if (window.innerHeight <= 420 / 0.65) {
+    return smallDesktopConfig;
+  } else if (window.innerHeight <= 580 / 0.65) {
+    return mediumDesktopConfig;
+  }
+  return bigDesktopConfig;
 }) as GetShapesConfig;