yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-10 22:18:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update NowPlaying style

Browse Source
This commit is contained in:
Sumire Isshiki 2024-01-23 09:21:15 +09:00
parent 7f1ef366e2
commit 0fda308605
2 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -61,13 +61,14 @@ export default function App() {
<div id="mutuals"> <div id="mutuals">
<Mutuals /> <Mutuals />
</div> </div>
<div className="flex justify-center"> <div>
<div className={`sticky h-screen absolute`} style={{ opacity: cardOpacity, marginTop: `${document.getElementById("mutuals")?.offsetHeight}px` }}> <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 /> <Card />
</div> </div>
</div> </div>
<div className="flex justify-center">
<div id="content" className="absolute text-white max-w-6xl" style={{ top: `${contentY}px`}}> <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"> <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-5 w-full">
<Profile /> <Profile />
@ -83,6 +84,7 @@ export default function App() {
</div> </div>
</div> </div>
</div> </div>
</div>
</> </>
) )
} }

12
src/components/Card.tsx
View File

@ -32,23 +32,21 @@ export default function Card() {
}) })
return ( return (
<div> <div className="container">
<div <div
className="absolute opacity-20 -z-10 blur-sm" className="absolute opacity-20 w-screen -z-10 blur-sm"
style={np && np.isPlaying ? { style={np && np.isPlaying ? {
height: `89%`, height: `89%`,
width: `170%`,
left: `-30%`,
backgroundImage: `url(${np.album_art})`, backgroundImage: `url(${np.album_art})`,
backgroundColor: `rgba(255, 255, 255, 0.2)`, backgroundColor: `rgba(255, 255, 255, 0.2)`,
backgroundBlendMode: `lighten` backgroundBlendMode: `lighten`
} : {}} } : {}}
></div> ></div>
<div className="flex justify-center items-center"> <div className="flex justify-center w-screen items-center">
<div className="mx-2"> <div className="mx-2 inline-block">
<img className="rounded-full" width={100} height={100} src="./avatar.webp" /> <img className="rounded-full" width={100} height={100} src="./avatar.webp" />
</div> </div>
<div className="mx-2 text-left h-full"> <div className="mx-2 text-left h-full inline-block">
<Logo /> <Logo />
<p className="text-white mt-2 -mb-1"> <p className="text-white mt-2 -mb-1">
{np && np.isPlaying && {np && np.isPlaying &&