Feat: 更新 UI 细节
页眉样式修改，增加社交媒体按钮 调整卡片内间距和整体宽度 修复手机版文章卡片插图展示异常
This commit is contained in:
parent
13a09d6995
commit
7d0ac45e8a
|
|
@ -3,7 +3,7 @@ const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env;
|
|||
function Footer() {
|
||||
return (
|
||||
<footer className="pb-12">
|
||||
<div className="grid gap-2 sm:grid-cols-2 px-2 max-w-3xl mx-auto text-sm text-center sm:text-left opacity-60">
|
||||
<div className="grid gap-2 sm:grid-cols-2 px-2 max-w-4xl mx-auto text-sm text-center sm:text-left opacity-60">
|
||||
<p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
|
||||
{APP_FOOTER_EXTRA && <p className="sm:text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { NavLink } from "react-router";
|
||||
import { Feed, GitHub, QQ } from "../ui/icons";
|
||||
import { clsn } from "~/utils";
|
||||
|
||||
const navItems = [
|
||||
{ name: "首页", to: "/" },
|
||||
|
|
@ -7,23 +9,40 @@ const navItems = [
|
|||
{ name: "关于我", to: "/about" },
|
||||
];
|
||||
|
||||
const inheritCls = "inline-block py-2 px-5";
|
||||
const activeCls = "inline-block py-2 px-5 bg-orange-200 text-pink-400 rounded-xl";
|
||||
const inheritCls = "hover:text-pink-400";
|
||||
const activeCls = "bg-pink-300 text-white rounded-xl hover:border-pink-400 border-b-pink-400";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 bg-pink-400 text-white z-10">
|
||||
<nav className="py-3 px-2">
|
||||
<header className="fixed top-0 left-0 right-0 bg-orange-50 z-10 flex justify-between items-center px-2 md:px-6 py-4">
|
||||
<nav>
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
to={item.to}
|
||||
className={({ isActive }) => isActive ? activeCls : inheritCls}
|
||||
className={({ isActive }) =>
|
||||
clsn(
|
||||
"inline-block font-semibold py-2 px-4",
|
||||
"border-4 border-transparent transition-colors",
|
||||
isActive ? activeCls : inheritCls
|
||||
)
|
||||
}
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
<nav className="flex items-center gap-2 [&>a]:hover:text-pink-400 [&>a]:transition-colors">
|
||||
<a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
|
||||
<QQ className="w-5" />
|
||||
</a>
|
||||
<a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
|
||||
<GitHub className="w-5" />
|
||||
</a>
|
||||
<a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
|
||||
<Feed className="w-5" />
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,3 +45,7 @@ export const BiliBili = (props: IconProps) => (
|
|||
export const Steam = (props: IconProps) => (
|
||||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>
|
||||
);
|
||||
|
||||
export const Feed = (props: IconProps) => (
|
||||
<svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3C12.9411 3 21 11.0589 21 21H18C18 12.7157 11.2843 6 3 6V3ZM3 10C9.07513 10 14 14.9249 14 21H11C11 16.5817 7.41828 13 3 13V10ZM3 17C5.20914 17 7 18.7909 7 21H3V17Z"></path></svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<main className="px-2 py-24 max-w-4xl mx-auto">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-2">
|
||||
{message}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default function Gallery({ loaderData }: Route.ComponentProps) {
|
|||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={() => {}}
|
||||
className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group"
|
||||
className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group cursor-pointer"
|
||||
onClick={() => open(index)}
|
||||
>
|
||||
<img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
QQ,
|
||||
Steam,
|
||||
TwitterX,
|
||||
Feed,
|
||||
} from "~/components/ui/icons";
|
||||
import { siteTitle } from "~/utils";
|
||||
|
||||
|
|
@ -63,6 +64,9 @@ export default function Index({ loaderData }: Route.ComponentProps) {
|
|||
<a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
|
||||
<Steam className="w-6" />
|
||||
</a>
|
||||
<a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
|
||||
<Feed className="w-6" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<ArrowDown className="absolute left-0 right-0 bottom-20 mx-auto w-10 h-10 opacity-60 animate-bounce" />
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<main className="px-2 py-24 max-w-4xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1
|
||||
className="text-center text-5xl/tight md:text-7xl/tight mb-4"
|
||||
|
|
@ -63,7 +63,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
|
|||
</h1>
|
||||
<p className="text-center opacity-60">{note.data.date}</p>
|
||||
</section>
|
||||
<section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-8">
|
||||
<section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-16">
|
||||
<Article html={note.data.content_html} />
|
||||
</section>
|
||||
<section className="flex gap-16 items-center justify-center text-base md:text-lg">
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function Note({ loaderData }: Route.ComponentProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<main className="px-2 py-24 max-w-4xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight">日记</h1>
|
||||
</section>
|
||||
|
|
@ -67,13 +67,13 @@ export default function Note({ loaderData }: Route.ComponentProps) {
|
|||
viewTransition
|
||||
>
|
||||
{item.starred && (
|
||||
<StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 -rotate-[23deg]" />
|
||||
<StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 rotate-[-23deg]" />
|
||||
)}
|
||||
<h2 className={clsn(cover && "md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
|
||||
<h2 className={clsn(cover && "mt-48 sm:mt-0 md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
|
||||
{item.title}
|
||||
</h2>
|
||||
<p className={clsn(cover && "sm:mr-40", "mb-8 relative")}>{item.except}</p>
|
||||
<div className={clsn(cover && "mb-40 sm:mb-0 sm:mr-40", "flex items-end justify-between text-sm")}>
|
||||
<div className={clsn(cover && "sm:mr-40", "flex items-end justify-between text-sm")}>
|
||||
<p className="opacity-60">{item.date}</p>
|
||||
<span className="flex items-center opacity-60">
|
||||
<ThumbUpFill className="h-4 w-4 mr-1" />
|
||||
|
|
@ -82,8 +82,8 @@ export default function Note({ loaderData }: Route.ComponentProps) {
|
|||
</div>
|
||||
{cover && (
|
||||
<div
|
||||
className="absolute h-40 sm:h-auto sm:w-40 left-0 sm:top-0 sm:left-[unset] right-0 bottom-0 transition-opacity bg-cover opacity-30 group-hover:opacity-80"
|
||||
style={{ backgroundImage: `url("${cover}")`, clipPath: "polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%)" }}
|
||||
className="absolute h-48 sm:h-auto sm:w-40 left-0 top-0 sm:left-[unset] right-0 sm:bottom-0 transition-opacity bg-cover opacity-80 sm:opacity-30 group-hover:opacity-80 sm:[clip-path:polygon(25%_0%,100%_0%,100%_100%,0%_100%)]"
|
||||
style={{ backgroundImage: `url("${cover}")` }}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -28,12 +28,12 @@ export default function DynamicPage({ loaderData }: Route.ComponentProps) {
|
|||
const page = loaderData;
|
||||
|
||||
return (
|
||||
<main className="px-2 py-24 max-w-3xl mx-auto">
|
||||
<main className="px-2 py-24 max-w-4xl mx-auto">
|
||||
<section className="mb-12">
|
||||
<h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
|
||||
<p className="text-center opacity-60">{page.data.desc}</p>
|
||||
</section>
|
||||
<section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
|
||||
<section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200">
|
||||
<Article html={page.data.content} />
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue