diff --git a/src/app/globals.css b/src/app/globals.css index fd81e88..8f96d6c 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,7 +4,7 @@ :root { --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; + --background-start-rgb: 225, 225, 255; --background-end-rgb: 255, 255, 255; } @@ -25,3 +25,22 @@ body { ) rgb(var(--background-start-rgb)); } + +@keyframes topDrop { + from { + opacity: 0; + transform: translateY(-100px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +header { + animation-name: topDrop; + animation-duration: 1s; + animation-fill-mode: forwards; + background-color: rgba(255, 255, 255, 0.35); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 40e027f..a5940b3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,22 +1,22 @@ -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' -import './globals.css' +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} + title: "ぷよすきーの墓標", + description: "一代目ぷよすきーは滅んでしまったようだ", +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - + {children} - ) + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index b973266..7eb6aa6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,113 +1,57 @@ -import Image from 'next/image' - +import Image from "next/image"; export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
+ <> +
+
+ Logo +
+
+
+
+ ぷよすきーは滅んでしまったようです。
ここにあるのは、
{" "} + ぷよすきーの墓標です。 + grave +
+ +
- By{' '} - Vercel Logo +

+ 新しいぷよすきーに進む{" "} + + -> + +

+

+ 売国奴に国を滅ばされてしまった少年。 +
+ 彼は諦められずにいた。 +
+ 彼は再建国をした。 +
+ それがここ"ぷよすきー"なのだ。 +

-
- -
- Next.js Logo -
- -
- -

- Docs{' '} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{' '} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{' '} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{' '} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ) + + + ); }