Update style

src/App.tsx

@@ -2,6 +2,7 @@ import { RecoilRoot } from 'recoil'
 
 import Mutuals from "./components/Mutuals"
 import Card from "./components/Card"
+import Misc from "./components/Misc"
 import VerticalMenu from "./components/VerticalMenu"
 import HorizontalMenu from "./components/HorizontalMenu"
 import LanguageMenu from "./components/LanguageMenu"
@@ -41,7 +42,7 @@ export default function App() {
 
   useEffect(() => {
     handleScroll();
-    window.scrollTo(0, 60)
+    window.scrollTo(0, 10)
 
     window.addEventListener('scroll', handleScroll);
     return () => {
@@ -55,16 +56,17 @@ export default function App() {
         <>
           <Mutuals />
           <div>
-            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `60px` }}>
+            <div className={`sticky h-screen`} style={{ opacity: cardOpacity, marginTop: `-200px` }}>
               <div id="card" className="fixed py-5 -mt-20" style={{ top: `${cardY}px` }}>
                 <Card />
+                <Misc />
               </div>
             </div>
 
             <div className="grid justify-items-center">
               <div id="content" className="absolute dark:text-white sm:min-w-[565px]" style={{ top: `${contentY}px` }}>
                 <div className="grid grid-container md:grid-cols-5 gap-2 min-h-[70vh] w-3xl">
-                  <div className="sticky top-5 hidden md:block md:col-span-1">
+                  <div className="hidden md:block md:col-span-1">
                     <VerticalMenu />
                   </div>
                   <div className="sticky top-14 md:hidden">

src/components/Card.tsx

@@ -6,6 +6,7 @@ import { faXTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-ic
 import { useState, useEffect } from 'react';
 
 import Logo from "./Logo"
+import Misc from "./Misc"
 
 interface NowPlaying {
     album?: string
@@ -32,6 +33,7 @@ export default function Card() {
     }, [])
 
     return (
+        <>
             <div className="container">
                 <div
                     className="absolute opacity-20 w-screen -z-10 blur-sm"
@@ -96,6 +98,6 @@ export default function Card() {
                     </div>
                 </div>
             </div>
+        </>
     )
 }
-  

src/components/Footer.tsx

@@ -1,14 +1,9 @@
-import Weather from "./Weather"
-
 export default function Footer() {
     return (
         <div className="text-center text-gray-500 mb-5">
             <img alt="yude.jp banner" src="./banner_new.png" className="h-12 inline" />
             <img alt="happybusy" src="./busy_banner.webp" className="h-12 inline" />
             <img alt="Page view counter" src="https://moe-counter-cf.yude.workers.dev/yude.jp:home" className="h-20 mx-auto" />
-            <div>
-                <Weather />
-            </div>
             <p className="mt-5">
                 <a href="https://github.com/yudejp/yude.jp">
                     &copy; 2024 yude

src/components/HorizontalMenu.tsx

@@ -3,12 +3,9 @@ import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faPassport } from "@fortawesome/free-solid-svg-icons"
 import { Pages } from "./VerticalMenu"
 
-import { RecoilRoot, atom, useRecoilState } from 'recoil'
+import { RecoilRoot, useRecoilState } from 'recoil'
 
-export const currentPage = atom({
-    key: 'page',
-    default: Pages.Profile,
-})
+import { currentPage } from "./VerticalMenu"
 
 export default function HorizontalMenu() {
     const [page, setPage] = useRecoilState(currentPage);

src/components/Misc.tsx

@@ -0,0 +1,24 @@
+export default function Weather() {
+    return (
+        <div className="flex justify-center items-start w-screen">
+            <div>
+                <div className="inline-block">
+                    <iframe
+                        src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb"
+                        width={166}
+                        height={196}
+                    />
+                </div>
+                <div className="inline-block ml-3">
+                    <img width={94} src="buttons/009button.gif" />
+                    <img width={94} src="buttons/mac.gif" />
+                    <img width={94} src="buttons/right2repair.png" />
+                    <img width={94} src="buttons/vscbutton.gif" />
+                    <img width={94} src="buttons/parental.png" />
+                    <img width={94} src="buttons/www.gif" />
+
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/VerticalMenu.tsx

@@ -27,6 +27,7 @@ export default function VerticalMenu() {
 
     return (
         <RecoilRoot>
+            <div className="sticky top-5">
                 <ul className="text-lg font-medium text-center hover:cursor-pointer">
                     <li
                         className={`w-full px-4 py-2 rounded-lg${page === Pages.Profile ? activeColor : ""}`}
@@ -57,6 +58,7 @@ export default function VerticalMenu() {
                         <p>{t("chat")}</p>
                     </li>
                 </ul>
+            </div>
         </RecoilRoot>
     )
 }

src/components/Weather.tsx

@@ -1,7 +0,0 @@
-export default function Weather() {
-    return (
-        <>
-            <div className="inline-block"><iframe src="https://www.tenki-yoho.com/blogparts/img.php?all,acrweb" width={200} height={200}><a href="https://www.tenki-yoho.com/">天気予報</a></iframe></div>
-        </>
-    )
-}