mirror of
https://github.com/yudejp/yude.jp.git
synced 2025-06-28 05:58:39 +00:00
Update style
This commit is contained in:
parent
e7eb620608
commit
113b6a8375
BIN
public/buttons/009button.gif
Normal file
BIN
public/buttons/009button.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/buttons/mac.gif
Normal file
BIN
public/buttons/mac.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
public/buttons/parental.png
Normal file
BIN
public/buttons/parental.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 534 B |
BIN
public/buttons/right2repair.png
Normal file
BIN
public/buttons/right2repair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
public/buttons/vscbutton.gif
Normal file
BIN
public/buttons/vscbutton.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/buttons/www.gif
Normal file
BIN
public/buttons/www.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@ -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">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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">
|
||||
© 2024 yude
|
||||
|
||||
@ -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);
|
||||
|
||||
24
src/components/Misc.tsx
Normal file
24
src/components/Misc.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -27,36 +27,38 @@ export default function VerticalMenu() {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<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 : ""}`}
|
||||
onClick={() => { setPage(Pages.Profile) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
|
||||
<p>{t("profile")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Identifier) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
|
||||
<p>{t("identifier")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Services) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
|
||||
<p>{t("services")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Chat) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
|
||||
<p>{t("chat")}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<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 : ""}`}
|
||||
onClick={() => { setPage(Pages.Profile) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUser} className="w-10 h-10" />{" "}
|
||||
<p>{t("profile")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Identifier ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Identifier) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPassport} className="w-10 h-10" />{" "}
|
||||
<p>{t("identifier")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Services ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Services) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faStar} className="w-10 h-10" />{" "}
|
||||
<p>{t("services")}</p>
|
||||
</li>
|
||||
<li
|
||||
className={`w-full px-4 py-2 rounded-lg${page === Pages.Chat ? activeColor : ""}`}
|
||||
onClick={() => { setPage(Pages.Chat) }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faComments} className="w-10 h-10" />{" "}
|
||||
<p>{t("chat")}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</RecoilRoot>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user