From 0fda3086050ce9ed4ee751c412768a51bd836786 Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Tue, 23 Jan 2024 09:21:15 +0900
Subject: [PATCH] Update NowPlaying style

---
 src/App.tsx             |  6 ++-
 src/components/Card.tsx | 94 ++++++++++++++++++++---------------------
 2 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5bb0035..6b01cc9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -61,13 +61,14 @@ export default function App() {
     <div id="mutuals">
       <Mutuals />
     </div>
-    <div className="flex justify-center">
+    <div>
       <div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}>
-        <div id="card" className="fixed bg-neutral-900 py-5 -ml-40 -mt-20" style={{ top: `${cardY}px` }}>
+        <div id="card" className="fixed bg-neutral-900 py-5 -mt-20" style={{ top: `${cardY}px` }}>
           <Card />
         </div>
       </div>
         
+      <div className="flex justify-center">
       <div id="content" className="absolute text-white max-w-6xl" style={{ top: `${contentY}px`}}>
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5 w-full">
           <Profile />
@@ -82,6 +83,7 @@ export default function App() {
           <Footer />
         </div> 
       </div>
+      </div>
     </div>
     </>
   )
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 1e60f4d..8f05041 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -32,66 +32,64 @@ export default function Card() {
     })
 
     return (
-        <div>
+        <div className="container">
             <div
-                className="absolute opacity-20 -z-10 blur-sm"
+                className="absolute opacity-20 w-screen -z-10 blur-sm"
                 style={np && np.isPlaying ? {
                     height: `89%`,
-                    width: `170%`,
-                    left: `-30%`,
                     backgroundImage: `url(${np.album_art})`,
                     backgroundColor: `rgba(255, 255, 255, 0.2)`,
                     backgroundBlendMode: `lighten`
                 } : {}}
             ></div>
-        <div className="flex justify-center items-center">
-            <div className="mx-2">
-                <img className="rounded-full" width={100} height={100} src="./avatar.webp" />
-            </div>
-            <div className="mx-2 text-left h-full">
-                <Logo />
-                <p className="text-white mt-2 -mb-1">
-                    {np && np.isPlaying && 
-                        <div className="flex flex-row">
-                            <div className="w-5 text-gray-300">
-                                <FontAwesomeIcon icon={faMusic} />
+            <div className="flex justify-center w-screen items-center">
+                <div className="mx-2 inline-block">
+                    <img className="rounded-full" width={100} height={100} src="./avatar.webp" />
+                </div>
+                <div className="mx-2 text-left h-full inline-block">
+                    <Logo />
+                    <p className="text-white mt-2 -mb-1">
+                        {np && np.isPlaying && 
+                            <div className="flex flex-row">
+                                <div className="w-5 text-gray-300">
+                                    <FontAwesomeIcon icon={faMusic} />
+                                </div>
+                                <div className="text-left max-w-xs">
+                                    <span className="text-gray-300">{np.artist}</span>
+                                    <p className="text-lg">{np.title}</p>
+                                </div>
                             </div>
-                            <div className="text-left max-w-xs">
-                                <span className="text-gray-300">{np.artist}</span>
-                                <p className="text-lg">{np.title}</p>
-                            </div>
-                        </div>
-                    }
-                </p>
-                <div className="text-white mt-2">
-                    <p className="font-mono left-0.5 relative">
-                        <FontAwesomeIcon icon={faEnvelope} className="text-gray-300" />{" "}
-                        i@yude.jp
-                    </p>
-                    <p className="font-mono left-0.5 relative">
-                        <FontAwesomeIcon icon={faPhone} className="text-gray-300" />{" "}
-                        +81 70-8909-1949
-                    </p>
-                    <p className="font-mono left-0.5 relative">
-                        <a href="https://x.com/yude_jp">
-                            <FontAwesomeIcon icon={faXTwitter} className="text-gray-300" />{" "}
-                            @yude_jp
-                        </a>
-                    </p>
-                    <p className="font-mono left-0.5 relative">
-                        <FontAwesomeIcon icon={faDiscord} className="text-gray-300" />{" "}
-                        <span className="-ml-1">yude</span>
-                    </p>
-                    <p className="font-mono left-0.5 relative">
-                        <a href="https://github.com/yude">
-                            <FontAwesomeIcon icon={faGithub} className="text-gray-300" />{" "}
-                            yude
-                        </a>
+                        }
                     </p>
+                    <div className="text-white mt-2">
+                        <p className="font-mono left-0.5 relative">
+                            <FontAwesomeIcon icon={faEnvelope} className="text-gray-300" />{" "}
+                            i@yude.jp
+                        </p>
+                        <p className="font-mono left-0.5 relative">
+                            <FontAwesomeIcon icon={faPhone} className="text-gray-300" />{" "}
+                            +81 70-8909-1949
+                        </p>
+                        <p className="font-mono left-0.5 relative">
+                            <a href="https://x.com/yude_jp">
+                                <FontAwesomeIcon icon={faXTwitter} className="text-gray-300" />{" "}
+                                @yude_jp
+                            </a>
+                        </p>
+                        <p className="font-mono left-0.5 relative">
+                            <FontAwesomeIcon icon={faDiscord} className="text-gray-300" />{" "}
+                            <span className="-ml-1">yude</span>
+                        </p>
+                        <p className="font-mono left-0.5 relative">
+                            <a href="https://github.com/yude">
+                                <FontAwesomeIcon icon={faGithub} className="text-gray-300" />{" "}
+                                yude
+                            </a>
+                        </p>
+                    </div>
+                </div>
                 </div>
             </div>
-        </div>
-        </div>
     )
   }
   
\ No newline at end of file