neodyland/tksm-ndy-mc-proj-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance animations and transitions for announcements and layout components

Browse Source
This commit is contained in:
tuna2134
2026-03-29 05:05:45 +00:00
parent 47876ad3d0
commit 88bfefd09c
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/announcements/[slug]/page.tsx
View File

@@ -43,7 +43,7 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
return (
<article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
<Badge variant="outline" className="mb-3">
お知らせ詳細
</Badge>
@@ -51,14 +51,14 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
<h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
</header>
<section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
<section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
<div
className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc"
dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
/>
</section>
<Link href="/announcements" className="text-sm text-primary underline underline-offset-4">
<Link href="/announcements" className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5">
お知らせ一覧へ戻る
</Link>
</article>

6
app/announcements/page.tsx
View File

@@ -13,7 +13,7 @@ export default async function AnnouncementsPage() {
return (
<div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
<header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
<Badge variant="outline" className="mb-3">
お知らせ
</Badge>
@@ -25,13 +25,13 @@ export default async function AnnouncementsPage() {
<section className="grid gap-4">
{announcements.map((item) => (
<article key={item.slug} className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6">
<article className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6" key={item.slug}>
<header>
<p className="text-xs text-muted-foreground">{item.date}</p>
<h2 className="mt-1 text-xl font-semibold">
<Link
href={`/announcements/${item.slug}`}
className="underline-offset-4 hover:underline"
className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline"
>
{item.title}
</Link>

8
app/layout.tsx
View File

@@ -32,16 +32,16 @@ export default function RootLayout({
className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
>
<body className="min-h-full flex flex-col">
<header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur">
<header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2 motion-safe:duration-500">
<div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-3 sm:px-8">
<Link href="/" className="text-sm font-semibold tracking-tight sm:text-base">
<Link href="/" className="text-sm font-semibold tracking-tight transition-colors duration-200 hover:text-primary sm:text-base">
Takasumi-Neodyマイクラサーバプロジェクト
</Link>
<nav className="flex items-center gap-4 text-sm">
<Link href="/" className="underline-offset-4 hover:underline">
<Link href="/" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
メインページ
</Link>
<Link href="/announcements" className="underline-offset-4 hover:underline">
<Link href="/announcements" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
お知らせ
</Link>
</nav>

14
app/page.tsx
View File

@@ -30,7 +30,7 @@ export default function Home() {
<div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background">
<div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[380px] bg-gradient-to-b from-emerald-200/40 via-sky-200/25 to-transparent blur-3xl dark:from-emerald-500/20 dark:via-sky-500/20" />
<main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:gap-10 sm:px-8 sm:py-14">
<section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-10">
<section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-10">
<Badge variant="outline" className="mb-4 max-w-full text-[11px] sm:text-xs">
Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
</Badge>
@@ -42,7 +42,13 @@ export default function Home() {
統合版のどちらにも対応しています。
</p>
<div className="mt-6">
<Link href="/announcements" className={cn(buttonVariants({ variant: "outline" }))}>
<Link
href="/announcements"
className={cn(
buttonVariants({ variant: "outline" }),
"transition-transform duration-200 hover:-translate-y-0.5"
)}
>
お知らせを見る
</Link>
</div>
@@ -54,7 +60,7 @@ export default function Home() {
return (
<article
key={server.name}
className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6"
className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6"
>
<header>
<div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
@@ -90,7 +96,7 @@ export default function Home() {
})}
</section>
<section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
<section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
<h2 className="text-xl font-semibold">接続手順</h2>
<Separator className="my-4" />
<ol className="space-y-3 text-sm leading-7 sm:text-base">