squid/blog
1
2
Fork 0
Code Issues 11 Pull Requests Actions Projects 1 Releases 2 Wiki Activity

BLOG-5 Apply the first view #15

Merged
squid merged 6 commits from BLOG-5_apply_the_first_view into main 2025-01-18 03:41:56 +08:00
Conversation 0 Commits 6 Files Changed 14 +38 -3
3 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d76f54b2b1 - Show all commits

5
frontend/src/app/globals.css
View File

@ -3,5 +3,8 @@
@tailwind utilities;
body {
@apply bg-white text-gray-600;
@apply bg-white text-base font-normal text-gray-600;
--tool-bar-height: 4rem;
--content-height: calc(100vh - var(--tool-bar-height));
}

34
frontend/src/app/page.tsx
View File

@ -1,5 +1,37 @@
export default function HomePage() {
return (
<div></div>
<div className="flex min-h-[--content-height] flex-col justify-center gap-y-2.5 px-4">
<h2 className="text-3xl font-bold text-gray-800">Hello 大家好！</h2>
<h1 className="flex flex-row items-center gap-x-2 text-4xl font-bold text-gray-800">
<span>我是</span>
<div className="rounded-lg bg-blue-600 px-1.5 py-1">
<span className="text-white">Squid</span>
</div>
<span>魷魚</span>
</h1>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-60% to-white" />
<div className="flex flex-row items-center gap-x-2 overflow-hidden">
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
<Hashtag tag="React" />
</div>
</div>
</div>
);
}
function Hashtag(props: { tag: string }) {
return <span className="text-nowrap text-gray-400"># {props.tag}</span>;
}

2
frontend/src/ui/layout/navbar.tsx
View File

@ -5,7 +5,7 @@ type Props = {};
export default function Navbar({}: Props) {
return (
<div className="border-b border-gray-300">
<div className="mx-auto flex h-16 max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
<div className="mx-auto flex h-[--tool-bar-height] max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
<a className="text-2xl font-black text-gray-800" href="/">
魚之魷魂
</a>