From b09fd41baa02787a55b553577305d12a58a35038 Mon Sep 17 00:00:00 2001
From: takuma-hmng8 <t.hashimoto@funtech-fpro.com>
Date: Wed, 28 Feb 2024 16:33:52 +0900
Subject: [PATCH] =?UTF-8?q?css=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/_home/index.module.scss             |  32 +++++--
 app/_home/index.tsx                     | 118 +++++++++++-------------
 src/assets/css/index.module.min.css     |   2 +-
 src/assets/css/index.module.min.css.map |   2 +-
 4 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/app/_home/index.module.scss b/app/_home/index.module.scss
index 544090d4..75cdfd30 100644
--- a/app/_home/index.module.scss
+++ b/app/_home/index.module.scss
@@ -1,3 +1,11 @@
+.canvas {
+   width: 100%;
+   height: 100svh;
+   position: fixed;
+   top: 0;
+   left: 0;
+}
+
 .wrapper {
    width: 100%;
    height: 100svh;
@@ -5,14 +13,9 @@
    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;
+}
diff --git a/app/_home/index.tsx b/app/_home/index.tsx
index 7d02cd4c..d60e4ebe 100644
--- a/app/_home/index.tsx
+++ b/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>
+      </>
    );
 }
diff --git a/src/assets/css/index.module.min.css b/src/assets/css/index.module.min.css
index ca950d4b..2a2eb8e5 100644
--- a/src/assets/css/index.module.min.css
+++ b/src/assets/css/index.module.min.css
@@ -1,3 +1,3 @@
-.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}.content{color:#fff;display:flex;flex-direction:column;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){.title{font-size:9vw}}.install{font-size:16px;pointer-events:auto;cursor:pointer;display:flex;align-items:baseline;gap:8px}.install.copied{pointer-events:none;opacity:.24}.link{margin-top:24px;font-size:18px}.link a{pointer-events:auto;text-decoration:underline;margin-left:8px}.input{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:16px;margin-top:16px}.input p{width:64px}.input input,.input select{border-bottom:1px solid #fff;pointer-events:auto;cursor:pointer;width:160px;text-align:center}@media(max-width: 560px){.input input,.input select{text-align:left;padding:0 16px;width:120px}}
+.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;pointer-events:none;overflow:hidden;position:relative}.content{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;mix-blend-mode:difference}.title{font-size:40px;font-weight:500}@media(max-width: 560px){.title{font-size:9vw}}.install{font-size:16px;pointer-events:auto;cursor:pointer;display:flex;align-items:baseline;gap:8px}.install.copied{pointer-events:none;opacity:.24}.link{margin-top:24px;font-size:18px}.link a{pointer-events:auto;text-decoration:underline;margin-left:8px}.input{display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:16px;margin-top:16px}.input p{width:64px}.input input,.input select{border-bottom:1px solid #fff;pointer-events:auto;cursor:pointer;width:160px;text-align:center}@media(max-width: 560px){.input input,.input select{text-align:left;padding:0 16px;width:120px}}.snsLink{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:16px;mix-blend-mode:difference;pointer-events:auto}
 
 /*# sourceMappingURL=index.module.min.css.map */
\ No newline at end of file
diff --git a/src/assets/css/index.module.min.css.map b/src/assets/css/index.module.min.css.map
index 29643507..0cf91e29 100644
--- a/src/assets/css/index.module.min.css.map
+++ b/src/assets/css/index.module.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../../app/_home/index.module.scss"],"names":[],"mappings":"AAAA,SACG,UAAA,CACA,aAAA,CACA,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CAGH,QACG,cAAA,CACA,UAAA,CACA,WAAA,CACA,KAAA,CACA,MAAA,CAGH,SACG,UAAA,CACA,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,yBAAA,CACA,mBAAA,CAGH,OACG,cAAA,CACA,eAAA,CACA,mBAAA,CACA,yBAJH,OAKM,aAAA,CAAA,CAIN,SACG,cAAA,CACA,mBAAA,CACA,cAAA,CACA,YAAA,CACA,oBAAA,CACA,OAAA,CACA,gBACG,mBAAA,CACA,WAAA,CAIN,MACG,eAAA,CACA,cAAA,CACA,QACG,mBAAA,CACA,yBAAA,CACA,eAAA,CAIN,OACG,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,eAAA,CACA,SACG,UAAA,CAEH,2BAEG,4BAAA,CACA,mBAAA,CACA,cAAA,CACA,WAAA,CACA,iBAAA,CACA,yBAPH,2BAQM,eAAA,CACA,cAAA,CACA,WAAA,CAAA","file":"index.module.min.css"}
\ No newline at end of file
+{"version":3,"sources":["../../../app/_home/index.module.scss"],"names":[],"mappings":"AAAA,QACG,UAAA,CACA,aAAA,CACA,cAAA,CACA,KAAA,CACA,MAAA,CAGH,SACG,UAAA,CACA,aAAA,CACA,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,mBAAA,CACA,eAAA,CACA,iBAAA,CAGH,SACG,UAAA,CACA,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,yBAAA,CAGH,OACG,cAAA,CACA,eAAA,CACA,yBAHH,OAIM,aAAA,CAAA,CAIN,SACG,cAAA,CACA,mBAAA,CACA,cAAA,CACA,YAAA,CACA,oBAAA,CACA,OAAA,CACA,gBACG,mBAAA,CACA,WAAA,CAIN,MACG,eAAA,CACA,cAAA,CACA,QACG,mBAAA,CACA,yBAAA,CACA,eAAA,CAIN,OACG,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,eAAA,CACA,SACG,UAAA,CAEH,2BAEG,4BAAA,CACA,mBAAA,CACA,cAAA,CACA,WAAA,CACA,iBAAA,CACA,yBAPH,2BAQM,eAAA,CACA,cAAA,CACA,WAAA,CAAA,CAKT,SACG,iBAAA,CACA,WAAA,CACA,UAAA,CACA,YAAA,CACA,kBAAA,CACA,QAAA,CACA,yBAAA,CACA,mBAAA","file":"index.module.min.css"}
\ No newline at end of file