Merge pull request #81 from FunTechInc/dev

css修正

Author: takuma-hmng8

app/_home/index.module.scss

@@ -1,18 +1,21 @@
+.canvas {
+   width: 100%;
+   height: 100svh;
+   position: fixed;
+   top: 0;
+   left: 0;
+}
+
 .wrapper {
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
-}
-
-.canvas {
-   position: fixed;
-   width: 100%;
-   height: 100%;
-   top: 0;
-   left: 0;
+   pointer-events: none;
+   overflow: hidden;
+   position: relative;
 }
 
 .content {
@@ -22,13 +25,11 @@
    align-items: center;
    justify-content: center;
    mix-blend-mode: difference;
-   pointer-events: none;
 }
 
 .title {
    font-size: 40px;
    font-weight: 500;
-   pointer-events: none;
    @media (max-width: 560px) {
       font-size: 9vw;
    }
@@ -81,3 +82,14 @@
       }
    }
 }
+
+.snsLink {
+   position: absolute;
+   bottom: 16px;
+   right: 16px;
+   display: flex;
+   align-items: center;
+   gap: 16px;
+   mix-blend-mode: difference;
+   pointer-events: auto;
+}

app/_home/index.tsx

@@ -62,75 +62,67 @@ export default function Page() {
    ];
 
    return (
-      <div className={s.wrapper}>
+      <>
          <div className={s.canvas}>
             <ShaderFx>
                <Playground bpm={bpm} easing={easing} />
             </ShaderFx>
          </div>
-         <div className={s.content}>
-            <h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
-            <Install />
-            <p className={s.link}>
-               Oh, right, u can download the gradient from
-               <a href="/gradation" target="_blank">
-                  here 👉
-               </a>
-            </p>
-            <div className={s.input}>
-               <p>BPM:</p>
-               <input
-                  type="number"
-                  value={bpm}
-                  onChange={(e) => {
-                     setBpm(+e.target.value);
-                  }}
-               />
-            </div>
-            <div className={s.input}>
-               <p>Easing:</p>
-               <select
-                  value={easing}
-                  onChange={(e) => {
-                     setEasing(e.target.value as EasingTypes);
-                  }}>
-                  {easingTypes.map((type) => (
-                     <option key={type} value={type}>
-                        {type}
-                     </option>
-                  ))}
-               </select>
+         <div className={s.wrapper}>
+            <div className={s.content}>
+               <h1 className={s.title}>⚡️ More FXs, Less GLSL</h1>
+               <Install />
+               <p className={s.link}>
+                  Oh, right, u can download the gradient from
+                  <a href="/gradation" target="_blank">
+                     here 👉
+                  </a>
+               </p>
+               <div className={s.input}>
+                  <p>BPM:</p>
+                  <input
+                     type="number"
+                     value={bpm}
+                     onChange={(e) => {
+                        setBpm(+e.target.value);
+                     }}
+                  />
+               </div>
+               <div className={s.input}>
+                  <p>Easing:</p>
+                  <select
+                     value={easing}
+                     onChange={(e) => {
+                        setEasing(e.target.value as EasingTypes);
+                     }}>
+                     {easingTypes.map((type) => (
+                        <option key={type} value={type}>
+                           {type}
+                        </option>
+                     ))}
+                  </select>
+               </div>
             </div>
+            <ul className={s.snsLink}>
+               <li>
+                  <a
+                     href="https://github.com/FunTechInc/use-shader-fx"
+                     target={"_blank"}>
+                     <Image
+                        src="github-logo.svg"
+                        alt="GitHub"
+                        width={28}
+                        height={28}
+                     />
+                  </a>
+               </li>
+               <li>
+                  <a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
+                     <Image src="x-logo.svg" alt="X" width={24} height={24} />
+                  </a>
+               </li>
+            </ul>
          </div>
-         <ul
-            style={{
-               position: "fixed",
-               bottom: "16px",
-               right: "16px",
-               zIndex: 100,
-               display: "flex",
-               alignItems: "center",
-               gap: "16px",
-               mixBlendMode: "difference",
-            }}>
-            <li>
-               <a
-                  href="https://github.com/FunTechInc/use-shader-fx"
-                  target={"_blank"}>
-                  <Image
-                     src="github-logo.svg"
-                     alt="GitHub"
-                     width={28}
-                     height={28}
-                  />
-               </a>
-            </li>
-            <li>
-               <a href="https://twitter.com/tkm_hmng8" target={"_blank"}>
-                  <Image src="x-logo.svg" alt="X" width={24} height={24} />
-               </a>
-            </li>
-         </ul>
-      </div>
+      </>
    );
 }